@dxos/react-ui-table 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/src/_deprecated/helpers.tsx

@@ -1,526 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { useFocusFinders } from '@fluentui/react-tabster';
-import { Check, ClipboardText, type Icon, X } from '@phosphor-icons/react';
-import {
-  createColumnHelper,
-  type ColumnDef,
-  type ColumnMeta,
-  type RowData,
-  type ColumnHelper,
-  type CellContext,
-} from '@tanstack/react-table';
-import { format } from 'date-fns/format';
-import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-import { type PublicKey } from '@dxos/keys';
-import { log } from '@dxos/log';
-import { type ClassNameValue, Input, Tooltip } from '@dxos/react-ui';
-import { defaultSizeRow } from '@dxos/react-ui-grid';
-import { getSize, mx } from '@dxos/react-ui-theme';
-
-import { CellCombobox, useTableContext } from './components';
-import { textPadding } from './theme';
-
-export type ValueUpdater<TData extends RowData, TValue> = (row: TData, id: string, value: TValue) => void;
-
-export const createColumnBuilder = <TData extends RowData>() => ({
-  helper: createColumnHelper<TData>(),
-  builder: new ColumnBuilder<TData>(),
-});
-
-// TODO(thure): This interface is redundant, e.g. `classNames` == `meta.cell.classNames`
-/**
- * NOTE: Can use `meta` for custom properties.
- */
-export type BaseColumnOptions<TData, TValue> = Partial<ColumnDef<TData, TValue>> & {
-  meta?: ColumnMeta<TData, TValue>;
-  label?: string;
-  classNames?: ClassNameValue;
-  onUpdate?: ValueUpdater<TData, TValue | undefined>;
-};
-
-// TODO(burdon): Better abstraction?
-export type SearchListQueryModel<TData extends RowData> = {
-  getId(object: TData): string;
-  getText(object: TData): string;
-  query(text?: string): Promise<TData[]>;
-};
-
-export type ComboboxColumnOptions<TData extends RowData> = BaseColumnOptions<TData, any> & {
-  model: SearchListQueryModel<TData>;
-};
-
-export type StringColumnOptions<TData extends RowData> = BaseColumnOptions<TData, string> & {};
-export type SelectRowColumnOptions<TData extends RowData> = BaseColumnOptions<TData, string> & {};
-
-export type NumberColumnOptions<TData extends RowData> = BaseColumnOptions<TData, number> & {
-  digits?: number;
-};
-
-export type KeyColumnOptions<TData extends RowData> = BaseColumnOptions<TData, PublicKey> & {
-  tooltip?: boolean;
-};
-
-export type DateColumnOptions<TData extends RowData> = BaseColumnOptions<TData, Date> & {
-  format?: string;
-  relative?: boolean;
-};
-
-export type SwitchColumnOptions<TData extends RowData> = BaseColumnOptions<TData, boolean> & {};
-
-export type IconColumnOptions<TData extends RowData> = BaseColumnOptions<TData, boolean> & {
-  on?: {
-    Icon?: Icon;
-    className?: string;
-  };
-  off?: {
-    Icon?: Icon;
-    className?: string;
-  };
-};
-
-const ComboboxBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, TData>) => {
-  const { model, onUpdate } = cellContext.column.columnDef.meta as ColumnMeta<TData, TData>;
-  return model ? (
-    <CellCombobox<TData>
-      model={model}
-      value={cellContext.getValue()}
-      onValueChange={(value) => onUpdate?.(cellContext.row.original, cellContext.column.id, value)}
-    />
-  ) : null;
-};
-
-const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, string>) => {
-  const ref = useRef<HTMLInputElement>(null);
-  const { findPrevFocusable } = useFocusFinders();
-
-  const { onUpdate, cell } = cellContext.column.columnDef.meta as ColumnMeta<TData, string>;
-
-  // https://tanstack.com/table/v8/docs/examples/react/editable-data
-  const initialValue = cellContext.getValue();
-
-  const getInitialValue = useCallback(() => {
-    // TODO(burdon): Temporary shim for automerge.
-    return (initialValue as any)?.content ?? initialValue;
-  }, [initialValue]);
-
-  const [value, setValue] = useState(getInitialValue);
-
-  // Update value if initialValue changes externally (cell reactivity).
-  useEffect(() => setValue(getInitialValue()), [getInitialValue]);
-
-  const handleSave = () => {
-    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
-
-    if (value !== initialValue) {
-      onUpdate?.(cellContext.row.original, cellContext.column.id, value);
-    }
-  };
-
-  const handleCancel = () => setValue(initialValue);
-
-  let placeholder = false;
-  const columns = cellContext.table.getVisibleFlatColumns();
-
-  // Calling getRowModel is expensive, so only do it when we're a cell in the first position.
-  if (columns[0].id === cellContext.column.id) {
-    const rowCount = cellContext.table.getRowModel().rows.length;
-    placeholder = cellContext.row.index === rowCount - 1 && columns[0].id === cellContext.column.id;
-  }
-
-  // TODO(burdon): Don't render inputs unless mouse over (Show ellipsis when div)?
-  return (
-    <Input.Root>
-      <Input.TextInput
-        ref={ref}
-        variant='subdued'
-        placeholder={placeholder ? 'Add row...' : undefined}
-        classNames={['is-full', textPadding, cell?.classNames]}
-        value={value ?? ''}
-        onBlur={handleSave}
-        onChange={(event) => setValue(event.target.value)}
-        onKeyDown={(event) => (event.key === 'Enter' && handleSave()) || (event.key === 'Escape' && handleCancel())}
-        autoComplete='off'
-      />
-    </Input.Root>
-  );
-};
-
-const parseNumber = (text?: string) => (text?.trim().length ? Number(text) : NaN);
-
-const displayNumber = (value?: number, digits?: number) =>
-  value || value === 0
-    ? value.toLocaleString(undefined, {
-        minimumFractionDigits: digits ?? 0,
-        maximumFractionDigits: digits ?? 2,
-      })
-    : '';
-
-const NumberBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, number>) => {
-  const { onUpdate, digits } = cellContext.column.columnDef.meta as ColumnMeta<TData, string>;
-  const value = cellContext.getValue();
-  const [text, setText] = useState<string>(displayNumber(value, digits));
-  const { findPrevFocusable } = useFocusFinders();
-  const ref = useRef<HTMLInputElement | null>(null);
-
-  // Update display value if `digits` changes and input is not in focus.
-  useEffect(() => {
-    (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
-  }, [digits, value]);
-
-  const handleEdit = () => setText(value !== undefined ? String(value) : '');
-
-  // TODO(burdon): Property is encoded as float (e.g., 6.1 => 6.099)
-  const handleSave = () => {
-    const nextValue = parseNumber(text);
-
-    if (!isNaN(nextValue)) {
-      onUpdate?.(cellContext.row.original, cellContext.column.id, nextValue);
-      setText(displayNumber(nextValue, digits));
-    } else {
-      // Reset the text to display the original value without updating the model.
-      setText(displayNumber(value, digits));
-    }
-
-    // Shift focus only if input is focused on save (e.g. on `Enter`).
-    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
-  };
-
-  const _handleCancel = () => {
-    setText(displayNumber(value, digits));
-    ref.current && findPrevFocusable(ref.current)?.focus();
-  };
-
-  return (
-    <Input.Root>
-      <Input.TextInput
-        ref={ref}
-        variant='subdued'
-        value={text}
-        classNames={['is-full text-end font-mono', textPadding]}
-        onBlur={handleSave}
-        onFocus={handleEdit}
-        onChange={({ target: { value } }) => setText(value)}
-        onKeyDown={(event) => {
-          // TODO(thure): `Escape` is reserved for blurring the input and moving focus to the cell.
-          return /* (event.key === 'Escape' && handleCancel()) || */ event.key === 'Enter' && handleSave();
-        }}
-        autoComplete='off'
-      />
-    </Input.Root>
-  );
-};
-
-const RowSelectorBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, unknown>) => {
-  const { cell } = cellContext.column.columnDef.meta as ColumnMeta<TData, unknown>;
-  const { row } = cellContext;
-
-  const checked = row.getCanSelect()
-    ? row.getIsSelected()
-    : row.getCanSelectSubRows() && (row.getIsSomeSelected() ? 'indeterminate' : row.getIsAllSubRowsSelected());
-
-  return (
-    <div className='flex justify-center w-full h-full' role='presentation'>
-      <Input.Root>
-        <Input.Checkbox
-          size={4}
-          classNames={[cell?.classNames]}
-          checked={checked}
-          onCheckedChange={(event) => {
-            if (row.getCanSelect()) {
-              row.getToggleSelectedHandler()(event);
-            }
-          }}
-          disabled={!(row.getCanSelect() || row.getCanSelectSubRows())}
-        />
-      </Input.Root>
-    </div>
-  );
-};
-
-const SwitchBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, boolean>) => {
-  const { onUpdate } = cellContext.column.columnDef.meta as ColumnMeta<TData, boolean>;
-  const value = cellContext.getValue();
-  return (
-    <Input.Root>
-      <Input.Switch
-        classNames='block mli-auto'
-        onClick={(event) => event.stopPropagation()}
-        disabled={!onUpdate}
-        checked={!!value}
-        onCheckedChange={(value) => {
-          onUpdate?.(cellContext.row.original, cellContext.column.id, !!value);
-        }}
-      />
-    </Input.Root>
-  );
-};
-
-/**
- * Util to create column definitions.
- */
-export class ColumnBuilder<TData extends RowData> {
-  /**
-   * Combobox value
-   */
-  combobox({
-    label,
-    classNames,
-    model,
-    onUpdate,
-    ...props
-  }: ComboboxColumnOptions<TData>): Partial<ColumnDef<TData, any>> {
-    return {
-      minSize: 100,
-      header: (column) => {
-        return label ?? column.header.id;
-      },
-      cell:
-        model && onUpdate
-          ? ComboboxBuilderCell
-          : (cellContext) => {
-              const cellValue = cellContext.getValue();
-              return <div className={mx('truncate', classNames)}>{cellValue ? model?.getText(cellValue) : ''}</div>;
-            },
-      ...props,
-      meta: {
-        ...props.meta,
-        model,
-        onUpdate,
-        cell: { classNames, ...props.meta?.cell },
-      },
-    };
-  }
-
-  /**
-   * String formats.
-   */
-  string({ label, classNames, onUpdate, ...props }: StringColumnOptions<TData> = {}): Partial<
-    ColumnDef<TData, string>
-  > {
-    return {
-      minSize: 100,
-      // TODO(burdon): Default.
-      header: (column) => {
-        return label ?? column.header.id;
-      },
-      cell: onUpdate
-        ? StringBuilderCell
-        : (cell) => {
-            let value = cell.getValue();
-            // TODO(burdon): Hack to support automerge.
-            if (typeof value === 'object' && (value as any)?.type === 'dxos.Text.v0') {
-              value = (value as any).content;
-            }
-
-            return <div className={mx('truncate', textPadding, classNames)}>{value}</div>;
-          },
-      ...props,
-      meta: {
-        ...props.meta,
-        onUpdate,
-        cell: { ...props.meta?.cell, classNames },
-      },
-    };
-  }
-
-  /**
-   * Number formats.
-   */
-  number({ label, minSize, classNames, digits, onUpdate, ...props }: NumberColumnOptions<TData> = {}): Partial<
-    ColumnDef<TData, number>
-  > {
-    return {
-      size: 100,
-      minSize: 100,
-      header: (cell) => label ?? cell.header.id,
-      cell: NumberBuilderCell,
-      ...props,
-      meta: {
-        ...props.meta,
-        onUpdate,
-        digits,
-        header: { ...props.meta?.header },
-        cell: { ...props.meta?.cell, classNames },
-      },
-    };
-  }
-
-  /**
-   * Date formats.
-   */
-  // TODO(burdon): Date picker (pluggable renderers?)
-  date({ label, format: formatSpec, relative, classNames, ...props }: DateColumnOptions<TData> = {}): Partial<
-    ColumnDef<TData, Date>
-  > {
-    return {
-      size: 220, // TODO(burdon): Depends on format.
-      minSize: 100,
-      header: (cell) => label ?? cell.header.id,
-      cell: (cell) => {
-        const value = cell.getValue();
-
-        try {
-          const str = value
-            ? formatSpec
-              ? format(value, formatSpec)
-              : relative
-                ? formatDistanceToNow(value, { addSuffix: true })
-                : value.toISOString()
-            : undefined;
-
-          return <div className={mx(textPadding, classNames)}>{str}</div>;
-        } catch (err) {
-          log.info('formatError', { value });
-          return null;
-        }
-      },
-      ...props,
-      meta: { ...props.meta, cell: { ...props.meta?.cell, classNames } },
-    };
-  }
-
-  /**
-   * PublicKey with tooltip.
-   */
-  key({ label, tooltip, classNames, ...props }: KeyColumnOptions<TData> = {}): Partial<ColumnDef<TData, PublicKey>> {
-    return {
-      size: 94,
-      minSize: 94,
-      header: (cell) => label ?? cell.header.id,
-      cell: (cell) => {
-        const value = cell.getValue();
-        if (!value) {
-          return;
-        }
-
-        // TODO(burdon): Factor out styles.
-        const element = value.truncate();
-        if (!tooltip) {
-          return element;
-        }
-
-        return (
-          <Tooltip.Provider>
-            <Tooltip.Root>
-              <Tooltip.Trigger>{element}</Tooltip.Trigger>
-              <Tooltip.Portal>
-                <Tooltip.Content side='right'>
-                  <Tooltip.Arrow />
-                  <ClipboardText
-                    onClick={(ev) => {
-                      ev.stopPropagation(); // Prevent select row.
-                      void navigator.clipboard.writeText(value.toHex());
-                    }}
-                  />
-                </Tooltip.Content>
-              </Tooltip.Portal>
-            </Tooltip.Root>
-          </Tooltip.Provider>
-        );
-      },
-      ...props,
-      meta: { ...props.meta, cell: { ...props.meta?.cell, classNames: ['font-mono', textPadding, classNames] } },
-    };
-  }
-
-  /**
-   * Row selector
-   */
-  selectRow({ classNames, onUpdate, id = 'selectRow' }: SelectRowColumnOptions<TData> = {}): Parameters<
-    ColumnHelper<TData>['display']
-  >[0] {
-    return {
-      id,
-      size: defaultSizeRow,
-      enableResizing: false,
-      meta: { onUpdate, cell: { classNames } },
-      header: ({ table }) => {
-        const { rowsSelectable } = useTableContext();
-        const checked = table.getIsSomeRowsSelected() ? 'indeterminate' : table.getIsAllRowsSelected();
-
-        return rowsSelectable === 'multi' ? (
-          <div className='flex justify-center w-full h-full' role='presentation'>
-            <Input.Root>
-              <Input.Checkbox
-                size={4}
-                classNames={['mli-auto', classNames]}
-                checked={checked}
-                onCheckedChange={() => table.toggleAllRowsSelected()}
-              />
-            </Input.Root>
-          </div>
-        ) : null;
-      },
-      cell: RowSelectorBuilderCell,
-    };
-  }
-
-  /**
-   * Switch
-   */
-  switch({ label, classNames, onUpdate, ...props }: SwitchColumnOptions<TData> = {}): Partial<
-    ColumnDef<TData, boolean>
-  > {
-    return {
-      size: 50,
-      minSize: 50,
-      header: (column) => label ?? column.header.id,
-      // TODO(zan): Implement sort algorithm.
-      enableSorting: true,
-      cell: SwitchBuilderCell,
-      ...props,
-      meta: { ...props.meta, onUpdate, cell: { ...props.meta?.cell, classNames: [textPadding, classNames] } },
-    };
-  }
-
-  /**
-   * Icon based on boolean value.
-   */
-  icon({ label, size, on, off, ...props }: IconColumnOptions<TData> = {}): Partial<ColumnDef<TData, boolean>> {
-    const IconOn = on?.Icon ?? Check;
-    const IconOff = off?.Icon ?? X;
-    return {
-      size: size ?? defaultSizeRow,
-      // TODO(zan): Implement sort algorithm.
-      enableSorting: false,
-      header: (column) => <div className={'justify-center'}>{label ?? column.header.id}</div>,
-      cell: (cell) => {
-        const value = cell.getValue();
-        if (value) {
-          return <IconOn className={mx('block mli-auto', getSize(6), on?.className ?? 'text-green-700')} />;
-        } else if (value === false) {
-          return <IconOff className={mx('block mli-auto', getSize(6), off?.className ?? 'text-red-700')} />;
-        } else {
-          return null;
-        }
-      },
-      ...props,
-    };
-  }
-
-  /**
-   * This display column type is for nested/unhandled data to appear as JSON.
-   */
-  json({ label, classNames, ...props }: KeyColumnOptions<TData> = {}): Partial<ColumnDef<TData, PublicKey>> {
-    return {
-      size: 120,
-      minSize: 120,
-      header: (cell) => label ?? cell.header.id,
-      cell: (cell) => {
-        const value = cell.getValue();
-        return (
-          <div className='overflow-scroll'>
-            <code className='text-xs'>{JSON.stringify(value)}</code>
-          </div>
-        );
-      },
-      ...props,
-      meta: { ...props.meta, cell: { ...props.meta?.cell, classNames: ['font-mono', textPadding, classNames] } },
-    };
-  }
-}

