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:
committed by
Facebook GitHub Bot
parent
65daaf80f1
commit
78b650dbe0
@@ -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,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user