fix: Filter values are not updating when dependencies are set (#23566)

This commit is contained in:
Michael S. Molina 2023-04-03 17:20:00 -03:00 committed by GitHub
parent cdc7af11bf
commit 3bc496040d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 21 deletions

View File

@ -83,6 +83,7 @@ const Select = forwardRef(
{ {
allowClear, allowClear,
allowNewOptions = false, allowNewOptions = false,
allowSelectAll = true,
ariaLabel, ariaLabel,
filterOption = true, filterOption = true,
header = null, header = null,
@ -195,10 +196,17 @@ const Select = forwardRef(
const selectAllEnabled = useMemo( const selectAllEnabled = useMemo(
() => () =>
!isSingleMode && !isSingleMode &&
allowSelectAll &&
selectOptions.length > 0 && selectOptions.length > 0 &&
enabledOptions.length > 1 && enabledOptions.length > 1 &&
!inputValue, !inputValue,
[isSingleMode, selectOptions.length, enabledOptions.length, inputValue], [
isSingleMode,
allowSelectAll,
selectOptions.length,
enabledOptions.length,
inputValue,
],
); );
const selectAllMode = useMemo( const selectAllMode = useMemo(
@ -360,9 +368,8 @@ const Select = forwardRef(
useEffect(() => { useEffect(() => {
// if all values are selected, add select all to value // if all values are selected, add select all to value
if ( if (
!isSingleMode && selectAllEnabled &&
ensureIsArray(value).length === selectAllEligible.length && ensureIsArray(value).length === selectAllEligible.length
selectOptions.length > 0
) { ) {
setSelectValue( setSelectValue(
labelInValue labelInValue
@ -373,13 +380,7 @@ const Select = forwardRef(
] as AntdLabeledValue[]), ] as AntdLabeledValue[]),
); );
} }
}, [ }, [labelInValue, selectAllEligible.length, selectAllEnabled, value]);
value,
isSingleMode,
labelInValue,
selectAllEligible.length,
selectOptions.length,
]);
useEffect(() => { useEffect(() => {
const checkSelectAll = ensureIsArray(selectValue).some( const checkSelectAll = ensureIsArray(selectValue).some(

View File

@ -155,6 +155,11 @@ export interface BaseSelectProps extends AntdExposedProps {
} }
export interface SelectProps extends BaseSelectProps { export interface SelectProps extends BaseSelectProps {
/**
* It enables the user to select all options.
* True by default.
* */
allowSelectAll?: boolean;
/** /**
* It defines the options of the Select. * It defines the options of the Select.
* The options can be static, an array of options. * The options can be static, an array of options.

View File

@ -363,7 +363,7 @@ const FiltersConfigForm = (
const formFilter = formValues || undoFormValues || defaultFormFilter; const formFilter = formValues || undoFormValues || defaultFormFilter;
const dependencies: string[] = const dependencies: string[] =
formFilter?.dependencies || filterToEdit?.cascadeParentIds; formFilter?.dependencies || filterToEdit?.cascadeParentIds || [];
const nativeFilterItems = getChartMetadataRegistry().items; const nativeFilterItems = getChartMetadataRegistry().items;
const nativeFilterVizTypes = Object.entries(nativeFilterItems) const nativeFilterVizTypes = Object.entries(nativeFilterItems)

View File

@ -121,7 +121,6 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
}), }),
[], [],
); );
const [initialData, setInitialData] = useState<typeof data>([]);
const updateDataMask = useCallback( const updateDataMask = useCallback(
(values: SelectValue) => { (values: SelectValue) => {
@ -238,7 +237,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
}, [filterState.validateMessage, filterState.validateStatus]); }, [filterState.validateMessage, filterState.validateStatus]);
const options = useMemo(() => { const options = useMemo(() => {
const allOptions = [...data, ...initialData]; const allOptions = [...data];
const uniqueOptions = uniqWith(allOptions, isEqual); const uniqueOptions = uniqWith(allOptions, isEqual);
const selectOptions: { label: string; value: DataRecordValue }[] = []; const selectOptions: { label: string; value: DataRecordValue }[] = [];
uniqueOptions.forEach(row => { uniqueOptions.forEach(row => {
@ -249,7 +248,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
}); });
}); });
return selectOptions; return selectOptions;
}, [data, initialData, datatype, groupby, labelFormatter]); }, [data, datatype, groupby, labelFormatter]);
const sortComparator = useCallback( const sortComparator = useCallback(
(a: AntdLabeledValue, b: AntdLabeledValue) => { (a: AntdLabeledValue, b: AntdLabeledValue) => {
@ -296,12 +295,6 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
setDataMask(dataMask); setDataMask(dataMask);
}, [JSON.stringify(dataMask)]); }, [JSON.stringify(dataMask)]);
useEffect(() => {
if (data.length && !initialData.length) {
setInitialData(data);
}
}, [data, initialData.length]);
return ( return (
<FilterPluginStyle height={height} width={width}> <FilterPluginStyle height={height} width={width}>
<StyledFormItem <StyledFormItem
@ -311,6 +304,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
<Select <Select
allowClear allowClear
allowNewOptions allowNewOptions
allowSelectAll={!searchAllOptions}
// @ts-ignore // @ts-ignore
value={filterState.value || []} value={filterState.value || []}
disabled={isDisabled} disabled={isDisabled}