fix: use hook for filter state

gravity-ui · Jun 7, 2024 · 05233de · 05233de
1 parent 5eb4337
commit 05233de
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 17 deletions.
diff --git a/src/components/Table/README.md b/src/components/Table/README.md
@@ -260,7 +260,7 @@ const MyTable1 = withTableSettings({sortable: false})(Table);
 | renderControls             | Allows to render custom actions                              |                     `RenderControls`                     |
 | settingsFilterPlaceholder  | Text that appears in the control when no search value is set |                         `string`                         |
 | settingsFilterEmptyMessage | Text that appears when no one item is found                  |                         `string`                         |
-| filterSettings             | Function for filtering items                                 | `(item: TableColumnSetupItem, value: string) => boolean` |
+| filterSettings             | Function for filtering items                                 | `(value: string, item: TableColumnSetupItem) => boolean` |
 
 ### TableSettingsData
 

diff --git a/src/components/Table/__tests__/Table.withTableSettings.test.tsx b/src/components/Table/__tests__/Table.withTableSettings.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import userEvent from '@testing-library/user-event';
 
-import {fireEvent, render, screen} from '../../../../test-utils/utils';
+import {fireEvent, render, screen, waitFor} from '../../../../test-utils/utils';
 import {Button} from '../../Button';
 import {Table} from '../Table';
 import type {TableColumnConfig, TableProps} from '../Table';
@@ -363,7 +363,7 @@ describe('withTableSettings', () => {
             const filteredOption = screen.getByRole('option', {name: 'name'});
             expect(filteredOption).toBeInTheDocument();
             expect(filteredOption.hasAttribute('draggable')).toBeFalsy();
-            expect(screen.getAllByRole('option')).toHaveLength(1);
+            await waitFor(() => expect(screen.getAllByRole('option')).toHaveLength(1));
 
             fireEvent.change(textInput, {target: {value: ''}});
             expect(screen.getByRole('button', {name: 'id'}).hasAttribute('draggable')).toBeTruthy();

diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
@@ -24,7 +24,7 @@ import type {
 import {TextInput} from '../../../../controls/TextInput';
 import {Flex} from '../../../../layout/Flex/Flex';
 import type {ListItemCommonProps, ListItemViewProps} from '../../../../useList';
-import {ListContainerView, ListItemView} from '../../../../useList';
+import {ListContainerView, ListItemView, useListFilter} from '../../../../useList';
 import {block} from '../../../../utils/cn';
 import type {TableColumnConfig} from '../../../Table';
 import type {TableSetting} from '../withTableSettings';
@@ -246,7 +246,7 @@ const mapItemDataToProps = (item: TableColumnSetupItem): ListItemCommonProps =>
     };
 };
 
-const defaultFilterSettingsFn = (item: TableColumnSetupItem, value: string) => {
+const defaultFilterSettingsFn = (value: string, item: TableColumnSetupItem) => {
     return typeof item.title === 'string'
         ? item.title.toLowerCase().includes(value.trim().toLowerCase())
         : true;
@@ -288,7 +288,7 @@ export interface TableColumnSetupProps {
     filterable?: boolean;
     filterPlaceholder?: string;
     filterEmptyMessage?: string;
-    filterSettings?: (item: TableColumnSetupItem, value: string) => boolean;
+    filterSettings?: (value: string, item: TableColumnSetupItem) => boolean;
 }
 
 export const TableColumnSetup = (props: TableColumnSetupProps) => {
@@ -310,9 +310,6 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
     } = props;
 
     const [open, setOpen] = React.useState(false);
-    const [filter, setFilter] = React.useState('');
-    const [filteredItems, setFilteredItems] = React.useState<TableColumnSetupItem[]>([]);
-
     const [sortingEnabled, setSortingEnabled] = React.useState(sortable);
     const [prevSortingEnabled, setPrevSortingEnabled] = React.useState(sortable);
     if (sortable !== prevSortingEnabled) {
@@ -328,6 +325,8 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
         setItems(propsItems);
     }
 
+    const filterState = useListFilter({items, filterItem: filterSettings});
+
     const onApply = () => {
         const newSettings = items.map<TableSetting>(({id, isSelected}) => ({id, isSelected}));
         propsOnUpdate(newSettings);
@@ -394,9 +393,8 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
         setOpen(open);
         if (open === false) {
             setItems(propsItems);
-            setFilter('');
-            setFilteredItems([]);
             setSortingEnabled(sortable);
+            filterState.reset();
         }
     };
 
@@ -414,8 +412,7 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
     const emptyRenderContainer = useEmptyRenderContainer(filterEmptyMessage);
 
     const onFilterValueUpdate = (value: string) => {
-        setFilter(value);
-        setFilteredItems(items.filter((item) => filterSettings(item, value)));
+        filterState.onFilterUpdate(value);
         setSortingEnabled(!value.length);
     };
 
@@ -424,15 +421,15 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
             size="m"
             view="clear"
             placeholder={filterPlaceholder}
-            value={filter}
+            value={filterState.filter}
             className={filterInputCn}
             onUpdate={onFilterValueUpdate}
             hasClear
         />
     ) : null;
 
     const renderContainer =
-        filter && !filteredItems.length ? emptyRenderContainer : dndRenderContainer;
+        filterState.filter && !filterState.items.length ? emptyRenderContainer : dndRenderContainer;
 
     return (
         <TreeSelect
@@ -442,7 +439,7 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
             size="l"
             open={open}
             value={value}
-            items={filter ? filteredItems : items}
+            items={filterState.filter ? filterState.items : items}
             onUpdate={onUpdate}
             popupWidth={popupWidth}
             onOpenChange={onOpenChange}

diff --git a/src/components/Table/hoc/withTableSettings/withTableSettings.tsx b/src/components/Table/hoc/withTableSettings/withTableSettings.tsx
@@ -147,7 +147,7 @@ interface WithoutDefaultSettings {
 interface WithFilter {
     settingsFilterPlaceholder?: string;
     settingsFilterEmptyMessage?: string;
-    filterSettings?: (item: TableColumnSetupItem, value: string) => boolean;
+    filterSettings?: (value: string, item: TableColumnSetupItem) => boolean;
 }
 
 export type WithTableSettingsProps = WithTableSettingsBaseProps &