es-grid-template 1.7.48 → 1.8.1

package/es/table-component/hook/utils.d.ts

@@ -11,6 +11,7 @@ export declare const newGuid: () => any;
 export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
 export declare const convertDateToDayjs: (date: Date | undefined, format?: string) => dayjs.Dayjs;
 export declare const getCommonPinningStyles: (column: Column<any>) => CSSProperties;
+export declare const getCommonPinningStyles2: (header: any) => CSSProperties;
 export declare const sumSize: (items: any) => number;
 export declare const appendIfNotExists: (a: VirtualItem[], b: VirtualItem[]) => VirtualItem[];
 export declare const getNewItemsOnly: (a: VirtualItem[], b: VirtualItem[]) => VirtualItem[];

package/es/table-component/hook/utils.js

@@ -42,7 +42,31 @@ export const getCommonPinningStyles = column => {
     // opacity: isPinned ? 0.5 : 1,
     opacity: 1,
     position: isPinned ? "sticky" : "relative",
-    width: column.getSize(),
+    // width: column.getSize(),
+    width: 'auto',
+    zIndex: isPinned ? 2 : 0
+    // border: '1px solid #e5e7eb',
+    // borderTop: 0,
+    // borderBottom: 0
+  };
+};
+export const getCommonPinningStyles2 = header => {
+  const isPinned = header.column.getIsPinned();
+  // const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
+  // const isFirstRightPinnedColumn =isPinned === "right" && column.getIsFirstColumn("right");
+
+  return {
+    // boxShadow: isFirstRightPinnedColumn
+    //     ? "#e0e0e0 2px 0px 1px -1px inset"
+    //     : undefined,
+
+    left: isPinned === "left" ? `${header.getStart("left")}px` : undefined,
+    right: isPinned === "right" ? `${header.getAfter("right")}px` : undefined,
+    // opacity: isPinned ? 0.5 : 1,
+    opacity: 1,
+    position: isPinned ? "sticky" : "relative",
+    // width: column.getSize(),
+    width: 'auto',
     zIndex: isPinned ? 2 : 0
     // border: '1px solid #e5e7eb',
     // borderTop: 0,
@@ -203,9 +227,11 @@ export const addRowIdArray = inputArray => {
       if (typeof item.children !== "string" && item.children && item.children.length > 0) {
         item.children = addRowIdArray(item.children);
       }
+
+      // return { ...item, rowId: item.rowId ?? item.id ?? newGuid() }
       return {
         ...item,
-        rowId: item.rowId ?? item.id ?? newGuid()
+        rowId: item.id ?? item.rowId ?? newGuid()
       };
     });
   } else {

package/es/table-component/style.scss

@@ -121,7 +121,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
         white-space: normal;
         // overflow: hidden;
         text-overflow: ellipsis;
-        word-break: keep-all;
+        word-break: break-word;
       }
 
 
@@ -129,7 +129,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
         white-space: normal;
         overflow: hidden;
         text-overflow: ellipsis;
-        word-break: keep-all;
+        word-break: break-word;
       }
 
     }
@@ -176,7 +176,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
           .#{$prefix}-grid-cell-text-wrap {
             white-space: normal;
             // text-overflow: ellipsis;
-            word-break: keep-all;
+            word-break: break-word;
             overflow: hidden;
           }
 
@@ -257,7 +257,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
     .#{$prefix}-grid-tbody {
 
-      tr.#{$prefix}-grid-row {
+      .#{$prefix}-grid-row {
         border-bottom: 1px solid lightgray;
       }
 
@@ -266,6 +266,20 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
         position: absolute;
         width: 100%;
 
+        &:hover {
+          .#{$prefix}-grid-cell:not(.editable) {
+            background-color: $rowHoverBg;
+
+            &.cell-editable, &.#{$prefix}-grid-cell-index, &.#{$prefix}-grid-cell-selection {
+              // background-color: transparent;
+            }
+
+            // &.ui-rc-grid-cell-index {
+            //   background-color: #ffffff;
+            // }
+          }
+        }
+
         &.#{$prefix}-grid-row-selected {
 
           .#{$prefix}-grid-cell {
@@ -274,6 +288,14 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
         }
 
