@dxos/react-ui-table 0.8.3-main.672df60 → 0.8.3-staging.0fa589b

package/src/model/table-model.ts

@@ -6,7 +6,15 @@ import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-c
 
 import { type Space } from '@dxos/client/echo';
 import { Resource } from '@dxos/context';
-import { type FieldSortType, FormatEnum, getValue, setValue, type JsonProp } from '@dxos/echo-schema';
+import {
+  type FieldSortType,
+  FormatEnum,
+  getValue,
+  setValue,
+  type JsonProp,
+  getSnapshot,
+  getSchema,
+} from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { isLiveObject, makeRef } from '@dxos/live-object';
 import { formatForEditing, parseValue } from '@dxos/react-ui-form';
@@ -16,13 +24,16 @@ import {
   type DxGridPlanePosition,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import { type ViewType, type ViewProjection } from '@dxos/schema';
+import { type ViewType, type ViewProjection, type PropertyType, validateSchema } from '@dxos/schema';
 
 import { type SelectionMode, SelectionModel } from './selection-model';
 import { TableSorting } from './table-sorting';
 import { touch } from '../util';
 import { extractTagIds } from '../util/tag';
 
+// TODO(ZaymonFC): Use a common type?
+export type ValidationResult = { valid: true } | { valid: false; error: string };
+
 // TODO(burdon): Use schema types.
 export type TableRow = Record<JsonProp, any> & { id: string };
 
@@ -330,54 +341,58 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     }
   };
 
