@jielga/tmdatagrid 0.3.0 → 1.0.0-beta.0

package/src/tmdatagrid/components/TMDataGridEditColumn.tsx

@@ -0,0 +1,237 @@
+import { ActionIcon, Group, Loader, Tooltip } from "@mantine/core";
+import { useSelector } from "@tanstack/react-store";
+import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
+import {
+  useCellControlTabIndex,
+  useTMDataGridContext,
+} from "../TMDataGridContext";
+import type { TMDataGridFeatures } from "../useTMDataGrid";
+import { firstErrorText } from "./editors/editorShared";
+import {
+  CheckIcon,
+  CloseIcon,
+  PencilIcon,
+  RestoreIcon,
+  TrashIcon,
+} from "./icons";
+
+export const EDIT_COLUMN_ID = "__edit__";
+
+/**
+ * One row's slot in the edit lane. Three states, driven off the edit store:
+ * a pencil while idle, Save/Cancel while the row's form is open, a loader
+ * while its commit is in flight. A row error turns the Save red and puts the
+ * message in its tooltip — the pathless `.refine()` has nowhere else to land.
+ */
+function EditLaneCell<TData extends RowData>({
+  row,
+}: {
+  row: Row<TMDataGridFeatures, TData>;
+}) {
+  const { edit, features, labels } = useTMDataGridContext();
+  const tabIndex = useCellControlTabIndex();
+  const rowId = row.id;
+  const isOpen = useSelector(edit.store, (state) =>
+    state.openRowIds.includes(rowId),
+  );
+  const projection = useSelector(edit.store, (state) => state.rows[rowId]);
+  const isNew = useSelector(edit.store, (state) =>
+    state.newRows.some((newRow) => newRow.tempId === rowId),
+  );
+  const isMarkedDeleted = useSelector(edit.store, (state) =>
+    state.deletedRowIds.includes(rowId),
+  );
+
+  if (row.getIsGrouped()) return null;
+
+  // An entry row: ✓ adds it (not under batch, where submitAll does), ✕
+  // discards the entry.
+  if (isNew) {
+    return (
+      <Group gap={0} wrap="nowrap">
+        {features.editMode !== "batch" && (
+          <ActionIcon
+            variant="subtle"
+            color="green"
+            size="sm"
+            tabIndex={tabIndex}
+            aria-label={labels.confirmNewRow}
+            data-dg-part="confirm-new-row"
+            data-row-id={rowId}
+            onClick={() => void edit.commit(rowId)}
+          >
+            <CheckIcon size={16} stroke={2} />
+          </ActionIcon>
+        )}
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          size="sm"
+          tabIndex={tabIndex}
+          aria-label={labels.discardNewRow}
+          data-dg-part="discard-new-row"
+          data-row-id={rowId}
+          onClick={() => edit.cancel(rowId)}
+        >
+          <CloseIcon size={16} stroke={1.6} />
+        </ActionIcon>
+      </Group>
+    );
+  }
+
+  // A batch deletion mark is a draft like any other — restorable in place.
+  if (isMarkedDeleted) {
+    return (
+      <ActionIcon
+        variant="subtle"
+        color="gray"
+        size="sm"
+        tabIndex={tabIndex}
+        aria-label={labels.restoreRow}
+        data-dg-part="restore-row"
+        data-row-id={rowId}
+        onClick={(event) => {
+          event.stopPropagation();
+          edit.deleteRow(rowId);
+        }}
+      >
+        <RestoreIcon size={16} stroke={1.6} />
+      </ActionIcon>
+    );
+  }
+
+  // The pencil means "this row edits"; a row that does not gets nothing.
+  if (!edit.canEditRow(row as never)) return null;
+
+  if (!isOpen) {
+    return (
+      <Group gap={0} wrap="nowrap">
+        {features.editMode === "row" && (
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            size="sm"
+            tabIndex={tabIndex}
+            aria-label={labels.editRow}
+            data-dg-part="edit-row"
+            data-row-id={rowId}
+            onClick={(event) => {
+              event.stopPropagation();
+              edit.begin({ rowId, columnId: null });
+            }}
+          >
+            <PencilIcon size={16} stroke={1.6} />
+          </ActionIcon>
+        )}
+        {edit.canDeleteRows() && (
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            size="sm"
+            tabIndex={tabIndex}
+            aria-label={labels.deleteRow}
+            data-dg-part="delete-row"
+            data-row-id={rowId}
+            onClick={(event) => {
+              event.stopPropagation();
+              edit.deleteRow(rowId);
+            }}
+          >
+            <TrashIcon size={16} stroke={1.6} />
+          </ActionIcon>
+        )}
+      </Group>
+    );
+  }
+
+  if (projection?.isSubmitting) {
+    return <Loader size="xs" aria-label={labels.loading} />;
+  }
+
+  const hasErrors =
+    projection !== undefined &&
+    (projection.hasRowError || projection.errorFields.length > 0);
+  const rowError = hasErrors
+    ? (firstErrorText(edit.getForm(rowId)?.state.errors ?? []) ??
+      labels.editRowErrors)
+    : null;
+
+  const save = (
+    <ActionIcon
+      variant="subtle"
+      color={hasErrors ? "red" : "green"}
+      size="sm"
+      tabIndex={tabIndex}
+      aria-label={labels.saveRow}
+      data-dg-part="save-row"
+      data-row-id={rowId}
+      onClick={(event) => {
+        event.stopPropagation();
+        void edit.commit(rowId);
+      }}
+    >
+      <CheckIcon size={16} stroke={2} />
+    </ActionIcon>
+  );
+
+  return (
+    <Group gap={0} wrap="nowrap">
+      {rowError === null ? (
+        save
+      ) : (
+        <Tooltip label={rowError} withArrow>
+          {save}
+        </Tooltip>
+      )}
+      <ActionIcon
+        variant="subtle"
+        color="gray"
+        size="sm"
+        tabIndex={tabIndex}
+        aria-label={labels.cancelRowEdit}
+        data-dg-part="cancel-row"
+        data-row-id={rowId}
+        onClick={(event) => {
+          event.stopPropagation();
+          edit.cancel(rowId);
+        }}
+      >
+        <CloseIcon size={16} stroke={1.6} />
+      </ActionIcon>
+    </Group>
+  );
+}
+
+/**
+ * The generated edit lane, appended and pinned right under
+ * `editMode: "row"` — the row's Save at the end of the row, mirroring the
+ * checkbox lane's build on the left.
+ */
+export function createEditColumn<TData extends RowData>(
+  label = "Edit",
+): ColumnDef<TMDataGridFeatures, TData, unknown> {
+  return {
+    id: EDIT_COLUMN_ID,
+    meta: {
+      label,
+      align: "center",
+      enableOrdering: false,
+    },
+    // Wide enough for the Save/Cancel pair it holds while editing.
+    size: 64,
+    minSize: 64,
+    maxSize: 64,
+    enableResizing: false,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableGlobalFilter: false,
+    // Structurally pinned to the right; not movable.
+    enablePinning: false,
+    header: () => null,
+    cell: ({ row }) => <EditLaneCell row={row} />,
+    // Group rows: same reasoning as the checkbox lane — without this the
+    // cell renders blank on aggregated rows, but here blank is also correct,
+    // so the aggregated cell renders the same (null for groups).
+    aggregatedCell: ({ row }) => <EditLaneCell row={row} />,
+  };
+}

