es-grid-template 1.8.70 → 1.8.72

package/es/group-component/body/TableBodyCellEmpty.d.ts

@@ -0,0 +1,12 @@
+import type { Cell, Table } from "@tanstack/react-table";
+import type { CommandClick } from "../../grid-component/type";
+import React from "react";
+interface TableBodyCellProps<T> {
+    table: Table<T>;
+    tableId: string;
+    cell: Cell<T, unknown>;
+    commandClick?: (args: CommandClick<T>) => void;
+    [key: string]: any;
+}
+declare const TableBodyCellEmpty: <RecordType extends object>(props: TableBodyCellProps<RecordType>) => React.JSX.Element;
+export default TableBodyCellEmpty;

package/es/group-component/body/TableBodyCellEmpty.js

@@ -0,0 +1,149 @@
+import ReactDOMServer from 'react-dom/server';
+import { getCommonPinningStyles } from "../hook/utils";
+import classNames from "classnames";
+import React from "react";
+import { TableContext } from "../useContext";
+import { toggleRowSelection } from "../hook/useColumns";
+const TableBodyCellEmpty = props => {
+  const {
+    cell,
+    table,
+    isEditing
+  } = props;
+  const {
+    id,
+    prefix,
+    focusedCell,
+    setFocusedCell,
+    setIsSelectionChange,
+    isSelectionChange,
+    selectionSettings,
+    wrapSettings,
+    setIsSelecting,
+    setIsPasting
+  } = React.useContext(TableContext);
+  const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
+  const record = cell.row.original;
+  const columnMeta = cell.column.columnDef.meta ?? {};
+  const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
+
+  // const tooltipContent = (isOpenTooltip === false || columnMeta.type === 'checkbox') ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
+  const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
+    value: cell.getValue(),
+    record
+  }) : columnMeta.tooltipDescription : columnMeta.template && typeof columnMeta.template !== 'function' ? columnMeta.template : cell.getValue();
+  const allRows = table.getRowModel().flatRows;
+  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
+  const colIndex = cell.column.getIndex();
+  const isPinned = cell.column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
+  const enableClick = typeof columnMeta.allowSelection === 'function' ? columnMeta.allowSelection(record) : columnMeta.allowSelection;
+  return /*#__PURE__*/React.createElement("div", {
+    key: cell.id,
+    ref: el => {
+      if (focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id && !isEditing) {
+        el?.focus();
+      }
+    },
+    tabIndex: focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id ? 0 : -1,
+    "data-col-index": colIndex,
+    "data-row-index": rowNumber,
+    "data-col-key": cell.column.id
+    // data-row-key={cell.row.id}
+    ,
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-html": ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, tooltipContent))
+    // data-tooltip-delay-show={500}
+    ,
+
+    className: classNames(`${prefix}-grid-cell`, {
+      // [`${prefix}-grid-cell-ellipsis`]: true,
+
+      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
+      [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
+      // [`${prefix}-grid-cell-selected`]: isCellSelected,
+
+      [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
+    }),
+    style: {
+      ...cellStyles,
+      display: 'flex',
+      width: cell.column.getSize(),
+      minWidth: cell.column.getSize(),
+      minHeight: 36,
+      ...getCommonPinningStyles(cell.column)
+    },
+    onMouseEnter: e => {
+      if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
+        setIsOpenTooltip(true);
+      }
+      setIsSelecting?.(false);
+      setIsPasting?.(false);
+    },
+    onKeyDown: e => {
+      const flatRows = table.getRowModel().flatRows;
+      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
+        const nextIndex = cell.row.index + 1;
+        // const nextIndex = rowNumber + 1
+
+        const nextId = flatRows[nextIndex].id;
+        setFocusedCell?.({
+          colId: cell.column.id,
+          rowId: nextId
+        });
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      if (e.key === 'ArrowUp' && rowNumber > 0) {
+        const prevIndex = cell.row.index - 1;
+        const nextId = flatRows[prevIndex].id;
+        setFocusedCell?.({
+          colId: cell.column.id,
+          rowId: nextId
+        });
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {
+        toggleRowSelection({
+          e,
+          cell,
+          setIsSelectionChange,
+          isSelectionChange,
+          selectionSettings
+        });
+        cell.row.getToggleSelectedHandler()(e);
+      }
+    },
+    onClick: e => {
+      const selection = window.getSelection();
+      const text = selection ? selection.toString() : "";
+      if (text.length > 0 || enableClick === false) {} else {
+        if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
+          toggleRowSelection({
+            e,
+            cell,
+            setIsSelectionChange,
+            isSelectionChange,
+            selectionSettings
+          });
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: cell.row.id
+          });
+        }
+      }
+    }
+  });
+};
+export default TableBodyCellEmpty;

package/es/group-component/body/TableBodyRow.d.ts

