es-grid-template 1.7.47 → 1.8.0

package/es/grid-component/TempTable.js

@@ -4,18 +4,16 @@ import Table from "../table-component";
 import InternalTable from "./InternalTable";
 const TempTable = props => {
   const {
-    infiniteScroll,
     groupAble,
     editAble,
     ...rest
   } = props;
 
   // const TabComponent = groupAble ? InternalTable  : Table
-  const TabComponent = editAble ? Table : InternalTable;
+  const TabComponent = groupAble ? InternalTable : Table;
   // const TabComponent = InternalTable
 
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TabComponent, _extends({}, rest, {
-    infiniteScroll: infiniteScroll,
     groupAble: groupAble,
     editAble: editAble
   })));

package/es/table-component/ColumnsChoose.js

@@ -2,10 +2,12 @@ import useMergedState from "rc-util/es/hooks/useMergedState";
 import React, { Fragment, useState } from "react";
 import styled from "styled-components";
 import { Button, Input, Popover, Tooltip } from "antd";
-import { SettingOutlined } from "@ant-design/icons";
+// import { SettingOutlined } from "@ant-design/icons"
+
 import Tree from "rc-master-ui/es/tree";
 import SearchOutlined from "@ant-design/icons/SearchOutlined";
 import { convertColumnsToTreeData, getVisibleColumnKeys1, updateColumns1 } from "./hook/utils";
+import { Settings } from "becoxy-icons";
 const BoxAction = styled.div.withConfig({
   displayName: "BoxAction",
   componentId: "es-grid-template__sc-jfujqh-0"
@@ -202,5 +204,10 @@ export const ColumnsChoose = props => {
   }, /*#__PURE__*/React.createElement(Tooltip, {
     arrow: false,
     title: 'Cài đặt'
-  }, /*#__PURE__*/React.createElement(SettingOutlined, null))));
+  }, /*#__PURE__*/React.createElement(Settings, {
+    fontSize: 16,
+    style: {
+      cursor: 'pointer'
+    }
+  }))));
 };

package/es/table-component/InternalTable.js

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

package/es/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/es/table-component/TableContainer.js

@@ -19,7 +19,7 @@ import { ColumnsChoose } from "./ColumnsChoose";
 import { numericFormatter } from 'react-numeric-component';
 // import ComponentSpinner from '../grid-component/LoadingSpinner'
 import TableWrapper from "./table/TableWrapper";
-import { sumSize } from "./hook/utils";
+import { sumSize, updateColumnWidthsRecursive } from "./hook/utils";
 import { useVirtualizer } from '@tanstack/react-virtual';
 const TableContainer = props => {
   const {
@@ -70,13 +70,17 @@ const TableContainer = props => {
     contextMenuHidden,
     isFullScreen,
     setIsFullScreen,
-    isDataTree
+    isDataTree,
+    setColumns,
+    columnSizing,
+    columnSizingInfo
   } = props;
   const tableContainerRef = React.useRef(null);
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
   const topToolbarRef = React.useRef(null);
   const [tableHeight, settableHeight] = React.useState(0);
+  const [focusedCell, setFocusedCell] = React.useState(undefined);
   React.useEffect(() => {
     const totalHeight = minHeight ?? height;
     if (totalHeight) {
@@ -129,6 +133,30 @@ const TableContainer = props => {
       columnVirtualizer.measure();
     });
   }, [columnSizingState, columnVirtualizer]);
+  React.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 = updateColumnWidthsRecursive(propsColumns, columnSizing);
+      setColumns(aa);
+
+      // requestAnimationFrame(() => {
+
+      //   columnVirtualizer.measure()
+      // })
+    }
+  }, [columnSizingInfo]);
   const triggerCommandClick = () => {};
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
@@ -209,7 +237,9 @@ const TableContainer = props => {
       setSorterChange,
       setFilterChange,
       windowSize,
-      isDataTree
+      isDataTree,
+      focusedCell,
+      setFocusedCell
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, {
     contextMenuItems: contextMenuItems,

package/es/table-component/TableContainerEdit.js

@@ -667,80 +667,105 @@ const TableContainerEdit = props => {
   }, [dataSource, editingKey, id, onBlur]);
   const columnSizingState = table.getState().columnSizing;
   React.useEffect(() => {
-
-    // requestAnimationFrame(() => {
-
-    //   columnVirtualizer.measure()
-    // })
+    requestAnimationFrame(() => {
+      columnVirtualizer.measure();
+    });
   }, [columnSizingState, columnVirtualizer]);
   React.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 = updateColumnWidthsRecursive(propsColumns, columnSizing);
       setColumns(aa);
-      requestAnimationFrame(() => {
-        columnVirtualizer.measure();
-      });
+
+      // requestAnimationFrame(() => {
+
+      //   columnVirtualizer.measure()
+      // })
     }
   }, [columnSizingInfo]);
-  React.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 = 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/es/table-component/body/EditableCell.js

@@ -283,6 +283,7 @@ const EditableCell = props => {
         });
       case 'time':
         const timeFormat = getDatepickerFormat(editType, cellFormat);
+        const time = value ? dayjs(value, timeFormat) : null;
         const maxTimeValue = !isEmpty(column.maxTime) ? dayjs(column.maxTime).format(timeFormat) : null;
         const minTimeValue = !isEmpty(column.minTime) ? dayjs(column.minTime).format(timeFormat) : null;
 
@@ -297,7 +298,10 @@ const EditableCell = props => {
           },
           placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           maxDate: maxTime,
-          minDate: minTime,
+          minDate: minTime
+          // value={time}
+          ,
+          defaultValue: time,
           disabled: isDisable(column, record) ?? false,
           style: {
             width: '100%',
@@ -308,7 +312,35 @@ const EditableCell = props => {
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId
+          defaultOpen: column.field === startCell?.colId,
+          onChange: (newDate, dateString) => {
+            // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+            onChange(dateString);
+            setTimeout(() => {
+              // @ts-ignore
+              dateTimePickerRef.current?.focus();
+            }, 0);
+          },
+          onBlur: () => {
+            const formState = getValues();
+            const itemState = getValues(dataIndex);
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = itemState;
+            if (prevState !== newState) {
+              handleCellChange?.({
+                key: key,
+                field: column.field ?? column.field,
+                record: formState,
+                prevState,
+                newState,
+                option: newState,
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          }
         });
       case 'selectTable':
         const rr = selectColumns ?? [];

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

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

package/es/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;