-  public setCellData = ({ col, row }: DxGridPlanePosition, value: any): void => {
+  public validateCellData = async ({ col, row }: DxGridPlanePosition, value: any): Promise<ValidationResult> => {
     const rowIdx = this._sorting.getDataIndex(row);
     const fields = this._view?.fields ?? [];
     if (col < 0 || col >= fields.length) {
-      return;
+      return { valid: false, error: 'Invalid column index' };
     }
 
     const field = fields[col];
     const { props } = this._projection.getFieldProjection(field.id);
-    switch (props.format) {
-      case FormatEnum.Ref: {
-        // TODO(ZaymonFC): This get's called an additional time by the cell editor onBlur, but with the cell editors
-        //   plain string value. Maybe onBlur should be called with the actual value?
-        if (isLiveObject(value)) {
-          setValue(this._rows.value[rowIdx], field.path, makeRef(value));
-        }
-        break;
-      }
 
-      case FormatEnum.SingleSelect: {
-        const ids = extractTagIds(value);
-        if (ids && ids.length > 0) {
-          setValue(this._rows.value[rowIdx], field.path, ids[0]);
-        }
-        break;
-      }
+    const currentRow = this._rows.value[rowIdx];
+    invariant(currentRow, 'Invalid row index');
 
-      case FormatEnum.MultiSelect: {
-        const ids = extractTagIds(value);
-        if (ids) {
-          setValue(this._rows.value[rowIdx], field.path, ids);
-        }
-        break;
-      }
+    // Get a snapshot of the current object.
+    const snapshot = getSnapshot(currentRow);
+    const transformedValue = editorTextToCellValue(props, value);
 
-      default: {
-        setValue(
-          this._rows.value[rowIdx],
-          field.path,
-          parseValue({
-            type: props.type,
-            format: props.format,
-            value,
-          }),
-        );
-        break;
-      }
+    // Set the proposed value.
+    setValue(snapshot, field.path, transformedValue);
+
+    const schema = getSchema(currentRow);
+    invariant(schema);
+
+    const validationResult = validateSchema(schema, snapshot);
+    if (validationResult && validationResult.length > 0) {
+      const error = validationResult[0];
+      invariant(error.path === field.path);
+      return { valid: false, error: error.message };
+    }
+
+    return { valid: true };
+  };
+
+  public setCellData = ({ col, row }: DxGridPlanePosition, value: any): void => {
+    const rowIdx = this._sorting.getDataIndex(row);
+    const fields = this._view?.fields ?? [];
+    if (col < 0 || col >= fields.length) {
+      return;
+    }
+
+    const field = fields[col];
+    const { props } = this._projection.getFieldProjection(field.id);
+    const transformedValue = editorTextToCellValue(props, value);
+
+    // Special handling for Ref format to preserve existing behavior
+    if (props.format === FormatEnum.Ref && !isLiveObject(value)) {
+      // TODO(ZaymonFC): This get's called an additional time by the cell editor onBlur, but with the cell editors
+      //   plain string value. Maybe onBlur should be called with the actual value?
+      return;
     }
+
+    setValue(this._rows.value[rowIdx], field.path, transformedValue);
   };
 
   /**
@@ -446,3 +461,37 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     this._sorting.save();
   }
 }
+
+const editorTextToCellValue = (props: PropertyType, value: any): any => {
+  switch (props.format) {
+    case FormatEnum.Ref: {
+      if (isLiveObject(value)) {
+        return makeRef(value);
+      } else {
+        return value;
+      }
+    }
+
+    case FormatEnum.SingleSelect: {
+      const ids = extractTagIds(value);
+      if (ids && ids.length > 0) {
+        return ids[0];
+      } else {
+        return value;
+      }
+    }
+
+    case FormatEnum.MultiSelect: {
+      const ids = extractTagIds(value);
+      return ids || value;
+    }
+
+    default: {
+      return parseValue({
+        type: props.type,
+        format: props.format,
+        value,
+      });
+    }
+  }
+};

package/src/model/table-presentation.test.ts

@@ -5,8 +5,9 @@
 import { Schema } from 'effect';
 import { describe, expect, it, beforeEach } from 'vitest';
 
+import { Obj, Ref } from '@dxos/echo';
 import { TypedObject } from '@dxos/echo-schema';
-import { live, makeRef } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
 import { createView, ViewProjection } from '@dxos/schema';
 
@@ -98,6 +99,6 @@ const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
   const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
   const projection = new ViewProjection(schema.jsonSchema, view);
-  const table = live(TableType, { view: makeRef(view) });
+  const table = Obj.make(TableType, { view: Ref.make(view) });
   return new TableModel({ id: table.id, view, projection, ...props });
 };

package/src/model/table-presentation.ts

@@ -171,7 +171,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
         const targetObj = getValue(obj, field.path)?.target;
         if (targetObj) {
           const dxn = getObjectDXN(targetObj)?.toString();
-          cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button block is-6 pli-[3px] plb-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+          cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
         }
       }
 

package/src/types/table.ts

@@ -5,7 +5,8 @@
 import { Schema } from 'effect';
 
 // import { ThreadType } from '@dxos/plugin-space/types';
-import { ObjectId, Ref, Expando, EchoObject, LabelAnnotation } from '@dxos/echo-schema';
+import { Type } from '@dxos/echo';
+import { ObjectId, Ref, Expando, LabelAnnotation } from '@dxos/echo-schema';
 import { ViewType } from '@dxos/schema';
 
 export const TableSchema = Schema.Struct({
@@ -18,7 +19,7 @@ export const TableSchema = Schema.Struct({
 
 // TODO(burdon): Move out of react-ui-xxx.
 export const TableType = TableSchema.pipe(
-  EchoObject({
+  Type.Obj({
     typename: 'dxos.org/type/Table',
     version: '0.1.0',
   }),

package/src/util/dynamic-table.ts

@@ -4,9 +4,9 @@
 
 import { type Schema } from 'effect';
 
+import { Obj, Ref } from '@dxos/echo';
 import { getTypename, toJsonSchema } from '@dxos/echo-schema';
 import type { JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
-import { live, makeRef } from '@dxos/live-object';
 import {
   createView,
   getSchemaFromPropertyDefinitions,
@@ -69,7 +69,7 @@ export const makeDynamicTable = ({
     ...(properties && { fields: properties.map((property) => property.name) }),
   });
 
-  const table = live(TableType, { name: 'dynamic-table', view: makeRef(view) });
+  const table = Obj.make(TableType, { name: 'dynamic-table', view: Ref.make(view) });
   const projection = new ViewProjection(jsonSchema, view);
   if (properties && view.fields) {
     setProperties(view, projection, properties);

package/src/util/table.ts

@@ -56,7 +56,7 @@ export const initializeTable = async ({
 
     return schema;
   } else {
-    const [schema] = await space.db.schemaRegistry.register([ContactSchema]);
+    const [schema] = await space.db.schemaRegistry.register([createContactSchema()]);
     const fields = ContactFields;
 
     table.view = Ref.make(
@@ -79,15 +79,16 @@ export const initializeTable = async ({
   }
 };
 
-const ContactSchema = TypedObject({
-  typename: `example.com/type/${PublicKey.random().truncate()}`,
-  version: '0.1.0',
-})({
-  name: Schema.optional(Schema.String).annotations({ title: 'Name' }),
-  active: Schema.optional(Schema.Boolean),
-  email: Schema.optional(Format.Email),
-  salary: Schema.optional(Format.Currency()).annotations({ title: 'Salary' }),
-});
+const createContactSchema = () =>
+  TypedObject({
+    typename: `example.com/type/${PublicKey.random().truncate()}`,
+    version: '0.1.0',
+  })({
+    name: Schema.optional(Schema.String).annotations({ title: 'Name' }),
+    active: Schema.optional(Schema.Boolean).annotations({ title: 'Active' }),
+    email: Schema.optional(Format.Email),
+    salary: Schema.optional(Format.Currency()).annotations({ title: 'Salary' }),
+  });
 
 const ContactFields = ['name', 'email', 'salary', 'active'];
 

package/dist/lib/browser/chunk-U6LL2AVU.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\n// import { ThreadType } from '@dxos/plugin-space/types';\nimport { ObjectId, Ref, Expando, EchoObject, LabelAnnotation } from '@dxos/echo-schema';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = Schema.Struct({\n  id: ObjectId,\n  name: Schema.optional(Schema.String),\n  view: Schema.optional(Ref(ViewType)),\n  // TODO(burdon): Document why threads is included here?\n  threads: Schema.optional(Schema.Array(Ref(Expando /* ThreadType */))),\n}).pipe(LabelAnnotation.set(['name']));\n\n// TODO(burdon): Move out of react-ui-xxx.\nexport const TableType = TableSchema.pipe(\n  EchoObject({\n    typename: 'dxos.org/type/Table',\n    version: '0.1.0',\n  }),\n);\nexport interface TableType extends Schema.Schema.Type<typeof TableType> {}\n"],
-  "mappings": ";AAIA,SAASA,cAAc;AAGvB,SAASC,UAAUC,KAAKC,SAASC,YAAYC,uBAAuB;AACpE,SAASC,gBAAgB;AAElB,IAAMC,cAAcC,OAAOC,OAAO;EACvCC,IAAIC;EACJC,MAAMJ,OAAOK,SAASL,OAAOM,MAAM;EACnCC,MAAMP,OAAOK,SAASG,IAAIC,QAAAA,CAAAA;;EAE1BC,SAASV,OAAOK,SAASL,OAAOW,MAAMH;IAAII;;EAAsB,CAAA,CAAA;AAClE,CAAA,EAAGC,KAAKC,gBAAgBC,IAAI;EAAC;CAAO,CAAA;AAG7B,IAAMC,YAAYjB,YAAYc,KACnCI,WAAW;EACTC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;",
-  "names": ["Schema", "ObjectId", "Ref", "Expando", "EchoObject", "LabelAnnotation", "ViewType", "TableSchema", "Schema", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "Expando", "pipe", "LabelAnnotation", "set", "TableType", "EchoObject", "typename", "version"]
-}

