es-grid-template 1.4.3 → 1.4.5

package/lib/grid-component/table/GridEdit.js

@@ -25,10 +25,11 @@ var _hooks = require("../hooks");
 var _Message = _interopRequireDefault(require("../../Message/Message"));
 var _rcMasterUi = require("rc-master-ui");
 var _becoxyIcons = require("becoxy-icons");
-var _faker = require("@faker-js/faker");
 var _InternalTable = require("../InternalTable");
 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 {faker} from "@faker-js/faker";
+
 const {
   Paragraph,
   Title
@@ -181,7 +182,7 @@ const validateData = async (data, formSchema) => {
 };
 const GridEdit = props => {
   const {
-    id: tableId,
+    id,
     tableRef,
     t,
     columns,
@@ -191,6 +192,7 @@ const GridEdit = props => {
     rowKey = 'id',
     selectionSettings,
     height,
+    scrollHeight,
     format,
     triggerChangeData,
     triggerChangeColumns,
@@ -232,20 +234,143 @@ const GridEdit = props => {
   const visibleCols = _react.default.useMemo(() => {
     return (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false));
   }, [columns]);
-  const id = _react.default.useMemo(() => {
-    return tableId ?? _faker.faker.string.alpha(20);
-    // return tableId ?? newGuid()
-  }, [tableId]);
-  const itemsAdd = [{
-    key: '10',
-    label: '10 rows'
-  }, {
-    key: '50',
-    label: '50 rows'
-  }, {
-    key: '100',
-    label: '100 rows'
-  }];
+
+  //   const id  = React.useMemo(() => {
+  //
+  //   return tableId ?? faker.string.alpha(20)
+  //   // return tableId ?? newGuid()
+  //
+  // }, [tableId])
+
+  const itemsAdd = _react.default.useMemo(() => {
+    return [{
+      key: '10',
+      label: `10 ${t ? t('rows') : 'rows'}`
+    }, {
+      key: '50',
+      label: `50 ${t ? t('rows') : 'rows'}`
+    }, {
+      key: '100',
+      label: `100 ${t ? t('rows') : 'rows'}`
+    }];
+  }, [t]);
+
+  // const defaultContext = React.useMemo(() => {
+  //   return  [
+  //     {
+  //       key: 'INSERT_BEFORE',
+  //       label: 'Thêm dòng bên trên',
+  //       icon: <Plus fontSize={14} />,
+  //       children: [
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_1',
+  //           label: 'Thêm 1 dòng',
+  //           row: 1
+  //         },
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_10',
+  //           label: 'Thêm 10 dòng',
+  //           row: 10
+  //         },
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_50',
+  //           label: 'Thêm 50 dòng',
+  //           row: 50
+  //         },
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_100',
+  //           label: 'Thêm 100 dòng',
+  //           row: 100
+  //         },
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_ADV',
+  //           label: 'Tùy chỉnh'
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       key: 'INSERT_AFTER',
+  //       label: 'Thêm dòng bên dưới',
+  //       icon: <Plus fontSize={14} />,
+  //       children: [
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_1',
+  //           label: 'Thêm 1 dòng',
+  //           row: 1
+  //         },
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_10',
+  //           label: 'Thêm 10 dòng',
+  //           row: 10
+  //         },
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_50',
+  //           label: 'Thêm 50 dòng',
+  //           row: 50
+  //         },
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_100',
+  //           label: 'Thêm 100 dòng',
+  //           row: 100
+  //         },
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_ADV',
+  //           label: 'Tùy chỉnh'
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       key: 'INSERT_CHILDREN',
+  //       // label: 'Insert item children',
+  //       label: 'Thêm cấp con',
+  //       icon: <Plus fontSize={14} />
+  //       // children: [
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_1',
+  //       //     label: 'Thêm 1 dòng',
+  //       //     row: 1
+  //       //   },
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_10',
+  //       //     label: 'Thêm 10 dòng',
+  //       //     row: 10
+  //       //   },
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_50',
+  //       //     label: 'Thêm 50 dòng',
+  //       //     row: 50
+  //       //   },
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_100',
+  //       //     label: 'Thêm 100 dòng',
+  //       //     row: 100
+  //       //   },
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_ADV',
+  //       //     label: 'Tùy chỉnh'
+  //       //   }
+  //       // ]
+  //     },
+  //     { key: 'DELETE_CONTENT', label: 'Xóa nội dung', icon: <Trash2 fontSize={14} /> },
+  //     { key: 'DELETE_ROWS', label: 'Xóa dòng', icon: <Trash2 fontSize={14} /> }
+  //   ]
+  // }, [])
+
   const [form] = _antd.Form.useForm();
   const [editingKey, setEditingKey] = (0, _react.useState)('');
   const [dataErrors, setDataErrors] = (0, _react.useState)([]);
@@ -365,13 +490,13 @@ const GridEdit = props => {
   // thêm n dòng bên trên
   const handleInsertBefore = _react.default.useCallback((item, n) => {
     //
-    (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
-    (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
+    // onRemoveBgSelectedCell(selectedCells.current, id)
+    // onRemoveBorderSelectedCell(selectedCells.current, id)
     //
 
     setTimeout(() => {
-      (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
-      (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
+      // onAddBgSelectedCell(selectedCells.current, id)
+      // onAddBorderSelectedCell(selectedCells.current, id)
     }, 10);
     const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
     // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
@@ -442,7 +567,7 @@ const GridEdit = props => {
         triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
       }
     }
-  }, [dataSource, defaultValue, id, isFilter, rowKey, rowsFocus, triggerChangeData]);
+  }, [dataSource, defaultValue, isFilter, rowKey, rowsFocus, triggerChangeData]);
 
   //thêm 1 dòng bên dưới
   const handleInsertAfter = _react.default.useCallback((item, n) => {
@@ -527,7 +652,7 @@ const GridEdit = props => {
       });
     } else {
       const newData = [...dataSource];
-      let newElement = {};
+      let newElement;
       if (!record.children || record.children.length === 0) {
         newElement = {
           ...record,
@@ -561,8 +686,8 @@ const GridEdit = props => {
   }, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, rowKey, rowsFocus, triggerChangeData]);
   const handleDeleteRows = _react.default.useCallback(item => {
     setTimeout(() => {
-      (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
-      (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
+      // onAddBgSelectedCell(selectedCells.current, id)
+      // onAddBorderSelectedCell(selectedCells.current, id)
     });
     if (item.onClick) {
       item.onClick({
@@ -578,7 +703,7 @@ const GridEdit = props => {
       });
       triggerChangeData?.([...newData], 'DELETE_ROWS');
     }
-  }, [dataSource, id, rowsFocus, triggerChangeData]);
+  }, [dataSource, rowsFocus, triggerChangeData]);
   const handleDeleteAll = _react.default.useCallback(() => {
     triggerChangeData?.([], 'INSERT_BEFORE');
   }, [triggerChangeData]);
@@ -824,7 +949,7 @@ const GridEdit = props => {
     }
   } = (0, _reactHookForm.useForm)({
     mode: 'onChange',
-    resolver: (0, _yup.yupResolver)(validate)
+    resolver: validate ? (0, _yup.yupResolver)(validate) : undefined
   });
   const isEditing = _react.default.useCallback(record => {
     return record[rowKey] === editingKey;
@@ -874,77 +999,6 @@ const GridEdit = props => {
       document.removeEventListener("click", handleClickOutside);
     };
   }, [id]);
-  const handleMouseDown = (record, row, col, e) => {
-    if (editingKey && editingKey === record[rowKey]) {
-      return;
-    }
-    if (e.button === 2) {
-      e.stopPropagation();
-      return;
-    }
-
-    // isDragMouse.current = true
-    isMouseDown.current = true;
-    if (e.ctrlKey) {
-      isSelecting.current = true;
-      startCell.current = {
-        row,
-        col
-      };
-
-      // const cell: any  = new Set([`${row}-${col}`])
-
-      // setCurrentCtrlCells(cell)
-    } else {
-      isSelecting.current = true;
-      startCell.current = {
-        row,
-        col
-      };
-      const target = e.target;
-      if (target.closest('.dragging-point')) {
-        e.stopPropagation();
-        e.preventDefault();
-        return; // Không xử lý gì cả
-      } else {
-        // setStartSelectedCell({row, col})
-
-        startSelectedCells.current = {
-          row,
-          col
-        };
-
-        // setSelectedCells(new Set([`${row}-${col}`]));
-
-        const cells = new Set([`${row}-${col}`]);
-        if (selectedCells.current && selectedCells.current.size > 0) {
-          if (!(0, _hooks.isEqualSet)(cells, rangeCells)) {
-            (0, _hooks.onRemoveBgSelectedCell)(rangeCells, id);
-            (0, _hooks.onRemoveBorderSelectedCell)(rangeCells, id);
-            (0, _hooks.hideDraggingPoint)(rangeCells, id);
-          }
-        }
-        if (rowsSelected.current && rowsSelected.current.size > 0) {
-          (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
-        }
-        if (!(0, _hooks.isEqualSet)(cells, selectedCells.current)) {
-          selectedCells.current = cells;
-          if (editingKey) {
-            setTimeout(() => {
-              (0, _hooks.onAddBgSelectedCell)(cells, id);
-              (0, _hooks.onAddBorderSelectedCell)(cells, id);
-            }, 200);
-          } else {
-            (0, _hooks.onAddBgSelectedCell)(cells, id);
-            (0, _hooks.onAddBorderSelectedCell)(cells, id);
-          }
-        }
-
-        // setRowsSelected(new Set())
-        rowsSelected.current = new Set();
-      }
-    }
-  };
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
     const tmpCols = {
@@ -965,35 +1019,6 @@ const GridEdit = props => {
       // return { row, col, value: '' };
     });
 
-    // let selectedArray = []
-    //
-    // if (rowPasteLast > rowSelectedFirst) {
-    //   // kéo xuóng
-    //    selectedArray = Array.from(selectedCells).map((key: any) => {
-    //
-    //     const [row, col] = key.split("-").map(Number);
-    //     // @ts-ignore
-    //     const columnKey = columns[col].field;
-    //
-    //     // @ts-ignore
-    //     return { row, col, value: flattenData(childrenColumnName as any,dataSource)[row][columnKey] };
-    //     // return { row, col, value: '' };
-    //   });
-    // } else {
-    //   // kéo lên
-    //
-    //    selectedArray = Array.from(sortedSetDSC(selectedCells)).map((key: any) => {
-    //
-    //     const [row, col] = key.split("-").map(Number);
-    //     // @ts-ignore
-    //     const columnKey = columns[col].field;
-    //
-    //     // @ts-ignore
-    //     return { row, col, value: flattenData(childrenColumnName as any,dataSource)[row][columnKey] };
-    //     // return { row, col, value: '' };
-    //   });
-    // }
-
     // Xác định min/max row và col để sắp xếp dữ liệu
     const minRow = Math.min(...selectedArray.map(cell => cell.row));
     const maxRow = Math.max(...selectedArray.map(cell => cell.row));
@@ -1013,10 +1038,7 @@ const GridEdit = props => {
     }) => {
       table[row - minRow][col - minCol] = value;
     });
-    let newRange = {
-      combined: [],
-      addedRows: []
-    };
+    let newRange;
     if (rowPasteLast > rowSelectedFirst) {
       // kéo xuóng
       newRange = (0, _hooks.addRows8)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
@@ -1073,18 +1095,20 @@ const GridEdit = props => {
 
     /// cập nhật cell class
     if (selectedCells.current && selectedCells.current.size > 0) {
-      (0, _hooks.onRemoveBgSelectedCell)(rangeCells, id);
-      (0, _hooks.onRemoveBorderSelectedCell)(rangeCells, id);
+      // onRemoveBgSelectedCell(rangeCells, id)
+      // onRemoveBorderSelectedCell(rangeCells, id)
     }
 
     // selectedCells.current = sortedSetASC(mergedSet)
     (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
-    selectedCells.current = (0, _hooks.sortedSetASC)(mergedSet);
-    setRangeCells((0, _hooks.sortedSetASC)(mergedSet));
+    const newCells = (0, _hooks.sortedSetASC)(mergedSet);
+    selectedCells.current = newCells;
+    (0, _hooks.onAddBgCellIndex)(newCells, id);
+    setRangeCells(newCells);
+    (0, _hooks.onAddBgSelectedCell)(newCells, id);
+    (0, _hooks.onAddBorderSelectedCell)(newCells, id);
     setTimeout(() => {
-      (0, _hooks.onAddBgSelectedCell)((0, _hooks.sortedSetASC)(mergedSet), id);
-      (0, _hooks.onAddBorderSelectedCell)((0, _hooks.sortedSetASC)(mergedSet), id);
-      (0, _hooks.showDraggingPoint)((0, _hooks.sortedSetASC)(mergedSet), id);
+      (0, _hooks.showDraggingPoint)(newCells, id);
     }, 50);
 
     // setPasteCells(new Set())
@@ -1109,6 +1133,80 @@ const GridEdit = props => {
     (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
     triggerDragPaste(newPasteCells);
   };
+  const handleMouseDown = (record, row, col, e) => {
+    if (e.button === 2) {
+      e.stopPropagation();
+      return;
+    }
+    if (editingKey && editingKey === record[rowKey]) {
+      return;
+    }
+    if (record[rowKey] !== editingKey && editingKey !== '') {
+      setEditingKey('');
+    }
+
+    // isDragMouse.current = true
+    isMouseDown.current = true;
+    if (e.ctrlKey) {
+      isSelecting.current = true;
+      startCell.current = {
+        row,
+        col
+      };
+
+      // const cell: any  = new Set([`${row}-${col}`])
+
+      // setCurrentCtrlCells(cell)
+    } else {
+      isSelecting.current = true;
+      startCell.current = {
+        row,
+        col
+      };
+      const target = e.target;
+      if (target.closest('.dragging-point')) {
+        e.stopPropagation();
+        e.preventDefault();
+        return; // Không xử lý gì cả
+      } else {
+        // setStartSelectedCell({row, col})
+
+        startSelectedCells.current = {
+          row,
+          col
+        };
+
+        // setSelectedCells(new Set([`${row}-${col}`]));
+
+        const cells = new Set([`${row}-${col}`]);
+        if (selectedCells.current && selectedCells.current.size > 0) {
+          if (!(0, _hooks.isEqualSet)(cells, rangeCells)) {
+            // onRemoveBgSelectedCell(rangeCells, id)
+            // onRemoveBorderSelectedCell(rangeCells, id)
+            (0, _hooks.hideDraggingPoint)(rangeCells, id);
+            (0, _hooks.onRemoveBgCellIndex)(selectedCells.current, id);
+          }
+        }
+        if (rowsSelected.current && rowsSelected.current.size > 0) {
+          (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
+        }
+        if (!(0, _hooks.isEqualSet)(cells, selectedCells.current)) {
+          (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+          (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
+          selectedCells.current = cells;
+          // setRangeCells(cells)
+
+          (0, _hooks.onAddBgCellIndex)(cells, id);
+          (0, _hooks.onAddBorderSelectedCell)(cells, id);
+          (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id, false);
+          (0, _hooks.showDraggingPoint)(selectedCells.current, id);
+        }
+
+        // setRowsSelected(new Set())
+        rowsSelected.current = new Set();
+      }
+    }
+  };
   const handleMouseUp = e => {
     isSelecting.current = false;
     startCell.current = null;
@@ -1117,12 +1215,6 @@ const GridEdit = props => {
     isDragMouse.current = false;
     isMouseDown.current = false;
     setIsPasteDragging(false);
-
-    // isPasteDragging.current = false
-    // setSelectIsDragging(false);
-
-    // setCurrentCtrlCells(new Set())
-
     if (e.ctrlKey) {
 
       // setCtrlCells([...ctrlCells, currentCtrlCells])
@@ -1134,18 +1226,20 @@ const GridEdit = props => {
       triggerDragPaste(pasteCells.current);
     } else {
       setRangeCells(selectedCells.current);
-      (0, _hooks.onRemoveBorderSelectedCell)(rangeCells, id);
-      (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
       const target = e.target;
       if (target.closest('.dragging-point')) {
         e.stopPropagation();
         e.preventDefault();
         return; // Không xử lý gì cả
       }
-      if (selectedCells.current && selectedCells.current.size > 0) {
+      if (selectedCells.current && selectedCells.current.size > 1) {
         (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
+        (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
+
+        // showDraggingPoint(selectedCells.current, id)
       }
       (0, _hooks.showDraggingPoint)(selectedCells.current, id);
+      // onAddBorderSelectedCell(selectedCells.current, id)
     }
   };
   const handleMouseEnter = (row, col, e) => {
@@ -1264,15 +1358,17 @@ const GridEdit = props => {
     // setSelectedCells(new Set(newSelectedCells));
 
     if (selectedCells.current && selectedCells.current.size > 0) {
-      (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
-      (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
+      // onRemoveBgSelectedCell(selectedCells.current, id)
+      // onRemoveBorderSelectedCell(selectedCells.current, id)
     }
     if (rowsSelected.current && rowsSelected.current.size > 0) {
       (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
     }
     selectedCells.current = newSelectedCells;
-    (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
-    (0, _hooks.onAddBorderSelectedCell)(newSelectedCells, id);
+
+    // onAddBgSelectedCell(newSelectedCells, id)
+    // onAddBorderSelectedCell(newSelectedCells, id)
+
     (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
     (0, _hooks.showDraggingPoint)(newSelectedCells, id);
   };
@@ -1281,6 +1377,9 @@ const GridEdit = props => {
       e.stopPropagation();
       return;
     }
+    if (editingKey) {
+      setEditingKey('');
+    }
     isSelectingRow.current = true;
     rowStart.current = {
       row,
@@ -1293,13 +1392,11 @@ const GridEdit = props => {
         newSelectedCells.add(`${r}-${c}`);
       }
     }
-
-    // setSelectedCells(newSelectedCells)
-    // setRowsSelected(new Set([`${row}-${col}`]));
-
     if (selectedCells.current && selectedCells.current.size > 0) {
+      (0, _hooks.onRemoveBgCellIndex)(selectedCells.current, id);
       (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
       (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
+      // onRemoveBorderSelectedCell(selectedCells.current, id)
     }
     if (rowsSelected.current && rowsSelected.current.size > 0) {
       (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
@@ -1308,7 +1405,9 @@ const GridEdit = props => {
     selectedCells.current = newSelectedCells;
     rowsSelected.current = new Set([`${row}-${col}`]);
     (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id, false);
-    (0, _hooks.onAddBorderSelectedCell)(newSelectedCells, id);
+    setTimeout(() => {
+      (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id, false);
+    }, 10);
     (0, _hooks.addClassCellIndexSelected)(new Set([`${row}-${col}`]), id);
   };
   const handleMouseEnterRowHeader = (row, col, e) => {
@@ -1338,13 +1437,11 @@ const GridEdit = props => {
     if (selectedCells.current && selectedCells.current.size > 0) {
       (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
     }
-    // setSelectedCells(newSelectedCells)
     selectedCells.current = newSelectedCells;
     (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
     if (rowsSelected.current && rowsSelected.current.size > 0) {
       (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
     }
-    // setRowsSelected(newSelectedRows)
     rowsSelected.current = newSelectedRows;
     (0, _hooks.addClassCellIndexSelected)(newSelectedRows, id);
   };
@@ -1763,6 +1860,7 @@ const GridEdit = props => {
     }
   };
   const handleEdit = (record, col, editType, e) => {
+    (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
     setTooltipContent('');
     // @ts-ignore
     setEditingKey(record[rowKey]);
@@ -1862,10 +1960,16 @@ const GridEdit = props => {
       (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
       selectedCells.current = cells;
       setRangeCells(cells);
-      setTimeout(() => {
-        (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
-        (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
-      }, 50);
+
+      // setTimeout(() => {
+      //
+      //   // onAddBgSelectedCell(selectedCells.current, id)
+      //   // onAddBorderSelectedCell(selectedCells.current, id)
+      //
+      // }, 50)
+
+      (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
+      (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
       (0, _hooks.showDraggingPoint)(cells, id);
     };
     const focusNextCell = (editingCell, cellEditable) => {
@@ -1874,6 +1978,7 @@ const GridEdit = props => {
           updateSelection();
           if (e?.key !== 'Tab') {
             editingCell.focus();
+            // editingCell.click()
           }
         }
         if (scrollType === 'horizontal' && editingCell) {
@@ -1885,6 +1990,8 @@ const GridEdit = props => {
           scrollToCell(rowIndex, colIndex, cellEdit, 'vertical');
           if (e?.key !== 'Tab') {
             cellEditable.focus();
+            (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
+            // editingCell.click()
           }
         }
       } else {
@@ -1892,6 +1999,7 @@ const GridEdit = props => {
           updateSelection();
           if (e?.key !== 'Tab') {
             cellEditable.focus();
+            (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
           }
         }
         if (cellEditable) {
@@ -1937,11 +2045,11 @@ const GridEdit = props => {
                 e.preventDefault();
               }
             },
-            onClick: () => {
-              if (record[rowKey] !== editingKey && editingKey !== '') {
-                setEditingKey('');
-              }
-            },
+            // onClick: () => {
+            //   if (record[rowKey] !== editingKey && (editingKey !== '')) {
+            //     setEditingKey('')
+            //   }
+            // },
             tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex
           };
         },
@@ -1951,7 +2059,7 @@ const GridEdit = props => {
             className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {}),
             onMouseDown: event => handleMouseDownRowHeader(rowNumber, colIndex, column, event),
             onMouseEnter: event => handleMouseEnterRowHeader(rowNumber, colIndex, event),
-            onMouseUp: handleMouseUp
+            onMouseUp: event => handleMouseUp(event)
           }, /*#__PURE__*/_react.default.createElement("div", {
             className: 'ui-rc_content'
           }, (0, _hooks.findItemPath)(dataSource, record, rowKey)));
@@ -1978,9 +2086,12 @@ const GridEdit = props => {
                   event.preventDefault();
                   event.stopPropagation();
                   handleEdit(record, column, column.editType, event);
-                  (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
-                  (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
-                  selectedCells.current = new Set();
+
+                  // onRemoveBgSelectedCell(selectedCells.current, id)
+                  // onRemoveBorderSelectedCell(selectedCells.current, id)
+
+                  // selectedCells.current = new Set()
+
                   handleCellClick(rowNumber, record, column);
                   const hasKey = mergedExpandedKeys.has(key);
                   if (hasKey) {
@@ -2070,8 +2181,9 @@ const GridEdit = props => {
           onDoubleClick: event => {
             if (!isEditing(record) && record[rowKey] !== editingKey && (0, _hooks.isEditable)(column, record)) {
               handleEdit(record, column, (0, _hooks.getEditType)(column, record), event);
-              (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
-              (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
+
+              // onRemoveBgSelectedCell(selectedCells.current, id)
+              // onRemoveBorderSelectedCell(selectedCells.current, id)
               handleCellClick(rowNumber, record, column);
             }
           },
@@ -2093,14 +2205,27 @@ const GridEdit = props => {
           },
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
-              setEditingKey('');
+              // setEditingKey('')
             } else {
+              if (record[rowKey] !== editingKey) {
+                (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
+              }
               if (editingKey) {
                 handleCellClick(rowNumber, record, column);
               }
             }
           },
-          className: isEditing(record) ? `rc-ui-cell-editable cell-editing ${!(0, _hooks.isEditable)(column, record) ? 'disable' : ''}` : `rc-ui-cell-editable cell-editable ${!(0, _hooks.isEditable)(column, record) ? 'disable' : ''}`,
+          // className: isEditing(record) ? `rc-ui-cell-editable cell-editing ${!isEditable(column as any, record) ? 'disable' : ''}` : `rc-ui-cell-editable cell-editable ${!isEditable(column as any, record) ? 'disable' : ''}`,
+          className: (0, _classnames.default)('rc-ui-cell-editable', {
+            'cell-editing': isEditing(record),
+            'cell-editable': !isEditing(record),
+            // selected: isSelectedCell(rangeCells,rowIndex, colIndex),
+            // 'cell-border-bottom': isRangeCell(rangeCells, 'bottom',rowIndex, colIndex),
+            // 'cell-border-right': isRangeCell(rangeCells, 'right',rowIndex, colIndex),
+            // 'cell-border-top': isRangeCell(rangeCells, 'top',rowIndex, colIndex),
+            // 'cell-border-left': isRangeCell(rangeCells, 'left',rowIndex, colIndex),
+            disable: !(0, _hooks.isEditable)(column, record)
+          }),
           record,
           column: column,
           editType: (0, _hooks.getEditType)(column, record),
@@ -2111,9 +2236,6 @@ const GridEdit = props => {
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
           'data-tooltip-id': "tooltip-cell-content",
-          // 'data-tooltip-content': 'tooltip-cell-content',
-          // 'data-tooltip-delay-show': 1000,
-          // 'data-tooltip-content': getValueCell(column, record[column.field as any], format),
           editing: isEditing(record) && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record),
           cellEditing,
           t,
@@ -2203,6 +2325,40 @@ const GridEdit = props => {
       }
     };
   });
+  //   [
+  //   cellEditing,
+  //   columns,
+  //   dataErrors,
+  //   dataSource,
+  //   editingKey,
+  //   format,
+  //   getRowKey,
+  //   handleAddSingle,
+  //   handleCellClick,
+  //   handleClickColHeader,
+  //   handleCopy,
+  //   handleDeleteContent,
+  //   handleEdit,
+  //   handleFocusCell,
+  //   handleMouseDown,
+  //   handleMouseDownRowHeader,
+  //   handleMouseEnter,
+  //   handleMouseEnterRowHeader,
+  //   handleMouseUp,
+  //   handlePaste,
+  //   handlePointDoubleClick,
+  //   id,
+  //   isEditing,
+  //   isPasteDragging,
+  //   mergedExpandedKeys,
+  //   onTriggerExpand,
+  //   rowEditable,
+  //   rowKey,
+  //   setTooltipContent,
+  //   t,
+  //   visibleCols.length
+  // ])
+
   const transformColumns = _react.default.useCallback(cols => {
     // @ts-ignore
     return cols.map(column => {
@@ -2210,6 +2366,14 @@ const GridEdit = props => {
       if (column === _InternalTable.SELECTION_COLUMN) {
         return _InternalTable.SELECTION_COLUMN;
       }
+
+      // Xử lý đệ quy cho children
+      if (column.children?.length) {
+        return {
+          ...column,
+          children: transformColumns(column.children)
+        };
+      }
       if (find) {
         return {
           ...find
@@ -2220,14 +2384,6 @@ const GridEdit = props => {
           ...column
         };
       }
-
-      // Xử lý đệ quy cho children
-      if (column.children?.length) {
-        return {
-          ...column,
-          children: transformColumns(column.children)
-        };
-      }
     });
   }, [convertColumns]);
   const mergedColumns = _react.default.useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
@@ -2310,10 +2466,12 @@ const GridEdit = props => {
   };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     $heightTable: height,
+    $heightScroll: scrollHeight,
     style: {
       position: 'relative'
     },
-    ref: ref
+    ref: ref,
+    id: id
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
       rowKey,