+        &.#{$prefix}-grid-row-focus {
+
+          .#{$prefix}-grid-cell {
+            background-color: $rowHoverBg;
+          }
+
+        }
+
       }
 
       .#{$prefix}-grid-cell {

package/es/table-component/table/Grid.js

@@ -141,18 +141,16 @@ const Grid = props => {
 
     // debugTable: true
   });
-
-  // React.useEffect(() => {
-  //   if (columnHidden) {
-  //     const abb = table.getVisibleLeafColumns()?.[0]
-
-  //     if (abb && Object.keys(columnSizingInfo).length === 0
-  //     ) {
-  //       setColumnSizing({ "#": abb.getSize() })
-  //     }
-  //   }
-
-  // }, [columnHidden, columnSizingInfo])
+  React.useEffect(() => {
+    if (columnHidden) {
+      const abb = table.getVisibleLeafColumns()?.[0];
+      if (abb && Object.keys(columnSizingInfo).length === 0) {
+        setColumnSizing({
+          "#": abb.getSize()
+        });
+      }
+    }
+  }, [columnHidden, columnSizingInfo]);
 
   // React.useEffect(() => {
   //   if (columnSizingInfo.isResizingColumn === false) {
@@ -167,12 +165,12 @@ const Grid = props => {
 
   React.useEffect(() => {
     // if (!manualUpdate) {
-    if (Object.keys(rowSelection) !== Object.keys(mergedSelectedKeys)) {
+    if (Object.keys(rowSelection) !== Object.keys(mergedSelectedKeys) && !isSelectionChange.isChange) {
       setRowSelection(convertToObjTrue(mergedSelectedKeys));
     }
 
     // }
-  }, [mergedSelectedKeys]);
+  }, [mergedSelectedKeys, isSelectionChange]);
   React.useEffect(() => {
     if (isSelectionChange.isChange) {
       // setManualUpdate(true)
@@ -186,12 +184,14 @@ const Grid = props => {
         rowData: isSelectionChange.rowData,
         selected: rs
       });
-      setIsSelectionChange(prev => ({
-        ...prev,
-        isChange: false
-      }));
+
+      // setIsSelectionChange((prev) => ({
+      //   ...prev,
+      //   isChange: false
+
+      // }))
     }
-  }, [isSelectionChange, rowSelected, rowSelection, table]);
+  }, [isSelectionChange, rowSelection, table.getState().rowSelection]);
   React.useEffect(() => {
     if (sorterChange) {
       const aa = table.getState().sorting;

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

@@ -189,7 +189,7 @@ const TableWrapper = props => {
     // onScroll={infiniteScroll ? handleScroll : undefined}
     ,
     onScroll: handleScroll
-  }, /*#__PURE__*/React.createElement("table", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'grid',
       minWidth: table.getTotalSize()

package/lib/grid-component/TempTable.js

@@ -13,18 +13,16 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 const TempTable = props => {
   const {
-    infiniteScroll,
     groupAble,
     editAble,
     ...rest
   } = props;
 
   // const TabComponent = groupAble ? InternalTable  : Table
-  const TabComponent = editAble ? _tableComponent.default : _InternalTable.default;
+  const TabComponent = groupAble ? _InternalTable.default : _tableComponent.default;
   // const TabComponent = InternalTable
 
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(TabComponent, (0, _extends2.default)({}, rest, {
-    infiniteScroll: infiniteScroll,
     groupAble: groupAble,
     editAble: editAble
   })));

package/lib/table-component/ColumnsChoose.js

@@ -9,12 +9,14 @@ var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMerge
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _antd = require("antd");
-var _icons = require("@ant-design/icons");
 var _tree = _interopRequireDefault(require("rc-master-ui/es/tree"));
 var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
 var _utils = require("./hook/utils");
+var _becoxyIcons = require("becoxy-icons");
 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; }
+// import { SettingOutlined } from "@ant-design/icons"
+
 const BoxAction = _styledComponents.default.div.withConfig({
   displayName: "BoxAction",
   componentId: "es-grid-template__sc-jfujqh-0"
@@ -211,6 +213,11 @@ const ColumnsChoose = props => {
   }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
     arrow: false,
     title: 'Cài đặt'
-  }, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, null))));
+  }, /*#__PURE__*/_react.default.createElement(_becoxyIcons.Settings, {
+    fontSize: 16,
+    style: {
+      cursor: 'pointer'
+    }
+  }))));
 };
 exports.ColumnsChoose = ColumnsChoose;

