es-grid-template 1.8.64 → 1.8.66

package/lib/table-virtuoso/table/TableWrapper.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { ColumnDef, Table } from "@tanstack/react-table";
+import type { CommandClick } from '../../table-component/type';
+type Props<T> = {
+    tableContainerRef: React.RefObject<HTMLDivElement>;
+    table: Table<T>;
+    prefix: string;
+    id: string;
+    columns: ColumnDef<T>[];
+    height: number;
+    minHeight?: number;
+    dataSource: T[];
+    summary?: boolean;
+    loading?: boolean;
+    commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;
+    editAble?: boolean;
+    showEmptyText?: boolean;
+    contextMenuClick?: any;
+    next?: () => void;
+};
+declare const TableWrapper: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default TableWrapper;

package/lib/table-virtuoso/table/TableWrapper.js

@@ -0,0 +1,166 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _reactVirtuoso = require("react-virtuoso");
+require("@tanstack/react-table");
+var _TableHeadCell = _interopRequireDefault(require("../header/TableHeadCell"));
+var _useContext = require("../useContext");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _TableBodyRow = _interopRequireDefault(require("../body/TableBodyRow"));
+var _TableFooterCell = _interopRequireDefault(require("../footer/TableFooterCell"));
+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; }
+/* eslint-disable @typescript-eslint/no-shadow */
+
+// import type { Dispatch, SetStateAction } from 'react';
+
+// import type { ColumnsTable, TableProps } from '../type';
+
+// type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
+
+const TableWrapper = props => {
+  const {
+    table,
+    // columns,
+    height,
+    id,
+    commandClick
+  } = props;
+  const {
+    prefix
+  } = (0, _react.useContext)(_useContext.TableContext); //onRowHeaderStyles
+
+  // ref cho scroll container
+  const scrollRef = (0, _react.useRef)(null);
+  const {
+    rows
+  } = table.getRowModel();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${prefix}-grid-container`, {})
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: scrollRef,
+    style: {
+      overflow: "auto",
+      // border: "1px solid #ccc",
+      height,
+      position: "relative"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactVirtuoso.TableVirtuoso, {
+    data: table.getRowModel().rows,
+    totalCount: rows.length,
+    components: {
+      Table: ({
+        style,
+        ...props
+      }) => {
+        return /*#__PURE__*/_react.default.createElement("table", (0, _extends2.default)({}, props, {
+          style: {
+            ...style,
+            width: "100%",
+            tableLayout: "fixed"
+            // borderCollapse: "collapse",
+            // borderSpacing: 0
+          }
+          // className={classNames(`${prefix}-grid-container`, {
+          // 'ui-rc-table-ping-right':
+          //   tableContainerRef &&
+          //   (tableContainerRef.current?.scrollLeft ?? 0) >= 0 &&
+          //   (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) <
+          //   (tableContainerRef.current?.scrollWidth ?? 0),
+
+          // 'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
+          // })}
+        }));
+      },
+      TableHead: props => /*#__PURE__*/_react.default.createElement("thead", (0, _extends2.default)({}, props, {
+        className: `${prefix}-grid-thead`
+      })),
+      TableFoot: props => /*#__PURE__*/_react.default.createElement("tfoot", (0, _extends2.default)({}, props, {
+        className: `${prefix}-grid-tfoot`
+      })),
+      TableRow: props => {
+        const index = props["data-index"];
+        const row = rows[index];
+        return /*#__PURE__*/_react.default.createElement(_TableBodyRow.default, (0, _extends2.default)({
+          tableId: id,
+          row: row,
+          table: table,
+          commandClick: commandClick
+        }, props));
+      }
+    }
+
+    // overscan={{
+    //   main: 10,
+    //   reverse: 20
+    // }}
+
+    // atBottomThreshold={200}
+    // atTopThreshold={200}
+    ,
+    increaseViewportBy: {
+      top: 200,
+      bottom: 200
+    },
+    fixedHeaderContent: () => {
+      return table.getHeaderGroups().map((headerGroup, index) => {
+        return /*#__PURE__*/_react.default.createElement("tr", {
+          key: headerGroup.id,
+          "data-index": headerGroup.id
+        }, headerGroup.headers.map(header => {
+          const columnRelativeDepth = header.depth - header.column.depth;
+          if (columnRelativeDepth > 1) {
+            return null;
+          }
+          let rowSpan = 1;
+          if (header.isPlaceholder) {
+            const leafs = header.getLeafHeaders();
+            rowSpan = leafs[leafs.length - 1].depth - header.depth;
+          }
+          return /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, {
+            key: header.id,
+            header: header,
+            table: table,
+            colSpan: header.colSpan,
+            rowSpan: rowSpan,
+            rowIndex: index
+          });
+        }));
+      });
+    },
+    fixedFooterContent: () => {
+      const visibleColumns = table.getVisibleLeafColumns();
+      return /*#__PURE__*/_react.default.createElement("tr", {
+        className: "ui-rc-grid-footer-row"
+      }, visibleColumns.map(header => {
+        return /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
+          key: header.id,
+          column: header
+        });
+      }));
+    }
+
+    // itemContent={(index) => {
+
+    //   const row = rows[index]
+    //   return (
+
+    //     <TableBodyRow
+    //       tableId={id}
+    //       row={row}
+    //       table={table}
+    //     // {...props}
+
+    //     />
+
+    //   )
+    // }}
+  })));
+};
+var _default = exports.default = TableWrapper;