@dxos/react-ui-table 0.5.1-next.2ad6c47 → 0.5.1-next.39e0ee2

package/src/hooks/useColumnSorting.ts

@@ -2,52 +2,62 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type SortDirection, type Column } from '@tanstack/react-table';
+import { type SortDirection, type Column, type ColumnSort } from '@tanstack/react-table';
 import { useState } from 'react';
 
-export const useColumnSorting = (column: Column<any>) => {
-  const [sortDirection, setSortDirection] = useState<SortDirection | false>(column.getIsSorted());
-  const [firstSort, setFirstSort] = useState<SortDirection | undefined>();
+import { useTableContext } from '../components/Table/TableContext';
+
+export const useColumnSorting = () => {
+  const [columnSorting, setColumnSorting] = useState<ColumnSort[]>([]);
+
+  const sortColumn = (columnId: string, sortDirection: SortDirection) => {
+    setColumnSorting([{ id: columnId, desc: sortDirection === 'desc' }]);
+  };
+
+  const clearColumnSorting = () => {
+    setColumnSorting([]);
+  };
+
+  return { sorting: columnSorting, sortColumn, clearColumnSorting };
+};
+
+export type ColumnSorting = ReturnType<typeof useColumnSorting>;
+
+export const useSortColumn = (column: Column<any>) => {
+  const { sorting, sortColumn, clearColumnSorting } = useTableContext();
+  const [initialSortDirection, setInitialSortDirection] = useState<SortDirection | undefined>();
+
+  const columnSort = sorting.find((s) => s.id === column.id);
+  const sortDirection = columnSort ? (columnSort.desc ? ('desc' as const) : ('asc' as const)) : undefined;
 
   const canSort = column.getCanSort();
 
-  const updateColumnSort = (direction: SortDirection | false) => {
-    setSortDirection(direction);
-
-    switch (direction) {
-      case false:
-        column.clearSorting();
-        break;
-      case 'asc':
-        column.toggleSorting(false); // descending false
-        break;
-      case 'desc':
-        column.toggleSorting(true); // descending true
-        break;
-    }
+  const updateColumnSort = (direction: SortDirection) => {
+    sortColumn(column.id, direction);
   };
 
   // Whichever sort is explicitly set first, will be the first sort direction
   // When toggling, we always go to the other direction, and then to unsorted.
   const onToggleSort = () => {
-    if (sortDirection === false) {
+    if (sortDirection === undefined) {
       return;
     }
 
-    if (sortDirection === firstSort) {
-      updateColumnSort(firstSort === 'asc' ? 'desc' : 'asc');
+    if (sortDirection === initialSortDirection) {
+      updateColumnSort(initialSortDirection === 'asc' ? 'desc' : 'asc');
     } else {
-      updateColumnSort(false);
+      clearColumnSorting();
     }
   };
 
   const onSelectSort = (direction: SortDirection) => {
-    setFirstSort(direction);
+    clearColumnSorting();
+    setInitialSortDirection(direction);
     updateColumnSort(direction);
   };
 
   const onClearSort = () => {
-    updateColumnSort(false);
+    clearColumnSorting();
   };
 
   return { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort };