es-grid-template 1.4.5 → 1.4.7

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useMemo, useRef, useState } from 'react';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import classNames from "classnames";
 import { Button, Dropdown, Form, Modal, Typography } from "antd";
@@ -950,7 +950,7 @@ const GridEdit = props => {
   const isEditing = React.useCallback(record => {
     return record[rowKey] === editingKey;
   }, [editingKey, rowKey]);
-  useEffect(() => {
+  React.useEffect(() => {
     const handleClickOutside = event => {
       const element = event.target;
 
@@ -990,9 +990,11 @@ const GridEdit = props => {
         setRangeCells(new Set());
       }
     };
-    document.addEventListener("click", handleClickOutside);
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
     return () => {
-      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
     };
   }, [id]);
   const triggerDragPaste = pastesArray => {
@@ -1114,210 +1116,482 @@ const GridEdit = props => {
     }
     pasteCells.current = new Set();
   };
-  const handlePointDoubleClick = e => {
-    // e.preventDefault()
-    e.stopPropagation();
-    const colStart = getFirstSelectCell(selectedCells.current).col;
-    const colEnd = getLastSelectCell(selectedCells.current).col;
-    const startPasteRow = getLastSelectCell(selectedCells.current).row;
-    const newPasteCells = new Set();
-    for (let r = Math.min(startPasteRow, dataSource.length - 1) + 1; r <= Math.max(startPasteRow, dataSource.length - 1); r++) {
-      for (let c = Math.min(colStart, colStart); c <= Math.max(colStart, colEnd); c++) {
-        newPasteCells.add(`${r}-${c}`);
-      }
-    }
-    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('');
-    }
+  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];
 
-    // isDragMouse.current = true
-    isMouseDown.current = true;
-    if (e.ctrlKey) {
-      isSelecting.current = true;
-      startCell.current = {
-        row,
-        col
-      };
+      // const indexRows =  newData.findIndex((it) => it[rowKey as any] === record[rowKey])
 
-      // const cell: any  = new Set([`${row}-${col}`])
+      // Lấy vị trí bắt đầu
+      // const { row: startRow, col: startCol } = selectedCell;
+      const startRow = newData.findIndex(it => it[rowKey] === record[rowKey]);
+      const startCol = indexCol;
 
-      // 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})
+      // const flattData = flattenArray(newData);
 
-        startSelectedCells.current = {
-          row,
-          col
-        };
+      const pastedRows = [];
+      const pastedColumns = new Set();
+      rows.forEach((rowValues, rowIndex) => {
+        const targetRow = startRow + rowIndex;
 
-        // setSelectedCells(new Set([`${row}-${col}`]));
+        // 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, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= visibleCols.length) {
+            // Không vượt quá số cột
+            return;
+          }
+          if (visibleCols[targetCol].editEnable) {
+            // @ts-ignore
+            const columnKey = visibleCols[targetCol].field;
 
-        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);
+            // @ts-ignore
+            newData[targetRow] = {
+              ...newData[targetRow],
+              [columnKey]: cellValue.trim()
+            };
+            pastedColumns.add(columnKey);
           }
-        }
-        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);
-        }
+        // Lưu dòng được paste
+        pastedRows.push(newData[targetRow]);
+      });
+      const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+      triggerPaste?.(pastedRows, pastedColumnsArray, newData);
+    } else {
+      // Cập nhật data mới
+      const newData = [...dataSource];
+      const parent = findItemByKey(newData, rowKey, record.parentId);
 
-        // setRowsSelected(new Set())
-        rowsSelected.current = new Set();
-      }
-    }
-  };
-  const handleMouseUp = e => {
-    isSelecting.current = false;
-    startCell.current = null;
-    isSelectingRow.current = false;
-    rowStart.current = null;
-    isDragMouse.current = false;
-    isMouseDown.current = false;
-    setIsPasteDragging(false);
-    if (e.ctrlKey) {
+      // Cập nhật childData mới
+      const childData = parent?.children ? [...parent.children] : [];
 
-      // setCtrlCells([...ctrlCells, currentCtrlCells])
-    }
+      // 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 = [];
+      const pastedColumns = new Set();
+      rows.forEach((rowValues, rowIndex) => {
+        const targetRow = startRow + rowIndex;
 
-    // nếu ctrlCell length > 0 thì set selectCells
+        // 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, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= visibleCols.length) {
+            // Không vượt quá số cột
+            return;
+          }
+          if (visibleCols[targetCol].editEnable) {
+            // @ts-ignore
+            const columnKey = visibleCols[targetCol].field;
 
-    if (pasteCells && pasteCells.current.size > 0) {
-      triggerDragPaste(pasteCells.current);
-    } else {
-      setRangeCells(selectedCells.current);
-      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 > 1) {
-        hideDraggingPoint(selectedCells.current, id);
-        onAddBorderSelectedCell(selectedCells.current, id);
+            // @ts-ignore
+            childData[targetRow] = {
+              ...childData[targetRow],
+              [columnKey]: cellValue.trim()
+            };
+            pastedColumns.add(columnKey);
+          }
+        });
 
-        // showDraggingPoint(selectedCells.current, id)
-      }
-      showDraggingPoint(selectedCells.current, id);
-      // onAddBorderSelectedCell(selectedCells.current, id)
+        // 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);
+      triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource);
     }
   };