package/dist/lib/node/chunk-CXDGXPM6.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\n// import { ThreadType } from '@dxos/plugin-space/types';\nimport { ObjectId, Ref, Expando, EchoObject, LabelAnnotation } from '@dxos/echo-schema';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = Schema.Struct({\n  id: ObjectId,\n  name: Schema.optional(Schema.String),\n  view: Schema.optional(Ref(ViewType)),\n  // TODO(burdon): Document why threads is included here?\n  threads: Schema.optional(Schema.Array(Ref(Expando /* ThreadType */))),\n}).pipe(LabelAnnotation.set(['name']));\n\n// TODO(burdon): Move out of react-ui-xxx.\nexport const TableType = TableSchema.pipe(\n  EchoObject({\n    typename: 'dxos.org/type/Table',\n    version: '0.1.0',\n  }),\n);\nexport interface TableType extends Schema.Schema.Type<typeof TableType> {}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAIA,oBAAuB;AAGvB,yBAAoE;AACpE,oBAAyB;AAElB,IAAMA,cAAcC,qBAAOC,OAAO;EACvCC,IAAIC;EACJC,MAAMJ,qBAAOK,SAASL,qBAAOM,MAAM;EACnCC,MAAMP,qBAAOK,aAASG,wBAAIC,sBAAAA,CAAAA;;EAE1BC,SAASV,qBAAOK,SAASL,qBAAOW,UAAMH;IAAII;;EAAsB,CAAA,CAAA;AAClE,CAAA,EAAGC,KAAKC,mCAAgBC,IAAI;EAAC;CAAO,CAAA;AAG7B,IAAMC,YAAYjB,YAAYc,SACnCI,+BAAW;EACTC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;",
-  "names": ["TableSchema", "Schema", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "Expando", "pipe", "LabelAnnotation", "set", "TableType", "EchoObject", "typename", "version"]
-}