package/src/_deprecated/hooks/index.ts

@@ -1,8 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './useColumnSizing';
-export * from './useColumnSorting';
-export * from './usePinLastRow';
-export * from './useRowSelection';

package/src/_deprecated/hooks/useColumnSizing.ts

@@ -1,46 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type ColumnSizingInfoState, type ColumnSizingState } from '@tanstack/react-table';
-import { useCallback, useEffect, useState } from 'react';
-
-import { useOnTransition } from '@dxos/react-ui';
-
-import { type TableColumnDef } from '../types';
-
-export const useColumnResizing = ({
-  columns,
-  onColumnResize,
-}: {
-  columns: TableColumnDef<any>[];
-  onColumnResize: ((state: Record<string, number>) => void) | undefined;
-}) => {
-  const [columnsInitialised, setColumnsInitialised] = useState(false);
-  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
-
-  useEffect(() => {
-    if (columnsInitialised) {
-      return;
-    }
-
-    setColumnSizing(
-      columns
-        .filter((column) => !!column.size && (column as any).prop !== undefined)
-        .reduce<ColumnSizingState>((state, column) => {
-          state[(column as any).prop] = column.size!;
-          return state;
-        }, {}),
-    );
-
-    setColumnsInitialised(true);
-  }, [columns, setColumnSizing]);
-
-  const [columnSizingInfo, setColumnSizingInfo] = useState<ColumnSizingInfoState>({} as ColumnSizingInfoState);
-
-  // Notify on column resize.
-  const notifyColumnResize = useCallback(() => onColumnResize?.(columnSizing), [onColumnResize, columnSizing]);
-  useOnTransition(columnSizingInfo.isResizingColumn, (v) => typeof v === 'string', false, notifyColumnResize);
-
-  return { columnSizing, columnSizingInfo, setColumnSizing, setColumnSizingInfo };
-};

