es-grid-template 1.8.71 → 1.8.73

package/lib/group-component/TableContainer.js

@@ -0,0 +1,382 @@
+"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 _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 _reactNumericComponent = require("react-numeric-component");
+var _TableWrapper = _interopRequireDefault(require("./table/TableWrapper"));
+var _utils = require("./hook/utils");
+var _reactVirtual = require("@tanstack/react-virtual");
+var _utils2 = require("../table-component/hook/utils");
+var _ColumnsGroup = require("./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,
+    columnHidden,
+    expanded,
+    setExpanded,
+    showEmptyText,
+    infiniteScroll,
+    next,
+    loading,
+    windowSize,
+    contextMenuOpen,
+    contextMenuClick,
+    contextMenuHidden,
+    isFullScreen,
+    setIsFullScreen,
+    isDataTree,
+    setColumns,
+    columnSizing,
+    columnSizingInfo,
+    rowClassName,
+    onRowStyles,
+    onRowFooterStyles,
+    onRowHeaderStyles,
+    title,
+    dataSourceFilter,
+    groupSetting,
+    triggerGroupColumns
+  } = 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);
+  const [focusedCell, setFocusedCell] = _react.default.useState(undefined);
+  _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);
+    };
+  }, []);
+  const visibleColumns = table.getVisibleLeafColumns();
+  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)) : [];
+
+  //we are using a slightly different virtualization strategy for columns (compared to virtual rows) in order to support dynamic row heights
+  const columnVirtualizer = (0, _reactVirtual.useVirtualizer)({
+    count: visibleColumns.length,
+    estimateSize: index => visibleColumns[index].getSize(),
+    //estimate width of each column for accurate scrollbar dragging
+    getScrollElement: () => tableContainerRef.current,
+    horizontal: true,
+    // measureElement(element) {
+
+    //   return element?.getBoundingClientRect().width;
+    // },
+
+    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 virtualColumns = columnVirtualizer.getVirtualItems();
+  const cacheColumns = columnVirtualizer.measurementsCache;
+  const rightCols = table.getState().columnPinning.right?.length ? [...cacheColumns].slice(-(table.getState().columnPinning.right?.length ?? 0)) : [];
+  const leftCols = [...cacheColumns].slice(0, table.getState().columnPinning.left?.length ?? 0);
+  const rightWidth = (0, _utils.sumSize)(rightCols);
+  const leftWidth = (0, _utils.sumSize)(leftCols);
+
+  //different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right
+  let virtualPaddingLeft;
+  let virtualPaddingRight;
+  const pdRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
+  if (columnVirtualizer && virtualColumns?.length) {
+    virtualPaddingLeft = fixedLeftColumns && fixedLeftColumns.length > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth : 0 : virtualColumns[0]?.start ?? 0;
+
+    // virtualPaddingLeft = leftCols.length === rss.length ?  (virtualColumns[0]?.start ?? 0) : 0;
+    // columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0) - rightWidth > 0 ? columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0) - rightWidth : 0;
+    virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
+    // virtualPaddingRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0)
+  }
+  const columnSizingState = table.getState().columnSizing;
+  _react.default.useEffect(() => {
+    requestAnimationFrame(() => {
+      columnVirtualizer.measure();
+    });
+  }, [columnSizingState, columnVirtualizer]);
+  _react.default.useEffect(() => {
+    if (!tableContainerRef.current) {
+      return;
+    }
+
+    // const containerWidth = tableContainerRef.current.offsetWidth
+    // const totalWidth = table.getTotalSize()
+
+    // if (totalWidth && totalWidth <= containerWidth) {
+
+    //   return
+
+    // }
+
+    if (columnSizingInfo.isResizingColumn === false) {
+      const aa = (0, _utils.updateColumnWidthsRecursive)(propsColumns, columnSizing);
+      setColumns(aa);
+
+      // requestAnimationFrame(() => {
+
+      //   columnVirtualizer.measure()
+      // })
+    }
+  }, [columnSizingInfo]);
+  const triggerCommandClick = args => {
+    // const { id: idCommand, rowId, rowData, index } = args
+
+    // const tmpData = [...dataSource]
+
+    if (commandClick) {
+      commandClick({
+        ...args,
+        rows: originData
+      });
+    }
+  };
+  const handleOnGroup = value => {
+    triggerGroupColumns?.(value);
+  };
+  const handleCollapseAllGroup = () => {
+    setExpanded({});
+  };
+  const handleExpandAllGroup = () => {
+    const allKeys = (0, _utils2.findAllChildrenKeys2)(dataSource, rowKey, 'children');
+    setExpanded((0, _utils2.convertToObjTrue)(allKeys));
+  };
+  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, !(0, _utils2.isObjEmpty)(expanded) ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Collapse2, {
+      fontSize: 16,
+      color: '#555555',
+      onClick: handleCollapseAllGroup
+    }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Expand2, {
+      fontSize: 16,
+      color: '#555555',
+      onClick: handleExpandAllGroup
+    })));
+  };
+  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,
+      dataSourceFilter,
+      groupColumns
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
+    contextMenuItems: contextMenuItems,
+    height: tableHeight,
+    minHeight: minHeight,
+    id: id,
+    prefix: prefix,
+    table: table,
+    tableContainerRef: tableContainerRef,
+    commandClick: triggerCommandClick,
+    contextMenuClick: contextMenuClick,
+    contextMenuHidden: contextMenuHidden,
+    contextMenuOpen: contextMenuOpen,
+    editAble: editAble,
+    showEmptyText: showEmptyText,
+    summary: summary,
+    dataSource: dataSource,
+    infiniteScroll: infiniteScroll,
+    next: next,
+    loading: loading,
+    columnVirtualizer: columnVirtualizer,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns
+  })), /*#__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/group-component/TableContainerEdit.d.ts

@@ -0,0 +1,48 @@
+import type { Dispatch, SetStateAction } from "react";
+import React from "react";
+import type { ColumnDef, ColumnSizingInfoState, ColumnSizingState, Table } from "@tanstack/react-table";
+import type { ColumnsTable, TableProps } from "./../grid-component/type";
+type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
+    table: Table<T>;
+    prefix: string;
+    id: string;
+    rowKey: any;
+    originData: T[];
+    propsColumns: ColumnsTable;
+    isSelectionChange?: {
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    };
+    setIsSelectionChange: Dispatch<SetStateAction<{
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    }>>;
+    setSorterChange: Dispatch<SetStateAction<boolean>>;
+    setFilterChange: Dispatch<SetStateAction<boolean>>;
+    onContextMenu?: (data: T) => (event: any) => void;
+    isDataTree: boolean;
+    windowSize: {
+        innerHeight: number;
+        innerWidth: number;
+    };
+    mergedFilterKeys?: any;
+    setMergedFilterKeys?: any;
+    setExpanded?: any;
+    expanded?: any;
+    columns: ColumnDef<T>[];
+    triggerChangeColumns: any;
+    columnHidden: any;
+    isFullScreen: boolean;
+    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+    setColumnSizing: Dispatch<SetStateAction<any>>;
+    setColumns: Dispatch<SetStateAction<any>>;
+    columnSizingInfo: ColumnSizingInfoState;
+    columnSizing: ColumnSizingState;
+    triggerGroupColumns?: (groupedColumns: string[]) => void;
+};
+declare const TableContainerEdit: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
+export default TableContainerEdit;