Make fliters non-exclusive

Summary:
Project: https://docs.google.com/document/d/1SbFrpvfIShX5npANNa1AkgHliR1M-VMLW5Q9RhREt94/edit

Also, sync quick filters with the internal filter state of the table

Reviewed By: antonk52

Differential Revision: D45396180

fbshipit-source-id: 6a8ef4ac61a49ec7af71ae9e26f20f395fb34cef
This commit is contained in:
Andrey Goncharov
2023-04-28 12:19:45 -07:00
committed by Facebook GitHub Bot
parent 65daaf80f1
commit 78b650dbe0

View File

@@ -9,7 +9,7 @@
import type {DataTableColumn} from './DataTable'; import type {DataTableColumn} from './DataTable';
import {Percentage} from '../../utils/widthUtils'; import {Percentage} from '../../utils/widthUtils';
import {MutableRefObject, Reducer} from 'react'; import {MutableRefObject, Reducer, RefObject} from 'react';
import {DataSourceVirtualizer} from '../../data-source/index'; import {DataSourceVirtualizer} from '../../data-source/index';
import produce, {castDraft, immerable, original} from 'immer'; import produce, {castDraft, immerable, original} from 'immer';
import {theme} from '../theme'; import {theme} from '../theme';
@@ -101,13 +101,13 @@ type DataManagerActions<T> =
> >
| Action< | Action<
'removeColumnFilter', 'removeColumnFilter',
| {column: keyof T; index: number; value?: never} | {column: keyof T; index: number; label?: never}
| {column: keyof T; index?: never; value: string} | {column: keyof T; index?: never; label: string}
> >
| Action< | Action<
'toggleColumnFilter', 'toggleColumnFilter',
| {column: keyof T; index: number; value?: never} | {column: keyof T; index: number; label?: never}
| {column: keyof T; index?: never; value: string} | {column: keyof T; index?: never; label: string}
> >
| Action<'setColumnFilterInverse', {column: keyof T; inversed: boolean}> | Action<'setColumnFilterInverse', {column: keyof T; inversed: boolean}>
| Action<'setColumnFilterFromSelection', {column: keyof T}> | Action<'setColumnFilterFromSelection', {column: keyof T}>
@@ -288,7 +288,7 @@ export const dataTableManagerReducer = produce<
const column = draft.columns.find((c) => c.key === action.column)!; const column = draft.columns.find((c) => c.key === action.column)!;
const index = const index =
action.index ?? action.index ??
column.filters?.findIndex((f) => f.value === action.value!); column.filters?.findIndex((f) => f.label === action.label!);
if (index === undefined || index < 0) { if (index === undefined || index < 0) {
break; break;
@@ -301,7 +301,7 @@ export const dataTableManagerReducer = produce<
const column = draft.columns.find((c) => c.key === action.column)!; const column = draft.columns.find((c) => c.key === action.column)!;
const index = const index =
action.index ?? action.index ??
column.filters?.findIndex((f) => f.value === action.value!); column.filters?.findIndex((f) => f.label === action.label!);
if (index === undefined || index < 0) { if (index === undefined || index < 0) {
break; break;
@@ -395,7 +395,7 @@ export type DataTableManager<T> = {
sortColumn(column: keyof T, direction?: SortDirection): void; sortColumn(column: keyof T, direction?: SortDirection): void;
setSearchValue(value: string, addToHistory?: boolean): void; setSearchValue(value: string, addToHistory?: boolean): void;
dataView: _DataSourceView<T, T[keyof T]>; dataView: _DataSourceView<T, T[keyof T]>;
state: Readonly<DataManagerState<T>>; stateRef: RefObject<Readonly<DataManagerState<T>>>;
toggleSearchValue(): void; toggleSearchValue(): void;
toggleHighlightSearch(): void; toggleHighlightSearch(): void;
setSearchHighlightColor(color: string): void; setSearchHighlightColor(color: string): void;
@@ -407,7 +407,7 @@ export type DataTableManager<T> = {
value: string, value: string,
disableOthers?: boolean, disableOthers?: boolean,
): void; ): void;
removeColumnFilter(column: keyof T, value: string): void; removeColumnFilter(column: keyof T, label: string): void;
}; };
export function createDataTableManager<T>( export function createDataTableManager<T>(
@@ -475,11 +475,11 @@ export function createDataTableManager<T>(
addColumnFilter(column, value, disableOthers) { addColumnFilter(column, value, disableOthers) {
dispatch({type: 'addColumnFilter', column, value, disableOthers}); dispatch({type: 'addColumnFilter', column, value, disableOthers});
}, },
removeColumnFilter(column, value) { removeColumnFilter(column, label) {
dispatch({type: 'removeColumnFilter', column, value}); dispatch({type: 'removeColumnFilter', column, label});
}, },
dataView, dataView,
state: stateRef.current, stateRef,
}; };
} }