feat(BaseTable): remove withTableReorder hoc (#38)

gravity-ui · Sep 10, 2024 · b672d8d · b672d8d
1 parent 33db774
commit b672d8d
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 157 deletions.
diff --git 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<Person>[] = [
   defaultDragHandleColumn,
@@ -200,7 +199,9 @@ const ReorderingExample = () => {
     getRowId: (item) => item.id,
   });
 
-  const handleReorder = React.useCallback(
+  const handleReorder = React.useCallback<
+    NonNullable<ReorderingProviderProps<Person>['onReorder']>
+  >(
     ({
       draggedItemKey,
       targetItemKey,
@@ -209,29 +210,20 @@ const ReorderingExample = () => {
       nestingEnabled,
       nextChild,
       pullFromParent,
-    }: SortableListDragResult) => {
+    }) => {
       // ...
     },
     [],
   );
 
-  return <TableWithReordering table={table} onReorder={handleReorder} />;
+  return (
+    <ReorderingProvider table={table} onReorder={handleReorder}>
+      <BaseTable table={table} />
+    </ReorderingProvider>
+  );
 };
 ```
 
-Or use `ReorderingProvider`:
-
-```tsx
-<ReorderingProvider
-  table={table}
-  dndModifiers={dndModifiers}
-  enableNesting={enableNesting}
-  onReorder={onReorder}
->
-  <BaseTable table={table} enableNesting={enableNesting} />
-</ReorderingProvider>
-```
-
 ### 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
@@ -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<Item>[] = [
     {
         ...(defaultDragHandleColumn as ColumnDef<Item>),
@@ -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<ReorderingProviderProps<Item>['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 (
         <div className={cnColumnPinningDemo()}>
-            <TableWithReordering
-                className={cnColumnPinningDemo('table')}
-                table={table}
-                onReorder={handleReorder}
-            />
+            <ReorderingProvider table={table} onReorder={handleReorder}>
+                <BaseTable className={cnColumnPinningDemo('table')} table={table} />
+            </ReorderingProvider>
         </div>
     );
 };
diff --git 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<Item>[] = [defaultDragHandleColumn as ColumnDef<Item>, ...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<ReorderingProviderProps<Item>['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 <TableWithReordering table={table} onReorder={handleReorder} />;
+    return (
+        <ReorderingProvider table={table} onReorder={handleReorder}>
+            <BaseTable table={table} />
+        </ReorderingProvider>
+    );
 };
diff --git 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<TreeItem>[] = [
     defaultDragHandleColumn as ColumnDef<TreeItem>,
     ...draggableTreeColumns,
@@ -35,5 +33,9 @@ export const ReorderingTreeDemo = () => {
         },
     });
 
-    return <TableWithReordering table={table} enableNesting onReorder={handleReorder} />;
+    return (
+        <ReorderingProvider table={table} enableNesting onReorder={handleReorder}>
+            <BaseTable table={table} />
+        </ReorderingProvider>
+    );
 };
diff --git 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<Item>[] = [defaultDragHandleColumn as ColumnDef<Item>, ...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<ReorderingProviderProps<Item>['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 (
-        <TableWithReordering
-            ref={tableRef}
-            table={table}
-            rowVirtualizer={rowVirtualizer}
-            onReorder={handleReorder}
-            stickyHeader
-            className={cnVirtualizationDemo()}
-            headerClassName={cnVirtualizationDemo('header')}
-        />
+        <ReorderingProvider table={table} onReorder={handleReorder}>
+            <BaseTable
+                ref={tableRef}
+                table={table}
+                rowVirtualizer={rowVirtualizer}
+                stickyHeader
+                className={cnVirtualizationDemo()}
+                headerClassName={cnVirtualizationDemo('header')}
+            />
+        </ReorderingProvider>
     );
 };
diff --git 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<NonNullable<ReorderingProviderProps<TreeItem>['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