@dxos/react-ui-table 0.6.14-staging.e15392e → 0.7.1-staging.599df14

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -0,0 +1,155 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { FormatEnum } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { type DxGrid } from '@dxos/lit-grid';
+import {
+  editorKeys,
+  type EditorKeyEvent,
+  GridCellEditor,
+  type GridCellEditorProps,
+  type EditorKeyOrBlurHandler,
+  type EditorBlurHandler,
+  type GridScopedProps,
+  useGridContext,
+} from '@dxos/react-ui-grid';
+import { type FieldProjection } from '@dxos/schema';
+
+import { completion } from './extension';
+import { type TableModel } from '../../model';
+import { type GridCell, toGridCell } from '../../util';
+
+export type TableCellEditorProps = {
+  model?: TableModel;
+  onEnter?: (cell: GridCell) => void;
+  onFocus?: DxGrid['refocus'];
+  onQuery?: (field: FieldProjection, text: string) => Promise<{ label: string; data: any }[]>;
+};
+
+export const TableCellEditor = ({
+  model,
+  onEnter,
+  onFocus,
+  onQuery,
+  __gridScope,
+}: GridScopedProps<TableCellEditorProps>) => {
+  const { editing } = useGridContext('TableCellEditor', __gridScope);
+  const fieldProjection = useMemo<FieldProjection | undefined>(() => {
+    if (!model || !editing) {
+      return;
+    }
+
+    const { col } = toGridCell(editing.index);
+    const field = model.projection.view.fields[col];
+    const fieldProjection = model.projection.getFieldProjection(field.id);
+    invariant(fieldProjection);
+    return fieldProjection;
+  }, [model, editing]);
+
+  const handleClose = useCallback<EditorKeyOrBlurHandler>(
+    (value, event) => {
+      if (!model || !editing || !fieldProjection) {
+        return;
+      }
+
+      const cell = toGridCell(editing.index);
+      onEnter?.(cell);
+      if (event && onFocus) {
+        onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+      }
+    },
+    [model, editing, onFocus, onEnter, fieldProjection, determineNavigationAxis, determineNavigationDelta],
+  );
+
+  const handleBlur = useCallback<EditorBlurHandler>(
+    (value) => {
+      if (!model || !editing) {
+        return;
+      }
+
+      const cell = toGridCell(editing.index);
+      if (value !== undefined) {
+        model.setCellData(cell, value);
+      }
+    },
+    [model, editing],
+  );
+
+  const extension = useMemo(() => {
+    if (!fieldProjection) {
+      return [];
+    }
+
+    const extension = [
+      editorKeys({
+        onClose: handleClose,
+        ...(editing?.initialContent && { onNav: handleClose }),
+      }),
+    ];
+
+    if (onQuery) {
+      switch (fieldProjection.props.format) {
+        case FormatEnum.Ref: {
+          extension.push([
+            completion({
+              onQuery: (text) => onQuery(fieldProjection, text),
+              onMatch: (data) => {
+                if (model && editing) {
+                  const cell = toGridCell(editing.index);
+                  model.setCellData(cell, data);
+                  onEnter?.(cell);
+                  onFocus?.();
+                }
+              },
+            }),
+          ]);
+          break;
+        }
+      }
+    }
+
+    return extension;
+  }, [model, editing, fieldProjection, handleClose]);
+
+  const getCellContent = useCallback<GridCellEditorProps['getCellContent']>(() => {
+    if (model && editing) {
+      const value = model.getCellData(toGridCell(editing.index));
+      return value !== undefined ? String(value) : '';
+    }
+  }, [model, editing]);
+
+  return <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} />;
+};
+
+const determineNavigationAxis = ({ key }: EditorKeyEvent): 'col' | 'row' | undefined => {
+  switch (key) {
+    case 'ArrowUp':
+    case 'ArrowDown':
+    case 'Enter': {
+      return 'row';
+    }
+
+    case 'ArrowLeft':
+    case 'ArrowRight':
+    case 'Tab':
+      return 'col';
+  }
+};
+
+const determineNavigationDelta = ({ key, shift }: EditorKeyEvent): -1 | 1 => {
+  switch (key) {
+    case 'ArrowUp':
+    case 'ArrowLeft':
+      return -1;
+
+    case 'ArrowDown':
+    case 'ArrowRight':
+      return 1;
+  }
+
+  return shift ? -1 : 1;
+};

