@dxos/react-ui-table 0.7.4-staging.f7e8224 → 0.7.5-labs.5f04cf6

package/src/index.ts

@@ -1,10 +1,12 @@
 //
 // Copyright 2024 DXOS.org
 //
+
 import translations from './translations';
 
 export * from './components';
 export * from './hooks';
+export * from './model';
 export * from './types';
 export * from './util';
 

package/src/model/index.ts

@@ -4,3 +4,4 @@
 
 export * from './table-model';
 export * from './modal-controller';
+export * from './table-presentation';

package/src/model/modal-controller.ts

@@ -3,13 +3,11 @@
 //
 
 import { signal } from '@preact/signals-core';
-import { type RefObject, type MouseEvent, type MutableRefObject } from 'react';
+import { type RefObject, type MutableRefObject } from 'react';
 
 import { type ReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 
-import { tableButtons } from '../util';
-
 export type ColumnSettingsMode = { type: 'create' } | { type: 'edit'; fieldId: string };
 
 export type ModalState =
@@ -37,55 +35,24 @@ export class ModalController {
     return this._triggerRef as RefObject<HTMLButtonElement>;
   }
 
-  public handleClick = (event: MouseEvent): boolean => {
-    const target = event.target as HTMLElement;
-
-    // TODO(thure): why not just get the value of the closest recognized attribute and `switch` on that?
-    //  Repeated querying is more error-prone and less legible, I’d think.
-
-    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;
-    }
+  public setTrigger = (trigger: HTMLElement) => {
+    this._triggerRef.current = trigger;
+  };
 
-    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;
-    }
+  public showRowMenu = (rowIndex: number) => {
+    this._state.value = { type: 'row', rowIndex };
+  };
 
-    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;
-    }
+  public showColumnMenu = (fieldId: string) => {
+    this._state.value = { type: 'column', fieldId };
+  };
 
-    const refButton = target.closest(`button[${tableButtons.referencedCell.attr}]`);
-    if (refButton) {
-      this._triggerRef.current = refButton as HTMLElement;
-      const [schemaId, targetId] = refButton.getAttribute(tableButtons.referencedCell.attr)!.split('#');
-      this._state.value = {
-        type: 'refPanel',
-        targetId,
-        typename: schemaId,
-      };
-    }
+  public showColumnCreator = () => {
+    this._state.value = { type: 'columnSettings', mode: { type: 'create' } };
+  };
 
-    return false;
+  public showReferencePanel = (targetId: string, schemaId: string) => {
+    this._state.value = { type: 'refPanel', targetId, typename: schemaId };
   };
 
   public openColumnSettings = () => {

package/src/model/selection-model.ts

@@ -17,6 +17,7 @@ export class SelectionModel<T extends BaseTableRow> extends Resource {
     if (!rows) {
       return new Set<string>();
     }
+
     const validIds = new Set(rows.map((row) => row.id));
     return new Set([...this._selection.value].filter((id) => validIds.has(id)));
   });
@@ -28,6 +29,7 @@ export class SelectionModel<T extends BaseTableRow> extends Resource {
     if (rows.length === 0) {
       return false;
     }
+
     return rows.every((row) => this._selection.value.has(row.id));
   });
 
@@ -94,6 +96,15 @@ export class SelectionModel<T extends BaseTableRow> extends Resource {
   };
 
   public setSelection = (mode: 'all' | 'none'): void => {
-    this._selection.value = mode === 'all' ? new Set(this._rows.value.map((row) => row.id)) : new Set();
+    switch (mode) {
+      case 'all': {
+        this._selection.value = new Set(this._rows.value.map((row) => row.id));
+        break;
+      }
+      case 'none': {
+        this._selection.value = new Set();
+        break;
+      }
+    }
   };
 }

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

@@ -8,8 +8,8 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { S, TypedObject } from '@dxos/echo-schema';
 import { updateCounter } from '@dxos/echo-schema/testing';
 import { registerSignalsRuntime } from '@dxos/echo-signals';
-import { createMutableSchema } from '@dxos/live-object/testing';
-import { create } from '@dxos/react-client/echo';
+import { createEchoSchema } from '@dxos/live-object/testing';
+import { create, makeRef } from '@dxos/react-client/echo';
 import { createView, ViewProjection } from '@dxos/schema';
 
 import { TableModel, type TableModelProps } from './table-model';
@@ -37,11 +37,6 @@ describe('TableModel', () => {
   });
 
   describe('methods', () => {
-    it('should set sorting', () => {
-      model.setSort('col2', 'asc');
-      expect(model.sorting).toEqual([{ columnId: 'col2', direction: 'asc' }]);
-    });
-
     it('should pin a row', () => {
       model.pinRow(1, 'top');
       expect(model.pinnedRows.top).toContain(1);
@@ -100,73 +95,6 @@ describe('TableModel', () => {
       expect(outerCounter.count).toBe(1);
       expect(innerCounter.count).toBe(1);
     });
-
-    describe('row reactivity', () => {
-      let data: any[];
-
-      beforeEach(async () => {
-        // TODO(burdon): Use generator.
-        ({ data } = create({
-          data: [
-            { col1: 'A', col2: 1, col3: true },
-            { col1: 'B', col2: 2, col3: false },
-          ],
-        }));
-
-        const model = createTableModel();
-        model.setRows(data);
-        await model.open();
-      });
-
-      it('should update with row-level reactivity', () => {
-        // Set up visible range to include our test data
-        model.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
-
-        // Trigger a row update
-        data[0].col1 = 'New Value';
-        expect(updateCount).toBe(1);
-
-        // Verify the new value through getCells
-        const cells = model.getCells({ start: { row: 0, col: 0 }, end: { row: 0, col: 0 } }, 'grid');
-        expect(cells['0,0']?.value).toBe('New Value');
-      });
-
-      it('should update reactively when adding a new row', () => {
-        // Set up visible range to include our test data
-        model.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
-
-        data.push({ col1: 'C', col2: 3, col3: true });
-        expect(updateCount).toBe(1);
-
-        const cells = model.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
-
-        // Verify the new row's data
-        expect(cells['0,2']?.value).toBe('C');
-        expect(cells['1,2']?.value).toBe('3');
-        expect(cells['2,2']?.value).toBe('true');
-      });
-
-      it('should handle combined operations reactively', () => {
-        // Set up visible range
-        model.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
-
-        // Multiple operations
-        data[0].col1 = 'Updated A';
-        data.push({ col1: 'C', col2: 3, col3: true });
-        data.splice(1, 1);
-
-        // We expect one update per operation affecting visible rows
-        expect(updateCount).toBe(3);
-
-        const cells = model.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
-
-        // Verify final state
-        expect(cells['0,0']?.value).toBe('Updated A');
-        expect(cells['0,1']?.value).toBe('C');
-        expect(cells['1,1']?.value).toBe('3');
-        expect(cells['2,1']?.value).toBe('true');
-      });
-    });
   });
 });
 
@@ -176,9 +104,9 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 }) {}
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
-  const schema = createMutableSchema(Test);
+  const schema = createEchoSchema(Test);
   const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
   const projection = new ViewProjection(schema, view);
-  const table = create(TableType, { view });
+  const table = create(TableType, { view: makeRef(view) });
   return new TableModel({ table, projection, ...props });
 };