-  const handleMouseEnter = (row, col, e) => {
-    if (!isSelecting.current || !startCell.current) {
-      return;
-    }
-    const {
-      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}`)
-      //   }
-      // }
+  const handlePaste = (record, indexCol, rowNumber, e) => {
+    // const clipboard: any = (e.clipboardData || (window && window?.Clipboard)).getData("text")
+    const pasteData = e.clipboardData.getData("text/plain");
 
-      // setCurrentCtrlCells(newCtrlCells)
+    // 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
 
-      return;
+      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);
     }
-    if (!isPasteDragging) {
-      // chọn vùng copy
-
-      // setSelectIsDragging(true)
 
-      setIsPasteDragging(false);
-      // isPasteDragging.current = false
-
-      const newSelectedCells = 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++) {
-          newSelectedCells.add(`${r}-${c}`);
-        }
+    // 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 handlePointDoubleClick = e => {
+    // e.preventDefault()
+    e.stopPropagation();
+    const colStart = getFirstSelectCell(selectedCells.current).col;
+    const colEnd = getLastSelectCell(selectedCells.current).col;
+    const startPasteRow = getLastSelectCell(selectedCells.current).row;
+    const newPasteCells = new Set();
+    for (let r = Math.min(startPasteRow, dataSource.length - 1) + 1; r <= Math.max(startPasteRow, dataSource.length - 1); r++) {
+      for (let c = Math.min(colStart, colStart); c <= Math.max(colStart, colEnd); c++) {
+        newPasteCells.add(`${r}-${c}`);
       }
+    }
+    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 !== '') {
+      setTimeout(() => {
+        setEditingKey('');
+      });
+    }
 
-      // setSelectedCells(newSelectedCells)
+    // isDragMouse.current = true
+    isMouseDown.current = true;
+    if (e.ctrlKey) {
+      isSelecting.current = true;
+      startCell.current = {
+        row,
+        col
+      };
 
-      if (selectedCells.current && selectedCells.current.size > 0) {
-        onRemoveBgSelectedCell(selectedCells.current, id);
-      }
-      selectedCells.current = newSelectedCells;
-      onAddBgSelectedCell(newSelectedCells, id);
-    } else {
-      // chọn vùng paste
+      // const cell: any  = new Set([`${row}-${col}`])
 
-      // setSelectIsDragging(false)
+      // 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})
 
-      // setIsPasteDragging(true)  ////////
+        startSelectedCells.current = {
+          row,
+          col
+        };
 
-      const newSelectedCells = 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++) {
-          newSelectedCells.add(`${r}-${c}`);
-        }
-      }
-      const colStart = getFirstSelectCell(selectedCells.current).col;
-      const colEnd = getLastSelectCell(selectedCells.current).col;
-      const rowSelectedEnd = getLastSelectCell(selectedCells.current).row;
-      if (row >= rowSelectedEnd) {
-        // kéo xuống dưới
+        // setSelectedCells(new Set([`${row}-${col}`]));
 
-        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}`);
+        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)
 
-        // setPasteCells(newPasteCells)
-
-        if (pasteCells.current && pasteCells.current.size > 0) {
-          removeClassBorderPasteCell(pasteCells.current, 'down', id);
+          onAddBgCellIndex(cells, id);
+          onAddBorderSelectedCell(cells, id);
+          onAddBgSelectedCell(selectedCells.current, id, false);
+          showDraggingPoint(selectedCells.current, id);
         }
-        pasteCells.current = newPasteCells;
-        addClassBorderPasteCell(newPasteCells, 'down', id);
+
+        // setRowsSelected(new Set())
+        rowsSelected.current = new Set();
       }
-      if (row < rowSelectedEnd) {
-        // kéo lên trên
+    }
+  };
+  const handleMouseUp = e => {
+    isSelecting.current = false;
+    startCell.current = null;
+    isSelectingRow.current = false;
+    rowStart.current = null;
+    isDragMouse.current = false;
+    isMouseDown.current = false;
+    setIsPasteDragging(false);
+    if (e.ctrlKey) {
 
-        const rowSelectedStart = getFirstSelectCell(selectedCells.current).row;
+      // setCtrlCells([...ctrlCells, currentCtrlCells])
+    }
+
+    // nếu ctrlCell length > 0 thì set selectCells
+
+    if (pasteCells && pasteCells.current.size > 0) {
+      triggerDragPaste(pasteCells.current);
+    } else {
+      setRangeCells(selectedCells.current);
+      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 > 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) => {
+    if (!isSelecting.current || !startCell.current) {
+      return;
+    }
+    const {
+      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
+
+      // setSelectIsDragging(true)
+
+      setIsPasteDragging(false);
+      // isPasteDragging.current = false
+
+      const newSelectedCells = 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++) {
+          newSelectedCells.add(`${r}-${c}`);
+        }
+      }
+
+      // setSelectedCells(newSelectedCells)
+
+      if (selectedCells.current && selectedCells.current.size > 0) {
+        onRemoveBgSelectedCell(selectedCells.current, id);
+      }
+      selectedCells.current = newSelectedCells;
+      onAddBgSelectedCell(newSelectedCells, id);
+    } else {
+      // chọn vùng paste
+
+      // setSelectIsDragging(false)
+
+      // setIsPasteDragging(true)  ////////
+
+      const newSelectedCells = 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++) {
+          newSelectedCells.add(`${r}-${c}`);
+        }
+      }
+      const colStart = getFirstSelectCell(selectedCells.current).col;
+      const colEnd = getLastSelectCell(selectedCells.current).col;
+      const rowSelectedEnd = getLastSelectCell(selectedCells.current).row;
+      if (row >= rowSelectedEnd) {
+        // kéo xuống dướ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)
+
+        if (pasteCells.current && pasteCells.current.size > 0) {
+          removeClassBorderPasteCell(pasteCells.current, 'down', id);
+        }
+        pasteCells.current = newPasteCells;
+        addClassBorderPasteCell(newPasteCells, 'down', id);
+      }
+      if (row < rowSelectedEnd) {
+        // kéo lên trên
+
+        const rowSelectedStart = getFirstSelectCell(selectedCells.current).row;
         if (row < rowSelectedStart) {
           const newPasteCells = new Set();
           for (let r = Math.min(rowSelectedStart, row); r <= Math.max(rowSelectedStart, row) - 1; r++) {
@@ -1511,276 +1785,6 @@ const GridEdit = props => {
     e.clipboardData.setData("text/plain", copyText);
     Message(t ? t('CopySuccessful') : 'Copy Successful');
   };
-  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];
-
-      // 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 = newData.findIndex(it => it[rowKey] === record[rowKey]);
-      const startCol = indexCol;
-
-      // const flattData = flattenArray(newData);
-
-      const pastedRows = [];
-      const pastedColumns = new Set();
-      rows.forEach((rowValues, rowIndex) => {
-        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, colIndex) => {
-          const targetCol = startCol + colIndex;
-          if (targetCol >= visibleCols.length) {
-            // Không vượt quá số cột
-            return;
-          }
-          if (visibleCols[targetCol].editEnable) {
-            // @ts-ignore
-            const columnKey = visibleCols[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, newData);
-    } else {
-      // Cập nhật data mới
-      const newData = [...dataSource];
-      const parent = findItemByKey(newData, rowKey, record.parentId);
-
-      // Cập nhật childData mới
-      const childData = 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 = [];
-      const pastedColumns = new Set();
-      rows.forEach((rowValues, rowIndex) => {
-        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, colIndex) => {
-          const targetCol = startCol + colIndex;
-          if (targetCol >= visibleCols.length) {
-            // Không vượt quá số cột
-            return;
-          }
-          if (visibleCols[targetCol].editEnable) {
-            // @ts-ignore
-            const columnKey = visibleCols[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);
-      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");
-
-    // 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;