package/src/components/TableCellEditor/extension.ts

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import {
+  autocompletion,
+  pickedCompletion,
+  type CompletionContext,
+  type CompletionResult,
+} from '@codemirror/autocomplete';
+import { type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+export type CompletionOptions = {
+  onQuery: (text: string) => Promise<CompletionResult['options']>;
+  onMatch: (data: any) => void;
+};
+
+/**
+ * Autocomplete Codemirror extension.
+ * https://codemirror.net/docs/ref/#autocomplete.autocompletion
+ */
+export const completion = ({ onQuery, onMatch }: CompletionOptions): Extension => {
+  return [
+    EditorView.theme({
+      '.cm-completionDialog': {
+        width: 'var(--dx-gridCellWidth)',
+      },
+    }),
+
+    autocompletion({
+      icons: false,
+      activateOnTyping: true,
+      override: [
+        async (context: CompletionContext): Promise<CompletionResult> => {
+          const text = context.state.doc.toString();
+          return {
+            from: 0,
+            options: await onQuery(text),
+          };
+        },
+      ],
+
+      // TODO(burdon): Consts from grid (to line-up with grid).
+      tooltipClass: () => 'cm-completionDialog !mt-[8px] !-ml-[4px] [&>ul]:!max-h-[264px]',
+      optionClass: () => 'flex h-[33px] items-center',
+
+      // Uncomment to debug.
+      // closeOnBlur: true,
+    }),
+
+    // Check for accepted completion metadata in the transaction.
+    EditorView.updateListener.of((update) => {
+      update.transactions.forEach((tr) => {
+        const completion = tr.annotation(pickedCompletion);
+        if (completion) {
+          onMatch((completion as any).data);
+        }
+      });
+    }),
+  ];
+};

package/src/components/TableCellEditor/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './TableCellEditor';

package/src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,87 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren } from 'react';
+
+import { Toolbar as NaturalToolbar, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+
+import { ToolbarButton, ToolbarSeparator } from './common';
+import { translationKey } from '../../translations';
+
+//
+// Root
+//
+
+// TODO(Zan): This should become a union later.
+export type ToolbarAction = { type: 'add-row' } | { type: 'comment' };
+
+export type ToolbarActionType = ToolbarAction['type'];
+
+export type ToolbarActionHandler = (action: ToolbarAction) => void;
+
+export type ToolbarProps = ThemedClassName<
+  PropsWithChildren<{
+    onAction?: ToolbarActionHandler;
+  }>
+>;
+
+const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
+
+const ToolbarRoot = ({ classNames, children, onAction }: ToolbarProps) => {
+  return (
+    <ToolbarContextProvider onAction={onAction}>
+      <NaturalToolbar.Root
+        classNames={['is-full shrink-0 overflow-x-auto overflow-y-hidden p-1 attention-surface', classNames]}
+      >
+        {children}
+      </NaturalToolbar.Root>
+    </ToolbarContextProvider>
+  );
+};
+
+const Editing = () => {
+  const { onAction } = useToolbarContext('Editing');
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <>
+      <ToolbarButton
+        value='add-row'
+        icon='ph--plus--regular'
+        data-testid='table.toolbar.add-row'
+        onClick={() => onAction?.({ type: 'add-row' })}
+      >
+        {t('add row')}
+      </ToolbarButton>
+    </>
+  );
+};
+
+const Actions = () => {
+  const { onAction } = useToolbarContext('Actions');
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <>
+      <ToolbarButton
+        value='comment'
+        icon='ph--chat-text--regular'
+        data-testid='table.toolbar.comment'
+        onClick={() => onAction?.({ type: 'comment' })}
+      >
+        {t('create comment')}
+      </ToolbarButton>
+    </>
+  );
+};
+
+export const Toolbar = {
+  Root: ToolbarRoot,
+  Editing,
+  Actions,
+  Separator: ToolbarSeparator,
+};
+
+export { useToolbarContext };

package/src/components/Toolbar/common.tsx

