@wix/patterns 1.364.0 → 1.366.0

package/src/state/EditableTable/ClipboardState.ts

@@ -0,0 +1,250 @@
+import { action, computed, makeObservable, observable } from 'mobx';
+import type { CellBorder } from './types';
+import type { FiltersMap } from '@wix/bex-core';
+import type { EditableTableState } from './EditableTableState';
+import { cellKey, parseCellKey, noBorder } from './utils';
+
+export class ClipboardState<T, F extends FiltersMap> {
+  copiedCells = new Set<string>();
+  isCut = false;
+  private _copiedDataString = '';
+  private _copiedValues = new Map<string, any>();
+  private readonly _parent: EditableTableState<T, F>;
+
+  constructor(parent: EditableTableState<T, F>) {
+    this._parent = parent;
+    makeObservable(this, {
+      copiedCells: observable,
+      isCut: observable,
+      hasCopiedCells: computed,
+      copy: action,
+      cut: action,
+      paste: action,
+      clear: action,
+    });
+  }
+
+  /**
+   * Copy selected cells. Returns serialized TSV string for clipboard.
+   */
+  copy(): string {
+    this.clear();
+    return this._storeCells();
+  }
+
+  /**
+   * Cut selected cells. Returns serialized TSV string for clipboard.
+   */
+  cut(): string {
+    this.clear();
+    this.isCut = true;
+    return this._storeCells();
+  }
+
+  /**
+   * Paste data starting at target position.
+   * If the clipboard text matches what we stored at copy time, uses the rich
+   * typed values instead of deserializing from TSV (avoids lossy round-trip).
+   */
+  paste(rawData: string) {
+    const { cellValue, cellInteraction } = this._parent;
+    const target = cellInteraction.focusedCell;
+    if (!target) {
+      return;
+    }
+    const targetPos = this._parent._toIndices(target);
+    if (!targetPos) {
+      return;
+    }
+
+    const isInternal =
+      this._copiedDataString !== '' && this._copiedDataString === rawData;
+
+    const pastedKeys = this._pasteGrid(
+      rawData,
+      targetPos,
+      isInternal,
+      cellValue,
+    );
+
+    if (this.isCut && isInternal) {
+      this._clearCutSources(pastedKeys, cellValue);
+    }
+
+    this.clear();
+  }
+
+  private _pasteGrid(
+    rawData: string,
+    targetPos: { row: number; col: number },
+    useRichValues: boolean,
+    cellValue: EditableTableState<T, F>['cellValue'],
+  ): Set<string> {
+    const pastedKeys = new Set<string>();
+    const richChanges: { rowKey: string; columnId: string; value: any }[] = [];
+    const rawChanges: { rowKey: string; columnId: string; rawValue: string }[] =
+      [];
+    const rows = rawData.split(/\r?\n/).filter((r) => r.length > 0);
+
+    for (let r = 0; r < rows.length; r++) {
+      const cols = rows[r].split('\t');
+      for (let c = 0; c < cols.length; c++) {
+        const dest = this._parent._toPosition(
+          targetPos.row + r,
+          targetPos.col + c,
+        );
+        if (!dest) {
+          continue;
+        }
+
+        const richValue = useRichValues
+          ? this._copiedValues.get(`${r}:${c}`)
+          : undefined;
+
+        if (richValue !== undefined) {
+          richChanges.push({
+            rowKey: dest.rowKey,
+            columnId: dest.columnId,
+            value: richValue,
+          });
+        } else {
+          rawChanges.push({
+            rowKey: dest.rowKey,
+            columnId: dest.columnId,
+            rawValue: cols[c],
+          });
+        }
+
+        pastedKeys.add(cellKey(dest.rowKey, dest.columnId));
+      }
+    }
+
+    if (richChanges.length > 0) {
+      cellValue.applyBulkValues(richChanges);
+    }
+    if (rawChanges.length > 0) {
+      cellValue.applyBulkRawValues(rawChanges);
+    }
+
+    return pastedKeys;
+  }
+
+  private _clearCutSources(
+    pastedKeys: Set<string>,
+    cellValue: EditableTableState<T, F>['cellValue'],
+  ) {
+    const rawChanges: {
+      rowKey: string;
+      columnId: string;
+      rawValue: string;
+    }[] = [];
+    for (const key of this.copiedCells) {
+      if (pastedKeys.has(key)) {
+        continue;
+      }
+      const pos = parseCellKey(key);
+      if (pos) {
+        rawChanges.push({
+          rowKey: pos.rowKey,
+          columnId: pos.columnId,
+          rawValue: '',
+        });
+      }
+    }
+
+    cellValue.applyBulkRawValues(rawChanges);
+  }
+
+  clear() {
+    this.copiedCells.clear();
+    this.isCut = false;
+    this._copiedDataString = '';
+    this._copiedValues.clear();
+  }
+
+  isCellCopied(rowKey: string, columnId: string): boolean {
+    return this.copiedCells.has(cellKey(rowKey, columnId));
+  }
+
+  getCopiedBorder(rowKey: string, columnId: string): CellBorder {
+    if (!this.isCellCopied(rowKey, columnId)) {
+      return noBorder;
+    }
+
+    const pos = this._parent._toIndices({ rowKey, columnId });
+    if (!pos) {
+      return noBorder;
+    }
+
+    const isNeighborCopied = (row: number, col: number) => {
+      const neighbor = this._parent._toPosition(row, col);
+      return (
+        neighbor !== null &&
+        this.copiedCells.has(cellKey(neighbor.rowKey, neighbor.columnId))
+      );
+    };
+
+    return {
+      top: !isNeighborCopied(pos.row - 1, pos.col),
+      bottom: !isNeighborCopied(pos.row + 1, pos.col),
+      left: !isNeighborCopied(pos.row, pos.col - 1),
+      right: !isNeighborCopied(pos.row, pos.col + 1),
+    };
+  }
+
+  get hasCopiedCells(): boolean {
+    return this.copiedCells.size > 0;
+  }
+
+  private _storeCells(): string {
+    const cells = this._parent.cellInteraction.selectedCellsList;
+    if (cells.length === 0) {
+      return '';
+    }
+
+    const { cellValue } = this._parent;
+
+    for (const cell of cells) {
+      this.copiedCells.add(cellKey(cell.rowKey, cell.columnId));
+    }
+
+    const indices = cells
+      .map((c) => this._parent._toIndices(c))
+      .filter((idx): idx is { row: number; col: number } => idx !== null);
+
+    if (indices.length === 0) {
+      return '';
+    }
+
+    const minRow = Math.min(...indices.map((i) => i.row));
+    const maxRow = Math.max(...indices.map((i) => i.row));
+    const minCol = Math.min(...indices.map((i) => i.col));
+    const maxCol = Math.max(...indices.map((i) => i.col));
+
+    const data: string[][] = [];
+    for (let r = minRow; r <= maxRow; r++) {
+      const row: string[] = [];
+      for (let c = minCol; c <= maxCol; c++) {
+        const pos = this._parent._toPosition(r, c);
+        if (pos && this.copiedCells.has(cellKey(pos.rowKey, pos.columnId))) {
+          const serialized = cellValue.serializeCellValue(
+            pos.rowKey,
+            pos.columnId,
+          );
+          row.push(serialized);
+          this._copiedValues.set(
+            `${r - minRow}:${c - minCol}`,
+            cellValue.getCellDisplayValue(pos.rowKey, pos.columnId),
+          );
+        } else {
+          row.push('');
+        }
+      }
+      data.push(row);
+    }
+
+    const tsv = data.map((row) => row.join('\t')).join('\n');
+    this._copiedDataString = tsv;
+    return tsv;
+  }
+}