package/dist/lib/node-esm/chunk-EFSM52KQ.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\n// import { ThreadType } from '@dxos/plugin-space/types';\nimport { ObjectId, Ref, Expando, EchoObject, LabelAnnotation } from '@dxos/echo-schema';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = Schema.Struct({\n  id: ObjectId,\n  name: Schema.optional(Schema.String),\n  view: Schema.optional(Ref(ViewType)),\n  // TODO(burdon): Document why threads is included here?\n  threads: Schema.optional(Schema.Array(Ref(Expando /* ThreadType */))),\n}).pipe(LabelAnnotation.set(['name']));\n\n// TODO(burdon): Move out of react-ui-xxx.\nexport const TableType = TableSchema.pipe(\n  EchoObject({\n    typename: 'dxos.org/type/Table',\n    version: '0.1.0',\n  }),\n);\nexport interface TableType extends Schema.Schema.Type<typeof TableType> {}\n"],
-  "mappings": ";;;AAIA,SAASA,cAAc;AAGvB,SAASC,UAAUC,KAAKC,SAASC,YAAYC,uBAAuB;AACpE,SAASC,gBAAgB;AAElB,IAAMC,cAAcC,OAAOC,OAAO;EACvCC,IAAIC;EACJC,MAAMJ,OAAOK,SAASL,OAAOM,MAAM;EACnCC,MAAMP,OAAOK,SAASG,IAAIC,QAAAA,CAAAA;;EAE1BC,SAASV,OAAOK,SAASL,OAAOW,MAAMH;IAAII;;EAAsB,CAAA,CAAA;AAClE,CAAA,EAAGC,KAAKC,gBAAgBC,IAAI;EAAC;CAAO,CAAA;AAG7B,IAAMC,YAAYjB,YAAYc,KACnCI,WAAW;EACTC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;",
-  "names": ["Schema", "ObjectId", "Ref", "Expando", "EchoObject", "LabelAnnotation", "ViewType", "TableSchema", "Schema", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "Expando", "pipe", "LabelAnnotation", "set", "TableType", "EchoObject", "typename", "version"]
-}