From 05233de4c44a860d5dfe38e6318cc68bb87f607b Mon Sep 17 00:00:00 2001 From: Olga Polikashina Date: Fri, 7 Jun 2024 13:51:12 +0300 Subject: [PATCH] fix: use hook for filter state --- src/components/Table/README.md | 2 +- .../Table.withTableSettings.test.tsx | 4 ++-- .../TableColumnSetup/TableColumnSetup.tsx | 23 ++++++++----------- .../withTableSettings/withTableSettings.tsx | 2 +- 4 files changed, 14 insertions(+), 17 deletions(-) diff --git a/src/components/Table/README.md b/src/components/Table/README.md index 0e5dd5dcc5..ed229b35a7 100644 --- 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 index 183f2056cc..ba8c70ee18 100644 --- 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 index 1f019b7ece..a3af3d6b64 100644 --- 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([]); - 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(({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,7 +421,7 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => { size="m" view="clear" placeholder={filterPlaceholder} - value={filter} + value={filterState.filter} className={filterInputCn} onUpdate={onFilterValueUpdate} hasClear @@ -432,7 +429,7 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => { ) : null; const renderContainer = - filter && !filteredItems.length ? emptyRenderContainer : dndRenderContainer; + filterState.filter && !filterState.items.length ? emptyRenderContainer : dndRenderContainer; return ( { 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 index 96f36194dc..d30ff99e53 100644 --- 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 &