@dxos/react-ui-table 0.4.10-main.e7449de → 0.4.10-main.e96274c

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

package/src/schema/SchemaToTable.stories.tsx

@@ -5,10 +5,10 @@
 import '@dxosTheme';
 
 import * as Arbitrary from '@effect/schema/Arbitrary';
-import * as S from '@effect/schema/Schema';
 import * as fc from 'fast-check';
 import React, { useRef } from 'react';
 
+import { S } from '@dxos/echo-schema';
 import { DensityProvider } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 

package/src/schema/schema.test.ts

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as S from '@effect/schema/Schema';
 import { expect } from 'chai';
 
+import { S } from '@dxos/echo-schema';
 import { describe, test } from '@dxos/test';
 
 import { classifySchemaProperties } from './schema';

package/src/schema/schema.ts

@@ -2,26 +2,54 @@
 // Copyright 2024 DXOS.org
 //
 
-import { AST } from '@effect/schema';
+import * as AST from '@effect/schema/AST';
 import type * as S from '@effect/schema/Schema';
 
 import { type ColumnType } from './types';
 
 export type ClassifiedColumnType = ColumnType | 'display';
 
+// TODO(burdon): Rename getX? and return typed array?
+export const classifySchemaProperties = (schema: S.Schema<any, any>): [string, ClassifiedColumnType][] => {
+  const recurse = (node: AST.AST, path: string[], acc: [string, ClassifiedColumnType][]) => {
+    const properties = AST.getPropertySignatures(node);
+    properties.forEach((prop) => {
+      const propName = prop.name.toString();
+
+      if (prop.isOptional) {
+        const unwrappedAst = unwrapOptionProperty(prop);
+        if (isStruct(unwrappedAst)) {
+          return recurse(unwrappedAst, [...path, propName], acc);
+        }
+      }
+
+      if (isStruct(prop.type)) {
+        recurse(prop.type, [...path, propName], acc);
+      } else {
+        acc.push([path.concat(propName).join('.'), propertyToColumn(prop)]);
+      }
+    });
+
+    return acc;
+  };
+
+  return recurse(schema.ast, [], []);
+};
+
+const isStruct = (node: AST.AST) => AST.isTypeLiteral(node);
+
 const isOptionalUnion = (prop: AST.PropertySignature) => AST.isUnion(prop.type) && prop.isOptional;
 
 const unwrapOptionProperty = (prop: AST.PropertySignature) => {
   if (!isOptionalUnion(prop)) {
-    throw new Error('Not an optional property');
+    throw new Error(`Not an optional property: ${String(prop.name)}`);
   }
 
   if (!AST.isUnion(prop.type)) {
-    throw new Error('Not a union type');
+    throw new Error(`Not a union type: ${String(prop.name)}`);
   }
 
   const [type, _undefinedCase] = prop.type.types;
-
   return type;
 };
 
@@ -54,40 +82,11 @@ const typeToColumn = (type: AST.AST): ClassifiedColumnType => {
   return 'display';
 };
 
-const propertyToColumn = (property: AST.PropertySignature): ClassifiedColumnType => {
-  let type = property.type;
-
-  if (property.isOptional) {
-    type = unwrapOptionProperty(property);
+const propertyToColumn = (prop: AST.PropertySignature): ClassifiedColumnType => {
+  let type = prop.type;
+  if (prop.isOptional) {
+    type = unwrapOptionProperty(prop);
   }
 
   return typeToColumn(type);
 };
-
-const isStruct = (node: AST.AST) => AST.isTypeLiteral(node);
-
-export const classifySchemaProperties = (schema: S.Schema<any, any>) => {
-  const recurse = (node: AST.AST, path: string[], acc: [string, ClassifiedColumnType][]) => {
-    const properties = AST.getPropertySignatures(node);
-    properties.forEach((prop) => {
-      const propName = prop.name.toString();
-
-      if (prop.isOptional) {
-        const unwrappedAst = unwrapOptionProperty(prop);
-        if (isStruct(unwrappedAst)) {
-          return recurse(unwrappedAst, [...path, propName], acc);
-        }
-      }
-
-      if (isStruct(prop.type)) {
-        recurse(prop.type, [...path, propName], acc);
-      } else {
-        acc.push([path.concat(propName).join('.'), propertyToColumn(prop)]);
-      }
-    });
-
-    return acc;
-  };
-
-  return recurse(schema.ast, [], []);
-};

package/src/schema/schemaToColumns.ts

@@ -2,9 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import type * as S from '@effect/schema/Schema';
 import { type ColumnDef } from '@tanstack/react-table';
 
+import type { S } from '@dxos/echo-schema';
+
 import { classifySchemaProperties } from './schema';
 import { createColumnBuilder } from '../helpers';