@@ -0,0 +1,21 @@
+import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
+import { type Column, type Row, type Table } from "@tanstack/react-table";
+import type { CommandClick } from "../../grid-component/type";
+import React from "react";
+interface TableBodyRowProps<T> {
+    tableId: string;
+    table: Table<T>;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLDivElement>;
+    row: Row<T>;
+    rowVirtualizer: Virtualizer<HTMLDivElement, HTMLDivElement>;
+    virtualPaddingLeft: number | undefined;
+    virtualPaddingRight: number | undefined;
+    virtualRow: VirtualItem;
+    fixedLeftColumns: Column<T, unknown>[];
+    fixedRightColumns: Column<T, unknown>[];
+    commandClick?: (args: CommandClick<T>) => void;
+    editAble?: boolean;
+    [key: string]: any;
+}
+declare const TableBodyRow: <RecordType extends object>({ tableId, table, columnVirtualizer, row, rowVirtualizer, virtualPaddingLeft, virtualPaddingRight, virtualRow, fixedLeftColumns, fixedRightColumns, commandClick, editAble, isEditing, contextMenuItems, onContextMenu, ...rest }: TableBodyRowProps<RecordType>) => React.JSX.Element;
+export default TableBodyRow;

package/es/group-component/body/TableBodyRow.js

