es-grid-template 1.4.2 → 1.4.4

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

@@ -14,7 +14,12 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { addClassBorderPasteCell, addClassCellIndexSelected, addRows8, addRowsUp, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, hideDraggingPoint, isEditable, isEqualSet, isObjEmpty, newGuid, onAddBorderSelectedCell, onAddBgSelectedCell, onRemoveBorderSelectedCell, onRemoveBgSelectedCell, removeClassBorderPasteCell, removeClassCellIndexSelected, showDraggingPoint, sortedSetASC, totalFixedWidth, updateArrayByKey, getFormat } from "../hooks";
+import { addClassBorderPasteCell, addClassCellIndexSelected, addRows8, addRowsUp, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, hideDraggingPoint, isEditable, isEqualSet, isObjEmpty, newGuid, onAddBgSelectedCell,
+// onRemoveBorderSelectedCell,
+onRemoveBgSelectedCell, removeClassBorderPasteCell, removeClassCellIndexSelected, showDraggingPoint, sortedSetASC, totalFixedWidth, updateArrayByKey, getFormat,
+// isRangeCell,
+// isSelectedCell,
+onRemoveBgCellIndex, onAddBgCellIndex, onAddBorderSelectedCell, onRemoveBorderSelectedCell } from "../hooks";
 import Message from "../../Message/Message";
 import { Toolbar, ConfigProvider, InputNumber } from "rc-master-ui";
 import classnames from "classnames";