package/src/tmdatagrid/components/TMDataGridEntryRows.tsx

@@ -0,0 +1,164 @@
+import {
+  flexRender,
+  useTable,
+  type Column,
+  type Row,
+} from "@tanstack/react-table";
+import { useSelector } from "@tanstack/react-store";
+import { useMemo } from "react";
+import classes from "./TMDataGridTable.module.css";
+import sticky from "./sticky.module.css";
+import { type TMDataGridRowData, useTMDataGridContext } from "../TMDataGridContext";
+import { getColumnAlign, isControlColumn } from "../core/columnUtils";
+import { getEditFieldName } from "../core/editEngine";
+import {
+  tmDataGridFeatures,
+  type TMDataGridFeatures,
+} from "../useTMDataGrid";
+import { TMDataGridCellEditor } from "./TMDataGridCellEditor";
+import { EDIT_COLUMN_ID } from "./TMDataGridEditColumn";
+import type { TMDataGridColumnLayout } from "./TMDataGridTable";
+
+type ErasedColumn = Column<TMDataGridFeatures, TMDataGridRowData, unknown>;
+
+/**
+ * Whether an entry cell edits. `edit.canEditCell` asks the main table for
+ * the row, and an entry row is precisely not there yet — so the structural
+ * half of the same rule is applied to the entry table's own row.
+ */
+function isEntryCellEditable(
+  row: Row<TMDataGridFeatures, TMDataGridRowData>,
+  column: ErasedColumn,
+): boolean {
+  if (isControlColumn(column.id)) return false;
+  if (getEditFieldName(column) === null) return false;
+  const editable = column.columnDef.meta?.editable;
+  if (editable === false) return false;
+  if (typeof editable === "function" && !editable(row)) return false;
+  return true;
+}
+
+/**
+ * The sticky entry block — one row of open editors per `edit.addRow()`,
+ * pinned under the header. The one place stickiness is genuinely required:
+ * an existing row that scrolls away has a place to scroll back to, a row
+ * being typed into does not exist anywhere else.
+ *
+ * A second, tiny table instance over the new rows' seed values — same
+ * columns, its own `useTable`, no sorting or filtering ever exercised — so
+ * these are real `Cell`s and the editor host, the typed editors and the
+ * validators all apply unchanged. The forms live in the same engine map as
+ * every other draft, keyed by their temporary ids.
+ *
+ * Enter commits the entry (`onRowAdd`) under the immediate modes and parks
+ * it under batch, where `submitAll` reports it in `added`; Escape discards
+ * it. The edit lane, when present, offers the same pair as buttons.
+ */
+export function TMDataGridEntryRows({
+  orderedColumns,
+  layoutFor,
+  rowHeight,
+}: {
+  orderedColumns: ReadonlyArray<ErasedColumn>;
+  layoutFor: (columnId: string) => TMDataGridColumnLayout;
+  rowHeight: number;
+}) {
+  const { table, edit } = useTMDataGridContext();
+  const newRows = useSelector(edit.store, (state) => state.newRows);
+
+  // The seed values, frozen at addRow: the live values belong to the forms,
+  // which the editors read directly — this table only provides row and cell
+  // identity.
+  const data = useMemo(
+    () =>
+      newRows.map(
+        ({ tempId }) =>
+          (edit.getForm(tempId)?.options.defaultValues ??
+            {}) as TMDataGridRowData,
+      ),
+    [newRows, edit],
+  );
+
+  const entryTable = useTable({
+    features: tmDataGridFeatures,
+    columns: table.options.columns,
+    data,
+    getRowId: (_row, index) => newRows[index]?.tempId ?? String(index),
+  });
+
+  if (newRows.length === 0) return null;
+
+  const entryRows = entryTable.getCoreRowModel().rows;
+
+  return (
+    <div role="rowgroup" data-dg-entry-block className={classes.entryBlock}>
+      {entryRows.map((entryRow) => {
+        const cellsById = new Map(
+          entryRow.getAllCells().map((cell) => [cell.column.id, cell]),
+        );
+        const firstEditableColumnId = orderedColumns.find((column) =>
+          isEntryCellEditable(entryRow, column),
+        )?.id;
+        return (
+          <div
+            key={entryRow.id}
+            role="row"
+            data-dg-part="entry-row"
+            data-row-id={entryRow.id}
+            className={classes.entryRow}
+          >
+            {orderedColumns.map((column) => {
+              const cell = cellsById.get(column.id);
+              const layout = layoutFor(column.id);
+              const editable =
+                cell !== undefined && isEntryCellEditable(entryRow, column);
+              return (
+                <div
+                  key={column.id}
+                  role="cell"
+                  data-column-id={column.id}
+                  data-align={getColumnAlign(column)}
+                  data-control-column={isControlColumn(column.id)}
+                  className={[
+                    classes.entryCell,
+                    layout.isBoundary && layout.pinnedAt === "left"
+                      ? sticky.stickyLeft
+                      : "",
+                    layout.isBoundary && layout.pinnedAt === "right"
+                      ? sticky.stickyRight
+                      : "",
+                  ]
+                    .filter(Boolean)
+                    .join(" ")}
+                  style={{
+                    minHeight: rowHeight,
+                    left: layout.pinnedAt === "left" ? layout.offset : undefined,
+                    right:
+                      layout.pinnedAt === "right" ? layout.offset : undefined,
+                    position: layout.pinnedAt ? "sticky" : undefined,
+                    zIndex: layout.pinnedAt
+                      ? "var(--dg-z-pinned-row-pinned-cell, 5)"
+                      : undefined,
+                  }}
+                >
+                  {editable && cell !== undefined ? (
+                    <TMDataGridCellEditor
+                      cell={cell}
+                      row={entryRow}
+                      takeSeedText={() => undefined}
+                      autoFocus={column.id === firstEditableColumnId}
+                      onClose={() => {}}
+                    />
+                  ) : cell !== undefined && column.id === EDIT_COLUMN_ID ? (
+                    // The lane's cell — the entry row's ✓/✕ pair.
+                    flexRender(cell.column.columnDef.cell, cell.getContext())
+                  ) : null}
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+}