mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
feat(native-filters): sort selected values on blur (#14842)
* feat(native-filters): sort selected values on blur * remove new icons
This commit is contained in:
parent
9f54231af1
commit
2b4e0ec9e0
@ -19,6 +19,7 @@
|
||||
import {
|
||||
AppSection,
|
||||
DataMask,
|
||||
DataRecord,
|
||||
ensureIsArray,
|
||||
ExtraFormData,
|
||||
GenericDataType,
|
||||
@ -27,7 +28,13 @@ import {
|
||||
t,
|
||||
tn,
|
||||
} from '@superset-ui/core';
|
||||
import React, { useCallback, useEffect, useReducer, useState } from 'react';
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useReducer,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { Select } from 'src/common/components';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { SLOW_DEBOUNCE } from 'src/constants';
|
||||
@ -101,6 +108,23 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
|
||||
} = formData;
|
||||
const groupby = ensureIsArray<string>(formData.groupby);
|
||||
const [col] = groupby;
|
||||
const [selectedValues, setSelectedValues] = useState<SelectValue>(
|
||||
filterState.value,
|
||||
);
|
||||
const sortedData = useMemo(() => {
|
||||
const firstData: DataRecord[] = [];
|
||||
const restData: DataRecord[] = [];
|
||||
data.forEach(row => {
|
||||
// @ts-ignore
|
||||
if (selectedValues?.includes(row[col])) {
|
||||
firstData.push(row);
|
||||
} else {
|
||||
restData.push(row);
|
||||
}
|
||||
});
|
||||
return [...firstData, ...restData];
|
||||
}, [col, selectedValues, data]);
|
||||
const [isDropdownVisible, setIsDropdownVisible] = useState(false);
|
||||
const [currentSuggestionSearch, setCurrentSuggestionSearch] = useState('');
|
||||
const [dataMask, dispatchDataMask] = useReducer<DataMaskReducer>(reducer, {
|
||||
filterState,
|
||||
@ -126,6 +150,12 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDropdownVisible) {
|
||||
setSelectedValues(filterState.value);
|
||||
}
|
||||
}, [JSON.stringify(filterState.value)]);
|
||||
|
||||
const isDisabled =
|
||||
appSection === AppSection.FILTER_CONFIG_MODAL && defaultToFirstItem;
|
||||
|
||||
@ -163,6 +193,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
|
||||
const handleBlur = () => {
|
||||
clearSuggestionSearch();
|
||||
unsetFocusedFilter();
|
||||
setSelectedValues(filterState.value);
|
||||
};
|
||||
|
||||
const datatype: GenericDataType = coltypeMap[col];
|
||||
@ -222,6 +253,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
|
||||
onSearch={searchWrapper}
|
||||
onSelect={clearSuggestionSearch}
|
||||
onBlur={handleBlur}
|
||||
onDropdownVisibleChange={setIsDropdownVisible}
|
||||
onFocus={setFocusedFilter}
|
||||
// @ts-ignore
|
||||
onChange={handleChange}
|
||||
@ -229,7 +261,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
|
||||
loading={isRefreshing}
|
||||
maxTagCount={5}
|
||||
>
|
||||
{data.map(row => {
|
||||
{sortedData.map(row => {
|
||||
const [value] = groupby.map(col => row[col]);
|
||||
return (
|
||||
// @ts-ignore
|
||||
|
Loading…
Reference in New Issue
Block a user