es-grid-template 1.7.23 → 1.7.24

package/lib/table-component/body/TableBody.d.ts

@@ -0,0 +1,19 @@
+import type { Column, Table } from "@tanstack/react-table";
+import type { Virtualizer } from "@tanstack/react-virtual";
+import type { CommandClick } from "../type";
+import React from "react";
+interface TableBodyProps<T> {
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    table: Table<T>;
+    tableContainerRef: React.RefObject<HTMLDivElement>;
+    virtualPaddingLeft: number | undefined;
+    virtualPaddingRight: number | undefined;
+    fixedLeftColumns: Column<T, unknown>[];
+    fixedRightColumns: Column<T, unknown>[];
+    commandClick?: (args: CommandClick) => void;
+    editAble?: boolean;
+    tableId: string;
+    [key: string]: any;
+}
+declare const TableBody: <RecordType extends object>({ columnVirtualizer, table, tableContainerRef, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, tableId, ...rest }: TableBodyProps<RecordType>) => React.JSX.Element;
+export default TableBody;

package/lib/table-component/body/TableBody.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _TableBodyRow = _interopRequireDefault(require("./TableBodyRow"));
+var _reactVirtual = require("@tanstack/react-virtual");
+var _react = _interopRequireDefault(require("react"));
+var _useContext = require("../useContext");
+// import type { Dispatch, SetStateAction } from "react";
+
+const TableBody = ({
+  columnVirtualizer,
+  table,
+  tableContainerRef,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  fixedLeftColumns,
+  fixedRightColumns,
+  tableId,
+  ...rest
+}) => {
+  const {
+    rows
+  } = table.getRowModel();
+  const {
+    editingKey,
+    prefix
+  } = _react.default.useContext(_useContext.TableContext);
+
+  //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
+  const rowVirtualizer = (0, _reactVirtual.useVirtualizer)({
+    count: rows.length,
+    estimateSize: () => 36,
+    //estimate row height for accurate scrollbar dragging
+    getScrollElement: () => tableContainerRef.current,
+    //measure dynamic row height, except in firefox because it measures table border height incorrectly
+    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
+    overscan: 3
+  });
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  return /*#__PURE__*/_react.default.createElement("tbody", {
+    className: `${prefix}-grid-tbody`,
+    style: {
+      display: 'grid',
+      height: `${rowVirtualizer.getTotalSize()}px`,
+      //tells scrollbar how big the table is
+      position: 'relative' //needed for absolute positioning of rows
+    }
+  }, virtualRows.map(virtualRow => {
+    const row = rows[virtualRow.index];
+    const isEditing = row.id === editingKey;
+    return /*#__PURE__*/_react.default.createElement(_TableBodyRow.default, (0, _extends2.default)({}, rest, {
+      table: table,
+      tableId: tableId,
+      key: row.id,
+      row: row,
+      columnVirtualizer: columnVirtualizer,
+      rowVirtualizer: rowVirtualizer,
+      virtualPaddingLeft: virtualPaddingLeft,
+      virtualPaddingRight: virtualPaddingRight,
+      virtualRow: virtualRow,
+      fixedLeftColumns: fixedLeftColumns,
+      fixedRightColumns: fixedRightColumns,
+      isEditing: isEditing
+    }));
+  }));
+};
+var _default = exports.default = TableBody;

package/lib/table-component/body/TableBodyCell.d.ts

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

package/lib/table-component/body/TableBodyCell.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactTable = require("@tanstack/react-table");
+var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
+var _Command = _interopRequireDefault(require("../components/command/Command"));
+var _utils = require("../hook/utils");
+var _constant = require("../hook/constant");
+var _Checkbox = _interopRequireDefault(require("rc-master-ui/lib/checkbox/Checkbox"));
+var _react = _interopRequireWildcard(require("react"));
+var _useContext = require("../useContext");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const renderCellIndex = props => {
+  const {
+    parrents,
+    cell
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("span", null, parrents.map(pr => {
+    return `${pr.index + 1}.`;
+  }), cell.row.index + 1);
+};
+const renderCommand = args => {
+  const {
+    cell,
+    commandClick
+  } = args;
+  const col = cell.column.columnDef.meta ?? {};
+  const record = cell.row.original;
+
+  // const commandItems = args.cell.column.columnDef?.meta?.commandItems ?? []
+
+  const commands = col.commandItems ? col.commandItems.map(it => {
+    return {
+      ...it,
+      visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
+    };
+  }) : [];
+  return /*#__PURE__*/_react.default.createElement(_space.default, null, commands.filter(it => it.visible !== false).map(item => {
+    return /*#__PURE__*/_react.default.createElement(_Command.default, {
+      key: item.id,
+      item: item,
+      record: record,
+      onClick: () => {
+        commandClick?.({
+          id: item.id,
+          // rowId: getRowKey(record, index) as any,
+          rowId: record.rowId,
+          rowData: record,
+          index: cell.row.index
+          // rows: [...resource]
+        });
+      }
+    });
+  }));
+};
+const renderSelection = args => {
+  const {
+    row
+  } = args.cell;
+  const {
+    selectionSettings,
+    setIsSelectionChange
+  } = args;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+
+      // paddingLeft: `${row.depth * 2}rem`,
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+    checked: row.getIsSelected() || row.getIsAllSubRowsSelected(),
+    indeterminate: row.getIsSomeSelected() && selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single'
+    // indeterminate={row.getIsSomeSelected() }
+    ,
+    onChange: e => {
+      row.getToggleSelectedHandler()(e);
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original
+      });
+      // row.toggleSelected()
+
+      // table.setRowSelection({
+      //   [row.id]: true
+      // })
+    }
+  })));
+};
+const TableBodyCell = props => {
+  const {
+    cell,
+    commandClick,
+    table
+  } = props;
+  const {
+    prefix,
+    setIsSelectionChange,
+    selectionSettings
+  } = (0, _react.useContext)(_useContext.TableContext);
+  const parrents = cell.row.getParentRows();
+  const isPinned = cell.column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
+  return /*#__PURE__*/_react.default.createElement("td", {
+    key: cell.id,
+    className: (0, _classnames.default)(`${prefix}-grid-cell`, {
+      [`${prefix}-grid-cell-ellipsis`]: true,
+      [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn
+    }),
+    style: {
+      display: 'flex',
+      width: cell.column.getSize(),
+      ...(0, _utils.getCommonPinningStyles)(cell.column)
+    },
+    onClick: event => {
+      const element = event.target;
+      const container = document.querySelector(".ui-rc-table-row-expand");
+      const isInsideContainer = element.closest(".ui-rc-table-row-expand") && container;
+      if (!isInsideContainer && selectionSettings?.checkboxOnly !== true || (0, _utils.isNullOrUndefined)(selectionSettings?.mode)) {
+        cell.row.getToggleSelectedHandler()(event);
+        setIsSelectionChange({
+          isChange: true,
+          type: 'rowSelected',
+          rowData: cell.row.original
+        });
+      }
+    }
+  }, cell.column.id === "#" && renderCellIndex({
+    parrents,
+    cell
+  }), cell.column.id === "command" && renderCommand({
+    cell,
+    commandClick
+  }), cell.column.id === "selection_column" && renderSelection({
+    cell,
+    table,
+    selectionSettings,
+    setIsSelectionChange
+  }), !_constant.nonActionColumn.includes(cell.column.id) && (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
+};
+var _default = exports.default = TableBodyCell;

package/lib/table-component/body/TableBodyCellEdit.d.ts

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