@@ -0,0 +1,71 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import {
+  Icon,
+  type IconProps,
+  Toolbar as NaturalToolbar,
+  Tooltip,
+  type ToolbarButtonProps as NaturalToolbarButtonProps,
+  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
+} from '@dxos/react-ui';
+
+// TODO(burdon): Factor out into new package (react-ui-toolbar) in common with react-ui-editor, etc.
+
+export const buttonStyles = 'min-bs-0 p-2';
+export const tooltipProps = { side: 'top' as const, classNames: 'z-10' };
+
+export const ToolbarSeparator = () => <div role='separator' className='grow' />;
+
+//
+// ToolbarButton
+//
+
+type ToolbarButtonProps = NaturalToolbarButtonProps & Pick<IconProps, 'icon'>;
+
+export const ToolbarButton = ({ icon, children, ...props }: ToolbarButtonProps) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <NaturalToolbar.Button variant='ghost' {...props} classNames={buttonStyles}>
+          <Icon icon={icon} size={5} />
+          <span className='sr-only'>{children}</span>
+        </NaturalToolbar.Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {children}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
+//
+// ToolbarToggleButton
+//
+
+export type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & Pick<IconProps, 'icon'>;
+
+export const ToolbarToggleButton = ({ icon, children, ...props }: ToolbarToggleButtonProps) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <NaturalToolbar.ToggleGroupItem variant='ghost' {...props} classNames={buttonStyles}>
+          <Icon icon={icon} size={5} />
+          <span className='sr-only'>{children}</span>
+        </NaturalToolbar.ToggleGroupItem>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {children}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};

package/src/components/Toolbar/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './Toolbar';

package/src/components/index.ts

@@ -1,7 +1,6 @@
 //
-// Copyright 2022 DXOS.org
+// Copyright 2024 DXOS.org
 //
 
-export * from './Cell';
-export * from './ColumnMenu';
 export * from './Table';
+export * from './Toolbar';

package/src/components/testing.ts

@@ -0,0 +1,114 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect } from 'react';
+
+import { create, setValue, toJsonSchema, S, TypeEnum, TypedObject, FormatEnum } from '@dxos/echo-schema';
+import { faker } from '@dxos/random';
+import { createView, type ViewProjection } from '@dxos/schema';
+import {} from '@dxos/schema';
+
+import { TableType } from '../types';
+
+export const TestSchema = TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
+  id: S.String,
+  name: S.optional(S.String),
+  age: S.optional(S.Number),
+  active: S.optional(S.Boolean),
+  netWorth: S.optional(S.Number),
+});
+
+export const createTable = (schema = TestSchema) => {
+  return create(TableType, {
+    view: createView({
+      name: 'Test',
+      typename: schema.typename,
+      jsonSchema: toJsonSchema(schema),
+    }),
+  });
+};
+
+export const createItems = (n: number) => {
+  const { data } = create({
+    data: Array.from({ length: n }, () => ({
+      name: faker.person.fullName(),
+      age: faker.number.int({ min: 20, max: 70 }),
+      active: faker.datatype.boolean(),
+      netWorth: faker.number.int(),
+    })),
+  });
+
+  return data;
+};
+
+export type SimulatorProps = {
+  table: TableType;
+  items: any[];
+  insertInterval?: number;
+  updateInterval?: number;
+};
+
+export const useSimulator = ({ items, table, insertInterval, updateInterval }: SimulatorProps) => {
+  useEffect(() => {
+    if (!insertInterval) {
+      return;
+    }
+
+    const i = setInterval(() => {
+      const [item] = createItems(1);
+      items.unshift(item);
+    }, insertInterval);
+
+    return () => clearInterval(i);
+  }, [items, insertInterval]);
+
+  useEffect(() => {
+    if (!updateInterval) {
+      return;
+    }
+
+    const i = setInterval(() => {
+      const rowIdx = Math.floor(Math.random() * items.length);
+      const fields = table.view?.fields ?? [];
+      const columnIdx = Math.floor(Math.random() * fields.length);
+      const projection: ViewProjection = (table as any)._projection;
+      const field = fields[columnIdx];
+      const item = items[rowIdx];
+
+      const {
+        props: { type, format },
+      } = projection.getFieldProjection(field.id);
+
+      if (field) {
+        const path = field.path;
+        // TODO(ZaymonFC): Restore this once I know how to derive the type from the schema.
+        switch (type) {
+          case TypeEnum.String: {
+            setValue(item, path, `Updated ${Date.now()}`);
+            break;
+          }
+          case TypeEnum.Number: {
+            setValue(item, path, Math.floor(Math.random() * 100));
+            break;
+          }
+          case TypeEnum.Boolean: {
+            setValue(item, path, !item[path]);
+            break;
+          }
+        }
+
+        if (format) {
+          switch (format) {
+            case FormatEnum.Currency: {
+              item[path] = Math.floor(Math.random() * 1000);
+              break;
+            }
+          }
+        }
+      }
+    }, updateInterval);
+
+    return () => clearInterval(i);
+  }, [items, table.view?.fields, updateInterval]);
+};

package/src/hooks/index.ts

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

package/src/hooks/useTableModel.ts

