@dxos/react-ui-table 0.7.4 → 0.7.5-labs.a279d8c

package/src/components/Table/Table.tsx

@@ -9,6 +9,8 @@ import React, {
   useImperativeHandle,
   useState,
   type WheelEvent,
+  type MouseEvent,
+  useMemo,
 } from 'react';
 
 import { getValue } from '@dxos/echo-schema';
@@ -25,8 +27,9 @@ import { ColumnSettings } from './ColumnSettings';
 import { CreateRefPanel } from './CreateRefPanel';
 import { RefPanel } from './RefPanel';
 import { RowActionsMenu } from './RowActionsMenu';
-import { type TableModel } from '../../model';
+import { ModalController, type TableModel, type TablePresentation } from '../../model';
 import { translationKey } from '../../translations';
+import { tableButtons, tableControls } from '../../util';
 import { createOption, TableCellEditor, type TableCellEditorProps } from '../TableCellEditor';
 
 // NOTE(Zan): These fragments add border to inline-end and block-end of the grid using pseudo-elements.
@@ -70,174 +73,262 @@ export type TableController = {
 
 export type TableMainProps = {
   model?: TableModel;
+  presentation?: TablePresentation;
   ignoreAttention?: boolean;
 };
 
-const TableMain = forwardRef<TableController, TableMainProps>(({ model, ignoreAttention }, forwardedRef) => {
-  const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
-  const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : 'table');
-  const { t } = useTranslation(translationKey);
-
-  /**
-   * Provides an external controller that can be called to repaint the table.
-   */
-  useImperativeHandle<TableController, TableController>(
-    forwardedRef,
-    () => {
-      if (!model || !dxGrid) {
-        return {};
-      }
+const TableMain = forwardRef<TableController, TableMainProps>(
+  ({ model, presentation, ignoreAttention }, forwardedRef) => {
+    const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
+    const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : 'table');
+    const { t } = useTranslation(translationKey);
+    const modals = useMemo(() => new ModalController(), []);
+
+    /**
+     * Provides an external controller that can be called to repaint the table.
+     */
+    useImperativeHandle<TableController, TableController>(
+      forwardedRef,
+      () => {
+        if (!presentation || !dxGrid) {
+          return {};
+        }
+
+        dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
+        return {
+          update: (cell) => {
+            if (cell) {
+              dxGrid.updateIfWithinBounds(cell);
+            } else {
+              dxGrid.updateCells(true);
+              dxGrid.requestUpdate();
+            }
+          },
+        };
+      },
+      [presentation, dxGrid],
+    );
+
+    const handleGridClick = useCallback(
+      (event: MouseEvent) => {
+        if (!modals) {
+          return;
+        }
 
-      dxGrid.getCells = model.getCells.bind(model);
-      return {
-        update: (cell) => {
-          if (cell) {
-            dxGrid.updateIfWithinBounds(cell);
-          } else {
-            dxGrid.updateCells(true);
+        const buttonSelector = Object.values(tableButtons)
+          .map((button) => `button[${button.attr}]`)
+          .join(',');
+
+        const tableButtonElement = (event.target as HTMLElement).closest(buttonSelector) as HTMLElement;
+        if (tableButtonElement) {
+          const button = Object.values(tableButtons).find((btn) => tableButtonElement.hasAttribute(btn.attr));
+          if (!button) {
+            return;
           }
-        },
-      };
-    },
-    [model, dxGrid],
-  );
 
-  const handleFocus = useCallback<NonNullable<TableCellEditorProps['onFocus']>>(
-    (increment, delta) => {
-      if (dxGrid) {
-        dxGrid.refocus(increment, delta);
-      }
-    },
-    [dxGrid],
-  );
+          modals.setTrigger(tableButtonElement);
+          const data = button.getData(tableButtonElement);
+          switch (data.type) {
+            case 'rowMenu': {
+              modals.showRowMenu(data.rowIndex);
+              break;
+            }
+            case 'columnSettings': {
+              modals.showColumnMenu(data.fieldId);
+              break;
+            }
+            case 'newColumn': {
+              modals.showColumnCreator();
+              break;
+            }
+            case 'referencedCell': {
+              modals.showReferencePanel(data.targetId, data.schemaId);
+              break;
+            }
+            case 'sort': {
+              model?.sorting?.toggleSort(data.fieldId);
+              break;
+            }
+          }
+          return;
+        }
 
-  const handleEnter = useCallback<NonNullable<TableCellEditorProps['onEnter']>>(
-    (cell) => {
-      // TODO(burdon): Insert row only if bottom row isn't completely blank already.
-      if (model && cell.row === model.getRowCount() - 1) {
-        model.insertRow(cell.row);
+        const controlSelector = Object.values(tableControls)
+          .map((control) => `input[${control.attr}]`)
+          .join(',');
+
+        const controlElement = (event.target as HTMLElement).closest(controlSelector) as HTMLElement;
+        if (controlElement) {
+          const control = Object.values(tableControls).find((ctrl) => controlElement.hasAttribute(ctrl.attr));
+          if (!control) {
+            return;
+          }
+
+          const data = control.getData(controlElement);
+          switch (data.type) {
+            case 'checkbox': {
+              if (data.header) {
+                model?.selection.setSelection(model.selection.allRowsSeleted.value ? 'none' : 'all');
+              } else {
+                model?.selection.toggleSelectionForRowIndex(data.rowIndex);
+              }
+              break;
+            }
+            case 'switch': {
+              if (model) {
+                model.updateCellData({ row: data.rowIndex, col: data.colIndex }, (value) => !value);
+              }
+              break;
+            }
+          }
+        }
+      },
+      [model, modals],
+    );
+
+    const handleFocus = useCallback<NonNullable<TableCellEditorProps['onFocus']>>(
+      (increment, delta) => {
         if (dxGrid) {
-          requestAnimationFrame(() => {
-            dxGrid?.scrollToRow(cell.row + 1);
-            dxGrid?.refocus('row', 1);
-          });
+          dxGrid.refocus(increment, delta);
         }
-      }
-    },
-    [model, dxGrid],
-  );
+      },
+      [dxGrid],
+    );
 
-  const handleKeyDown = useCallback<NonNullable<GridContentProps['onKeyDown']>>(
-    (event) => {
-      const cell = closestCell(event.target);
-      if (!model || !cell) {
-        return;
-      }
+    const handleEnter = useCallback<NonNullable<TableCellEditorProps['onEnter']>>(
+      (cell) => {
+        // TODO(burdon): Insert row only if bottom row isn't completely blank already.
+        if (model && cell.row === model.getRowCount() - 1) {
+          model.insertRow(cell.row);
+          if (dxGrid) {
+            requestAnimationFrame(() => {
+              dxGrid?.scrollToRow(cell.row + 1);
+              dxGrid?.refocus('row', 1);
+            });
+          }
+        }
+      },
+      [model, dxGrid],
+    );
 
-      switch (event.key) {
-        case 'Backspace':
-        case 'Delete': {
-          model.setCellData(cell, undefined);
-          break;
+    const handleKeyDown = useCallback<NonNullable<GridContentProps['onKeyDown']>>(
+      (event) => {
+        const cell = closestCell(event.target);
+        if (!model || !cell) {
+          return;
         }
-      }
-    },
-    [model],
-  );
 
-  const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
-    (event) => {
-      if (event.axis === 'col') {
-        const columnIndex = parseInt(event.index, 10);
-        model?.setColumnWidth(columnIndex, event.size);
-      }
-    },
-    [model],
-  );
+        switch (event.key) {
+          case 'Backspace':
+          case 'Delete': {
+            model.setCellData(cell, undefined);
+            break;
+          }
+        }
+      },
+      [model],
+    );
+
+    const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
+      (event) => {
+        if (event.axis === 'col') {
+          const columnIndex = parseInt(event.index, 10);
+          model?.setColumnWidth(columnIndex, event.size);
+        }
+      },
+      [model],
+    );
+
+    const handleWheel = useCallback(
+      (event: WheelEvent) => {
+        if (!ignoreAttention && !hasAttention) {
+          event.stopPropagation();
+        }
+      },
+      [hasAttention, ignoreAttention],
+    );
 
-  const handleWheel = useCallback(
-    (event: WheelEvent) => {
-      if (!ignoreAttention && !hasAttention) {
-        event.stopPropagation();
+    const handleNewColumn = useCallback(() => {
+      const columns = model?.getColumnCount();
+      if (dxGrid && columns) {
+        dxGrid.scrollToColumn(columns - 1);
       }
-    },
-    [hasAttention, ignoreAttention],
-  );
+    }, [model, dxGrid]);
 
-  const handleNewColumn = useCallback(() => {
-    const columns = model?.getColumnCount();
-    if (dxGrid && columns) {
-      dxGrid.scrollToColumn(columns - 1);
-    }
-  }, [model, dxGrid]);
-
-  // TODO(burdon): Factor out?
-  // TODO(burdon): Generalize to handle other value types (e.g., enums).
-  const handleQuery = useCallback<NonNullable<TableCellEditorProps['onQuery']>>(
-    async ({ field, props }, text) => {
-      if (model && props.referenceSchema && field.referencePath) {
-        const space = getSpace(model.table);
-        invariant(space);
-        const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
-        if (schema) {
-          const { objects } = await space.db.query(Filter.schema(schema)).run();
-          const options = objects
-            .map((obj) => {
-              const value = getValue(obj, field.referencePath!);
-              if (!value || typeof value !== 'string') {
-                return undefined;
-              }
+    // TODO(burdon): Factor out?
+    // TODO(burdon): Generalize to handle other value types (e.g., enums).
+    const handleQuery = useCallback<NonNullable<TableCellEditorProps['onQuery']>>(
+      async ({ field, props }, text) => {
+        if (model && props.referenceSchema && field.referencePath) {
+          const space = getSpace(model.table);
+          invariant(space);
+          const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
+          if (schema) {
+            const { objects } = await space.db.query(Filter.schema(schema)).run();
+            const options = objects
+              .map((obj) => {
+                const value = getValue(obj, field.referencePath!);
+                if (!value || typeof value !== 'string') {
+                  return undefined;
+                }
+
+                return {
+                  label: value,
+                  data: obj,
+                };
+              })
+              .filter(isNotFalsy);
 
-              return {
-                label: value,
-                data: obj,
-              };
-            })
-            .filter(isNotFalsy);
-
-          return [
-            ...options,
-            {
-              label: t('create new object label', { text }),
-              data: createOption(text),
-            },
-          ];
+            return [
+              ...options,
+              {
+                label: t('create new object label', { text }),
+                data: createOption(text),
+              },
+            ];
+          }
         }
-      }
 
-      return [];
-    },
-    [model],
-  );
+        return [];
+      },
+      [model],
+    );
 
-  if (!model) {
-    return <span role='none' className='attention-surface' />;
-  }
+    if (!model || !modals) {
+      return <span role='none' className='attention-surface' />;
+    }
 
-  return (
-    <Grid.Root id={model.table.id ?? 'table-grid'}>
-      <TableCellEditor model={model} onEnter={handleEnter} onFocus={handleFocus} onQuery={handleQuery} />
-      <Grid.Content
-        onWheelCapture={handleWheel}
-        className={mx('[--dx-grid-base:var(--surface-bg)]', inlineEndLine, blockEndLine)}
-        frozen={frozen}
-        columns={model.columnMeta.value}
-        limitRows={model.getRowCount() ?? 0}
-        limitColumns={model.table.view?.fields?.length ?? 0}
-        onAxisResize={handleAxisResize}
-        onClick={model?.handleGridClick}
-        onKeyDown={handleKeyDown}
-        overscroll='trap'
-        ref={setDxGrid}
-      />
-      <RowActionsMenu model={model} />
-      <ColumnActionsMenu model={model} />
-      <ColumnSettings model={model} onNewColumn={handleNewColumn} />
-      <RefPanel model={model} />
-      <CreateRefPanel model={model} />
-    </Grid.Root>
-  );
-});
+    return (
+      <Grid.Root id={model.table.id ?? 'table-grid'}>
+        <TableCellEditor
+          model={model}
+          modals={modals}
+          onEnter={handleEnter}
+          onFocus={handleFocus}
+          onQuery={handleQuery}
+        />
+        <Grid.Content
+          onWheelCapture={handleWheel}
+          className={mx('[--dx-grid-base:var(--surface-bg)]', inlineEndLine, blockEndLine)}
+          frozen={frozen}
+          columns={model.columnMeta.value}
+          limitRows={model.getRowCount() ?? 0}
+          limitColumns={model.table.view?.target?.fields?.length ?? 0}
+          onAxisResize={handleAxisResize}
+          onClick={handleGridClick}
+          onKeyDown={handleKeyDown}
+          overscroll='trap'
+          ref={setDxGrid}
+        />
+        <RowActionsMenu model={model} modals={modals} />
+        <ColumnActionsMenu model={model} modals={modals} />
+        <ColumnSettings model={model} modals={modals} onNewColumn={handleNewColumn} />
+        <RefPanel model={model} modals={modals} />
+        <CreateRefPanel model={model} modals={modals} />
+      </Grid.Root>
+    );
+  },
+);
 
 //
 // CellEditor

package/src/components/TableCellEditor/TableCellEditor.stories.tsx

@@ -7,11 +7,11 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { type MutableSchema } from '@dxos/echo-schema';
+import { type EchoSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { Filter, useSpaces, useQuery, create } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
+import { Filter, useQuery, create } from '@dxos/react-client/echo';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { defaultSizeRow, Grid, type GridEditing } from '@dxos/react-ui-grid';
 import { ViewProjection, ViewType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -27,23 +27,24 @@ type StoryProps = {
 };
 
 const DefaultStory = ({ editing }: StoryProps) => {
-  const spaces = useSpaces();
-  const space = spaces[spaces.length - 1];
+  const { space } = useClientProvider();
+  invariant(space);
+
   const tables = useQuery(space, Filter.schema(TableType));
   const [table, setTable] = useState<TableType>();
-  const [schema, setSchema] = useState<MutableSchema>();
+  const [schema, setSchema] = useState<EchoSchema>();
   useEffect(() => {
-    if (tables.length && !table) {
+    if (space && tables.length && !table) {
       const table = tables[0];
       invariant(table.view);
       setTable(table);
-      setSchema(space.db.schemaRegistry.getSchema(table.view.query.type));
+      setSchema(space.db.schemaRegistry.getSchema(table.view.target!.query.type));
     }
-  }, [tables]);
+  }, [space, tables]);
 
   const projection = useMemo(() => {
     if (schema && table?.view) {
-      return new ViewProjection(schema, table.view);
+      return new ViewProjection(schema, table.view.target!);
     }
   }, [schema, table?.view]);
 
@@ -83,9 +84,9 @@ const meta: Meta<StoryProps> = {
       types: [TableType, ViewType],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: ({ space }) => {
+      onSpaceCreated: async ({ space }) => {
         const table = space.db.add(create(TableType, {}));
-        const schema = initializeTable({ space, table });
+        const schema = await initializeTable({ space, table });
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
             create(schema, {

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -24,7 +24,7 @@ import {
 import { type FieldProjection } from '@dxos/schema';
 
 import { completion } from './extension';
-import { type TableModel } from '../../model';
+import { type TableModel, type ModalController } from '../../model';
 
 const newValue = Symbol.for('newValue');
 
@@ -39,6 +39,7 @@ export type QueryResult = Pick<Completion, 'label'> & { data: any };
 
 export type TableCellEditorProps = {
   model?: TableModel;
+  modals?: ModalController;
   onEnter?: (cell: DxGridPlanePosition) => void;
   onFocus?: DxGrid['refocus'];
   onQuery?: (field: FieldProjection, text: string) => Promise<QueryResult[]>;
@@ -46,6 +47,7 @@ export type TableCellEditorProps = {
 
 export const TableCellEditor = ({
   model,
+  modals,
   onEnter,
   onFocus,
   onQuery,
@@ -133,12 +135,12 @@ export const TableCellEditor = ({
             completion({
               onQuery: (text) => onQuery(fieldProjection, text),
               onMatch: (data) => {
-                if (model && editing) {
+                if (model && editing && modals) {
                   if (isCreateOption(data)) {
                     const { field, props } = fieldProjection;
                     if (props.referenceSchema) {
                       suppressNextBlur.current = true;
-                      model.modalController.openCreateRef(
+                      modals.openCreateRef(
                         props.referenceSchema,
                         document.querySelector(cellQuery(editing.index, gridId)),
                         {
@@ -162,7 +164,7 @@ export const TableCellEditor = ({
     }
 
     return extension;
-  }, [model, editing, fieldProjection, handleClose]);
+  }, [model, modals, editing, fieldProjection, handleClose]);
 
   const getCellContent = useCallback<GridCellEditorProps['getCellContent']>(() => {
     if (model && editing) {

package/src/components/TableToolbar/TableToolbar.tsx

@@ -0,0 +1,72 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { create } from '@dxos/live-object';
+import { type ThemedClassName } from '@dxos/react-ui';
+import {
+  createGapSeparator,
+  createMenuAction,
+  type MenuAction,
+  type MenuActionHandler,
+  MenuProvider,
+  ToolbarMenu,
+  useMenuActions,
+} from '@dxos/react-ui-menu';
+
+import { translationKey } from '../../translations';
+
+export type TableToolbarActionProperties = { type: TableToolbarActionType };
+
+export type TableToolbarAction = MenuAction<TableToolbarActionProperties>;
+
+export type TableToolbarActionType = 'add-row' | 'comment' | 'save-view';
+
+type TableToolbarState = Partial<{ viewDirty: boolean }>;
+
+export type TableToolbarProps = ThemedClassName<
+  TableToolbarState & { onAction?: MenuActionHandler<TableToolbarAction>; attendableId?: string }
+>;
+
+const createTableToolbarActions = (state: TableToolbarState) => {
+  const add = createMenuAction<TableToolbarActionProperties>('add-row', {
+    type: 'add-row',
+    icon: 'ph--plus--regular',
+    label: ['add row', { ns: translationKey }],
+    testId: 'table.toolbar.add-row',
+  });
+  const save = createMenuAction<TableToolbarActionProperties>('save-view', {
+    type: 'save-view',
+    icon: 'ph--floppy-disk--regular',
+    label: ['save view label', { ns: translationKey }],
+    testId: 'table.toolbar.save-view',
+    iconOnly: false,
+    hidden: !state.viewDirty,
+  });
+  const gap = createGapSeparator();
+  const comment = createMenuAction('comment', {
+    type: 'comment',
+    icon: 'ph--chat-text--regular',
+    label: ['create comment', { ns: translationKey }],
+    testId: 'table.toolbar.comment',
+  });
+  const nodes = [add, save, ...gap.nodes, comment];
+  return {
+    nodes,
+    edges: nodes.map(({ id: target }) => ({ source: 'root', target })),
+  };
+};
+
+export const TableToolbar = ({ classNames, viewDirty, attendableId, onAction }: TableToolbarProps) => {
+  const state = useMemo(() => create<TableToolbarState>({ viewDirty }), []);
+  const actionsCreator = useCallback(() => createTableToolbarActions(state), [state]);
+  const menu = useMenuActions(actionsCreator);
+
+  return (
+    <MenuProvider {...menu} attendableId={attendableId} onAction={onAction as MenuActionHandler}>
+      <ToolbarMenu classNames={classNames} />
+    </MenuProvider>
+  );
+};

package/src/components/{Toolbar → TableToolbar}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './Toolbar';
+export * from './TableToolbar';

package/src/components/index.ts

@@ -3,4 +3,4 @@
 //
 
 export * from './Table';
-export * from './Toolbar';
+export * from './TableToolbar';

package/src/components/testing.ts

@@ -6,7 +6,7 @@ import { useEffect } from 'react';
 
 import { setValue, toJsonSchema, S, TypeEnum, TypedObject, FormatEnum } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
-import { create } from '@dxos/react-client/echo';
+import { create, makeRef } from '@dxos/react-client/echo';
 import { createView, type ViewProjection } from '@dxos/schema';
 import {} from '@dxos/schema';
 
@@ -22,11 +22,13 @@ export const TestSchema = TypedObject({ typename: 'example.com/type/Test', versi
 
 export const createTable = (schema = TestSchema) => {
   return create(TableType, {
-    view: createView({
-      name: 'Test',
-      typename: schema.typename,
-      jsonSchema: toJsonSchema(schema),
-    }),
+    view: makeRef(
+      createView({
+        name: 'Test',
+        typename: schema.typename,
+        jsonSchema: toJsonSchema(schema),
+      }),
+    ),
   });
 };
 
@@ -71,7 +73,7 @@ export const useSimulator = ({ items, table, insertInterval, updateInterval }: S
 
     const i = setInterval(() => {
       const rowIdx = Math.floor(Math.random() * items.length);
-      const fields = table.view?.fields ?? [];
+      const fields = table.view?.target?.fields ?? [];
       const columnIdx = Math.floor(Math.random() * fields.length);
       const projection: ViewProjection = (table as any)._projection;
       const field = fields[columnIdx];
@@ -111,5 +113,5 @@ export const useSimulator = ({ items, table, insertInterval, updateInterval }: S
     }, updateInterval);
 
     return () => clearInterval(i);
-  }, [items, table.view?.fields, updateInterval]);
+  }, [items, table.view?.target?.fields, updateInterval]);
 };