@@ -0,0 +1,199 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import TableBodyCell from "./TableBodyCell";
+import TableBodyCellEdit from "./TableBodyCellEdit";
+import React from "react";
+import { TableContext } from "../useContext";
+import classNames from "classnames";
+import TableBodyCellEmpty from "./TableBodyCellEmpty";
+// import TableBodyCellEmpty from "./TableBodyCellEmpty"
+
+const TableBodyRow = ({
+  tableId,
+  table,
+  columnVirtualizer,
+  row,
+  rowVirtualizer,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  virtualRow,
+  fixedLeftColumns,
+  fixedRightColumns,
+  commandClick,
+  editAble,
+  isEditing,
+  contextMenuItems,
+  onContextMenu,
+  ...rest
+}) => {
+  const {
+    prefix,
+    recordDoubleClick,
+    focusedCell,
+    rowClassName,
+    rowEditable,
+    onRowStyles,
+    groupColumns
+  } = React.useContext(TableContext);
+  const visibleCells = row.getVisibleCells();
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  const centerCOlumns = virtualColumns.filter(vc => !(table.getState().columnPinning.left?.includes(visibleCells[vc.index].column.id) || table.getState().columnPinning.right?.includes(visibleCells[vc.index].column.id)));
+  const leftTemplate = fixedLeftColumns.length > 0 ? fixedLeftColumns.map(it => row.getVisibleCells().find(c => c.column.id === it.id).column.getSize()) : [];
+  const rightTemplate = fixedRightColumns.length > 0 ? fixedRightColumns.map(it => row.getVisibleCells().find(c => c.column.id === it.id).column.getSize()) : [];
+  const centerTemplate = centerCOlumns.map(it => it.size);
+  const virtualLeft = virtualPaddingLeft ? [virtualPaddingLeft] : [];
+  const virtualRight = virtualPaddingRight ? [virtualPaddingRight] : [];
+  const templateColumns = [...leftTemplate, ...virtualLeft, ...centerTemplate, ...virtualRight, ...rightTemplate];
+  const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
+  const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
+  const isRowEditable = rowEditable ? rowEditable(row.original) : true;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-index": virtualRow.index //needed for dynamic row height measurement
+    ,
+    ref: node => rowVirtualizer.measureElement(node) //measure dynamic row height
+    ,
+    key: row.id,
+    "data-row-key": row.id,
+    className: classNames(`${prefix}-grid-row ${rowClass ?? ''}`, {
+      [`${prefix}-grid-row-selected`]: row.getIsSelected(),
+      [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble,
+      [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0
+    }),
+    style: {
+      // display: 'flex',
+      display: 'grid',
+      // position: 'absolute',
+      transform: `translateY(${virtualRow.start}px)`,
+      //this should always be a `style` as it changes on scroll
+      // height: isEditing ? '36px' : undefined,
+      gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
+      height: isEditing ? virtualRow.size : undefined,
+      minHeight: isEditing ? undefined : virtualRow.size,
+      ...rowStyles
+    },
+    onDoubleClick: e => {
+      recordDoubleClick?.({
+        e,
+        rowData: row.original,
+        rowIndex: row.index
+      });
+    },
+    onContextMenu: e => {
+      if (contextMenuItems && contextMenuItems.length) {
+        onContextMenu?.(row.original)(e);
+      }
+    }
+  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
+    const cell = row.getVisibleCells().find(c => c.column.id === column.id);
+    if (row.subRows && row.subRows.length === 0 && groupColumns?.includes(cell.column.id)) {
+      return /*#__PURE__*/React.createElement(TableBodyCellEmpty, _extends({}, rest, {
+        table: table,
+        tableId: tableId,
+        key: cell.id,
+        cell: cell,
+        commandClick: commandClick,
+        virtualRow: virtualRow,
+        isEditing: isEditing,
+        isRowEditable: isRowEditable,
+        rowVirtualizer: rowVirtualizer,
+        columnVirtualizer: columnVirtualizer
+      }));
+    }
+    if (editAble && row.subRows && row.subRows.length === 0) {
+      return /*#__PURE__*/React.createElement(TableBodyCellEdit, _extends({}, rest, {
+        table: table,
+        tableId: tableId,
+        key: cell.id,
+        cell: cell,
+        commandClick: commandClick,
+        virtualRow: virtualRow,
+        isEditing: isEditing,
+        isRowEditable: isRowEditable,
+        rowVirtualizer: rowVirtualizer,
+        columnVirtualizer: columnVirtualizer
+      }));
+    }
+    return /*#__PURE__*/React.createElement(TableBodyCell, _extends({}, rest, {
+      table: table,
+      tableId: tableId,
+      key: cell.id,
+      cell: cell,
+      commandClick: commandClick,
+      virtualRow: virtualRow,
+      isEditing: false,
+      rowVirtualizer: rowVirtualizer,
+      columnVirtualizer: columnVirtualizer,
+      row: row
+    }));
+  }) : null, virtualPaddingLeft ? /*#__PURE__*/React.createElement("div", {
+    className: "",
+    style: {
+      display: "flex",
+      width: virtualPaddingLeft
+    }
+  }) : null, virtualColumns.map(vc => {
+    const cell = visibleCells[vc.index];
+    const isFixed = table.getState().columnPinning.left?.includes(cell.column.id) || table.getState().columnPinning.right?.includes(cell.column.id);
+    if (cell && !isFixed) {
+      if (editAble && row.subRows && row.subRows.length === 0) {
+        return /*#__PURE__*/React.createElement(TableBodyCellEdit, _extends({}, rest, {
+          table: table,
+          key: cell.id,
+          tableId: tableId,
+          cell: cell,
+          commandClick: commandClick,
+          isEditing: isEditing,
+          isRowEditable: isRowEditable,
+          rowVirtualizer: rowVirtualizer,
+          columnVirtualizer: columnVirtualizer,
+          virtualRow: virtualRow
+        }));
+      }
+      return /*#__PURE__*/React.createElement(TableBodyCell, _extends({}, rest, {
+        table: table,
+        key: cell.id,
+        tableId: tableId,
+        cell: cell,
+        commandClick: commandClick,
+        isEditing: false,
+        rowVirtualizer: rowVirtualizer,
+        columnVirtualizer: columnVirtualizer,
+        virtualRow: virtualRow,
+        row: row
+      }));
+    }
+  }), fixedRightColumns.length > 0 ? fixedRightColumns.map(column => {
+    if (editAble) {
+      return /*#__PURE__*/React.createElement(TableBodyCellEdit, _extends({}, rest, {
+        table: table,
+        key: column.id,
+        tableId: tableId,
+        cell: row.getVisibleCells().find(c => c.column.id === column.id),
+        commandClick: commandClick,
+        isEditing: isEditing,
+        isRowEditable: isRowEditable,
+        rowVirtualizer: rowVirtualizer,
+        columnVirtualizer: columnVirtualizer,
+        virtualRow: virtualRow
+      }));
+    }
+    return /*#__PURE__*/React.createElement(TableBodyCell, _extends({}, rest, {
+      table: table,
+      key: column.id,
+      tableId: tableId,
+      cell: row.getVisibleCells().find(c => c.column.id === column.id),
+      commandClick: commandClick,
+      isEditing: false,
+      rowVirtualizer: rowVirtualizer,
+      columnVirtualizer: columnVirtualizer,
+      virtualRow: virtualRow,
+      row: row
+    }));
+  }) : null, virtualPaddingRight ? /*#__PURE__*/React.createElement("div", {
+    className: "",
+    style: {
+      display: "flex",
+      width: virtualPaddingRight
+    }
+  }) : null);
+};
+export default TableBodyRow;

package/es/group-component/body/TableBodyRowGroupCell.d.ts

@@ -0,0 +1,12 @@
+import type { Cell, Table } from "@tanstack/react-table";
+import type { CommandClick } from "../../grid-component/type";
+import React from "react";
+interface TableBodyCellProps<T> {
+    table: Table<T>;
+    tableId: string;
+    cell: Cell<T, unknown>;
+    commandClick?: (args: CommandClick<T>) => void;
+    [key: string]: any;
+}
+declare const TableBodyCell: <RecordType extends object>(props: TableBodyCellProps<RecordType>) => React.JSX.Element;
+export default TableBodyCell;