package/src/state/EditableTable/EditableTableState.ts

@@ -0,0 +1,246 @@
+import { action, computed, makeObservable, observable } from 'mobx';
+import {
+  CollectionOptimisticActions,
+  CollectionState,
+  FiltersMap,
+  SortOrder,
+  WixPatternsContainer,
+} from '@wix/bex-core';
+import type { KeyedItem } from '@wix/bex-core';
+import { ToolbarCollectionState } from '../ToolbarCollectionState';
+import { TableState } from '../TableState';
+import { ICollectionComponentState } from '../ICollectionComponentState';
+import { CellInteractionState } from './CellInteractionState';
+import { CellValueState } from './CellValueState';
+import { ClipboardState } from './ClipboardState';
+import { MutationState } from './MutationState';
+import type { EditableTableMutationHandlers } from './MutationState';
+import type { Cell, EditableColumn, ValidationResult } from './types';
+
+export interface EditableTablePermissions {
+  addItemDisabled?: boolean;
+  updateItemDisabled?: boolean;
+  removeItemDisabled?: boolean;
+}
+
+export interface EditableTableStateParams<T, F extends FiltersMap> {
+  readonly collection: CollectionState<T, F>;
+  readonly container: WixPatternsContainer;
+  readonly toolbar?: ToolbarCollectionState<T, F>;
+  readonly permissions?: EditableTablePermissions;
+  readonly mutations: EditableTableMutationHandlers<T>;
+  readonly createOptimisticActions: (
+    collection: CollectionState<T, F>,
+  ) => CollectionOptimisticActions<T, F>;
+}
+
+export interface EditableTableStatePublicAPI<T, F extends FiltersMap> {
+  /** Underlying CollectionState instance */
+  readonly collection: CollectionState<T, F>;
+  /** Underlying ToolbarCollectionState instance */
+  readonly toolbar: ToolbarCollectionState<T, F>;
+  /** Reset active filters & sorting and adds new items to the collection */
+  onAddItemActionComplete(items: T[]): void;
+  /** Sort by column */
+  sort: (
+    columnId: string,
+    params?: { forceDirection?: SortOrder; multiple?: boolean },
+  ) => void;
+}
+
+export class EditableTableState<T, F extends FiltersMap>
+  implements ICollectionComponentState, EditableTableStatePublicAPI<T, F>
+{
+  readonly toolbar: ToolbarCollectionState<T, F>;
+  readonly tableState: TableState<T, F>;
+
+  readonly cellInteraction: CellInteractionState<T, F>;
+  readonly cellValue: CellValueState<T, F>;
+  readonly clipboard: ClipboardState<T, F>;
+  readonly mutation: MutationState<T, F>;
+
+  addItemDisabled = false;
+  updateItemDisabled = false;
+  removeItemDisabled = false;
+
+  _allColumns: EditableColumn<T>[] = [];
+
+  constructor(params: EditableTableStateParams<T, F>) {
+    this.toolbar =
+      params.toolbar ??
+      new ToolbarCollectionState({
+        collection: params.collection,
+        container: params.container,
+        componentType: 'EditableTable',
+      });
+
+    this.tableState = new TableState({
+      collection: params.collection,
+      container: params.container,
+      toolbar: this.toolbar,
+    });
+
+    this.cellValue = new CellValueState<T, F>(this);
+
+    this.cellInteraction = new CellInteractionState<T, F>(
+      (editingValue, cell) => {
+        this.cellValue.commitHandler(editingValue, cell);
+      },
+      this,
+    );
+    this.clipboard = new ClipboardState<T, F>(this);
+    this.mutation = new MutationState<T, F>(
+      this,
+      params.mutations,
+      params.createOptimisticActions,
+    );
+
+    makeObservable(this, {
+      addItemDisabled: observable,
+      updateItemDisabled: observable,
+      removeItemDisabled: observable,
+      _allColumns: observable.ref,
+      editableColumns: computed,
+      _columnMap: computed,
+      init: action,
+    });
+
+    if (params.permissions) {
+      this.addItemDisabled = params.permissions.addItemDisabled ?? false;
+      this.updateItemDisabled = params.permissions.updateItemDisabled ?? false;
+      this.removeItemDisabled = params.permissions.removeItemDisabled ?? false;
+    }
+  }
+
+  get collection() {
+    return this.tableState.collection;
+  }
+
+  get keyedItems() {
+    return this.tableState.keyedItems;
+  }
+
+  get visibleColumns() {
+    return this.tableState.visibleColumns;
+  }
+
+  get itemsToRenderCount() {
+    return this.tableState.itemsToRenderCount;
+  }
+
+  get _columnMap(): Map<string, EditableColumn<T>> {
+    return new Map(this._allColumns.map((c) => [c.id, c]));
+  }
+
+  _getKeyedItem(key: string): KeyedItem<T> | undefined | null {
+    return this.collection.getKeyedItem(key);
+  }
+
+  _toIndices(pos: Cell): { row: number; col: number } | null {
+    const row = this.keyedItems.findIndex((ki) => ki.key === pos.rowKey);
+    const col = this.editableColumns.findIndex((c) => c.id === pos.columnId);
+    return row === -1 || col === -1 ? null : { row, col };
+  }
+
+  _toPosition(row: number, col: number): Cell | null {
+    const ki = this.keyedItems[row];
+    const c = this.editableColumns[col];
+    return ki && c ? { rowKey: ki.key, columnId: c.id } : null;
+  }
+
+  onAddItemActionComplete = (items: T[]) => {
+    return this.tableState.onAddItemActionComplete(items);
+  };
+
+  get editableColumns(): EditableColumn<T>[] {
+    const visibleIds = this.visibleColumns.map((c) => c.id);
+    if (!visibleIds.length) {
+      return this._allColumns;
+    }
+    return visibleIds
+      .map((id) => this._allColumns.find((c) => c.id === id))
+      .filter((c): c is EditableColumn<T> => c !== undefined);
+  }
+
+  init(columns: EditableColumn<T>[]) {
+    this._allColumns = columns;
+    return this.mutation.init();
+  }
+
+  addItem(afterItemKey?: string) {
+    this.mutation.addItem(afterItemKey);
+  }
+
+  duplicateItem(rowKey: string) {
+    this.mutation.duplicateItem(rowKey);
+  }
+
+  deleteItems(rowKeys: string[]) {
+    this.mutation.deleteItems(rowKeys);
+  }
+
+  resolveCellType(type: string) {
+    return this.cellValue.resolveCellType(type);
+  }
+
+  getCellDisplayValue(rowKey: string, columnId: string): any {
+    return this.cellValue.getCellDisplayValue(rowKey, columnId);
+  }
+
+  getCellValidation(rowKey: string, columnId: string): ValidationResult {
+    return this.cellValue.getCellValidation(rowKey, columnId);
+  }
+
+  isCellEditable(rowKey: string, columnId: string): boolean {
+    return this.cellValue.isCellEditable(rowKey, columnId);
+  }
+
+  clearCells(cells: Cell[]) {
+    this.cellValue.clearCells(cells);
+  }
+
+  handleCellClick(rowKey: string, columnId: string, shiftKey: boolean) {
+    if (this.cellInteraction.isEditing) {
+      return;
+    }
+
+    const column = this._columnMap.get(columnId);
+    const resolved = column ? this.resolveCellType(column.cellType) : null;
+    if (resolved?.toggleValue && !this.updateItemDisabled) {
+      this.cellValue.toggleCell(rowKey, columnId);
+      this.cellInteraction.focusCell(rowKey, columnId);
+      return;
+    }
+
+    if (shiftKey && this.cellInteraction.selectionAnchor) {
+      this.cellInteraction.selectRange(this.cellInteraction.selectionAnchor, {
+        rowKey,
+        columnId,
+      });
+    } else {
+      this.cellInteraction.focusCell(rowKey, columnId);
+    }
+  }
+
+  handleCellDoubleClick(rowKey: string, columnId: string) {
+    if (this.updateItemDisabled) {
+      return;
+    }
+    if (this.isCellEditable(rowKey, columnId)) {
+      this.cellInteraction.startEdit(rowKey, columnId, 'doubleClick');
+    }
+  }
+
+  sort = (
+    columnId: string,
+    {
+      forceDirection,
+      multiple,
+    }: { forceDirection?: SortOrder; multiple?: boolean } = {},
+  ) => {
+    this.collection.sort(
+      { id: columnId },
+      { forceDirection, clearResult: true, multiple },
+    );
+  };
+}