package/lib/table-component/InternalTable.js

@@ -110,6 +110,7 @@ const InternalTable = props => {
   const [columns, setColumns] = _react.default.useState([]);
   _react.default.useEffect(() => {
     // setColumns(propsColumns as any)
+
     setColumns((0, _utils.updateWidthsByOther)(propsColumns, columns));
   }, [propsColumns]);
   const [expanded, setExpanded] = _react.default.useState({});

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

@@ -1,6 +1,6 @@
 import type { Dispatch, SetStateAction } from 'react';
 import React from 'react';
-import type { ColumnDef, Table } from '@tanstack/react-table';
+import type { ColumnDef, ColumnSizingInfoState, ColumnSizingState, Table } from '@tanstack/react-table';
 import type { ColumnsTable, TableProps } from './type';
 type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     table: Table<T>;
@@ -32,6 +32,10 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     isFullScreen: boolean;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     isDataTree: boolean;
+    setColumnSizing: Dispatch<SetStateAction<any>>;
+    setColumns: Dispatch<SetStateAction<any>>;
+    columnSizingInfo: ColumnSizingInfoState;
+    columnSizing: ColumnSizingState;
 };
 declare const TableContainer: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
 export default TableContainer;

package/lib/table-component/TableContainer.js

@@ -80,13 +80,17 @@ const TableContainer = props => {
     contextMenuHidden,
     isFullScreen,
     setIsFullScreen,
-    isDataTree
+    isDataTree,
+    setColumns,
+    columnSizing,
+    columnSizingInfo
   } = 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;
     if (totalHeight) {
@@ -139,6 +143,30 @@ const TableContainer = props => {
       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 = () => {};
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
@@ -219,7 +247,9 @@ const TableContainer = props => {
       setSorterChange,
       setFilterChange,
       windowSize,
-      isDataTree
+      isDataTree,
+      focusedCell,
+      setFocusedCell
     }
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
     contextMenuItems: contextMenuItems,

package/lib/table-component/TableContainerEdit.js

@@ -674,80 +674,105 @@ const TableContainerEdit = props => {
   }, [dataSource, editingKey, id, onBlur]);
   const columnSizingState = table.getState().columnSizing;
   _react.default.useEffect(() => {
-
-    // requestAnimationFrame(() => {
-
-    //   columnVirtualizer.measure()
-    // })
+    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;
-    }
+
+    // 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();
-      });
+
+      // requestAnimationFrame(() => {
+
+      //   columnVirtualizer.measure()
+      // })
     }
   }, [columnSizingInfo]);
