es-grid-template 1.8.64 → 1.8.65

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

@@ -0,0 +1,313 @@
+"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 = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
+var _rcMasterUi = require("rc-master-ui");
+var _becoxyIcons = require("becoxy-icons");
+var _reactNumericComponent = require("react-numeric-component");
+var _TableWrapper = _interopRequireDefault(require("./TableWrapper"));
+var _ColumnsChoose = require("../../table-component/ColumnsChoose");
+var _utils = require("../hook/utils");
+var _useContext = require("../useContext");
+var _utils2 = require("../../table-component/hook/utils");
+var _ColumnsGroup = require("../ColumnsGroup");
+// import type { Dispatch, SetStateAction } from 'react'
+
+// import { ColumnsGroup } from '../../grid-component/ColumnsGroup';
+
+const TableContainer = props => {
+  const {
+    t,
+    table,
+    id,
+    prefix,
+    // commandClick,
+    editAble,
+    rowKey,
+    format,
+    dataSource,
+    originData,
+    expandable,
+    wrapSettings,
+    recordDoubleClick,
+    // triggerFilter,
+    selectionSettings,
+    isSelectionChange,
+    setIsSelectionChange,
+    onContextMenu,
+    // contextMenuItems,
+    setSorterChange,
+    setFilterChange,
+    height,
+    minHeight,
+    showToolbar,
+    toolbarItems,
+    actionTemplate,
+    pagination,
+    fullScreen,
+    showColumnChoose,
+    // summary,
+    locale,
+    groupColumns,
+    columns,
+    propsColumns,
+    triggerChangeColumns,
+    triggerGroupColumns,
+    columnHidden,
+    expanded,
+    setExpanded,
+    // showEmptyText,
+    infiniteScroll,
+    // next,
+    // loading,
+    windowSize,
+    // contextMenuOpen,
+    // contextMenuClick,
+    // contextMenuHidden,
+    isFullScreen,
+    setIsFullScreen,
+    isDataTree,
+    // setColumns,
+    // columnSizing,
+    // columnSizingInfo,
+    rowClassName,
+    onRowStyles,
+    onRowFooterStyles,
+    onRowHeaderStyles,
+    title,
+    groupSetting
+  } = props;
+  const tableContainerRef = _react.default.useRef(null);
+  const containerRef = _react.default.useRef(null);
+  const bottomToolbarRef = _react.default.useRef(null);
+  const topToolbarRef = _react.default.useRef(null);
+  const [tableHeight, settableHeight] = _react.default.useState(0);
+  _react.default.useEffect(() => {
+    // const totalHeight = minHeight ?? height
+    const totalHeight = (0, _utils.getTableHeight)(height, minHeight);
+    if (totalHeight) {
+      const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
+      const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;
+      settableHeight(totalHeight - topHeight - bottomHeight);
+    }
+  }, [id, height, editAble, minHeight]);
+  _react.default.useEffect(() => {
+    const handleClickOutside = () => {
+
+      // setFocusedCell(undefined)
+      // setIsSelectionChange((prev) => (
+      //   {
+      //     ...prev,
+      //     isChange: false
+      //   }
+      // ))
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  // React.useEffect(() => {
+
+  //   if (!tableContainerRef.current) {
+  //     return
+  //   }
+
+  //   if (columnSizingInfo.isResizingColumn === false) {
+
+  //     const aa = updateColumnWidthsRecursive(propsColumns, columnSizing)
+
+  //     setColumns(aa)
+
+  //   }
+
+  // }, [columnSizingInfo])
+
+  // const triggerCommandClick = (args: Omit<CommandClick<RecordType>, 'rows'>) => {
+
+  //   // const { id: idCommand, rowId, rowData, index } = args
+
+  //   // const tmpData = [...dataSource]
+
+  //   if (commandClick) {
+  //     commandClick({
+  //       ...args,
+  //       rows: originData
+  //     })
+  //   }
+
+  // }
+
+  const handleOnGroup = value => {
+    triggerGroupColumns?.(value);
+  };
+  const groupToolbar = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '10px',
+        marginRight: 10
+      }
+    }, groupSetting?.showGroupIcon !== false && /*#__PURE__*/_react.default.createElement(_ColumnsGroup.ColumnsGroup, {
+      t: t
+      // defaultGroupColumns={['name']}
+      ,
+      unClearableLevel: groupSetting?.unClearableLevel
+      // unClearableLevel={2}
+      ,
+      columns: propsColumns ? (0, _utils2.flatColumns2)(propsColumns) : [],
+      columnsGrouped: groupColumns,
+      onSubmit: handleOnGroup
+    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    id: id
+  }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/_react.default.createElement("div", {
+    ref: topToolbarRef,
+    className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
+    }
+  }, groupToolbar(), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    mode: 'scroll'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
+    }
+  }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    rootClassName: 'top-pagination',
+    showTotal: (totalItems, range) =>
+    // @ts-ignore
+    `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+  })), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+    columnHidden: columnHidden,
+    columns: columns,
+    originColumns: propsColumns,
+    t: t,
+    columnsGroup: groupColumns,
+    triggerChangeColumns: triggerChangeColumns
+  })))), /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
+    value: {
+      t,
+      locale,
+      prefix,
+      id,
+      rowKey,
+      format,
+      expandable,
+      expanded,
+      setExpanded,
+      dataSource,
+      originData,
+      // triggerFilter,
+      wrapSettings,
+      recordDoubleClick,
+      selectionSettings,
+      isSelectionChange,
+      setIsSelectionChange,
+      onContextMenu,
+      setSorterChange,
+      setFilterChange,
+      windowSize,
+      isDataTree,
+      // focusedCell,
+      // setFocusedCell,
+      rowClassName,
+      onRowStyles,
+      onRowFooterStyles,
+      onRowHeaderStyles,
+      table,
+      pagination,
+      groupSetting
+      // visible,
+      // setVisible,
+      // selectedKeys,
+      //  setSelectedKeys,
+      //  currentFilter, 
+      //  setCurrentFilter
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
+    tableContainerRef: tableContainerRef,
+    prefix: prefix,
+    id: id,
+    height: tableHeight,
+    minHeight: minHeight,
+    dataSource: dataSource,
+    table: table,
+    columns: columns
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    ref: bottomToolbarRef
+  }, pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default
+  // style={{padding: '0.75rem 1rem'}}
+  , (0, _extends2.default)({
+    pageSizeOptions: [20, 50, 100, 1000, 10000]
+  }, pagination, {
+    rootClassName: 'pagination-template',
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    total: pagination.total,
+    pageSize: pagination.onChange ? pagination.pageSize : table.getState().pagination.pageSize,
+    showTotal: (totalItems, range) => `${(0, _reactNumericComponent.numericFormatter)((range[0] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })}-${(0, _reactNumericComponent.numericFormatter)((range[1] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} / ${(0, _reactNumericComponent.numericFormatter)((totalItems ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} items`,
+    onChange: (page, pageSize1) => {
+      if (pagination.onChange) {
+        pagination.onChange(page, pageSize1);
+        table.setPageIndex(page - 1);
+        table.setPageSize(pageSize1);
+      } else {
+        table.setPageIndex(page - 1);
+        table.setPageSize(pageSize1);
+      }
+    }
+  }))));
+};
+var _default = exports.default = TableContainer;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ColumnDef, Table } from "@tanstack/react-table";
+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;
+    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,164 @@
+"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
+  } = 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
+        }, 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;