package/src/state/EditableTable/MutationState.ts

@@ -0,0 +1,118 @@
+import type {
+  CollectionOptimisticActions,
+  CollectionState,
+  FiltersMap,
+} from '@wix/bex-core';
+import type { EditableTableState } from './EditableTableState';
+
+export interface EditableTableMutationHandlers<T> {
+  /** Factory to create a new empty item with a fresh ID */
+  createItem: () => T;
+  /** Submit updated items to the server */
+  submitUpdate: (items: T[]) => Promise<T[] | void>;
+  /** Submit newly created items to the server */
+  submitCreate: (items: T[]) => Promise<T[] | void>;
+  /** Submit item deletions to the server */
+  submitDelete: (items: T[]) => Promise<void>;
+}
+
+export class MutationState<T, F extends FiltersMap> {
+  private readonly _handlers: EditableTableMutationHandlers<T>;
+  private readonly _optimisticActions: CollectionOptimisticActions<T, F>;
+  private readonly _parent: EditableTableState<T, F>;
+
+  constructor(
+    parent: EditableTableState<T, F>,
+    handlers: EditableTableMutationHandlers<T>,
+    createOptimisticActions: (
+      collection: CollectionState<T, F>,
+    ) => CollectionOptimisticActions<T, F>,
+  ) {
+    this._parent = parent;
+    this._handlers = handlers;
+    this._optimisticActions = createOptimisticActions(parent.collection);
+  }
+
+  init() {
+    return this._optimisticActions.init();
+  }
+
+  addItem(afterItemKey?: string) {
+    const newItem = this._handlers.createItem();
+    this._optimisticActions.createOne(newItem, {
+      submit: this._handlers.submitCreate,
+      afterItemKey,
+      successToast: 'Item created',
+      errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
+        message: 'Failed to create item',
+        action: { onClick: retry, text: 'Retry' },
+      }),
+    });
+  }
+
+  duplicateItem(rowKey: string) {
+    const keyedItem = this._parent.keyedItems.find((ki) => ki.key === rowKey);
+    if (!keyedItem) {
+      return;
+    }
+
+    const sourceItem = keyedItem.item;
+    const newItem = this._handlers.createItem();
+    const { itemKey } = this._parent.collection;
+    const newId = itemKey(newItem);
+    const sourceId = itemKey(sourceItem);
+    const duplicate = { ...sourceItem } as any;
+    for (const k of Object.keys(duplicate)) {
+      if (String(duplicate[k]) === sourceId) {
+        duplicate[k] = newId;
+        break;
+      }
+    }
+    this._optimisticActions.createOne(duplicate as T, {
+      submit: this._handlers.submitCreate,
+      afterItemKey: keyedItem.key,
+      successToast: 'Item duplicated',
+      errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
+        message: 'Failed to duplicate item',
+        action: { onClick: retry, text: 'Retry' },
+      }),
+    });
+  }
+
+  deleteItems(rowKeys: string[]) {
+    const items = rowKeys
+      .map((key) => this._parent.keyedItems.find((ki) => ki.key === key)?.item)
+      .filter((item): item is T => item != null);
+    if (items.length === 0) {
+      return;
+    }
+
+    this._optimisticActions.deleteMany(items, {
+      submit: this._handlers.submitDelete,
+      successToast:
+        items.length === 1 ? 'Item deleted' : `${items.length} items deleted`,
+      errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
+        message: 'Failed to delete items',
+        action: { onClick: retry, text: 'Retry' },
+      }),
+    });
+  }
+
+  updateItems(updatedItems: T[]) {
+    if (updatedItems.length === 0) {
+      return;
+    }
+    this._optimisticActions.updateMany(updatedItems, {
+      keepPosition: true,
+      submit: this._handlers.submitUpdate,
+      successToast:
+        updatedItems.length === 1
+          ? 'Item updated'
+          : `${updatedItems.length} items updated`,
+      errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
+        message: 'Failed to update items',
+        action: { onClick: retry, text: 'Retry' },
+      }),
+    });
+  }
+}

package/src/state/EditableTable/index.ts

@@ -0,0 +1,16 @@
+export { EditableTableState } from './EditableTableState';
+export type {
+  EditableTableStateParams,
+  EditableTableStatePublicAPI,
+  EditableTablePermissions,
+} from './EditableTableState';
+
+export type { EditableTableMutationHandlers } from './MutationState';
+
+export type {
+  Cell,
+  ValidationResult,
+  CellType,
+  EditableColumn,
+  SelectCellConfig,
+} from './types';