From b672d8d77d9fafccc59a6e8b52b8653d4ddf6ddf Mon Sep 17 00:00:00 2001 From: Dmitry Artemov Date: Tue, 10 Sep 2024 13:53:32 +0200 Subject: [PATCH] feat(BaseTable): remove withTableReorder hoc (#38) --- README.md | 30 ++++------ .../ColumnPinningWithReorderingDemo.tsx | 49 +++++++-------- .../components/BaseTable/ReorderingDemo.tsx | 47 ++++++++------- .../BaseTable/ReorderingTreeDemo.tsx | 10 ++-- .../ReorderingWithVirtualizationDemo.tsx | 60 +++++++++---------- .../hooks/useTreeDataReordering.ts | 6 +- src/hocs/index.ts | 1 - src/hocs/withTableReorder.tsx | 46 -------------- src/index.ts | 3 - 9 files changed, 95 insertions(+), 157 deletions(-) delete mode 100644 src/hocs/index.ts delete mode 100644 src/hocs/withTableReorder.tsx diff --git a/README.md b/README.md index a1386fc..10c5965 100644 --- a/README.md +++ b/README.md @@ -180,9 +180,8 @@ const GroupingExample = () => { ### Reordering ```tsx -import {defaultDragHandleColumn, withTableReorder, SortableListDragResult} from '@gravity-ui/table'; - -const TableWithReordering = withTableReorder(BaseTable); +import type {ReorderingProviderProps} from '@gravity-ui/table'; +import {defaultDragHandleColumn, ReorderingProvider} from '@gravity-ui/table'; const columns: ColumnDef[] = [ defaultDragHandleColumn, @@ -200,7 +199,9 @@ const ReorderingExample = () => { getRowId: (item) => item.id, }); - const handleReorder = React.useCallback( + const handleReorder = React.useCallback< + NonNullable['onReorder']> + >( ({ draggedItemKey, targetItemKey, @@ -209,29 +210,20 @@ const ReorderingExample = () => { nestingEnabled, nextChild, pullFromParent, - }: SortableListDragResult) => { + }) => { // ... }, [], ); - return ; + return ( + + + + ); }; ``` -Or use `ReorderingProvider`: - -```tsx - - - -``` - ### Virtualization Use if you want to use grid container as the scroll element (if you want to use window see window virtualization section). diff --git a/src/components/__stories__/components/BaseTable/ColumnPinningWithReorderingDemo.tsx b/src/components/__stories__/components/BaseTable/ColumnPinningWithReorderingDemo.tsx index 1a7460e..c530f98 100644 --- a/src/components/__stories__/components/BaseTable/ColumnPinningWithReorderingDemo.tsx +++ b/src/components/__stories__/components/BaseTable/ColumnPinningWithReorderingDemo.tsx @@ -3,10 +3,10 @@ import React from 'react'; import type {ColumnDef, ColumnPinningState} from '@tanstack/react-table'; import {defaultDragHandleColumn} from '../../../../constants'; -import {withTableReorder} from '../../../../hocs'; import {useTable} from '../../../../hooks'; import {BaseTable} from '../../../BaseTable'; -import type {SortableListDragResult} from '../../../SortableList'; +import type {ReorderingProviderProps} from '../../../ReorderingProvider'; +import {ReorderingProvider} from '../../../ReorderingProvider'; import {columns} from '../../constants/columnPinning'; import {data as originalData} from '../../constants/data'; import type {Item} from '../../types'; @@ -15,8 +15,6 @@ import {cnColumnPinningDemo} from './ColumnPinningDemo.classname'; import './ColumnPinningDemo.scss'; -const TableWithReordering = withTableReorder(BaseTable); - const columnsWithReordering: ColumnDef[] = [ { ...(defaultDragHandleColumn as ColumnDef), @@ -44,37 +42,34 @@ export const ColumnPinningWithReorderingDemo = () => { }, }); - const handleReorder = React.useCallback( - ({draggedItemKey, baseItemKey}: SortableListDragResult) => { - setData((prevData) => { - const dataClone = prevData.slice(); + const handleReorder = React.useCallback< + NonNullable['onReorder']> + >(({draggedItemKey, baseItemKey}) => { + setData((prevData) => { + const dataClone = prevData.slice(); - const index = dataClone.findIndex((item) => item.id === draggedItemKey); + const index = dataClone.findIndex((item) => item.id === draggedItemKey); - if (index >= 0) { - const dragged = dataClone.splice(index, 1)[0] as Item; - const insertIndex = dataClone.findIndex((item) => item.id === baseItemKey); + if (index >= 0) { + const dragged = dataClone.splice(index, 1)[0] as Item; + const insertIndex = dataClone.findIndex((item) => item.id === baseItemKey); - if (insertIndex >= 0) { - dataClone.splice(insertIndex + 1, 0, dragged); - } else { - dataClone.unshift(dragged); - } + if (insertIndex >= 0) { + dataClone.splice(insertIndex + 1, 0, dragged); + } else { + dataClone.unshift(dragged); } + } - return dataClone; - }); - }, - [], - ); + return dataClone; + }); + }, []); return (
- + + +
); }; diff --git a/src/components/__stories__/components/BaseTable/ReorderingDemo.tsx b/src/components/__stories__/components/BaseTable/ReorderingDemo.tsx index 32e70a2..327fb29 100644 --- a/src/components/__stories__/components/BaseTable/ReorderingDemo.tsx +++ b/src/components/__stories__/components/BaseTable/ReorderingDemo.tsx @@ -3,16 +3,14 @@ import React from 'react'; import type {ColumnDef} from '@tanstack/react-table'; import {defaultDragHandleColumn} from '../../../../constants'; -import {withTableReorder} from '../../../../hocs'; import {useTable} from '../../../../hooks'; import {BaseTable} from '../../../BaseTable'; -import type {SortableListDragResult} from '../../../SortableList'; +import {ReorderingProvider} from '../../../ReorderingProvider'; +import type {ReorderingProviderProps} from '../../../ReorderingProvider'; import {columns as originalColumns} from '../../constants/columns'; import {data as originalData} from '../../constants/data'; import type {Item} from '../../types'; -const TableWithReordering = withTableReorder(BaseTable); - const columns: ColumnDef[] = [defaultDragHandleColumn as ColumnDef, ...originalColumns]; export const ReorderingDemo = () => { @@ -24,29 +22,32 @@ export const ReorderingDemo = () => { getRowId: (item) => item.id, }); - const handleReorder = React.useCallback( - ({draggedItemKey, baseItemKey}: SortableListDragResult) => { - setData((prevData) => { - const dataClone = prevData.slice(); + const handleReorder = React.useCallback< + NonNullable['onReorder']> + >(({draggedItemKey, baseItemKey}) => { + setData((prevData) => { + const dataClone = prevData.slice(); - const index = dataClone.findIndex((item) => item.id === draggedItemKey); + const index = dataClone.findIndex((item) => item.id === draggedItemKey); - if (index >= 0) { - const dragged = dataClone.splice(index, 1)[0] as Item; - const insertIndex = dataClone.findIndex((item) => item.id === baseItemKey); + if (index >= 0) { + const dragged = dataClone.splice(index, 1)[0] as Item; + const insertIndex = dataClone.findIndex((item) => item.id === baseItemKey); - if (insertIndex >= 0) { - dataClone.splice(insertIndex + 1, 0, dragged); - } else { - dataClone.unshift(dragged); - } + if (insertIndex >= 0) { + dataClone.splice(insertIndex + 1, 0, dragged); + } else { + dataClone.unshift(dragged); } + } - return dataClone; - }); - }, - [], - ); + return dataClone; + }); + }, []); - return ; + return ( + + + + ); }; diff --git a/src/components/__stories__/components/BaseTable/ReorderingTreeDemo.tsx b/src/components/__stories__/components/BaseTable/ReorderingTreeDemo.tsx index 8168471..fadda72 100644 --- a/src/components/__stories__/components/BaseTable/ReorderingTreeDemo.tsx +++ b/src/components/__stories__/components/BaseTable/ReorderingTreeDemo.tsx @@ -3,15 +3,13 @@ import React from 'react'; import type {ColumnDef, ExpandedState} from '@tanstack/react-table'; import {defaultDragHandleColumn} from '../../../../constants'; -import {withTableReorder} from '../../../../hocs'; import {useTable} from '../../../../hooks'; import {BaseTable} from '../../../BaseTable'; +import {ReorderingProvider} from '../../../ReorderingProvider'; import type {TreeItem} from '../../constants/tree'; import {draggableTreeColumns, data as originalData} from '../../constants/tree'; import {useTreeDataReordering} from '../../hooks/useTreeDataReordering'; -const TableWithReordering = withTableReorder(BaseTable); - const columns: ColumnDef[] = [ defaultDragHandleColumn as ColumnDef, ...draggableTreeColumns, @@ -35,5 +33,9 @@ export const ReorderingTreeDemo = () => { }, }); - return ; + return ( + + + + ); }; diff --git a/src/components/__stories__/components/BaseTable/ReorderingWithVirtualizationDemo.tsx b/src/components/__stories__/components/BaseTable/ReorderingWithVirtualizationDemo.tsx index f57a361..9ec9d1d 100644 --- a/src/components/__stories__/components/BaseTable/ReorderingWithVirtualizationDemo.tsx +++ b/src/components/__stories__/components/BaseTable/ReorderingWithVirtualizationDemo.tsx @@ -3,11 +3,11 @@ import React from 'react'; import type {ColumnDef} from '@tanstack/react-table'; import {defaultDragHandleColumn} from '../../../../constants'; -import {withTableReorder} from '../../../../hocs'; import {useTable, useWindowRowVirtualizer} from '../../../../hooks'; import {getVirtualRowRangeExtractor} from '../../../../utils'; import {BaseTable} from '../../../BaseTable'; -import type {SortableListDragResult} from '../../../SortableList'; +import {ReorderingProvider} from '../../../ReorderingProvider'; +import type {ReorderingProviderProps} from '../../../ReorderingProvider'; import {columns as originalColumns} from '../../constants/columns'; import type {Item} from '../../types'; import {generateData} from '../../utils'; @@ -16,8 +16,6 @@ import {cnVirtualizationDemo} from './VirtualizationDemo.classname'; import './VirtualizationDemo.scss'; -const TableWithReordering = withTableReorder(BaseTable); - const columns: ColumnDef[] = [defaultDragHandleColumn as ColumnDef, ...originalColumns]; export const ReorderingWithVirtualizationDemo = () => { @@ -37,39 +35,39 @@ export const ReorderingWithVirtualizationDemo = () => { rangeExtractor: getVirtualRowRangeExtractor(tableRef.current), }); - const handleReorder = React.useCallback( - ({draggedItemKey, baseItemKey}: SortableListDragResult) => { - setData((prevData) => { - const dataClone = prevData.slice(); + const handleReorder = React.useCallback< + NonNullable['onReorder']> + >(({draggedItemKey, baseItemKey}) => { + setData((prevData) => { + const dataClone = prevData.slice(); - const index = dataClone.findIndex((item) => item.id === draggedItemKey); + const index = dataClone.findIndex((item) => item.id === draggedItemKey); - if (index >= 0) { - const dragged = dataClone.splice(index, 1)[0] as Item; - const insertIndex = dataClone.findIndex((item) => item.id === baseItemKey); + if (index >= 0) { + const dragged = dataClone.splice(index, 1)[0] as Item; + const insertIndex = dataClone.findIndex((item) => item.id === baseItemKey); - if (insertIndex >= 0) { - dataClone.splice(insertIndex + 1, 0, dragged); - } else { - dataClone.unshift(dragged); - } + if (insertIndex >= 0) { + dataClone.splice(insertIndex + 1, 0, dragged); + } else { + dataClone.unshift(dragged); } + } - return dataClone; - }); - }, - [], - ); + return dataClone; + }); + }, []); return ( - + + + ); }; diff --git a/src/components/__stories__/hooks/useTreeDataReordering.ts b/src/components/__stories__/hooks/useTreeDataReordering.ts index 81df125..0e798cd 100644 --- a/src/components/__stories__/hooks/useTreeDataReordering.ts +++ b/src/components/__stories__/hooks/useTreeDataReordering.ts @@ -2,7 +2,7 @@ import React from 'react'; import cloneDeep from 'lodash/cloneDeep'; -import type {SortableListDragResult} from '../../SortableList'; +import type {ReorderingProviderProps} from '../../ReorderingProvider'; import type {TreeItem} from '../constants/tree'; export type UseTreeDataReorderingProps = { @@ -18,7 +18,7 @@ type UpdateRankPayload = { }; export const useTreeDataReordering = ({data, setData}: UseTreeDataReorderingProps) => { - return React.useCallback( + return React.useCallback['onReorder']>>( // eslint-disable-next-line complexity ({ draggedItemKey, @@ -27,7 +27,7 @@ export const useTreeDataReordering = ({data, setData}: UseTreeDataReorderingProp targetItemKey, nextChild, pullFromParent, - }: SortableListDragResult) => { + }) => { if (!draggedItemKey) { return; } diff --git a/src/hocs/index.ts b/src/hocs/index.ts deleted file mode 100644 index baf881b..0000000 --- a/src/hocs/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './withTableReorder'; diff --git a/src/hocs/withTableReorder.tsx b/src/hocs/withTableReorder.tsx deleted file mode 100644 index 6caca52..0000000 --- a/src/hocs/withTableReorder.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; - -import {ReorderingProvider} from '../components'; -import type {BaseTableProps, ReorderingProviderProps} from '../components'; - -export interface WithTableReorderProps< - TData, - TScrollElement extends Element | Window = HTMLDivElement, -> extends BaseTableProps, - Pick, 'onReorder' | 'dndModifiers' | 'enableNesting'> {} - -export const withTableReorder = ( - Component: ( - props: BaseTableProps & {ref?: React.Ref}, - ) => React.ReactElement, -) => { - const TableWithReorder = React.forwardRef( - ( - { - table, - dndModifiers, - enableNesting, - onReorder, - ...restProps - }: WithTableReorderProps, - ref: React.Ref, - ) => { - return ( - - - - ); - }, - ) as (( - props: WithTableReorderProps & {ref?: React.Ref}, - ) => React.ReactElement) & {displayName: string}; - - TableWithReorder.displayName = `withTableReorder(${Component.name})`; - - return TableWithReorder; -}; diff --git a/src/index.ts b/src/index.ts index 489b718..1337ca7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,9 +3,6 @@ export type {BaseTableProps, ReorderingProviderProps, TableProps} from './compon export {defaultDragHandleColumn, defaultSelectionColumn} from './constants'; -export {withTableReorder} from './hocs'; -export type {WithTableReorderProps} from './hocs'; - export {useDraggableRowDepth, useRowVirtualizer, useTable, useWindowRowVirtualizer} from './hooks'; export type {