@dxos/react-ui-table 0.8.3 → 0.8.4-main.1da679c

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -3,94 +3,204 @@
 //
 
 import { type Schema } from 'effect';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { getSnapshot } from '@dxos/echo-schema';
+import { Filter, Obj } from '@dxos/echo';
+import { Ref, type TypeAnnotation, getValue } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
+import { getSnapshot } from '@dxos/live-object';
+import { type Client } from '@dxos/react-client';
+import { getSpace } from '@dxos/react-client/echo';
 import { Popover } from '@dxos/react-ui';
-import { Form } from '@dxos/react-ui-form';
-import { parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
+import { Form, type FormProps } from '@dxos/react-ui-form';
+import { cellQuery, parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
 import { type FieldProjection } from '@dxos/schema';
-import { getDeep, setDeep } from '@dxos/util';
+import { getDeep, isNotFalsy, setDeep } from '@dxos/util';
 
-import { type TableModel } from '../../model';
+import { type ModalController, type TableModel } from '../../model';
+import { translationKey } from '../../translations';
 import { narrowSchema } from '../../util';
 
 type FormCellEditorProps = {
   fieldProjection: FieldProjection;
   model?: TableModel;
   schema?: Schema.Schema.AnyNoContext;
+  onSave?: () => void;
+  client?: Client;
+  modals?: ModalController;
   __gridScope: any;
-};
+} & Omit<FormProps<any>, 'values' | 'schema'>;
 
-export const FormCellEditor = ({ fieldProjection, model, schema, __gridScope }: FormCellEditorProps) => {
-  const { editing, setEditing } = useGridContext('ArrayEditor', __gridScope);
-  const cellRef = useRef<HTMLButtonElement | null>(null);
+const createOptionLabel = ['create new object label', { ns: translationKey }] as [string, { ns: string }];
 
-  useEffect(() => {
-    if (editing && editing.cellElement) {
-      cellRef.current = editing.cellElement as HTMLButtonElement;
-    }
-  }, [editing?.cellElement]);
+export const FormCellEditor = ({
+  fieldProjection,
+  model,
+  schema,
+  onSave,
+  client,
+  modals,
+  __gridScope,
+  ...formProps
+}: FormCellEditorProps) => {
+  const { editing: contextEditing, setEditing, id: gridId } = useGridContext('ArrayEditor', __gridScope);
+  const [editing, setLocalEditing] = useState(false);
+  const anchorRef = useRef<HTMLButtonElement | null>(null);
 
-  const narrowedSchema = useMemo(() => {
-    if (!schema) {
-      return undefined;
-    }
-    return narrowSchema(schema, [fieldProjection.field.path]);
-  }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
+  const getSchema = useCallback(
+    (typeAnnotation: TypeAnnotation) => {
+      const space = getSpace(model!.view);
+      invariant(space);
+
+      let schema;
+      if (client) {
+        schema = client.graph.schemaRegistry.getSchema(typeAnnotation.typename);
+      }
+      if (!schema) {
+        schema = space.db.schemaRegistry.getSchema(typeAnnotation.typename);
+      }
+      return { space, schema };
+    },
+    [client, model],
+  );
+
+  const handleQueryRefOptions = useCallback(
+    async (typeAnnotation: TypeAnnotation) => {
+      const { schema, space } = getSchema(typeAnnotation);
+      if (model && schema && space) {
+        const { objects } = await space.db.query(Filter.type(schema)).run();
+        return objects
+          .map((obj) => {
+            return {
+              dxn: Obj.getDXN(obj),
+              label: getValue(obj, fieldProjection.field.referencePath!) || obj.id.toString(),
+            };
+          })
+          .filter(isNotFalsy);
+      }
+
+      return [];
+    },
+    [client, model],
+  );
 
   const originalRow = useMemo(() => {
-    if (model && editing) {
-      const cell = parseCellIndex(editing.index);
-      const row = model.getRowAt(cell.row);
-      invariant(row);
+    if (model && contextEditing) {
+      const cell = parseCellIndex(contextEditing.index);
 
-      return row;
+      // Check if this is a draft cell and get the appropriate row data
+      if (model.isDraftCell(cell)) {
+        const draftRow = model.draftRows.value[cell.row];
+        invariant(draftRow);
+        return draftRow.data;
+      } else {
+        const row = model.getRowAt(cell.row);
+        invariant(row);
+        return row;
+      }
     }
 
     return undefined;
-  }, [model, editing]);
-
-  const formValues = useMemo(() => {
-    if (originalRow) {
-      // NOTE(ZaymonFC): Important to get a snapshot to eject from the live object.
-      return getSnapshot(originalRow);
-    }
-  }, [originalRow]);
+  }, [model, contextEditing]);
 
   const handleSave = useCallback(
     (values: any) => {
       const path = fieldProjection.field.path;
       const value = getDeep(values, [path]);
       setDeep(originalRow, [path], value);
+      contextEditing?.cellElement?.focus();
+      setEditing(null);
+      setLocalEditing(false);
+      onSave?.();
+    },
+    [fieldProjection.field.path, onSave, contextEditing, originalRow],
+  );
+
+  const handleCreate = useCallback(
+    (object: any) => {
+      const ref = Ref.make(object);
+      const path = fieldProjection.field.path;
+      setDeep(originalRow, [path], ref);
+      contextEditing?.cellElement?.focus();
       setEditing(null);
+      setLocalEditing(false);
+      onSave?.();
     },
-    [fieldProjection.field.path, originalRow],
+    [fieldProjection.field.path, onSave, contextEditing, originalRow],
   );
 
-  const handleOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (nextOpen === false) {
-        setEditing(null);
+  const handleCreateFromQuery = useCallback(
+    async (typeAnnotation: TypeAnnotation, query: string) => {
+      if (model && modals && contextEditing?.index) {
+        setLocalEditing(false);
+        modals.openCreateRef(
+          typeAnnotation.typename,
+          document.querySelector(cellQuery(contextEditing.index, gridId)),
+          {
+            [fieldProjection.field.referencePath!]: query,
+          },
+          handleCreate,
+        );
       }
     },
-    [setEditing],
+    [model, modals, client, contextEditing?.index, gridId, fieldProjection, handleSave],
   );
 
+  useEffect(() => {
+    if (contextEditing && contextEditing.cellElement) {
+      anchorRef.current = (contextEditing.cellElement as HTMLElement).querySelector(
+        '.dx-grid__cell__content',
+      ) as HTMLButtonElement;
+      setLocalEditing(true);
+    } else {
+      anchorRef.current = null;
+      setLocalEditing(false);
+    }
+  }, [contextEditing]);
+
+  const narrowedSchema = useMemo(() => {
+    if (!schema) {
+      return undefined;
+    }
+    return narrowSchema(schema, [fieldProjection.field.path]);
+  }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
+
+  // NOTE: Important to get a snapshot to eject from the live object.
+  const formValues = useMemo(() => (originalRow ? getSnapshot(originalRow) : {}), [originalRow]);
+
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    if (nextOpen === false) {
+      setEditing(null);
+      onSave?.();
+    }
+    setLocalEditing(nextOpen);
+  }, []);
+
   if (!editing) {
     return null;
   }
 
   return (
-    <Popover.Root open={editing !== null} onOpenChange={handleOpenChange}>
-      <Popover.VirtualTrigger virtualRef={cellRef} />
-      <Popover.Content tabIndex={-1} classNames='popover-card-width'>
-        <Popover.Arrow />
-        <Popover.Viewport>
-          <Form values={formValues} schema={narrowedSchema as any} onSave={handleSave} />
-        </Popover.Viewport>
-      </Popover.Content>
+    <Popover.Root open={editing} onOpenChange={handleOpenChange}>
+      <Popover.VirtualTrigger virtualRef={anchorRef} />
+      <Popover.Portal>
+        <Popover.Content tabIndex={-1} classNames='popover-card-width density-fine'>
+          <Popover.Arrow />
+          <Popover.Viewport>
+            <Form
+              autoFocus
+              values={formValues}
+              schema={narrowedSchema as any}
+              onSave={handleSave}
+              {...formProps}
+              onQueryRefOptions={handleQueryRefOptions}
+              onCreateFromQuery={handleCreateFromQuery}
+              createOptionIcon='ph--plus--regular'
+              createOptionLabel={createOptionLabel}
+            />
+          </Popover.Viewport>
+        </Popover.Content>
+      </Popover.Portal>
     </Popover.Root>
   );
 };

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

@@ -4,25 +4,25 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Obj } from '@dxos/echo';
 import { type EchoSchema, isMutable } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { Filter, useQuery, live } from '@dxos/react-client/echo';
+import { Filter, useQuery } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { defaultRowSize, Grid, type GridEditing } from '@dxos/react-ui-grid';
-import { ViewProjection, ViewType } from '@dxos/schema';
+import { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
+import { DataType, createDefaultSchema, typenameFromQuery } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { TableCellEditor, type TableCellEditorProps } from './TableCellEditor';
 import { useTableModel } from '../../hooks';
 import { type TableFeatures } from '../../model';
-import translations from '../../translations';
-import { TableType } from '../../types';
-import { initializeTable } from '../../util';
+import { translations } from '../../translations';
+import { Table } from '../../types';
+
+import { TableCellEditor } from './TableCellEditor';
 
 type StoryProps = {
   editing: GridEditing;
@@ -32,23 +32,16 @@ const DefaultStory = ({ editing }: StoryProps) => {
   const { space } = useClientProvider();
   invariant(space);
 
-  const tables = useQuery(space, Filter.type(TableType));
-  const [table, setTable] = useState<TableType>();
+  const views = useQuery(space, Filter.type(DataType.View));
+  const [view, setView] = useState<DataType.View>();
   const [schema, setSchema] = useState<EchoSchema>();
   useEffect(() => {
-    if (space && tables.length && !table) {
-      const table = tables[0];
-      invariant(table.view);
-      setTable(table);
-      setSchema(space.db.schemaRegistry.getSchema(table.view.target!.query.typename!));
-    }
-  }, [space, tables]);
-
-  const projection = useMemo(() => {
-    if (schema && table?.view) {
-      return new ViewProjection(schema.jsonSchema, table.view.target!);
+    if (space && views.length && !view) {
+      const view = views[0];
+      setView(view);
+      setSchema(space.db.schemaRegistry.getSchema(typenameFromQuery(view.query)!));
     }
-  }, [schema, table?.view]);
+  }, [space, views, view]);
 
   const features: Partial<TableFeatures> = useMemo(
     () => ({
@@ -59,50 +52,41 @@ const DefaultStory = ({ editing }: StoryProps) => {
     [schema],
   );
 
-  const model = useTableModel({ table, projection, features });
-
-  const handleQuery: TableCellEditorProps['onQuery'] = async ({ field }) => {
-    // TODO(dmaretskyi): If no schema query nothing
-    const { objects } = await space.db.query(schema ? Filter.type(schema) : Filter.everything()).run();
-    return objects.map((obj) => {
-      const label = obj[field.referencePath ?? 'id'];
-      return {
-        label,
-        data: obj,
-      };
-    });
-  };
-
-  if (!model || !schema || !table) {
+  const model = useTableModel({ view, schema: schema?.jsonSchema, features });
+
+  if (!model || !schema || !view) {
     return <div />;
   }
 
   return (
     <div className='flex w-[300px] border border-separator' style={{ height: defaultRowSize }}>
       <Grid.Root id='test' editing={editing}>
-        <TableCellEditor model={model} onQuery={handleQuery} />
+        <TableCellEditor model={model} schema={schema} />
       </Grid.Root>
     </div>
   );
 };
 
-const meta: Meta<StoryProps> = {
-  title: 'plugins/plugin-table/TableCellEditor',
+const meta = {
+  title: 'ui/react-ui-table/TableCellEditor',
   component: DefaultStory,
   render: DefaultStory,
   parameters: { translations, layout: 'centered' },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType],
+      types: [DataType.View, Table.Table],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(Obj.make(TableType, {}));
-        const schema = await initializeTable({ client, space, table });
+        const schema = createDefaultSchema();
+        const { view } = await Table.makeView({ client, space, typename: schema.typename });
+        space.db.add(view);
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            live(schema, {
-              name: faker.person.fullName(),
+            Obj.make(schema, {
+              title: faker.person.fullName(),
+              status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
+              description: faker.lorem.sentence(),
             }),
           );
         });
@@ -111,11 +95,11 @@ const meta: Meta<StoryProps> = {
     withTheme,
     withLayout(),
   ],
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {