fix(native-filters): emitted filter label format (#16828)

This commit is contained in:
Ville Brofeldt 2021-09-27 08:36:55 +02:00 committed by GitHub
parent 42fa54881a
commit 0a8d0c6e7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 30 deletions

View File

@ -37,11 +37,7 @@ import { useImmerReducer } from 'use-immer';
import { FormItemProps } from 'antd/lib/form'; import { FormItemProps } from 'antd/lib/form';
import { PluginFilterSelectProps, SelectValue } from './types'; import { PluginFilterSelectProps, SelectValue } from './types';
import { StyledFormItem, FilterPluginStyle, StatusMessage } from '../common'; import { StyledFormItem, FilterPluginStyle, StatusMessage } from '../common';
import { import { getDataRecordFormatter, getSelectExtraFormData } from '../../utils';
formatFilterValue,
getDataRecordFormatter,
getSelectExtraFormData,
} from '../../utils';
type DataMaskAction = type DataMaskAction =
| { type: 'ownState'; ownState: JsonObject } | { type: 'ownState'; ownState: JsonObject }
@ -104,6 +100,15 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
extraFormData: {}, extraFormData: {},
filterState, filterState,
}); });
const datatype: GenericDataType = coltypeMap[col];
const labelFormatter = useMemo(
() =>
getDataRecordFormatter({
timeFormatter: smartDateDetailedFormatter,
}),
[],
);
const updateDataMask = useCallback( const updateDataMask = useCallback(
(values: SelectValue) => { (values: SelectValue) => {
const emptyFilter = const emptyFilter =
@ -124,7 +129,9 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
filterState: { filterState: {
...filterState, ...filterState,
label: values?.length label: values?.length
? `${(values || []).map(formatFilterValue).join(', ')}${suffix}` ? `${(values || [])
.map(value => labelFormatter(value, datatype))
.join(', ')}${suffix}`
: undefined, : undefined,
value: value:
appSection === AppSection.FILTER_CONFIG_MODAL && defaultToFirstItem appSection === AppSection.FILTER_CONFIG_MODAL && defaultToFirstItem
@ -133,14 +140,17 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
}, },
}); });
}, },
// eslint-disable-next-line react-hooks/exhaustive-deps
[ [
appSection, appSection,
col, col,
datatype,
defaultToFirstItem, defaultToFirstItem,
dispatchDataMask, dispatchDataMask,
enableEmptyFilter, enableEmptyFilter,
inverseSelection, inverseSelection,
JSON.stringify(filterState), JSON.stringify(filterState),
labelFormatter,
], ],
); );
@ -187,15 +197,6 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
unsetFocusedFilter(); unsetFocusedFilter();
}; };
const datatype: GenericDataType = coltypeMap[col];
const labelFormatter = useMemo(
() =>
getDataRecordFormatter({
timeFormatter: smartDateDetailedFormatter,
}),
[],
);
const handleChange = (value?: SelectValue | number | string) => { const handleChange = (value?: SelectValue | number | string) => {
const values = ensureIsArray(value); const values = ensureIsArray(value);
if (values.length === 0) { if (values.length === 0) {

View File

@ -117,18 +117,3 @@ export function getDataRecordFormatter({
return String(value); return String(value);
}; };
} }
export function formatFilterValue(
value: string | number | boolean | null,
): string {
if (value === null) {
return NULL_STRING;
}
if (typeof value === 'string') {
return value;
}
if (typeof value === 'number') {
return String(value);
}
return value ? TRUE_STRING : FALSE_STRING;
}