es-grid-template 1.8.64 → 1.8.66

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

@@ -0,0 +1,161 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+/* eslint-disable @typescript-eslint/no-shadow */
+
+// import type { Dispatch, SetStateAction } from 'react';
+import React, { useContext, useRef } from 'react';
+import { TableVirtuoso } from "react-virtuoso";
+import "@tanstack/react-table"; // useReactTable,
+// getCoreRowModel,
+// flexRender,
+// getGroupedRowModel,
+// getExpandedRowModel
+import TableHeadCell from "../header/TableHeadCell";
+import { TableContext } from "../useContext";
+import classNames from 'classnames';
+import TableBodyRow from "../body/TableBodyRow";
+import TableFooterCell from "../footer/TableFooterCell";
+
+// 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
+  } = useContext(TableContext); //onRowHeaderStyles
+
+  // ref cho scroll container
+  const scrollRef = useRef(null);
+  const {
+    rows
+  } = table.getRowModel();
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(`${prefix}-grid-container`, {})
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: scrollRef,
+    style: {
+      overflow: "auto",
+      // border: "1px solid #ccc",
+      height,
+      position: "relative"
+    }
+  }, /*#__PURE__*/React.createElement(TableVirtuoso, {
+    data: table.getRowModel().rows,
+    totalCount: rows.length,
+    components: {
+      Table: ({
+        style,
+        ...props
+      }) => {
+        return /*#__PURE__*/React.createElement("table", _extends({}, 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.createElement("thead", _extends({}, props, {
+        className: `${prefix}-grid-thead`
+      })),
+      TableFoot: props => /*#__PURE__*/React.createElement("tfoot", _extends({}, props, {
+        className: `${prefix}-grid-tfoot`
+      })),
+      TableRow: props => {
+        const index = props["data-index"];
+        const row = rows[index];
+        return /*#__PURE__*/React.createElement(TableBodyRow, _extends({
+          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.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.createElement(TableHeadCell, {
+            key: header.id,
+            header: header,
+            table: table,
+            colSpan: header.colSpan,
+            rowSpan: rowSpan,
+            rowIndex: index
+          });
+        }));
+      });
+    },
+    fixedFooterContent: () => {
+      const visibleColumns = table.getVisibleLeafColumns();
+      return /*#__PURE__*/React.createElement("tr", {
+        className: "ui-rc-grid-footer-row"
+      }, visibleColumns.map(header => {
+        return /*#__PURE__*/React.createElement(TableFooterCell, {
+          key: header.id,
+          column: header
+        });
+      }));
+    }
+
+    // itemContent={(index) => {
+
+    //   const row = rows[index]
+    //   return (
+
+    //     <TableBodyRow
+    //       tableId={id}
+    //       row={row}
+    //       table={table}
+    //     // {...props}
+
+    //     />
+
+    //   )
+    // }}
+  })));
+};
+export default TableWrapper;