@dxos/react-ui-table 0.4.10-main.fda6f37 → 0.4.10-next.71cec10

package/src/helpers.tsx

@@ -14,7 +14,7 @@ import {
 } from '@tanstack/react-table';
 import { format } from 'date-fns/format';
 import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { type PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
@@ -102,14 +102,16 @@ const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
 
   // https://tanstack.com/table/v8/docs/examples/react/editable-data
   const initialValue = cellContext.getValue();
-  const [value, setValue] = useState(() => {
+
+  const getInitialValue = useCallback(() => {
     // TODO(burdon): Temporary shim for automerge.
-    if ((initialValue as any)?.content) {
-      return (initialValue as any)?.content;
-    }
+    return (initialValue as any)?.content ?? initialValue;
+  }, [initialValue]);
+
+  const [value, setValue] = useState(getInitialValue);
 
-    return initialValue;
-  });
+  // Update value if initialValue changes externally (cell reactivity).
+  useEffect(() => setValue(getInitialValue()), [getInitialValue]);
 
   const handleSave = () => {
     ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();

package/src/hooks/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './useColumnSizing';
 export * from './useColumnSorting';
 export * from './usePinLastRow';
+export * from './useRowSelection';

package/src/hooks/useColumnSizing.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+import { type ColumnSizingInfoState, type ColumnSizingState } from '@tanstack/react-table';
+import { useCallback, useEffect, useState } from 'react';
+
+import { useOnTransition } from '@dxos/react-ui';
+
+import { type TableColumnDef } from '../components/Table';
+
+export const useColumnResizing = ({
+  columns,
+  onColumnResize,
+}: {
+  columns: TableColumnDef<any>[];
+  onColumnResize: ((state: Record<string, number>) => void) | undefined;
+}) => {
+  const [columnsInitialised, setColumnsInitialised] = useState(false);
+  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
+
+  useEffect(() => {
+    if (columnsInitialised) {
+      return;
+    }
+
+    setColumnSizing(
+      columns
+        .filter((column) => !!column.size && (column as any).prop !== undefined)
+        .reduce<ColumnSizingState>((state, column) => {
+          state[(column as any).prop] = column.size!;
+          return state;
+        }, {}),
+    );
+
+    setColumnsInitialised(true);
+  }, [columns, setColumnSizing]);
+
+  const [columnSizingInfo, setColumnSizingInfo] = useState<ColumnSizingInfoState>({} as ColumnSizingInfoState);
+
+  // Notify on column resize.
+  const notifyColumnResize = useCallback(() => onColumnResize?.(columnSizing), [onColumnResize, columnSizing]);
+  useOnTransition(columnSizingInfo.isResizingColumn, (v) => typeof v === 'string', false, notifyColumnResize);
+
+  return { columnSizing, columnSizingInfo, setColumnSizing, setColumnSizingInfo };
+};

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 };
+};