feat(filters): add onFilterUpdate handler to list view filters (#21443)

This commit is contained in:
Moriah Kreeger 2022-09-19 11:42:34 -07:00 committed by GitHub
parent 94ed4279c7
commit f27e20e30d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 7 deletions

View File

@ -32,7 +32,7 @@ import { FilterContainer, BaseFilter, FilterHandler } from './Base';
interface SelectFilterProps extends BaseFilter {
fetchSelects?: Filter['fetchSelects'];
name?: string;
onSelect: (selected: SelectOption | undefined) => void;
onSelect: (selected: SelectOption | undefined, isClear?: boolean) => void;
paginate?: boolean;
selects: Filter['selects'];
}
@ -58,7 +58,7 @@ function SelectFilter(
};
const onClear = () => {
onSelect(undefined);
onSelect(undefined, true);
setSelectedOption(undefined);
};

View File

@ -62,7 +62,18 @@ function UIFilters(
return (
<>
{filters.map(
({ Header, fetchSelects, id, input, paginate, selects }, index) => {
(
{
Header,
fetchSelects,
id,
input,
paginate,
selects,
onFilterUpdate,
},
index,
) => {
const initialValue =
internalFilters[index] && internalFilters[index].value;
if (input === 'select') {
@ -74,9 +85,19 @@ function UIFilters(
initialValue={initialValue}
key={id}
name={id}
onSelect={(option: SelectOption | undefined) =>
updateFilterValue(index, option)
}
onSelect={(
option: SelectOption | undefined,
isClear?: boolean,
) => {
if (onFilterUpdate) {
// Filter change triggers both onChange AND onClear, only want to track onChange
if (!isClear) {
onFilterUpdate(option);
}
}
updateFilterValue(index, option);
}}
paginate={paginate}
selects={selects}
/>
@ -90,7 +111,13 @@ function UIFilters(
initialValue={initialValue}
key={id}
name={id}
onSubmit={(value: string) => updateFilterValue(index, value)}
onSubmit={(value: string) => {
if (onFilterUpdate) {
onFilterUpdate(value);
}
updateFilterValue(index, value);
}}
/>
);
}

View File

@ -52,6 +52,7 @@ export interface Filter {
unfilteredLabel?: string;
selects?: SelectOption[];
onFilterOpen?: () => void;
onFilterUpdate?: (value?: any) => void;
fetchSelects?: (
filterValue: string,
page: number,