-  _react.default.useEffect(() => {
-    // if (!containerRef.current || !tableContainerRef.current) { 
-    if (!tableContainerRef.current) {
-      return;
-    }
 
-    // const containerWidth = containerRef.current.offsetWidth - 1
-    // const containerWidth = tableContainerRef.current.offsetWidth
-    const containerWidth = tableContainerRef.current.offsetWidth - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0);
-    const totalWidth = table.getTotalSize() - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0);
-    if (totalWidth && totalWidth > 0 && totalWidth < containerWidth) {
-      const factor = containerWidth / totalWidth;
-      const visibleCols = table.getVisibleLeafColumns();
-      const baseSizes = visibleCols.map(col => col.getSize() || col.columnDef.size || 150);
-      const scaledSizes = baseSizes.map(size => size * factor);
-      const roundedSizes = scaledSizes.map(size => Math.floor(size));
-      let diff = containerWidth - roundedSizes.reduce((a, b) => a + b, 0);
-
-      // phân bổ diff cho các cột từ trái qua phải
-      for (let i = 0; diff > 0; i = (i + 1) % roundedSizes.length) {
-        roundedSizes[i]++;
-        diff--;
-      }
-      const aaa = visibleCols.reduce((acc, col, idx) => {
-        acc[col.id] = roundedSizes[idx];
-        return acc;
-      }, {});
-      const aa = (0, _utils.updateColumnWidthsRecursive)(propsColumns, aaa);
-      setColumns(aa);
-      table.setColumnSizing(aaa);
-      requestAnimationFrame(() => {
-        columnVirtualizer.measure();
-      });
+  // React.useEffect(() => {
 
-      // setColumnSizing?.(aaa)
-    } else {
-      if (columnHidden) {
-        const abb = table.getVisibleLeafColumns()?.[0];
-        if (abb && Object.keys(columnSizingInfo).length === 0) {
-          // setColumnSizing({ "#": abb.getSize() })
-          table.setColumnSizing({
-            "#": abb.getSize()
-          });
-          requestAnimationFrame(() => {
-            columnVirtualizer.measure();
-          });
-        }
-      }
-    }
-  }, [table.getTotalSize(), dataSource.length, windowSize.innerWidth, columnVirtualizer]);
-  // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
+  //   // if (!containerRef.current || !tableContainerRef.current) { 
+  //   if (!tableContainerRef.current) {
+  //     return
+  //   }
+
+  //   // const containerWidth = containerRef.current.offsetWidth - 1
+  //   // const containerWidth = tableContainerRef.current.offsetWidth
+  //   const containerWidth = tableContainerRef.current.offsetWidth - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0)
+
+  //   const totalWidth = table.getTotalSize() - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0)
+
+  //   if (totalWidth && totalWidth > 0 && totalWidth < containerWidth) {
+
+  //     const factor = containerWidth / totalWidth
+
+  //     const visibleCols = table.getVisibleLeafColumns()
+
+  //     const baseSizes = visibleCols.map(
+  //       (col) => col.getSize() || col.columnDef.size || 150
+  //     )
+
+  //     const scaledSizes = baseSizes.map((size) => size * factor)
+  //     const roundedSizes = scaledSizes.map((size) => Math.floor(size))
+
+  //     let diff = containerWidth - roundedSizes.reduce((a, b) => a + b, 0)
+
+  //     // phân bổ diff cho các cột từ trái qua phải
+  //     for (let i = 0; diff > 0; i = (i + 1) % roundedSizes.length) {
+  //       roundedSizes[i]++
+  //       diff--
+  //     }
+
+  //     const aaa = visibleCols.reduce((acc, col, idx) => {
+  //       acc[col.id] = roundedSizes[idx]
+  //       return acc
+  //     }, {} as Record<string, number>)
+
+  //     const aa = updateColumnWidthsRecursive(propsColumns, aaa)
+
+  //     // setColumns(aa)
+
+  //     // table.setColumnSizing(aaa)
+
+  //     requestAnimationFrame(() => {
+
+  //       columnVirtualizer.measure()
+  //     })
+
+  //     // setColumnSizing?.(aaa)
+  //   } else {
+  //     if (columnHidden) {
+  //       const abb = table.getVisibleLeafColumns()?.[0]
+
+  //       if (abb && Object.keys(columnSizingInfo).length === 0
+  //       ) {
+  //         // setColumnSizing({ "#": abb.getSize() })
+  //         table.setColumnSizing({ "#": abb.getSize() })
+
+  //         requestAnimationFrame(() => {
+
+  //           columnVirtualizer.measure()
+  //         })
+  //       }
+  //     }
+
+  //   }
+
+  // }, [table.getTotalSize(), dataSource.length, windowSize.innerWidth, columnVirtualizer])
 
   // React.useEffect(() => {
 

package/lib/table-component/body/TableBody.js

@@ -49,7 +49,7 @@ const TableBody = ({
     overscan: 1
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
-  return /*#__PURE__*/_react.default.createElement("tbody", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: `${prefix}-grid-tbody`,
     style: {
       display: 'grid',

package/lib/table-component/body/TableBodyCell.d.ts

@@ -1,12 +1,16 @@
 import type { Cell, Table } from "@tanstack/react-table";
 import type { CommandClick } from "../type";
 import React from "react";
-import type { VirtualItem } from "@tanstack/react-virtual";
+import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
 interface TableBodyCellProps<T> {
+    table: Table<T>;
+    rowVirtualizer: Virtualizer<HTMLDivElement, HTMLDivElement>;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLDivElement>;
+    tableId: string;
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick<T>) => void;
-    table: Table<T>;
-    virtualRow?: VirtualItem;
+    virtualRow: VirtualItem;
+    [key: string]: any;
 }
 declare const TableBodyCell: <RecordType extends object>(props: TableBodyCellProps<RecordType>) => React.JSX.Element;
 export default TableBodyCell;