diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspector.tsx b/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspector.tsx index 9b2d81c2..a2cc7fef 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspector.tsx +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspector.tsx @@ -156,7 +156,6 @@ class RtkQueryInspector> extends Component< data-wide-layout={+this.state.isWideLayout} > diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryForm.tsx b/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryForm.tsx index e59efad7..2065dba8 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryForm.tsx +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryForm.tsx @@ -3,12 +3,11 @@ import { QueryFormValues } from '../types'; import { StyleUtilsContext } from '../styles/createStylingFromTheme'; import { Select } from 'devui'; import { SelectOption } from '../types'; -import { AnyAction } from 'redux'; import debounce from 'lodash.debounce'; import { sortQueryOptions, QueryComparators } from '../utils/comparators'; +import { QueryFilters, filterQueryOptions } from '../utils/filters'; export interface QueryFormProps { - dispatch: (action: AnyAction) => void; values: QueryFormValues; onFormValuesChange: (values: Partial) => void; } @@ -21,8 +20,8 @@ const ascId = 'rtk-query-rb-asc'; const descId = 'rtk-query-rb-desc'; const selectId = 'rtk-query-comp-select'; const searchId = 'rtk-query-search-query'; - -const searchPlaceholder = 'filter query...'; +const filterSelectId = 'rtk-query-search-query-select'; +const searchPlaceholder = 'filter query by...'; export class QueryForm extends React.PureComponent< QueryFormProps, @@ -57,7 +56,7 @@ export class QueryForm extends React.PureComponent< } }; - handleSelectComparator = ( + handleSelectComparatorChange = ( option: SelectOption | undefined | null ): void => { if (typeof option?.value === 'string') { @@ -65,6 +64,14 @@ export class QueryForm extends React.PureComponent< } }; + handleSelectFilterChange = ( + option: SelectOption | undefined | null + ): void => { + if (typeof option?.value === 'string') { + this.props.onFormValuesChange({ queryFilter: option.value }); + } + }; + restoreCaretPosition = (start: number | null, end: number | null): void => { window.requestAnimationFrame(() => { if (this.inputSearchRef.current) { @@ -86,9 +93,21 @@ export class QueryForm extends React.PureComponent< this.invalidateSearchValueFromProps(); }; + handleClearSearchClick = (evt: MouseEvent): void => { + evt.preventDefault(); + + if (this.state.searchValue) { + this.setState({ searchValue: '' }); + } + }; + render(): ReactNode { const { - values: { isAscendingQueryComparatorOrder: isAsc, queryComparator }, + values: { + isAscendingQueryComparatorOrder: isAsc, + queryComparator, + queryFilter, + }, } = this.props; const isDesc = !isAsc; @@ -106,13 +125,36 @@ export class QueryForm extends React.PureComponent< - + +