package/src/_deprecated/hooks/useColumnSorting.ts

@@ -1,64 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type SortDirection, type Column, type ColumnSort } from '@tanstack/react-table';
-import { useState } from 'react';
-
-import { useTableContext } from '../components/Table/TableContext';
-
-export const useColumnSorting = () => {
-  const [columnSorting, setColumnSorting] = useState<ColumnSort[]>([]);
-
-  const sortColumn = (columnId: string, sortDirection: SortDirection) => {
-    setColumnSorting([{ id: columnId, desc: sortDirection === 'desc' }]);
-  };
-
-  const clearColumnSorting = () => {
-    setColumnSorting([]);
-  };
-
-  return { sorting: columnSorting, sortColumn, clearColumnSorting };
-};
-
-export type ColumnSorting = ReturnType<typeof useColumnSorting>;
-
-export const useSortColumn = (column: Column<any>) => {
-  const { sorting, sortColumn, clearColumnSorting } = useTableContext();
-  const [initialSortDirection, setInitialSortDirection] = useState<SortDirection | undefined>();
-
-  const columnSort = sorting.find((s) => s.id === column.id);
-  const sortDirection = columnSort ? (columnSort.desc ? ('desc' as const) : ('asc' as const)) : undefined;
-
-  const canSort = column.getCanSort();
-
-  const updateColumnSort = (direction: SortDirection) => {
-    sortColumn(column.id, direction);
-  };
-
-  // Whichever sort is explicitly set first, will be the first sort direction
-  // When toggling, we always go to the other direction, and then to unsorted.
-  const onToggleSort = () => {
-    if (sortDirection === undefined) {
-      return;
-    }
-
-    if (sortDirection === initialSortDirection) {
-      updateColumnSort(initialSortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-      clearColumnSorting();
-    }
-  };
-
-  const onSelectSort = (direction: SortDirection) => {
-    clearColumnSorting();
-    setInitialSortDirection(direction);
-    updateColumnSort(direction);
-  };
-
-  const onClearSort = () => {
-    clearColumnSorting();
-  };
-
-  return { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort };
-};

package/src/_deprecated/hooks/usePinLastRow.ts

@@ -1,47 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Row, type Table } from '@tanstack/react-table';
-import { useCallback, useEffect, useState } from 'react';
-
-export const usePinLastRow = (pinLastRow: boolean | undefined, table: Table<any>, data: any[]) => {
-  const [pinnedRowKey, setPinnedRowKey] = useState<string>();
-
-  const pinRow = useCallback(
-    (rowToPin: Row<any>) => {
-      table.resetRowPinning();
-      rowToPin.pin('bottom');
-      setPinnedRowKey(rowToPin.id);
-    },
-    [table],
-  );
-
-  const clearRowPinning = useCallback(() => {
-    table.resetRowPinning();
-    setPinnedRowKey(undefined);
-  }, [table]);
-
-  // Define the logic for pinning the last row in a callback.
-  const pinLastRowCallback = useCallback(() => {
-    const rows = table.getRowModel().rows;
-
-    if (rows.length === 0) {
-      return clearRowPinning();
-    }
-
-    const lastRow = rows[rows.length - 1];
-    if (lastRow.id === pinnedRowKey) {
-      return;
-    }
-
-    pinRow(lastRow);
-  }, [table, pinnedRowKey]);
-
-  // Effect to handle pinning logic when data changes.
-  useEffect(() => {
-    if (pinLastRow) {
-      pinLastRowCallback();
-    }
-  }, [data, pinLastRow, pinLastRowCallback]);
-};