@@ -0,0 +1,52 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type ReactiveObject } from '@dxos/react-client/echo';
+import { type ViewProjection } from '@dxos/schema';
+
+import { type BaseTableRow, TableModel, type TableModelProps } from '../model';
+import { type TableType } from '../types';
+
+export type UseTableModelParams<T extends BaseTableRow = { id: string }> = {
+  table?: TableType;
+  projection?: ViewProjection;
+  objects?: ReactiveObject<T>[];
+} & Pick<TableModelProps<T>, 'onInsertRow' | 'onDeleteRows' | 'onDeleteColumn' | 'onCellUpdate' | 'onRowOrderChanged'>;
+
+export const useTableModel = <T extends BaseTableRow = { id: string }>({
+  objects,
+  table,
+  projection,
+  ...props
+}: UseTableModelParams<T>): TableModel<T> | undefined => {
+  const [model, setModel] = useState<TableModel<T>>();
+  useEffect(() => {
+    if (!table || !projection) {
+      return;
+    }
+
+    let model: TableModel<T> | undefined;
+    const t = setTimeout(async () => {
+      model = new TableModel<T>({ table, projection, ...props });
+      await model.open();
+      setModel(model);
+    });
+
+    return () => {
+      clearTimeout(t);
+      void model?.close();
+    };
+  }, [table, projection]); // TODO(burdon): Trigger if callbacks change?
+
+  // Update data.
+  useEffect(() => {
+    if (objects) {
+      model?.setRows(objects);
+    }
+  }, [model, objects]);
+
+  return model;
+};

package/src/index.ts

@@ -1,12 +1,11 @@
 //
-// Copyright 2022 DXOS.org
+// Copyright 2024 DXOS.org
 //
-
-export { default as translations } from './translations';
+import translations from './translations';
 
 export * from './components';
-export * from './helpers';
 export * from './hooks';
-export * from './schema';
-export * from './theme';
 export * from './types';
+export * from './util';
+
+export { translations };

package/src/model/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './table-model';
+export * from './modal-controller';

package/src/model/modal-controller.ts

@@ -0,0 +1,83 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { signal } from '@preact/signals-core';
+import { type RefObject, type MouseEvent, type MutableRefObject } from 'react';
+
+import { tableButtons } from '../util';
+
+export type ColumnSettingsMode = { type: 'create' } | { type: 'edit'; fieldId: string };
+
+export type ModalState =
+  | { type: 'row'; rowIndex: number }
+  | { type: 'column'; fieldId: string }
+  | { type: 'columnSettings'; mode: ColumnSettingsMode }
+  | { type: 'closed' };
+
+export class ModalController {
+  private readonly _state = signal<ModalState>({ type: 'closed' });
+  private readonly _triggerRef: MutableRefObject<HTMLElement> = { current: null as unknown as HTMLElement };
+
+  public get state() {
+    return this._state;
+  }
+
+  public get trigger() {
+    return this._triggerRef as RefObject<HTMLButtonElement>;
+  }
+
+  public handleClick = (event: MouseEvent): boolean => {
+    const target = event.target as HTMLElement;
+
+    const rowButton = target.closest(`button[${tableButtons.rowMenu.attr}]`);
+    if (rowButton) {
+      this._triggerRef.current = rowButton as HTMLElement;
+      this._state.value = {
+        type: 'row',
+        rowIndex: Number(rowButton.getAttribute(tableButtons.rowMenu.attr)),
+      };
+      return true;
+    }
+
+    const columnButton = target.closest(`button[${tableButtons.columnSettings.attr}]`);
+    if (columnButton) {
+      const fieldId = columnButton.getAttribute(tableButtons.columnSettings.attr)!;
+      this._triggerRef.current = columnButton as HTMLElement;
+      this._state.value = {
+        type: 'column',
+        fieldId,
+      };
+      return true;
+    }
+
+    const addColumnButton = target.closest(`button[${tableButtons.addColumn.attr}]`);
+    if (addColumnButton) {
+      this._triggerRef.current = addColumnButton as HTMLElement;
+      this._state.value = {
+        type: 'columnSettings',
+        mode: { type: 'create' },
+      };
+      return true;
+    }
+
+    return false;
+  };
+
+  public openColumnSettings = () => {
+    if (this._state.value.type === 'column') {
+      const fieldId = this._state.value.fieldId;
+      // Queue next render to let the column action modal close completely.
+      requestAnimationFrame(() => {
+        this._state.value = {
+          type: 'columnSettings',
+          mode: { type: 'edit', fieldId },
+        };
+      });
+    }
+  };
+
+  public close = () => {
+    this._state.value = { type: 'closed' };
+  };
+}