@dxos/react-ui-table 0.4.10-main.e2d2318 → 0.4.10-main.e3078ed

package/src/hooks/usePinLastRow.ts

@@ -2,42 +2,63 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Table } from '@tanstack/react-table';
-import { useEffect, useState } from 'react';
+import { type Row, type Table } from '@tanstack/react-table';
+import { useCallback, useEffect, useState } from 'react';
 
 export const usePinLastRow = (
   pinLastRow: boolean | undefined,
   table: Table<any>,
-  data: any,
+  data: any[],
   getScrollElement?: () => Element | null,
 ) => {
   const [pinnedRowKey, setPinnedRowKey] = useState<string>();
 
-  useEffect(() => {
-    if (!pinLastRow) {
-      return;
+  // Scrolls to the bottom of a scrollable element.
+  const scrollToBottom = useCallback(() => {
+    const scrollElement = getScrollElement?.();
+    if (scrollElement) {
+      requestAnimationFrame(() => scrollElement.scrollTo({ top: scrollElement.scrollHeight }));
     }
+  }, [getScrollElement]);
+
+  const pinRow = useCallback(
+    (rowToPin: Row<any>) => {
+      table.resetRowPinning();
+      rowToPin.pin('bottom');
+      setPinnedRowKey(rowToPin.id);
+    },
+    [table],
+  );
 
+  const clearRowPinning = useCallback(() => {
+    table.resetRowPinning();
+    setPinnedRowKey(undefined);
+  }, [table]);
+
+  // Define the logic for pinning the last row in a callback.
+  const pinLastRowCallback = useCallback(() => {
     const rows = table.getRowModel().rows;
-    const rowToPin = rows[rows.length - 1];
-    const rowId = rowToPin.id;
 
-    if (rowId === pinnedRowKey) {
-      return;
+    if (rows.length === 0) {
+      return clearRowPinning();
     }
 
-    table.resetRowPinning();
-    rowToPin.pin('bottom');
+    const lastRow = rows[rows.length - 1];
+    if (lastRow.id === pinnedRowKey) {
+      return;
+    }
 
-    const scrollElement = getScrollElement?.();
-    const isFirstRender = pinnedRowKey === undefined;
+    pinRow(lastRow);
 
-    if (scrollElement && !isFirstRender) {
-      requestAnimationFrame(() => {
-        scrollElement.scrollTo({ top: scrollElement.scrollHeight });
-      });
+    if (pinnedRowKey !== undefined) {
+      scrollToBottom();
     }
+  }, [table, scrollToBottom, pinnedRowKey]);
 
-    setPinnedRowKey(rowId);
-  }, [pinLastRow, table, getScrollElement, pinnedRowKey, setPinnedRowKey, data]);
+  // Effect to handle pinning logic when data changes.
+  useEffect(() => {
+    if (pinLastRow) {
+      pinLastRowCallback();
+    }
+  }, [data, pinLastRow, pinLastRowCallback]);
 };

package/src/hooks/useRowSelection.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2024 DXOS.org
+//
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { type OnChangeFn, type RowSelectionState } from '@tanstack/react-table';
+import { useCallback } from 'react';
+
+import { type TableProps } from '../components/Table';
+
+export const useRowSelection = (
+  props: Pick<
+    TableProps<any>,
+    'rowsSelectable' | 'defaultRowSelection' | 'rowSelection' | 'onRowSelectionChange' | 'rowsSelectable'
+  >,
+) => {
+  const [rowSelection = {}, setRowSelection] = useControllableState({
+    prop: props.rowSelection,
+    onChange: props.onRowSelectionChange,
+    defaultProp: props.defaultRowSelection,
+  });
+
+  // TODO(thure): Does @tanstack/react-table really need this intervention? It did seem necessary to enforce single-selection...
+  const handleRowSelectionChange = useCallback<OnChangeFn<RowSelectionState>>(
+    (updaterOrValue) => {
+      const nextRowSelection = typeof updaterOrValue === 'function' ? updaterOrValue(rowSelection) : updaterOrValue;
+      if (props.rowsSelectable === 'multi') {
+        setRowSelection(nextRowSelection);
+      } else if (props.rowsSelectable) {
+        const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
+        setRowSelection(nextRowSelectionKey ? { [nextRowSelectionKey]: true } : {});
+      } else {
+        setRowSelection({});
+      }
+    },
+    [props.rowsSelectable, setRowSelection, rowSelection],
+  );
+
+  return { rowSelection, handleRowSelectionChange };
+};