es-grid-template 1.7.24 → 1.7.26

package/lib/table-component/TableContainer.js

@@ -5,18 +5,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _TableHead = _interopRequireDefault(require("./header/TableHead"));
 var _utils = require("./hook/utils");
 var _reactVirtual = require("@tanstack/react-virtual");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _TableBody = _interopRequireDefault(require("./body/TableBody"));
 var _useContext = require("./useContext");
+var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
+var _rcMasterUi = require("rc-master-ui");
+var _becoxyIcons = require("becoxy-icons");
+var _ColumnsChoose = require("./ColumnsChoose");
+var _TableFooter = _interopRequireDefault(require("./footer/TableFooter"));
+var _TableBody = _interopRequireDefault(require("./body/TableBody"));
+var _reactNumericComponent = require("react-numeric-component");
 // import type { Dispatch, SetStateAction } from "react";
 
+// import TableBody from './body/TableBody'
+
 const TableContainer = props => {
   const {
-    // t,
+    t,
     table,
     id,
     prefix,
@@ -36,10 +45,37 @@ const TableContainer = props => {
     contextMenuItems,
     setSorterChange,
     setFilterChange,
-    tableHeight
+    height,
+    showToolbar,
+    toolbarItems,
+    actionTemplate,
+    pagination,
+    fullScreen,
+    showColumnChoose,
+    summary,
+    locale,
+    groupColumns,
+    columns,
+    propsColumns,
+    triggerChangeColumns,
+    columnHidden,
+    expanded,
+    setExpanded,
+    showEmptyText
   } = 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 visibleColumns = table.getVisibleLeafColumns();
+  const [isFullScreen] = _react.default.useState(false);
+  const [tableHeight, settableHeight] = _react.default.useState(0);
+  _react.default.useEffect(() => {
+    const totalHeight = height;
+    if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
+      settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight);
+    }
+  }, [id, height, editAble]);
   const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
   const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
   const columnVirtualizer = (0, _reactVirtual.useVirtualizer)({
@@ -50,15 +86,6 @@ const TableContainer = props => {
     measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
     overscan: 3 //how many columns to render on each side off screen each way (adjust this for performance)
   });
-
-  // const columnSizingState = table.getState().columnSizing
-
-  // React.useEffect(() => {
-  //   requestAnimationFrame(() => {
-  //     columnVirtualizer.measure()
-  //   })
-  // }, [columnSizingState, columnVirtualizer])
-
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const cacheColumns = columnVirtualizer.measurementsCache;
   const rightCols = table.getState().columnPinning.right?.length ? [...cacheColumns].slice(-(table.getState().columnPinning.right?.length ?? 0)) : [];
@@ -75,6 +102,61 @@ const TableContainer = props => {
     virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
   }
   return /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    id: id
+  }, (showToolbar !== false || fullScreen !== false) && /*#__PURE__*/_react.default.createElement("div", {
+    ref: topToolbarRef,
+    className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
+    }
+  }, toolbarItems && toolbarItems?.length > 0 && /*#__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'
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+    fontSize: 16
+    // onClick={() => handleFullScreen?.()}
+    ,
+    "data-tooltip-id": "tooltip-icon",
+    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
+    fontSize: 16
+    // onClick={() => handleFullScreen?.()}
+    ,
+    "data-tooltip-id": "tooltip-icon",
+    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+  })), /*#__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: (total, range) =>
+    // @ts-ignore
+    `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+    columnHidden: columnHidden,
+    columns: columns,
+    originColumns: propsColumns,
+    t: t,
+    columnsGroup: groupColumns,
+    triggerChangeColumns: triggerChangeColumns
+  })))), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(`${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
@@ -86,16 +168,20 @@ const TableContainer = props => {
       //our scrollable table container
       position: 'relative',
       //needed for sticky header
-      height: tableHeight ?? '500px' //should be a fixed height
+      // height: tableHeight ?? '500px' //should be a fixed height
+      maxHeight: tableHeight //should be a fixed height
       // minWidth: table.getTotalSize()
     }
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
+      locale,
       prefix,
       id,
       rowKey,
       format,
       expandable,
+      expanded,
+      setExpanded,
       dataSource,
       originData,
       // triggerFilter,
@@ -131,7 +217,42 @@ const TableContainer = props => {
     fixedRightColumns: fixedRightColumns,
     commandClick: commandClick,
     editAble: editAble,
-    contextMenuItems: contextMenuItems
+    contextMenuItems: contextMenuItems,
+    showEmptyText: showEmptyText
+  }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default, {
+    columnVirtualizer: columnVirtualizer,
+    table: table,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    ref: bottomToolbarRef
+  }, pagination && /*#__PURE__*/_react.default.createElement(_pagination.default
+  // style={{padding: '0.75rem 1rem'}}
+  , (0, _extends2.default)({}, pagination, {
+    rootClassName: 'pagination-template',
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    total: pagination.total,
+    pageSize: pagination.onChange ? pagination.pageSize : table.getState().pagination.pageSize,
+    showTotal: (total, range) => `${(0, _reactNumericComponent.numericFormatter)((range[0] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })}-${(0, _reactNumericComponent.numericFormatter)((range[1] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} / ${(0, _reactNumericComponent.numericFormatter)((total ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} items`,
+    pageSizeOptions: [20, 50, 100, 1000, 10000],
+    onChange: (page, pageSize) => {
+      if (pagination.onChange) {
+        pagination.onChange(page, pageSize);
+      } else {
+        table.setPageIndex(page - 1);
+        table.setPageSize(pageSize);
+      }
+    }
   }))));
 };
 var _default = exports.default = TableContainer;

package/lib/table-component/TableContainerEdit.d.ts

@@ -1,13 +1,14 @@
 import type { Dispatch, SetStateAction } from "react";
 import React from "react";
-import type { Table } from "@tanstack/react-table";
-import type { TableProps } from "./type";
+import type { ColumnDef, Table } from "@tanstack/react-table";
+import type { ColumnsTable, TableProps } from "./type";
 type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     table: Table<T>;
     prefix: string;
     id: string;
     rowKey: any;
     originData: T[];
+    propsColumns: ColumnsTable;
     setIsSelectionChange: Dispatch<SetStateAction<{
         isChange: boolean;
         type: string;
@@ -18,11 +19,13 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     onContextMenu?: (data: T) => (event: any) => void;
     tableHeight?: number;
     triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
-    triggerChangeData?: (newData: T[], type: string) => void;
-    mergedFilterKeys: any;
-    setMergedFilterKeys: any;
-    setExpanded: any;
-    expanded: any;
+    mergedFilterKeys?: any;
+    setMergedFilterKeys?: any;
+    setExpanded?: any;
+    expanded?: any;
+    columns: ColumnDef<T>[];
+    triggerChangeColumns: any;
+    columnHidden: any;
 };
 declare const TableContainerEdit: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
 export default TableContainerEdit;