@@ -180,7 +185,7 @@ const GridEdit = props => {
     dataSource,
     components,
     allowResizing,
-    rowKey = 'id',
+    rowKey = 'rowId',
     selectionSettings,
     height,
     format,
@@ -357,13 +362,13 @@ const GridEdit = props => {
   // thêm n dòng bên trên
   const handleInsertBefore = React.useCallback((item, n) => {
     //
-    onRemoveBgSelectedCell(selectedCells.current, id);
-    onRemoveBorderSelectedCell(selectedCells.current, id);
+    // onRemoveBgSelectedCell(selectedCells.current, id)
+    // onRemoveBorderSelectedCell(selectedCells.current, id)
     //
 
     setTimeout(() => {
-      onAddBgSelectedCell(selectedCells.current, id);
-      onAddBorderSelectedCell(selectedCells.current, id);
+      // onAddBgSelectedCell(selectedCells.current, id)
+      // onAddBorderSelectedCell(selectedCells.current, id)
     }, 10);
     const defaultRowValue = getDefaultValue(defaultValue);
     // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
@@ -553,8 +558,8 @@ const GridEdit = props => {
   }, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, rowKey, rowsFocus, triggerChangeData]);
   const handleDeleteRows = React.useCallback(item => {
     setTimeout(() => {
-      onAddBgSelectedCell(selectedCells.current, id);
-      onAddBorderSelectedCell(selectedCells.current, id);
+      // onAddBgSelectedCell(selectedCells.current, id)
+      // onAddBorderSelectedCell(selectedCells.current, id)
     });
     if (item.onClick) {
       item.onClick({
@@ -816,7 +821,7 @@ const GridEdit = props => {
     }
   } = useForm({
     mode: 'onChange',
-    resolver: yupResolver(validate)
+    resolver: validate ? yupResolver(validate) : undefined
   });
   const isEditing = React.useCallback(record => {
     return record[rowKey] === editingKey;
@@ -866,77 +871,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 (!isEqualSet(cells, rangeCells)) {
-            onRemoveBgSelectedCell(rangeCells, id);
-            onRemoveBorderSelectedCell(rangeCells, id);
-            hideDraggingPoint(rangeCells, id);
-          }
-        }
-        if (rowsSelected.current && rowsSelected.current.size > 0) {
-          removeClassCellIndexSelected(rowsSelected.current, id);
-        }
-        if (!isEqualSet(cells, selectedCells.current)) {
-          selectedCells.current = cells;
-          if (editingKey) {
-            setTimeout(() => {
-              onAddBgSelectedCell(cells, id);
-              onAddBorderSelectedCell(cells, id);
-            }, 200);
-          } else {
-            onAddBgSelectedCell(cells, id);
-            onAddBorderSelectedCell(cells, id);
-          }
-        }
-
-        // setRowsSelected(new Set())
-        rowsSelected.current = new Set();
-      }
-    }
-  };
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
     const tmpCols = {
@@ -957,35 +891,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));
@@ -1065,18 +970,20 @@ const GridEdit = props => {
 
     /// cập nhật cell class
     if (selectedCells.current && selectedCells.current.size > 0) {
-      onRemoveBgSelectedCell(rangeCells, id);
-      onRemoveBorderSelectedCell(rangeCells, id);
+      // onRemoveBgSelectedCell(rangeCells, id)
+      // onRemoveBorderSelectedCell(rangeCells, id)
     }
 
     // selectedCells.current = sortedSetASC(mergedSet)
     hideDraggingPoint(selectedCells.current, id);
-    selectedCells.current = sortedSetASC(mergedSet);
-    setRangeCells(sortedSetASC(mergedSet));
+    const newCells = sortedSetASC(mergedSet);
+    selectedCells.current = newCells;
+    onAddBgCellIndex(newCells, id);
+    setRangeCells(newCells);
+    onAddBgSelectedCell(newCells, id);
+    onAddBorderSelectedCell(newCells, id);
     setTimeout(() => {
-      onAddBgSelectedCell(sortedSetASC(mergedSet), id);
-      onAddBorderSelectedCell(sortedSetASC(mergedSet), id);
-      showDraggingPoint(sortedSetASC(mergedSet), id);
+      showDraggingPoint(newCells, id);
     }, 50);
 
     // setPasteCells(new Set())
@@ -1101,6 +1008,80 @@ const GridEdit = props => {
     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 (!isEqualSet(cells, rangeCells)) {
+            // onRemoveBgSelectedCell(rangeCells, id)
+            // onRemoveBorderSelectedCell(rangeCells, id)
+            hideDraggingPoint(rangeCells, id);
+            onRemoveBgCellIndex(selectedCells.current, id);
+          }
+        }
+        if (rowsSelected.current && rowsSelected.current.size > 0) {
+          removeClassCellIndexSelected(rowsSelected.current, id);
+        }
+        if (!isEqualSet(cells, selectedCells.current)) {
+          onRemoveBgSelectedCell(selectedCells.current, id);
+          hideDraggingPoint(selectedCells.current, id);
+          selectedCells.current = cells;
+          // setRangeCells(cells)
+
+          onAddBgCellIndex(cells, id);
+          onAddBorderSelectedCell(cells, id);
+          onAddBgSelectedCell(selectedCells.current, id, false);
+          showDraggingPoint(selectedCells.current, id);
+        }
+
+        // setRowsSelected(new Set())
+        rowsSelected.current = new Set();
+      }
+    }
+  };
   const handleMouseUp = e => {
     isSelecting.current = false;
     startCell.current = null;
@@ -1109,12 +1090,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])
@@ -1126,18 +1101,20 @@ const GridEdit = props => {
       triggerDragPaste(pasteCells.current);
     } else {
       setRangeCells(selectedCells.current);
-      onRemoveBorderSelectedCell(rangeCells, id);
-      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) {
         hideDraggingPoint(selectedCells.current, id);
+        onAddBorderSelectedCell(selectedCells.current, id);
+
+        // showDraggingPoint(selectedCells.current, id)
       }
       showDraggingPoint(selectedCells.current, id);
