@dxos/react-ui-table 0.7.4 → 0.7.5-main.937ce75

package/src/util/table-controls.ts

@@ -2,26 +2,90 @@
 // Copyright 2024 DXOS.org
 //
 
-export const checkboxAttributes = {
+// Core types.
+export type TableControl = 'checkbox' | 'switch';
+
+export type ControlData =
+  | { type: 'checkbox'; rowIndex: number; header?: boolean }
+  | { type: 'switch'; colIndex: number; rowIndex: number };
+
+type CommonRenderProps = {
+  checked?: boolean;
+  disabled?: boolean;
+};
+
+export type RenderCheckboxProps = CommonRenderProps & Omit<Extract<ControlData, { type: 'checkbox' }>, 'type'>;
+export type RenderSwitchProps = CommonRenderProps & Omit<Extract<ControlData, { type: 'switch' }>, 'type'>;
+
+export const CONTROL_IDENTIFIERS = {
   checkbox: 'data-table-checkbox',
-  header: 'data-table-header',
+  switch: 'data-table-switch',
 } as const;
 
-export type RenderCheckboxProps = { rowIndex: number; header?: boolean; checked?: boolean; disabled?: boolean };
+const BASE_CLASSES = {
+  checkbox: 'absolute inset-block-[.375rem] inline-end-[.375rem] ch-checkbox',
+  switch: 'absolute inset-block-[.25rem] inline-end-[.25rem] ch-checkbox--switch',
+} as const;
+
+const renderAttributes = (data: Record<string, string>) => {
+  return Object.entries(data)
+    .map(([k, v]) => `${k}="${v}"`)
+    .join(' ');
+};
+
+const renderInput = (
+  baseClass: string,
+  attrs: Record<string, string>,
+  checked = false,
+  disabled = false,
+  preventToggle = false,
+  testId: string,
+) => {
+  return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? 'checked' : ''} ${preventToggle ? 'onclick="return false"' : ''} ${disabled ? 'disabled' : ''} data-testid="${testId}"/>`;
+};
+
 export const renderCheckbox = ({
   rowIndex,
   header = false,
   checked = false,
   disabled = false,
 }: RenderCheckboxProps): string => {
-  const baseClasses = 'absolute inset-block-[6px] inline-end-[6px] ch-checkbox' as const;
-  const { attributes } = tableControls.checkbox;
-  return `<input type="checkbox" class="${baseClasses}" ${attributes.checkbox}="${rowIndex}" ${header ? attributes.header : ''} ${checked ? 'checked' : ''} ${disabled ? 'disabled' : ''} data-testid="table-selection"/>`;
+  const attrs = {
+    [CONTROL_IDENTIFIERS.checkbox]: '',
+    'data-row-index': rowIndex.toString(),
+    ...(header && { 'data-header': '' }),
+  };
+
+  return renderInput(BASE_CLASSES.checkbox, attrs, checked, disabled, true, 'table-selection');
+};
+
+export const renderSwitch = ({ colIndex, rowIndex, checked = false, disabled = false }: RenderSwitchProps): string => {
+  const attrs = {
+    [CONTROL_IDENTIFIERS.switch]: '',
+    'data-row-index': rowIndex.toString(),
+    'data-col-index': colIndex.toString(),
+  };
+
+  return renderInput(BASE_CLASSES.switch, attrs, checked, disabled, true, 'table-switch');
 };
 
 export const tableControls = {
   checkbox: {
-    attributes: checkboxAttributes,
+    attr: CONTROL_IDENTIFIERS.checkbox,
     render: renderCheckbox,
+    getData: (el: HTMLElement): Extract<ControlData, { type: 'checkbox' }> => ({
+      type: 'checkbox',
+      rowIndex: Number(el.getAttribute('data-row-index')),
+      header: el.hasAttribute('data-header'),
+    }),
+  },
+  switch: {
+    attr: CONTROL_IDENTIFIERS.switch,
+    render: renderSwitch,
+    getData: (el: HTMLElement): Extract<ControlData, { type: 'switch' }> => ({
+      type: 'switch',
+      rowIndex: Number(el.getAttribute('data-row-index')),
+      colIndex: Number(el.getAttribute('data-col-index')),
+    }),
   },
 } as const;

package/src/util/table.ts

@@ -8,14 +8,14 @@ import {
   FormatEnum,
   type JsonPath,
   type JsonProp,
-  type MutableSchema,
+  type EchoSchema,
   S,
   TypedObject,
   TypeEnum,
 } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 import { PublicKey } from '@dxos/react-client';
-import { create, type Space } from '@dxos/react-client/echo';
+import { create, makeRef, type Space } from '@dxos/react-client/echo';
 import { createFieldId, createView, ViewProjection } from '@dxos/schema';
 
 import { type TableType } from '../types';
@@ -28,8 +28,12 @@ type InitialiseTableProps = {
 
 // TODO(burdon): Pass in type.
 // TODO(burdon): User should determine typename.
-export const initializeTable = ({ space, table, initialRow = true }: InitialiseTableProps): MutableSchema => {
-  log.info('initializeTable', { table });
+export const initializeTable = async ({
+  space,
+  table,
+  initialRow = true,
+}: InitialiseTableProps): Promise<EchoSchema> => {
+  log('initializeTable', { table });
 
   const ContactSchema = TypedObject({
     typename: `example.com/type/${PublicKey.random().truncate()}`,
@@ -38,24 +42,28 @@ export const initializeTable = ({ space, table, initialRow = true }: InitialiseT
     name: S.optional(S.String).annotations({
       [AST.TitleAnnotationId]: 'Name',
     }),
+    active: S.optional(S.Boolean),
     email: S.optional(Format.Email),
     salary: S.optional(Format.Currency()).annotations({
       [AST.TitleAnnotationId]: 'Salary',
     }), // TODO(burdon): Should default to prop name?
   });
 
-  const contactSchema = space.db.schemaRegistry.addSchema(ContactSchema);
-  table.view = createView({
-    name: 'Test',
-    typename: contactSchema.typename,
-    jsonSchema: contactSchema.jsonSchema,
-    fields: ['name', 'email', 'salary'],
-  });
+  const [contactSchema] = await space.db.schemaRegistry.register([ContactSchema]);
+
+  table.view = makeRef(
+    createView({
+      name: 'Test',
+      typename: contactSchema.typename,
+      jsonSchema: contactSchema.jsonSchema,
+      fields: ['name', 'active', 'email', 'salary'],
+    }),
+  );
 
-  const projection = new ViewProjection(contactSchema, table.view!);
+  const projection = new ViewProjection(contactSchema, table.view.target!);
   projection.setFieldProjection({
     field: {
-      id: table.view.fields[2].id,
+      id: table.view.target!.fields.find((f) => f.path === 'salary')!.id,
       path: 'salary' as JsonPath,
       size: 150,
     },