es-grid-template 1.3.3 → 1.3.4

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

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import classNames from "classnames";
-import { Button, Dropdown, Form } from "antd";
+import { Button, Dropdown, Form, Modal, Typography } from "antd";
 import { useForm } from 'react-hook-form';
 import { Toaster } from "react-hot-toast";
 import { flatColumns2, getValueCell, renderContent } from "../hooks/columns";
@@ -13,19 +13,108 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { addRows8, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isEditable, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
+import { addRows8, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex,
+// isBottomMostInRanges,
+isBottomMostInRegion,
+// isContinuous,
+isEditable,
+// isEqualSet,
+isObjEmpty, isRightMostInRegion, isTopMostInRegion,
+// mergedSets,
+newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
 import Message from "../../Message/Message";
 // import Command from "../Command";
 
-import { Toolbar, ConfigProvider } from "rc-master-ui";
+import { Toolbar, ConfigProvider, InputNumber } from "rc-master-ui";
 import classnames from "classnames";
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import { Plus, Trash2 } from "becoxy-icons";
+// import type {ContextMenuItem} from "../type";
 // import {ContextInfo, ContextMenuItem} from "../type";
 // import useLazyKVMap from "rc-master-ui/es/table/hooks/useLazyKVMap";
 
+const {
+  Paragraph,
+  Title
+} = Typography;
 dayjs.extend(customParseFormat);
 const toast = 'top-right';
+// const defaultContext: ContextMenuItem[] = [
+const defaultContext = [{
+  key: 'INSERT_BEFORE',
+  label: 'Thêm dòng bên trên',
+  icon: /*#__PURE__*/React.createElement(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: /*#__PURE__*/React.createElement(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: /*#__PURE__*/React.createElement(Trash2, {
+    fontSize: 14
+  })
+}, {
+  key: 'DELETE_ROWS',
+  label: 'Xóa dòng',
+  icon: /*#__PURE__*/React.createElement(Trash2, {
+    fontSize: 14
+  })
+}];
 const GridEdit = props => {
   const {
     id,
@@ -52,6 +141,8 @@ const GridEdit = props => {
     expandable,
     onCellClick,
     rowEditable,
+    contextMenuItems: propsContext,
+    showDefaultContext,
     ...rest
   } = props;
   const {
@@ -86,6 +177,21 @@ const GridEdit = props => {
   const [editingKey, setEditingKey] = useState('');
   const [isFilter, setIsFilter] = React.useState(false);
   const [selectedCells, setSelectedCells] = useState(new Set());
+
+  // const defaultModalPaste = {open: false, rowIndex: -1, colIndex: -1, record: {}, rowsPasted: []}
+
+  // const [isCtrlDown, setIsCtrlDown] = useState(false)
+
+  // const [ctrlCells, setCtrlCells] = useState<any>([])
+  // const [currentCtrlCells, setCurrentCtrlCells] = useState<any>(new Set())
+
+  const [openModalAddRow, setOpenModalAddRow] = useState({
+    open: false,
+    type: ''
+  });
+  // const [openModalPaste, setOpenModalPaste] = useState(defaultModalPaste)
+
+  const [rowsAdd, setRowsAdd] = useState(1);
   const [pasteCells, setPasteCells] = useState(new Set());
   const [cellEditing, setCellEditing] = useState(null);
   const [isSelectDragging, setSelectIsDragging] = useState(false);
@@ -110,32 +216,12 @@ const GridEdit = props => {
     return [...new Set(Array.from(selectedCells).map(item => parseInt(item.split('-')[0])))] ?? [];
   }, [selectedCells]);
   const contextMenuItems = React.useMemo(() => {
-    return [{
-      key: 'INSERT_BEFORE',
-      label: 'Thêm dòng bên trên',
-      icon: /*#__PURE__*/React.createElement(Plus, {
-        fontSize: 14
-      })
-    }, {
-      key: 'INSERT_AFTER',
-      label: 'Thêm dòng bên dưới',
-      icon: /*#__PURE__*/React.createElement(Plus, {
-        fontSize: 14
-      })
-    }, {
-      key: 'DELETE_CONTENT',
-      label: 'Xóa nội dung',
-      icon: /*#__PURE__*/React.createElement(Trash2, {
-        fontSize: 14
-      })
-    }, {
-      key: 'DELETE_ROWS',
-      label: 'Xóa dòng',
-      icon: /*#__PURE__*/React.createElement(Trash2, {
-        fontSize: 14
-      })
-    }];
-  }, []);
+    const a = showDefaultContext !== false ? [...defaultContext] : [];
+    const b = propsContext ? [...propsContext, {
+      type: 'divider'
+    }] : [];
+    return [...b, ...a];
+  }, [propsContext, showDefaultContext]);
   const onTriggerExpand = React.useCallback(record => {
     const key = getRowKey(record, dataSource.indexOf(record));
     let newExpandedKeys;
@@ -450,6 +536,7 @@ const GridEdit = props => {
                 className: classnames(`be-toolbar-item`, item?.className)
               }, /*#__PURE__*/React.createElement(Dropdown.Button, {
                 overlayClassName: 'be-popup-container',
+                trigger: ['click'],
                 style: {
                   color: '#28c76f',
                   borderColor: '#28c76f'
@@ -660,8 +747,6 @@ const GridEdit = props => {
     // defaultValues,
     // resolver: yupResolver(formSchema)
   });
-
-  // @ts-ignore
   const isEditing = record => record[rowKey] === editingKey;
   useEffect(() => {
     const handleClickOutside = event => {
@@ -670,6 +755,7 @@ const GridEdit = props => {
       // const tableId = id ? document.getElementById(id) : undefined
       // const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
       const container = document.querySelector(".be-popup-container");
+      const containerContextMenu = document.querySelector(".popup-context-menu");
       const tableBody = document.querySelector(`#${id} .ui-rc-table-tbody`);
       // const containerHidden = document.querySelector(".be-popup-container.ant-picker-dropdown-hidden")
 
@@ -677,9 +763,10 @@ const GridEdit = props => {
       const itemContainer = document.querySelector(`#${id} .ui-rc-toolbar-selection-overflow-item`);
       const itemHeader = document.querySelector(`#${id} .ui-rc-table-thead`);
       const isInsideContainer = element.closest(".be-popup-container") && container;
+      const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
       const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
       const isInsideHeader = itemHeader && itemHeader.contains(event.target);
-      if (isInsideContainer || isInsideToolbar || isInsideHeader) {
+      if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext) {
         return;
       }
 
@@ -713,66 +800,55 @@ const GridEdit = props => {
       document.removeEventListener("click", handleClickOutside);
     };
   }, []);
-  const handleMouseDown = useCallback((record, row, col, e) => {
+  const handleMouseDown = (record, row, col, e) => {
     // setEditingKey('')
 
     if (e.button === 2) {
       e.stopPropagation();
       return;
     }
-    isSelecting.current = true;
-    startCell.current = {
-      row,
-      col
-    };
-    if (e.target.className === 'dragging-point') {
-      // e.stopPropagation()
-      // e.preventDefault()
-    } else {
-      // isSelecting.current = true;
-      // startCell.current = { row, col };
+    if (e.ctrlKey) {
+      isSelecting.current = true;
+      startCell.current = {
+        row,
+        col
+      };
 
-      // if (!isPasteDragging) {
-      setStartSelectedCell({
+      // const cell: any  = new Set([`${row}-${col}`])
+
+      // setCurrentCtrlCells(cell)
+    } else {
+      isSelecting.current = true;
+      startCell.current = {
         row,
         col
-      });
-      setSelectedCells(new Set([`${row}-${col}`]));
-      setRowsSelected(new Set());
-      // }
+      };
+      if (e.target.className === 'dragging-point') {
+        // e.stopPropagation()
+        // e.preventDefault()
+      } else {
+        setStartSelectedCell({
+          row,
+          col
+        });
+        setSelectedCells(new Set([`${row}-${col}`]));
+        setRowsSelected(new Set());
+      }
     }
 
-    // setSelectIsDragging(true)
-
     // isSelecting.current = true;
     // startCell.current = { row, col };
     //
-    // if (!isPasteDragging) {
-    //   setStartSelectedCell({ row, col })
+    // if (e.target.className === 'dragging-point') {
+    //   // e.stopPropagation()
+    //   // e.preventDefault()
+    // } else {
+    //
+    //   setStartSelectedCell({row, col})
     //   setSelectedCells(new Set([`${row}-${col}`]));
     //   setRowsSelected(new Set())
     // }
-  }, []);
-
-  // const handlePointEnter = (e: any) => {
-  //
-  //   if (e.button === 2) {
-  //     e.stopPropagation()
-  //     return
-  //   }
-  //
-  //   // setIsPasteDragging(true);
-  //
-  // };
-
-  // const handlePointLeave = () => {
-  //
-  //   if (isPasteDragging && !isSelectDragging) {
-  //     // setIsPasteDragging(false);
-  //   }
-  //
-  // };
-
+  };
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells, ...pastesArray]);
     setSelectedCells(mergedSet);
@@ -872,18 +948,49 @@ const GridEdit = props => {
     }
     triggerDragPaste(newPasteCells);
   };
-  const handleMouseUp = () => {
+
+  // const handleClickCell = (e: any) => {
+  //
+  //   if (e.ctrlKey) {
+  //
+  //     const cell: any  = new Set([`${row}-${col}`])
+  //
+  //     const found = ctrlCells.find((s: any) => isEqualSet(s, cell));
+  //
+  //     if (found) {
+  //       const rs = ctrlCells.filter((s: any) => !isEqualSet(s, cell));
+  //
+  //       setCtrlCells(rs)
+  //
+  //     } else {
+  //       setCtrlCells([...ctrlCells, cell])
+  //     }
+  //
+  //   }
+  // }
+
+  const handleMouseUp = e => {
     isSelecting.current = false;
     startCell.current = null;
     isSelectingRow.current = false;
     rowStart.current = null;
     setIsPasteDragging(false);
     setSelectIsDragging(false);
+
+    // setCurrentCtrlCells(new Set())
+
+    if (e.ctrlKey) {
+
+      // setCtrlCells([...ctrlCells, currentCtrlCells])
+    }
+
+    // nếu ctrlCell length > 0 thì set selectCells
+
     if (pasteCells.size > 0) {
       triggerDragPaste(pasteCells);
     }
   };
-  const handleMouseEnter = (row, col) => {
+  const handleMouseEnter = (row, col, e) => {
     if (!isSelecting.current || !startCell.current) {
       return;
     }
@@ -891,6 +998,18 @@ const GridEdit = props => {
       row: startRow,
       col: startCol
     } = startCell.current;
+    if (e.ctrlKey) {
+      // const newCtrlCells = new Set();
+      // for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
+      //   for (let c = Math.min(startCol, col); c <= Math.max(startCol, col); c++) {
+      //     newCtrlCells.add(`${r}-${c}`)
+      //   }
+      // }
+
+      // setCurrentCtrlCells(newCtrlCells)
+
+      return;
+    }
     if (!isPasteDragging) {
       // chọn vùng copy
 
@@ -937,14 +1056,6 @@ const GridEdit = props => {
       if (row < colStart) {
         // kéo sang trái
       }
-
-      // const newPasteCells = new Set()
-      // for (let r = Math.min(startRow, row) + 1; r <= Math.max(startRow, row); r++) {
-      //   for (let c = Math.min(colStart, col); c <= Math.max(colStart, colEnd); c++) {
-      //     newPasteCells.add(`${r}-${c}`);
-      //   }
-      // }
-      // setPasteCells(newPasteCells)
     }
   };
   const handleClickRowHeader = (row, col) => {
@@ -1075,22 +1186,17 @@ const GridEdit = props => {
     e.clipboardData.setData("text/plain", copyText);
     Message(t ? t('CopySuccessful') : 'Copy Successful');
   };
-  const handlePaste = (record, indexCol, rowNumber, e) => {
-    // const clipboard: any = (e.clipboardData || (window && window?.Clipboard)).getData("text")
-    const pasteData = e.clipboardData.getData("text/plain").trim();
-
-    // Chuyển đổi dữ liệu từ clipboard thành mảng
-    const rows = pasteData.split("\n").map(row => row.replace(/\r/g, "").split("\t"));
+  const handlePasted = (record, indexCol, rowNumber, pasteData) => {
+    const rows = pasteData.slice(0, onCellPaste?.maxRowsPaste ?? 200);
     if (!record?.parentId) {
       // Cập nhật data mới
       const newData = [...dataSource];
 
-      // @ts-ignore
-      const indexRows = newData.findIndex(it => it[rowKey] === record[rowKey]);
+      // const indexRows =  newData.findIndex((it) => it[rowKey as any] === record[rowKey])
 
       // Lấy vị trí bắt đầu
       // const { row: startRow, col: startCol } = selectedCell;
-      const startRow = indexRows;
+      const startRow = newData.findIndex(it => it[rowKey] === record[rowKey]);
       const startCol = indexCol;
 
       // const flattData = flattenArray(newData);
@@ -1189,6 +1295,167 @@ const GridEdit = props => {
       triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource);
     }
   };
+  const handlePaste = (record, indexCol, rowNumber, e) => {
+    // const clipboard: any = (e.clipboardData || (window && window?.Clipboard)).getData("text")
+    const pasteData = e.clipboardData.getData("text/plain").trim();
+
+    // Chuyển đổi dữ liệu từ clipboard thành mảng
+    const rowsPasted = pasteData.split("\n").map(row =>
+    // const rows = pasteData.split("\n").map((row: any) =>
+    row.replace(/\r/g, "").split("\t"));
+    if (rowsPasted.length > (onCellPaste?.maxRowsPaste ?? 200)) {
+      // bật popup thông báo
+
+      Modal.confirm({
+        content: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Paragraph, {
+          style: {
+            marginBottom: '.25rem',
+            fontSize: 14
+          }
+        }, "D\u1EEF li\u1EC7u sao ch\xE9p v\u01B0\u1EE3t qu\xE1 s\u1ED1 d\xF2ng cho ph\xE9p (500 d\xF2ng).Ph\u1EA7n m\u1EC1n s\u1EBD ch\u1EC9 l\u1EA5y 500 d\xF2ng \u0111\u1EA7u ti\xEAn."), /*#__PURE__*/React.createElement(Title, {
+          level: 5,
+          style: {
+            marginTop: '.75rem'
+          }
+        }, "B\u1EA1n c\xF3 mu\u1ED1n ti\u1EBFp t\u1EE5c sao ch\xE9p kh\xF4ng?")),
+        centered: true,
+        className: 'be-popup-container',
+        onOk: () => {
+          handlePasted(record, indexCol, rowNumber, rowsPasted);
+        }
+        // footer: (_, { OkBtn, CancelBtn }) => (
+        //   <>
+        //     <OkBtn />
+        //     <CancelBtn />
+        //   </>
+        // ),
+      });
+    } else {
+      handlePasted(record, indexCol, rowNumber, rowsPasted);
+    }
+
+    // const rows = rowsPasted.slice(0, (onCellPaste?.maxRowsPaste ?? 200));
+    //
+    //
+    // if (!record?.parentId ) {
+    //
+    //   // Cập nhật data mới
+    //   const newData = [...dataSource];
+    //
+    //   // @ts-ignore
+    //   const indexRows =  newData.findIndex((it) => it[rowKey] === record[rowKey])
+    //
+    //   // Lấy vị trí bắt đầu
+    //   // const { row: startRow, col: startCol } = selectedCell;
+    //   const startRow = indexRows
+    //   const startCol = indexCol
+    //
+    //
+    //
+    //   // const flattData = flattenArray(newData);
+    //
+    //   const pastedRows: RecordType[] = [];
+    //   const pastedColumns = new Set()
+    //
+    //
+    //   rows.forEach((rowValues: any, rowIndex: any) => {
+    //     const targetRow = startRow + rowIndex;
+    //
+    //     // Nếu vượt quá số dòng hiện có, thêm dòng mới
+    //     if (targetRow >= newData.length) {
+    //       // @ts-ignore
+    //       // newData.push({ id: newGuid()});
+    //       newData.push({ id: undefined, rowId: newGuid()});
+    //     }
+    //
+    //     rowValues.forEach((cellValue: any, colIndex: any) => {
+    //       const targetCol = startCol + colIndex;
+    //       if (targetCol >= columns.length) { // Không vượt quá số cột
+    //         return
+    //       }
+    //
+    //       if (columns[targetCol].editEnable) {
+    //         // @ts-ignore
+    //         const columnKey = columns[targetCol].field;
+    //
+    //         // @ts-ignore
+    //         newData[targetRow] = { ...newData[targetRow], [columnKey]: cellValue.trim() };
+    //         pastedColumns.add(columnKey);
+    //       }
+    //
+    //     });
+    //
+    //     // Lưu dòng được paste
+    //     pastedRows.push(newData[targetRow]);
+    //
+    //   });
+    //
+    //   const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+    //
+    //   triggerPaste?.(pastedRows, pastedColumnsArray as string[], newData)
+    //
+    //
+    // } else  {
+    //
+    //   // Cập nhật data mới
+    //   const newData = [...dataSource];
+    //
+    //   const parent  =  findItemByKey(newData, rowKey as any, record.parentId)
+    //
+    //   // Cập nhật childData mới
+    //   const childData: any[] = parent?.children ? [...parent.children] : []
+    //
+    //
+    //   // Lấy vị trí bắt đầu
+    //   // const { row: startRow, col: startCol } = selectedCell;
+    //   const startRow = childData.findIndex((it) => it[rowKey] === record[rowKey])
+    //   const startCol = indexCol
+    //
+    //   const pastedRows: RecordType[] = []
+    //   const pastedColumns = new Set()
+    //
+    //
+    //   rows.forEach((rowValues: any, rowIndex: any) => {
+    //     const targetRow = startRow + rowIndex
+    //
+    //     // Nếu vượt quá số dòng hiện có, thêm dòng mới
+    //     if (targetRow >= childData.length) {
+    //
+    //       childData.push({ id: undefined, rowId: newGuid(), parentId: parent[rowKey ?? 'id']})
+    //     }
+    //
+    //     rowValues.forEach((cellValue: any, colIndex: any) => {
+    //       const targetCol = startCol + colIndex
+    //       if (targetCol >= columns.length) { // Không vượt quá số cột
+    //         return
+    //       }
+    //
+    //       if (columns[targetCol].editEnable) {
+    //
+    //         // @ts-ignore
+    //         const columnKey = columns[targetCol].field
+    //
+    //         // @ts-ignore
+    //         childData[targetRow] = { ...childData[targetRow], [columnKey]: cellValue.trim() }
+    //         pastedColumns.add(columnKey)
+    //       }
+    //
+    //     })
+    //
+    //     // Lưu dòng được paste
+    //     pastedRows.push(childData[targetRow])
+    //
+    //   })
+    //
+    //   const pastedColumnsArray = Array.from(pastedColumns) ?? []
+    //
+    //   const newRowData = {...parent, children: childData}
+    //
+    //   const newDataSource =  updateArrayByKey(newData, newRowData, rowKey as string)
+    //
+    //   triggerPaste?.(pastedRows, pastedColumnsArray as string[], newDataSource )
+    // }
+  };
   const onSubmit = formData => {
     try {
       // const record = (await form.validateFields()) as RecordType;
@@ -1214,7 +1481,10 @@ const GridEdit = props => {
       newState,
       prevState,
       option,
-      field
+      field,
+      indexCol,
+      indexRow,
+      key
     } = args;
 
     // const newRecord = getValues()
@@ -1232,26 +1502,26 @@ const GridEdit = props => {
         if (onCellChange.length > 1) {
           onCellChange({
             field,
-            indexCol: 1,
+            indexCol,
             type: 'onChange',
             value: newState,
             option,
-            indexRow: 1,
+            indexRow,
             rowData: record,
-            rowId: '',
+            rowId: key,
             rowsData: [],
             sumValue: []
           }, handleChangeCallback);
         } else {
           onCellChange({
             field,
-            indexCol: 1,
+            indexCol,
             type: 'onChange',
             option,
             value: newState,
-            indexRow: 1,
+            indexRow,
             rowData: record,
-            rowId: '',
+            rowId: key,
             rowsData: [],
             sumValue: []
           }, handleChangeCallback);
@@ -1360,7 +1630,7 @@ const GridEdit = props => {
       });
     }
   };
-  const handleFocusCell = (rowIndex, colIndex, col, scrollType, e) => {
+  const handleFocusCell = (rowIndex, colIndex, col, scrollType, e, isTimeout) => {
     const isEdit = editingKey !== '';
     const cellEdit = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowIndex}"].cell-editing[data-col-index="${colIndex}"]`);
     const cell = document.querySelector(`.ui-rc-table-row .cell-editable[data-row-index="${rowIndex}"].cell-editable[data-col-index="${colIndex}"]`);
@@ -1371,34 +1641,49 @@ const GridEdit = props => {
       });
       setSelectedCells(new Set([`${rowIndex}-${colIndex}`]));
     };
-    if (isEdit) {
-      if (cellEdit) {
-        updateSelection();
-        if (e?.key !== 'Tab') {
-          cellEdit.focus();
+    const focusNextCell = (editingCell, cellEditable) => {
+      if (isEdit) {
+        if (editingCell) {
+          updateSelection();
+          if (e?.key !== 'Tab') {
+            editingCell.focus();
+          }
         }
-      }
-      if (scrollType === 'horizontal' && cellEdit) {
-        scrollToCell(rowIndex, colIndex, cellEdit, 'horizontal');
-      }
-      if (scrollType === 'vertical' && cell) {
-        setEditingKey('');
-        updateSelection();
-        scrollToCell(rowIndex, colIndex, cellEdit, 'vertical');
-        if (e?.key !== 'Tab') {
-          cell.focus();
+        if (scrollType === 'horizontal' && editingCell) {
+          scrollToCell(rowIndex, colIndex, editingCell, 'horizontal');
         }
-      }
-    } else {
-      if (cell) {
-        updateSelection();
-        if (e?.key !== 'Tab') {
-          cell.focus();
+        if (scrollType === 'vertical' && cellEditable) {
+          setEditingKey('');
+          updateSelection();
+          scrollToCell(rowIndex, colIndex, cellEdit, 'vertical');
+          if (e?.key !== 'Tab') {
+            cellEditable.focus();
+          }
+        }
+      } else {
+        if (cellEditable) {
+          updateSelection();
+          if (e?.key !== 'Tab') {
+            cellEditable.focus();
+          }
+        }
+        if (cellEditable) {
+          scrollToCell(rowIndex, colIndex, cellEditable, scrollType);
         }
       }
-      if (cell) {
-        scrollToCell(rowIndex, colIndex, cell, scrollType);
-      }
+    };
+    if (isTimeout) {
+      let cellEdit1 = undefined;
+      let cell1 = undefined;
+      setTimeout(() => {
+        cellEdit1 = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowIndex}"].cell-editing[data-col-index="${colIndex}"]`);
+        cell1 = document.querySelector(`.ui-rc-table-row .cell-editable[data-row-index="${rowIndex}"].cell-editable[data-col-index="${colIndex}"]`);
+      }, 20);
+      setTimeout(() => {
+        focusNextCell(cellEdit1, cell1);
+      }, 50);
+    } else {
+      focusNextCell(cellEdit, cell);
     }
   };
   const getCellClass = (record, rowIndex, colIndex) => {
@@ -1421,25 +1706,22 @@ const GridEdit = props => {
     const cellPasteSEnd = getLastSelectCell(pasteCells);
     const isPasteBottom = pasteCells.size && cellPasteSEnd && rowIndex === Math.max(cellPasteStart.row, cellPasteSEnd.row);
     if (!isSelected && !isPasteSelected) {
-      const isTop = prevRecordEditing && !isEditing(prevRecordEditing) && rowIndex === Math.min(cellStart.row - 1, cellEnd?.row);
+      // const isTop = prevRecordEditing && !isEditing(prevRecordEditing) && rowIndex === Math.min(cellStart.row - 1, cellEnd?.row);
+      const isTop = prevRecordEditing && !isEditing(prevRecordEditing) && isTopMostInRegion(rowIndex + 1, colIndex, selectedCells);
       const isLeft = colIndex + 1 === Math.min(cellStart.col, cellEnd?.col);
       const isRight = colIndex - 1 === Math.max(cellStart.col, cellEnd?.col);
       const isPasteLeft = colIndex + 1 === Math.min(cellPasteStart.col, cellPasteSEnd?.col);
       const isPasteRight = colIndex - 1 === Math.max(cellPasteStart.col, cellPasteSEnd?.col);
-      return isTopSelected || isLeftSelected || isRightSelected ? `${cellClass} ${isTop ? `cell-border-top` : ''} ${isLeft ? `cell-border-left` : ''} ${isPasteBottom ? `cell-paste-border-bottom` : ''} ${isRight ? `next-cell-border-left` : ''}` : isPasteLeftSelected || isPasteRightSelected ? `${cellClass} ${isPasteLeft ? `cell-paste-border-left` : ''} ${isPasteRight ? `next-cell-paste-border-left` : ''}` :
-      // (isPasteLeftSelected || isPasteRightSelected) ? `${cellClass} ${isPasteLeft ? `cell-paste-border-left` :  ''}` :
-
-      cellClass;
+      return isTopSelected || isLeftSelected || isRightSelected ? `${cellClass} ${isTop ? `cell-border-top` : ''} ${isLeft ? `cell-border-left` : ''} ${isPasteBottom ? `cell-paste-border-bottom` : ''} ${isRight ? `next-cell-border-left` : ''}` : isPasteLeftSelected || isPasteRightSelected ? `${cellClass} ${isPasteLeft ? `cell-paste-border-left` : ''} ${isPasteRight ? `next-cell-paste-border-left` : ''}` : cellClass;
     }
-    const isBottom = cellEnd && rowIndex === Math.max(cellStart.row, cellEnd.row);
-    const isRight = cellEnd && colIndex === Math.max(cellStart.col, cellEnd.col);
+    const isBottom = isBottomMostInRegion(rowIndex, colIndex, selectedCells);
+    // const isBottom = isBottomMostInRanges(rowIndex, colIndex, [selectedCells, ...ctrlCells])
+
+    // const isRight = cellEnd && colIndex === Math.max(cellStart.col, cellEnd.col)
+    const isRight = isRightMostInRegion(rowIndex, colIndex, selectedCells);
     const isLeft = colIndex === Math.min(cellStart.col, cellEnd?.col);
     const isPasteRight = cellPasteSEnd && colIndex === Math.max(cellPasteStart.col, cellPasteSEnd.col);
     const isPasteLeft = colIndex === Math.min(cellPasteStart.col, cellPasteSEnd?.col);
-
-    // return `${cellClass}  ${isBottom ? `cell-border-bottom` : ''}  ${isRight ? `cell-border-right` : '' } ${isBottom && isRight ? `cell-border-end` : '' }
-    // return `${cellClass} ${isPasteBottom ? `cell-paste-border-bottom` :  ''}  ${isBottom ? `cell-border-bottom` :  ''}  ${isRight ? `cell-border-right` : '' } ${isLeft ? `fixed-cell-border-left` : '' } ${isBottom && isRight ? `cell-border-end` : '' }`
-
     return `${cellClass} ${isPasteBottom ? `cell-paste-border-bottom` : ''} ${isPasteSelected && isPasteRight ? `cell-paste-border-right` : ''} ${isPasteSelected && isPasteLeft ? `fixed-cell-paste-border-left` : ''}  ${isBottom ? `cell-border-bottom` : ''}  ${isRight ? `cell-border-right` : ''} ${isLeft ? `fixed-cell-border-left` : ''} ${isBottom && isRight ? `cell-border-end` : ''}`;
   };
   const convertColumns = flatColumns2(columns).map((column, colIndex) => {
@@ -1500,79 +1782,97 @@ const GridEdit = props => {
       onCell: (record, rowIndex) => {
         const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
         return {
-          // onKeyPress: () => {
-          //
-          // },
-
           onKeyDown: event => {
             const key = getRowKey(record, dataSource.indexOf(record));
-            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);
-                handleCellClick(rowNumber, record, column);
-                const hasKey = mergedExpandedKeys.has(key);
-                if (hasKey) {
-                  // mergedExpandedKeys.delete(key);
-                  // newExpandedKeys = [...mergedExpandedKeys];
-                } else {
-                  onTriggerExpand(record);
-                }
-              } else {
-                if (event.key === 'Enter') {
+            if (event.key === 'Control' && event.ctrlKey) {
+
+              // setIsCtrlDown(true)
+            } 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);
+                  handleEdit(record, column, column.editType, event);
+                  handleCellClick(rowNumber, record, column);
+                  const hasKey = mergedExpandedKeys.has(key);
+                  if (hasKey) {
+                    // mergedExpandedKeys.delete(key);
+                    // newExpandedKeys = [...mergedExpandedKeys];
                   } 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)
+                    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 (colIndex + 1 !== columns.length) {
-                handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
-              } else {
-                event.stopPropagation();
-                event.preventDefault();
-              }
-            }
-            if (event.key === 'ArrowRight' && colIndex + 1 !== columns.length) {
-              if (editingKey !== '') {} else {
-                handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
+              if (event.key === 'Tab') {
+                if (colIndex + 1 !== columns.length) {
+                  handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
+                } else {
+                  event.stopPropagation();
+                  event.preventDefault();
+                }
               }
-            }
-            if (event.key === 'ArrowLeft' && colIndex > 0) {
-              if (!column.dataIndex && !column.key || column.field === 'index' || column.field === '#' || column.dataIndex === 'index' || column.dataIndex === '#') {
-                event.stopPropagation();
-                event.preventDefault();
-              } else {
+              if (event.key === 'ArrowRight' && colIndex + 1 !== columns.length) {
                 if (editingKey !== '') {} else {
-                  handleFocusCell(rowNumber, colIndex - 1, column, 'horizontal', event);
+                  handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
                 }
               }
-            }
-            if (event.key === 'ArrowDown' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length) {
-              handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
-            }
-            if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
-              handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
-            }
-            if (event.key === 'Delete') {
-              handleDeleteContent();
+              if (event.key === 'ArrowLeft' && colIndex > 0) {
+                if (!column.dataIndex && !column.key || column.field === 'index' || column.field === '#' || column.dataIndex === 'index' || column.dataIndex === '#') {
+                  event.stopPropagation();
+                  event.preventDefault();
+                } else {
+                  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 === '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 === 'Delete') {
+                handleDeleteContent();
+              }
+              if (event.key === 'Escape') {
+                setEditingKey('');
+              }
             }
           },
+          // onKeyUp: (event: any) => {
+          //   if (event.key === 'Control' && event.ctrlKey) {
+          //
+          //     console.log('onKeyUp')
+          //   }
+          // },
+
           onPaste: event => {
             if (editingKey === '') {
               handlePaste(record, colIndex, rowNumber, event);
@@ -1628,8 +1928,9 @@ const GridEdit = props => {
           } : {}
         };
       },
-      onHeaderCell: () => {
+      onHeaderCell: (data, index) => {
         return {
+          ...(column.onHeaderCell ? column.onHeaderCell?.(data, index) : {}),
           onClick: () => {
             handleClickColHeader(column, colIndex);
           },
@@ -1655,12 +1956,18 @@ const GridEdit = props => {
         return /*#__PURE__*/React.createElement("div", {
           className: classNames('ui-rc_cell-content', {
             // selected: selectedCells.has(`${record[rowKey]}-${colIndex}`)
+            // selected: selectedCells.has(`${rowNumber}-${colIndex}`) || currentCtrlCells.has(`${rowNumber}-${colIndex}`) || mergedSets([selectedCells, ...ctrlCells]).has(`${rowNumber}-${colIndex}`),
             selected: selectedCells.has(`${rowNumber}-${colIndex}`),
             disable: !isEditable(column, record)
           }),
           onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
-          onMouseEnter: () => handleMouseEnter(rowNumber, colIndex),
+          onMouseEnter: event => handleMouseEnter(rowNumber, colIndex, event),
           onMouseUp: handleMouseUp
+          // onClick={(event) => {
+          //
+          //   handleClickCell(event)
+          //
+          // }}
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
         }, renderContent(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && getLastSelectCell(selectedCells).row === rowNumber && getLastSelectCell(selectedCells).col === colIndex && isEditable(column, record) && !isSelectDragging && rowIndex !== dataSource.length - 1 &&
@@ -1725,19 +2032,61 @@ const GridEdit = props => {
     setMergedSelectedKeys(keys);
   };
   const contextMenuClick = args => {
-    if (args.item.key === 'INSERT_BEFORE') {
-      handleInsertAfter(args.item, 1);
+    if (args.item?.parentKey && args.item.parentKey === 'INSERT_BEFORE') {
+      if (args.item.key === 'INSERT_BEFORE_ADV') {
+        // mở Modal
+
+        setOpenModalAddRow(prev => ({
+          ...prev,
+          open: true,
+          type: 'INSERT_BEFORE'
+        }));
+      } else {
+        handleInsertBefore(args.item, args.item.row);
+      }
+      return;
     }
-    if (args.item.key === 'INSERT_AFTER') {
-      handleInsertBefore(args.item, 1);
+    if (args.item?.parentKey && args.item.parentKey === 'INSERT_AFTER') {
+      if (args.item.key === 'INSERT_AFTER_ADV') {
+        setOpenModalAddRow(prev => ({
+          ...prev,
+          open: true,
+          type: 'INSERT_AFTER'
+        }));
+      } else {
+        handleInsertAfter(args.item, args.item.row);
+      }
+      return;
     }
     if (args.item.key === 'DELETE_ROWS') {
       handleDeleteRows(args.item);
+      return;
     }
     if (args.item.key === 'DELETE_CONTENT') {
       handleDeleteContent();
+      return;
     }
   };
+  const hideModalAddRow = () => {
+    setOpenModalAddRow(prev => ({
+      ...prev,
+      open: false,
+      type: ''
+    }));
+    setRowsAdd(1);
+  };
+  const onOkAddRow = () => {
+    if (openModalAddRow.type === 'INSERT_AFTER') {
+      handleInsertAfter({}, rowsAdd);
+    }
+    if (openModalAddRow.type === 'INSERT_BEFORE') {
+      handleInsertBefore({}, rowsAdd);
+    }
+    hideModalAddRow();
+  };
+  const onChangeRows = val => {
+    setRowsAdd(val);
+  };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     heightTable: height,
     style: {
@@ -1862,6 +2211,28 @@ const GridEdit = props => {
     toastOptions: {
       className: 'react-hot-toast'
     }
-  }));
+  }), /*#__PURE__*/React.createElement(Modal
+  // title="Thêm dòng"
+  , {
+    open: openModalAddRow.open,
+    onOk: onOkAddRow,
+    onCancel: hideModalAddRow,
+    okText: "Ok",
+    cancelText: "H\u1EE7y",
+    className: 'be-popup-container',
+    centered: true,
+    width: 250,
+    closable: false
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    style: {
+      width: '100%'
+    },
+    defaultValue: 1,
+    value: rowsAdd,
+    min: 1,
+    max: 1000,
+    onChange: onChangeRows,
+    changeOnWheel: true
+  })));
 };
 export default GridEdit;