+      // onAddBorderSelectedCell(selectedCells.current, id)
     }
   };
   const handleMouseEnter = (row, col, e) => {
@@ -1256,15 +1233,17 @@ const GridEdit = props => {
     // setSelectedCells(new Set(newSelectedCells));
 
     if (selectedCells.current && selectedCells.current.size > 0) {
-      onRemoveBgSelectedCell(selectedCells.current, id);
-      onRemoveBorderSelectedCell(selectedCells.current, id);
+      // onRemoveBgSelectedCell(selectedCells.current, id)
+      // onRemoveBorderSelectedCell(selectedCells.current, id)
     }
     if (rowsSelected.current && rowsSelected.current.size > 0) {
       removeClassCellIndexSelected(rowsSelected.current, id);
     }
     selectedCells.current = newSelectedCells;
-    onAddBgSelectedCell(newSelectedCells, id);
-    onAddBorderSelectedCell(newSelectedCells, id);
+
+    // onAddBgSelectedCell(newSelectedCells, id)
+    // onAddBorderSelectedCell(newSelectedCells, id)
+
     hideDraggingPoint(selectedCells.current, id);
     showDraggingPoint(newSelectedCells, id);
   };
@@ -1273,6 +1252,9 @@ const GridEdit = props => {
       e.stopPropagation();
       return;
     }
+    if (editingKey) {
+      setEditingKey('');
+    }
     isSelectingRow.current = true;
     rowStart.current = {
       row,
@@ -1285,13 +1267,11 @@ const GridEdit = props => {
         newSelectedCells.add(`${r}-${c}`);
       }
     }
-
-    // setSelectedCells(newSelectedCells)
-    // setRowsSelected(new Set([`${row}-${col}`]));
-
     if (selectedCells.current && selectedCells.current.size > 0) {
+      onRemoveBgCellIndex(selectedCells.current, id);
       onRemoveBgSelectedCell(selectedCells.current, id);
       onRemoveBorderSelectedCell(selectedCells.current, id);
+      // onRemoveBorderSelectedCell(selectedCells.current, id)
     }
     if (rowsSelected.current && rowsSelected.current.size > 0) {
       removeClassCellIndexSelected(rowsSelected.current, id);
@@ -1300,7 +1280,9 @@ const GridEdit = props => {
     selectedCells.current = newSelectedCells;
     rowsSelected.current = new Set([`${row}-${col}`]);
     onAddBgSelectedCell(newSelectedCells, id, false);
-    onAddBorderSelectedCell(newSelectedCells, id);
+    setTimeout(() => {
+      onAddBgSelectedCell(newSelectedCells, id, false);
+    }, 10);
     addClassCellIndexSelected(new Set([`${row}-${col}`]), id);
   };
   const handleMouseEnterRowHeader = (row, col, e) => {
@@ -1330,13 +1312,11 @@ const GridEdit = props => {
     if (selectedCells.current && selectedCells.current.size > 0) {
       onRemoveBgSelectedCell(selectedCells.current, id);
     }
-    // setSelectedCells(newSelectedCells)
     selectedCells.current = newSelectedCells;
     onAddBgSelectedCell(newSelectedCells, id);
     if (rowsSelected.current && rowsSelected.current.size > 0) {
       removeClassCellIndexSelected(rowsSelected.current, id);
     }
-    // setRowsSelected(newSelectedRows)
     rowsSelected.current = newSelectedRows;
     addClassCellIndexSelected(newSelectedRows, id);
   };
@@ -1755,6 +1735,7 @@ const GridEdit = props => {
     }
   };
   const handleEdit = (record, col, editType, e) => {
+    onRemoveBorderSelectedCell(selectedCells.current, id);
     setTooltipContent('');
     // @ts-ignore
     setEditingKey(record[rowKey]);
@@ -1854,10 +1835,16 @@ const GridEdit = props => {
       hideDraggingPoint(selectedCells.current, id);
       selectedCells.current = cells;
       setRangeCells(cells);
-      setTimeout(() => {
-        onAddBgSelectedCell(selectedCells.current, id);
-        onAddBorderSelectedCell(selectedCells.current, id);
-      }, 50);
+
+      // setTimeout(() => {
+      //
+      //   // onAddBgSelectedCell(selectedCells.current, id)
+      //   // onAddBorderSelectedCell(selectedCells.current, id)
+      //
+      // }, 50)
+
+      onAddBgSelectedCell(selectedCells.current, id);
+      onAddBorderSelectedCell(selectedCells.current, id);
       showDraggingPoint(cells, id);
     };
     const focusNextCell = (editingCell, cellEditable) => {
@@ -1866,6 +1853,7 @@ const GridEdit = props => {
           updateSelection();
           if (e?.key !== 'Tab') {
             editingCell.focus();
+            // editingCell.click()
           }
         }
         if (scrollType === 'horizontal' && editingCell) {
@@ -1877,6 +1865,8 @@ const GridEdit = props => {
           scrollToCell(rowIndex, colIndex, cellEdit, 'vertical');
           if (e?.key !== 'Tab') {
             cellEditable.focus();
+            onAddBorderSelectedCell(selectedCells.current, id);
+            // editingCell.click()
           }
         }
       } else {
@@ -1884,6 +1874,7 @@ const GridEdit = props => {
           updateSelection();
           if (e?.key !== 'Tab') {
             cellEditable.focus();
+            onAddBorderSelectedCell(selectedCells.current, id);
           }
         }
         if (cellEditable) {
@@ -1905,296 +1896,312 @@ const GridEdit = props => {
       focusNextCell(cellEdit, cell);
     }
   };
-  const convertColumns = flatColumns2(columns.filter(it => it.visible !== false)).map((column, colIndex) => {
-    if (column === SELECTION_COLUMN) {
-      return SELECTION_COLUMN;
-    }
-    if (column.field === '#') {
+  const convertColumns = React.useMemo(() => {
+    return flatColumns2(columns.filter(it => it.visible !== false)).map((column, colIndex) => {
+      if (column === SELECTION_COLUMN) {
+        return SELECTION_COLUMN;
+      }
+      if (column.field === '#') {
+        return {
+          ...column,
+          className: 'rc-ui-cell-editable rc-ui-cell-index',
+          onCell: (record, rowIndex) => {
+            const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
+            return {
+              'data-row-index': rowNumber,
+              onPaste: event => {
+                if (editingKey === '') {
+                  handlePaste(record, colIndex + 1, rowNumber, event);
+                  event.preventDefault();
+                }
+              },
+              onCopy: e => {
+                if (editingKey === '') {
+                  handleCopy(e);
+                  e.preventDefault();
+                }
+              },
+              // onClick: () => {
+              //   if (record[rowKey] !== editingKey && (editingKey !== '')) {
+              //     setEditingKey('')
+              //   }
+              // },
+              tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex
+            };
+          },
+          render: (value, record) => {
+            const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
+            return /*#__PURE__*/React.createElement("div", {
+              className: classNames('ui-rc_cell-content ui-rc_cell-content--index', {}),
+              onMouseDown: event => handleMouseDownRowHeader(rowNumber, colIndex, column, event),
+              onMouseEnter: event => handleMouseEnterRowHeader(rowNumber, colIndex, event),
+              onMouseUp: event => handleMouseUp(event)
+            }, /*#__PURE__*/React.createElement("div", {
+              className: 'ui-rc_content'
+            }, findItemPath(dataSource, record, rowKey)));
+          }
+        };
+      }
+      if (column.field === 'command') {
+        return {
+          ...column
+        };
+      }
       return {
         ...column,
-        className: 'rc-ui-cell-editable rc-ui-cell-index',
         onCell: (record, rowIndex) => {
           const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
           return {
-            'data-row-index': rowNumber,
-            onPaste: event => {
-              if (editingKey === '') {
-                handlePaste(record, colIndex + 1, rowNumber, event);
-                event.preventDefault();
-              }
-            },
-            onCopy: e => {
-              if (editingKey === '') {
-                handleCopy(e);
-                e.preventDefault();
-              }
-            },
-            onClick: () => {
-              if (record[rowKey] !== editingKey && editingKey !== '') {
-                setEditingKey('');
-              }
-            },
-            tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex
-          };
-        },
-        render: (value, record) => {
-          const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
-          return /*#__PURE__*/React.createElement("div", {
-            className: classNames('ui-rc_cell-content ui-rc_cell-content--index', {}),
-            onMouseDown: event => handleMouseDownRowHeader(rowNumber, colIndex, column, event),
-            onMouseEnter: event => handleMouseEnterRowHeader(rowNumber, colIndex, event),
-            onMouseUp: handleMouseUp
-          }, /*#__PURE__*/React.createElement("div", {
-            className: 'ui-rc_content'
-          }, findItemPath(dataSource, record, rowKey)));
-        }
-      };
-    }
-    if (column.field === 'command') {
-      return {
-        ...column
-      };
-    }
-    return {
-      ...column,
-      onCell: (record, rowIndex) => {
-        const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
-        return {
-          ...column?.onCell?.(record, rowIndex),
-          onKeyDown: event => {
-            const key = getRowKey(record, dataSource.indexOf(record));
-            if (event.key === 'Control' && event.ctrlKey) {} else {
-              if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-                if (record[rowKey] !== editingKey && isEditable(column, record)) {
-                  // ~~ khi editingKey = ''
-                  event.preventDefault();
-                  event.stopPropagation();
-                  handleEdit(record, column, column.editType, event);
-                  onRemoveBgSelectedCell(selectedCells.current, id);
-                  onRemoveBorderSelectedCell(selectedCells.current, id);
-                  selectedCells.current = new Set();
-                  handleCellClick(rowNumber, record, column);
-                  const hasKey = mergedExpandedKeys.has(key);
-                  if (hasKey) {
-                    // mergedExpandedKeys.delete(key);
-                    // newExpandedKeys = [...mergedExpandedKeys];
-                  } else {
-                    onTriggerExpand(record);
-                  }
-                } else {
-                  if (event.key === 'Enter') {
+            ...column?.onCell?.(record, rowIndex),
+            onKeyDown: event => {
+              const key = getRowKey(record, dataSource.indexOf(record));
+              if (event.key === 'Control' && event.ctrlKey) {} else {
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
+                  if (record[rowKey] !== editingKey && isEditable(column, record)) {
+                    // ~~ khi editingKey = ''
                     event.preventDefault();
                     event.stopPropagation();
-                    if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length && event.key === 'Enter') {
-                      handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
-                    } else {
-                      // // focus cell hiện tại và tắt edit
-                      // handleFocusCell((rowNumber ?? 0), colIndex, column, 'vertical', event)
-                      // setEditingKey('')
+                    handleEdit(record, column, column.editType, event);
 
-                      // thêm dòng mới
+                    // onRemoveBgSelectedCell(selectedCells.current, id)
+                    // onRemoveBorderSelectedCell(selectedCells.current, id)
 
-                      handleAddSingle();
-                      handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event, true);
+                    // selectedCells.current = new Set()
+
+                    handleCellClick(rowNumber, record, column);
+                    const hasKey = mergedExpandedKeys.has(key);
+                    if (hasKey) {
+                      // mergedExpandedKeys.delete(key);
+                      // newExpandedKeys = [...mergedExpandedKeys];
+                    } else {
+                      onTriggerExpand(record);
+                    }
+                  } else {
+                    if (event.key === 'Enter') {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length && event.key === 'Enter') {
+                        handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
+                      } else {
+                        // // focus cell hiện tại và tắt edit
+                        // handleFocusCell((rowNumber ?? 0), colIndex, column, 'vertical', event)
+                        // setEditingKey('')
+
+                        // thêm dòng mới
+
+                        handleAddSingle();
+                        handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event, true);
+                      }
                     }
                   }
                 }
-              }
-              if (event.key === 'Tab') {
-                if (editingKey) {} else {
-                  if (colIndex + 1 !== visibleCols.length) {
+                if (event.key === 'Tab') {
+                  if (editingKey) {} else {
+                    if (colIndex + 1 !== visibleCols.length) {
+                      handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
+                    } else {
+                      event.stopPropagation();
+                      event.preventDefault();
+                    }
+                  }
+                }
+                if (event.key === 'ArrowRight' && colIndex + 1 !== visibleCols.length) {
+                  if (editingKey !== '') {} else {
                     handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
-                  } else {
+                  }
+                }
+                if (event.key === 'ArrowLeft' && colIndex > 0) {
+                  if (!column.dataIndex && !column.key || column.field === '#' || column.dataIndex === '#') {
                     event.stopPropagation();
                     event.preventDefault();
+                  } else {
+                    if (editingKey !== '') {} else {
+                      handleFocusCell(rowNumber, colIndex - 1, column, 'horizontal', event);
+                    }
                   }
                 }
-              }
-              if (event.key === 'ArrowRight' && colIndex + 1 !== visibleCols.length) {
-                if (editingKey !== '') {} else {
-                  handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
+                if (event.key === 'ArrowDown' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length) {
+                  if (isEditing(record) && (getEditType(column, record) === 'treeSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'asyncSelect')) {
+                    event.stopPropagation();
+                  } else {
+                    handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
+                  }
                 }
-              }
-              if (event.key === 'ArrowLeft' && colIndex > 0) {
-                if (!column.dataIndex && !column.key || column.field === '#' || column.dataIndex === '#') {
-                  event.stopPropagation();
-                  event.preventDefault();
-                } else {
-                  if (editingKey !== '') {} else {
-                    handleFocusCell(rowNumber, colIndex - 1, column, 'horizontal', event);
+                if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
+                  if (isEditing(record) && (getEditType(column, record) === 'asyncSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'treeSelect')) {
+                    event.stopPropagation();
+                  } else {
+                    handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
                   }
                 }
-              }
-              if (event.key === 'ArrowDown' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length) {
-                if (isEditing(record) && (getEditType(column, record) === 'treeSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'asyncSelect')) {
-                  event.stopPropagation();
-                } else {
-                  handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
+                if (event.key === 'Delete') {
+                  handleDeleteContent();
                 }
-              }
-              if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
-                if (isEditing(record) && (getEditType(column, record) === 'asyncSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'treeSelect')) {
-                  event.stopPropagation();
-                } else {
-                  handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
+                if (event.key === 'Escape') {
+                  setEditingKey('');
                 }
               }
-              if (event.key === 'Delete') {
-                handleDeleteContent();
+            },
+            onPaste: event => {
+              if (editingKey === '') {
+                handlePaste(record, colIndex, rowNumber, event);
+                event.preventDefault();
               }
-              if (event.key === 'Escape') {
-                setEditingKey('');
+            },
+            onCopy: e => {
+              if (editingKey === '') {
+                handleCopy(e);
+                e.preventDefault();
               }
-            }
-          },
-          onPaste: event => {
-            if (editingKey === '') {
-              handlePaste(record, colIndex, rowNumber, event);
-              event.preventDefault();
-            }
-          },
-          onCopy: e => {
-            if (editingKey === '') {
-              handleCopy(e);
-              e.preventDefault();
-            }
-          },
-          onDoubleClick: event => {
-            if (!isEditing(record) && record[rowKey] !== editingKey && isEditable(column, record)) {
-              handleEdit(record, column, getEditType(column, record), event);
-              onRemoveBgSelectedCell(selectedCells.current, id);
-              onRemoveBorderSelectedCell(selectedCells.current, id);
-              handleCellClick(rowNumber, record, column);
-            }
-          },
-          onContextMenu: () => {
-            // isSelecting.current = true;
-            // startCell.current = { row: rowNumber, col: colIndex };
-
-            if (selectedCells.size === 0) {
-              // setStartSelectedCell({ row: rowNumber, col: colIndex })
-              // setSelectedCells(new Set([`${rowNumber}-${colIndex}`]));
-
-              startSelectedCells.current = {
-                row: rowNumber,
-                col: colIndex
-              };
-              selectedCells.current = new Set([`${rowNumber}-${colIndex}`]);
-              rowsSelected.current = new Set();
-            }
-          },
-          onClick: () => {
-            if (record[rowKey] !== editingKey && editingKey !== '') {
-              setEditingKey('');
-            } else {
-              if (editingKey) {
+            },
+            onDoubleClick: event => {
+              if (!isEditing(record) && record[rowKey] !== editingKey && isEditable(column, record)) {
+                handleEdit(record, column, getEditType(column, record), event);
+
+                // onRemoveBgSelectedCell(selectedCells.current, id)
+                // onRemoveBorderSelectedCell(selectedCells.current, id)
                 handleCellClick(rowNumber, record, column);
               }
+            },
+            onContextMenu: () => {
+              // isSelecting.current = true;
+              // startCell.current = { row: rowNumber, col: colIndex };
+
+              if (selectedCells.size === 0) {
+                // setStartSelectedCell({ row: rowNumber, col: colIndex })
+                // setSelectedCells(new Set([`${rowNumber}-${colIndex}`]));
+
+                startSelectedCells.current = {
+                  row: rowNumber,
+                  col: colIndex
+                };
+                selectedCells.current = new Set([`${rowNumber}-${colIndex}`]);
+                rowsSelected.current = new Set();
+              }
+            },
+            onClick: () => {
+              if (record[rowKey] !== editingKey && editingKey !== '') {
+                // setEditingKey('')
+              } else {
+                if (record[rowKey] !== editingKey) {
+                  onAddBorderSelectedCell(selectedCells.current, id);
+                }
+                if (editingKey) {
+                  handleCellClick(rowNumber, record, column);
+                }
+              }
+            },
+            // 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: classNames('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: !isEditable(column as any, record)
+            }),
+            record,
+            column: column,
+            editType: getEditType(column, record),
+            dataIndex: column.dataIndex,
+            indexRow: rowNumber,
+            indexCol: colIndex,
+            title: getValueCell(column, record[column.field], format),
+            'data-col-index': colIndex,
+            'data-row-index': rowNumber,
+            'data-tooltip-id': "tooltip-cell-content",
+            editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column, record),
+            cellEditing,
+            t,
+            tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
+            style: isPasteDragging ? {
+              cursor: "crosshair"
+            } : {}
+          };
+        },
+        onHeaderCell: (data, index) => {
+          return {
+            ...(column.onHeaderCell ? column.onHeaderCell?.(data, index) : {}),
+            onClick: () => {
+              handleClickColHeader(column, colIndex);
+            },
+            onCopy: e => {
+              if (editingKey === '') {
+                handleCopy(e);
+                e.preventDefault();
+              }
+            },
+            onPaste: event => {
+              if (editingKey === '') {
+                handlePaste(dataSource[0], colIndex, 0, event);
+                event.preventDefault();
+              }
+            },
+            style: {
+              userSelect: 'none'
             }
-          },
-          className: isEditing(record) ? `rc-ui-cell-editable cell-editing ${!isEditable(column, record) ? 'disable' : ''}` : `rc-ui-cell-editable cell-editable ${!isEditable(column, record) ? 'disable' : ''}`,
-          record,
-          column: column,
-          editType: getEditType(column, record),
-          dataIndex: column.dataIndex,
-          indexRow: rowNumber,
-          indexCol: colIndex,
-          title: getValueCell(column, record[column.field], format),
-          '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 && isEditable(column, record),
-          cellEditing,
-          t,
-          tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
-          style: isPasteDragging ? {
-            cursor: "crosshair"
-          } : {}
-        };
-      },
-      onHeaderCell: (data, index) => {
-        return {
-          ...(column.onHeaderCell ? column.onHeaderCell?.(data, index) : {}),
-          onClick: () => {
-            handleClickColHeader(column, colIndex);
-          },
-          onCopy: e => {
-            if (editingKey === '') {
-              handleCopy(e);
-              e.preventDefault();
-            }
-          },
-          onPaste: event => {
-            if (editingKey === '') {
-              handlePaste(dataSource[0], colIndex, 0, event);
-              event.preventDefault();
-            }
-          },
-          style: {
-            userSelect: 'none'
-          }
-        };
-      },
-      render: (value, record, rowIndex) => {
-        const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
-        const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
-        const cellFormat = getFormat(colFormat, format);
-        const rowError = dataErrors.find(it => it.index === rowNumber);
-        const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null;
-
-        // const aaa =  dataErrors.find((it) => column?.field && it[column.field].field === column.field && it.index === rowNumber)
-        // const aaa =  column.field && rowError && rowError[column.field]?.field === column?.field
-
-        return /*#__PURE__*/React.createElement("div", {
-          className: classNames('ui-rc_cell-content', {
-            // disable: !isEditable(column as any, record)
-            isValid: column.field && rowError && rowError[column.field]?.field === column?.field
-          }),
-          onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
-          onMouseEnter: event => {
-            // setTooltipContent(cellError ? cellError.message : renderContent(column as any, value, record, rowIndex, cellFormat))
-            setTooltipContent(cellError ? cellError.message : '');
-            handleMouseEnter(rowNumber, colIndex, event);
-          },
-          onMouseUp: handleMouseUp,
-          onMouseMove: () => {
-            if (selectedCells && selectedCells.current.size > 0 && isMouseDown.current) {
-              hideDraggingPoint(selectedCells.current, id);
-              isDragMouse.current = true;
-            }
-          }
+          };
+        },
+        render: (value, record, rowIndex) => {
+          const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
+          const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+          const cellFormat = getFormat(colFormat, format);
+          const rowError = dataErrors.find(it => it.index === rowNumber);
+          const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null;
 
-          // onClick={(event) => {
-          //
-          //   handleClickCell(event)
-          //
-          // }}
-        }, /*#__PURE__*/React.createElement("div", {
-          className: 'ui-rc_content'
-        }, renderContent(column, value, record, rowIndex, cellFormat)),
-        // selectedCells.current && selectedCells.current.size > 0 && getLastSelectCell(selectedCells.current).row === rowNumber &&
-        // getLastSelectCell(selectedCells.current).col === colIndex &&
-        // isEditable(column as any, record) &&
-
-        !isDragMouse.current && /*#__PURE__*/React.createElement("div", {
-          className: 'dragging-point hidden',
-          onMouseDown: e => {
-            // e.stopPropagation()
-            e.preventDefault();
-            if (e.button === 0) {
-              setIsPasteDragging(true);
+          // const aaa =  dataErrors.find((it) => column?.field && it[column.field].field === column.field && it.index === rowNumber)
+          // const aaa =  column.field && rowError && rowError[column.field]?.field === column?.field
+
+          return /*#__PURE__*/React.createElement("div", {
+            className: classNames('ui-rc_cell-content', {
+              // disable: !isEditable(column as any, record)
+              isValid: column.field && rowError && rowError[column.field]?.field === column?.field
+            }),
+            onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
+            onMouseEnter: event => {
+              // setTooltipContent(cellError ? cellError.message : renderContent(column as any, value, record, rowIndex, cellFormat))
+              setTooltipContent(cellError ? cellError.message : '');
+              handleMouseEnter(rowNumber, colIndex, event);
+            },
+            onMouseUp: handleMouseUp,
+            onMouseMove: () => {
+              if (selectedCells && selectedCells.current.size > 0 && isMouseDown.current) {
+                hideDraggingPoint(selectedCells.current, id);
+                isDragMouse.current = true;
+              }
             }
-          },
-          onDoubleClick: handlePointDoubleClick
-        }, /*#__PURE__*/React.createElement("span", {
-          className: 'dot-point'
-        })));
-      }
-    };
-  });
+
+            // onClick={(event) => {
+            //
+            //   handleClickCell(event)
+            //
+            // }}
+          }, /*#__PURE__*/React.createElement("div", {
+            className: 'ui-rc_content'
+          }, renderContent(column, value, record, rowIndex, cellFormat)),
+          // selectedCells.current && selectedCells.current.size > 0 && getLastSelectCell(selectedCells.current).row === rowNumber &&
+          // getLastSelectCell(selectedCells.current).col === colIndex &&
+          // isEditable(column as any, record) &&
+
+          !isDragMouse.current && /*#__PURE__*/React.createElement("div", {
+            className: 'dragging-point hidden',
+            onMouseDown: e => {
+              // e.stopPropagation()
+              e.preventDefault();
+              if (e.button === 0) {
+                setIsPasteDragging(true);
+              }
+            },
+            onDoubleClick: handlePointDoubleClick
+          }, /*#__PURE__*/React.createElement("span", {
+            className: 'dot-point'
+          })));
+        }
+      };
+    });
+  }, [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, rangeCells, rowEditable, rowKey, setTooltipContent, t, visibleCols.length]);
   const transformColumns = React.useCallback(cols => {
     // @ts-ignore
     return cols.map(column => {