es-grid-template 1.2.1 → 1.2.2

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

@@ -18,7 +18,7 @@ import Message from "../../Message/Message";
 
 // import Command from "../Command";
 
-import { Toolbar } from "rc-master-ui";
+import { Toolbar, ConfigProvider } from "rc-master-ui";
 import classnames from "classnames";
 import useMergedState from "rc-util/es/hooks/useMergedState";
 // import useLazyKVMap from "rc-master-ui/es/table/hooks/useLazyKVMap";
@@ -83,7 +83,7 @@ const GridEdit = props => {
   const [selectedCells, setSelectedCells] = useState(new Set());
   const [pasteCells, setPasteCells] = useState(new Set());
   const [isSelectDragging, setSelectIsDragging] = useState(false);
-  const [isPasteDragging, setIsPasteDragging] = useState(false);
+  const [isPasteDragging, setIsPasteDragging] = useState(false); // isPasteDragging == tiếp tục hiển thị con trỏ crosshair
 
   // const [showDraggingPoint, setShowDraggingPoint] = useState(false);
 
@@ -158,7 +158,21 @@ const GridEdit = props => {
     }
   };
   const handleDuplicate = () => {
-    console.log('rowsFocus', rowsFocus);
+    // không tính tree
+
+    // Cập nhật data mới
+    const newData = [...dataSource];
+    const duplicatedItems = rowsFocus.map(index => ({
+      ...newData[index],
+      rowId: newGuid(),
+      id: undefined,
+      isDuplicate: true
+    }));
+
+    // Vị trí chèn là ngay sau phần tử lớn nhất trong rowsFocus
+    const insertAfter = Math.max(...rowsFocus);
+    const rs = [...newData.slice(0, insertAfter + 1), ...duplicatedItems, ...newData.slice(insertAfter + 1)];
+    triggerChangeData?.(rs, 'DUPLICATE');
   };
   const handleInsertBefore = item => {
     const defaultRowValue = getDefaultValue(defaultValue);
@@ -176,7 +190,8 @@ const GridEdit = props => {
         newData.splice(index, 0, {
           ...defaultRowValue,
           rowId,
-          parentId: null
+          parentId: null,
+          id: undefined
         });
         triggerChangeData?.(newData, 'INSERT_BEFORE');
       } else {
@@ -189,7 +204,8 @@ const GridEdit = props => {
         childData.splice(index, 0, {
           ...defaultRowValue,
           rowId,
-          parentId: record.parentId
+          parentId: record.parentId,
+          id: undefined
         });
         const newRowData = {
           ...parent,
@@ -245,50 +261,156 @@ const GridEdit = props => {
   };
   const handleDeleteAll = () => {};
   const toolbarItemsBottom = useMemo(() => {
-    return toolbarItems?.filter(it => it.position === 'Bottom').map(item => {
-      return {
-        ...item,
-        template: () => {
-          return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item`, item?.className)
-          }, /*#__PURE__*/React.createElement(Dropdown.Button, {
-            className: 'toolbar-button',
-            menu: {
-              items: itemsAdd,
-              onClick: e => handleAddMulti(item, e)
+    if (!rowsFocus || rowsFocus.length === 0) {
+      return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER').map(item => {
+        if (item.key === 'ADD') {
+          return {
+            ...item,
+            template: () => {
+              return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+                className: classnames(`be-toolbar-item`, item?.className)
+              }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+                style: {
+                  color: '#28c76f',
+                  borderColor: '#28c76f'
+                },
+                className: 'toolbar-button toolbar-dropdown-button',
+                menu: {
+                  items: itemsAdd,
+                  onClick: e => handleAddMulti(item, e)
+                }
+              }, /*#__PURE__*/React.createElement("span", {
+                style: {
+                  color: '#28c76f'
+                },
+                onClick: () => handleAddSingle(item)
+              }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item'))));
             }
-          }, /*#__PURE__*/React.createElement("span", {
-            onClick: () => handleAddSingle(item)
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item'))), item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item`, item?.className)
-          }, /*#__PURE__*/React.createElement(Button, {
-            color: "green",
-            variant: 'outlined',
-            onClick: handleDuplicate,
-            className: "d-flex toolbar-button"
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Duplicate') : 'Duplicate')), item.key === 'INSERT_BEFORE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item`, item?.className)
-          }, /*#__PURE__*/React.createElement(Button, {
-            color: "green",
-            variant: 'outlined',
-            onClick: () => handleInsertBefore(item),
-            className: "d-flex toolbar-button"
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item before') : 'Insert item before')), item.key === 'INSERT_AFTER' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item`, item?.className)
-          }, /*#__PURE__*/React.createElement(Button, {
-            color: "green",
-            variant: 'outlined',
-            onClick: () => handleInsertAfter(item),
-            className: "d-flex toolbar-button"
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item after') : 'Insert item after')), item.key === 'DELETE' && item.visible !== false && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item`, item?.className)
-          }, /*#__PURE__*/React.createElement(Button, {
-            color: "primary",
-            variant: 'outlined',
-            onClick: handleDeleteAll,
-            className: "d-flex toolbar-button"
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item')));
+          };
+        }
+        if (item.key === 'DELETE') {
+          return {
+            ...item,
+            template: () => {
+              return /*#__PURE__*/React.createElement("div", {
+                className: classnames(`be-toolbar-item`, item?.className)
+              }, /*#__PURE__*/React.createElement(Button, {
+                style: {
+                  color: '#eb4619',
+                  borderColor: '#eb4619'
+                },
+                variant: 'outlined',
+                onClick: handleDeleteAll,
+                className: "d-flex toolbar-button"
+              }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item'));
+            }
+          };
         }
+        return {
+          ...item
+        };
+      });
+    }
+    return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false).map(item => {
+      if (item.key === 'ADD') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+              className: classnames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleAddMulti(item, e)
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleAddSingle(item)
+            }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item'))));
+          }
+        };
+      }
+      if (item.key === 'DUPLICATE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+              className: classnames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: handleDuplicate,
+              className: "d-flex toolbar-button"
+            }, item.title ? t ? t(item.title) : item.title : t ? t('Duplicate') : 'Duplicate')));
+          }
+        };
+      }
+      if (item.key === 'INSERT_BEFORE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'INSERT_BEFORE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+              className: classnames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleInsertBefore(item),
+              className: "d-flex toolbar-button"
+            }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item before') : 'Insert item before')));
+          }
+        };
+      }
+      if (item.key === 'INSERT_AFTER') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'INSERT_AFTER' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+              className: classnames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleInsertAfter(item),
+              className: "d-flex toolbar-button"
+            }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item after') : 'Insert item after')));
+          }
+        };
+      }
+      if (item.key === 'DELETE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement("div", {
+              className: classnames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#eb4619',
+                borderColor: '#eb4619'
+              },
+              variant: 'outlined',
+              onClick: handleDeleteAll,
+              className: "d-flex toolbar-button"
+            }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item'));
+          }
+        };
+      }
+      return {
+        ...item
       };
     });
   }, [handleAddMulti, handleAddSingle, itemsAdd, rowsFocus.length, t, toolbarItems]);
@@ -344,131 +466,168 @@ const GridEdit = props => {
       e.stopPropagation();
       return;
     }
-    setSelectIsDragging(true);
     isSelecting.current = true;
     startCell.current = {
       row,
       col
     };
-    if (!isPasteDragging) {
+    if (e.target.className === 'dragging-point') {
+      // e.stopPropagation()
+      // e.preventDefault()
+    } else {
+      // isSelecting.current = true;
+      // startCell.current = { row, col };
+
+      // if (!isPasteDragging) {
       setStartSelectedCell({
         row,
         col
       });
       setSelectedCells(new Set([`${row}-${col}`]));
       setRowsSelected(new Set());
-      // setShowDraggingPoint(true)
+      // }
     }
 
-    // if (record[rowKey] !== editingKey && (editingKey !== '')) {
-    //   setEditingKey('')
+    // setSelectIsDragging(true)
+
+    // isSelecting.current = true;
+    // startCell.current = { row, col };
+    //
+    // if (!isPasteDragging) {
+    //   setStartSelectedCell({ row, col })
+    //   setSelectedCells(new Set([`${row}-${col}`]));
+    //   setRowsSelected(new Set())
     // }
   };
-  const handlePointEnter = e => {
-    if (e.button === 2) {
-      e.stopPropagation();
-      return;
-    }
-    setIsPasteDragging(true);
-  };
-  const handlePointLeave = () => {
-    if (isPasteDragging && !isSelectDragging) {
-      setIsPasteDragging(false);
-    }
-  };
-  const handleMouseUp = () => {
-    isSelecting.current = false;
-    startCell.current = null;
-    isSelectingRow.current = false;
-    rowStart.current = null;
-    setIsPasteDragging(false);
-    setSelectIsDragging(false);
-    if (pasteCells.size > 0) {
-      console.log('');
-      const mergedSet = new Set([...selectedCells, ...pasteCells]);
-      setSelectedCells(mergedSet);
-      setPasteCells(new Set());
-      const selectedArray = Array.from(selectedCells).map(key => {
-        const [row, col] = key.split("-").map(Number);
-        // @ts-ignore
-        const columnKey = columns[col].field;
 
-        // @ts-ignore
-        return {
-          row,
-          col,
-          value: flattenData(childrenColumnName, dataSource)[row][columnKey]
-        };
-        // return { row, col, value: '' };
-      });
+  // const handlePointEnter = (e: any) => {
+  //
+  //   if (e.button === 2) {
+  //     e.stopPropagation()
+  //     return
+  //   }
+  //
+  //   // setIsPasteDragging(true);
+  //
+  // };
 
-      // 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));
-      const minCol = Math.min(...selectedArray.map(cell => cell.col));
-      const maxCol = Math.max(...selectedArray.map(cell => cell.col));
+  // const handlePointLeave = () => {
+  //
+  //   if (isPasteDragging && !isSelectDragging) {
+  //     // setIsPasteDragging(false);
+  //   }
+  //
+  // };
 
-      // Tạo dữ liệu dạng bảng (mảng 2D)
-      const table = Array.from({
-        length: maxRow - minRow + 1
-      }, () => Array(maxCol - minCol + 1).fill(""));
+  const triggerDragPaste = pastesArray => {
+    const mergedSet = new Set([...selectedCells, ...pastesArray]);
+    setSelectedCells(mergedSet);
+    setPasteCells(new Set());
+    const selectedArray = Array.from(selectedCells).map(key => {
+      const [row, col] = key.split("-").map(Number);
+      // @ts-ignore
+      const columnKey = columns[col].field;
 
-      // Gán giá trị vào bảng
-      selectedArray.forEach(({
+      // @ts-ignore
+      return {
         row,
         col,
-        value
-      }) => {
-        table[row - minRow][col - minCol] = value;
-      });
-      const aaaa = addRows8(table, getRowsPasteIndex(pasteCells).length);
-      const record = flattenData(childrenColumnName, dataSource)[getFirstSelectCell(pasteCells).row];
-      if (!record.parentId) {
-        // Cập nhật data mới
-        const newData = [...dataSource];
+        value: flattenData(childrenColumnName, dataSource)[row][columnKey]
+      };
+      // return { row, col, value: '' };
+    });
 
-        // Lấy vị trí bắt đầu
-        // const { row: startRow, col: startCol } = selectedCell;
-        const startRow = getFirstSelectCell(pasteCells).row;
-        const startCol = getFirstSelectCell(selectedCells).col;
-        const pastedRows = [];
-        const pastedColumns = new Set();
-        aaaa.addedRows.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: undefined,
-              rowId: newGuid()
-            });
-          }
-          rowValues.forEach((cellValue, colIndex) => {
-            const targetCol = startCol + colIndex;
-            if (targetCol >= columns.length) {
-              // Không vượt quá số cột
-              return;
-            }
+    // 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));
+    const minCol = Math.min(...selectedArray.map(cell => cell.col));
+    const maxCol = Math.max(...selectedArray.map(cell => cell.col));
+
+    // Tạo dữ liệu dạng bảng (mảng 2D)
+    const table = Array.from({
+      length: maxRow - minRow + 1
+    }, () => Array(maxCol - minCol + 1).fill(""));
+
+    // Gán giá trị vào bảng
+    selectedArray.forEach(({
+      row,
+      col,
+      value
+    }) => {
+      table[row - minRow][col - minCol] = value;
+    });
+    const newRange = addRows8(table, getRowsPasteIndex(pastesArray).length);
+    const record = flattenData(childrenColumnName, dataSource)[getFirstSelectCell(pastesArray).row];
+    if (!record.parentId) {
+      // Cập nhật data mới
+      const newData = [...dataSource];
 
-            // @ts-ignore
-            const columnKey = columns[targetCol].field;
+      // Lấy vị trí bắt đầu
+      // const { row: startRow, col: startCol } = selectedCell;
+      const startRow = getFirstSelectCell(pastesArray).row;
+      const startCol = getFirstSelectCell(selectedCells).col;
+      const pastedRows = [];
+      const pastedColumns = new Set();
+      newRange.addedRows.forEach((rowValues, rowIndex) => {
+        const targetRow = startRow + rowIndex;
 
-            // @ts-ignore
-            newData[targetRow] = {
-              ...newData[targetRow],
-              [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
-            };
-            pastedColumns.add(columnKey);
+        // 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: undefined,
+            rowId: newGuid()
           });
+        }
+        rowValues.forEach((cellValue, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= columns.length) {
+            // Không vượt quá số cột
+            return;
+          }
 
-          // Lưu dòng được paste
-          pastedRows.push(newData[targetRow]);
+          // @ts-ignore
+          const columnKey = columns[targetCol].field;
+
+          // @ts-ignore
+          newData[targetRow] = {
+            ...newData[targetRow],
+            [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
+          };
+          pastedColumns.add(columnKey);
         });
-        const pastedColumnsArray = Array.from(pastedColumns) ?? [];
-        triggerPaste?.(pastedRows, pastedColumnsArray, newData);
+
+        // Lưu dòng được paste
+        pastedRows.push(newData[targetRow]);
+      });
+      const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+      triggerPaste?.(pastedRows, pastedColumnsArray, newData);
+    }
+  };
+  const handlePointDoubleClick = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    const colStart = getFirstSelectCell(selectedCells).col;
+    const colEnd = getLastSelectCell(selectedCells).col;
+    const startPasteRow = getLastSelectCell(selectedCells).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}`);
       }
     }
+    triggerDragPaste(newPasteCells);
+  };
+  const handleMouseUp = () => {
+    isSelecting.current = false;
+    startCell.current = null;
+    isSelectingRow.current = false;
+    rowStart.current = null;
+    setIsPasteDragging(false);
+    setSelectIsDragging(false);
+    if (pasteCells.size > 0) {
+      triggerDragPaste(pasteCells);
+    }
   };
   const handleMouseEnter = (row, col) => {
     if (!isSelecting.current || !startCell.current) {
@@ -479,6 +638,10 @@ const GridEdit = props => {
       col: startCol
     } = startCell.current;
     if (!isPasteDragging) {
+      // chọn vùng copy
+
+      setSelectIsDragging(true);
+      setIsPasteDragging(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++) {
@@ -487,6 +650,10 @@ const GridEdit = props => {
       }
       setSelectedCells(newSelectedCells);
     } 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++) {
@@ -495,13 +662,35 @@ const GridEdit = props => {
       }
       const colStart = getFirstSelectCell(selectedCells).col;
       const colEnd = getLastSelectCell(selectedCells).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 rowSelectedEnd = getLastSelectCell(selectedCells).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);
       }
-      setPasteCells(newPasteCells);
+      if (row < rowSelectedEnd) {
+        // kéo lên trên
+      }
+      if (col > colEnd) {
+        // kéo sang phải
+      }
+      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) => {
@@ -970,23 +1159,37 @@ const GridEdit = props => {
     const isTopSelected = selectedCells.has(topCellKey);
     const isLeftSelected = selectedCells.has(leftCellKey);
     const isRightSelected = selectedCells.has(rightCellKey);
+    const isPasteSelected = pasteCells.has(cellKey);
+    const isPasteLeftSelected = pasteCells.has(leftCellKey);
+    const isPasteRightSelected = pasteCells.has(rightCellKey);
     const cellClass = isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable';
     const prevRecordEditing = flattenData(childrenColumnName, dataSource)[rowIndex + 1];
     const cellStart = getFirstSelectCell(selectedCells);
     const cellEnd = getLastSelectCell(selectedCells);
-    if (!isSelected) {
+    const cellPasteStart = getFirstSelectCell(pasteCells);
+    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 isLeft = colIndex + 1 === Math.min(cellStart.col, cellEnd?.col);
       const isRight = colIndex - 1 === Math.max(cellStart.col, cellEnd?.col);
-      return isTopSelected || isLeftSelected || isRightSelected ? `${cellClass} ${isTop ? `cell-border-top` : ''} ${isLeft ? `cell-border-left` : ''} ${isRight ? `next-cell-border-left` : ''}` : cellClass;
+      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;
     }
     const isBottom = cellEnd && rowIndex === Math.max(cellStart.row, cellEnd.row);
     const isRight = cellEnd && colIndex === Math.max(cellStart.col, cellEnd.col);
     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}  ${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` :  ''}  ${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) => {
     if (!column?.field && !column?.key) {
@@ -1118,16 +1321,21 @@ const GridEdit = props => {
           }),
           onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
           onMouseEnter: () => handleMouseEnter(rowNumber, colIndex),
-          onMouseUp: () => handleMouseUp()
+          onMouseUp: handleMouseUp
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
         }, renderContent(column, value, record, rowIndex, format)), getLastSelectCell(selectedCells).row === rowNumber && getLastSelectCell(selectedCells).col === colIndex && !isSelectDragging &&
         /*#__PURE__*/
         // showDraggingPoint &&
-        React.createElement("span", {
-          className: 'dragging-point',
-          onMouseEnter: event => handlePointEnter(event),
-          onMouseLeave: () => handlePointLeave()
+        React.createElement("div", {
+          className: 'dragging-point'
+          // onMouseEnter={(event) => handlePointEnter(event)}
+          // onMouseLeave={() => handlePointLeave()}
+          ,
+          onMouseDown: () => {
+            setIsPasteDragging(true);
+          },
+          onDoubleClick: handlePointDoubleClick
         }, /*#__PURE__*/React.createElement("span", {
           className: 'dot-point'
         })));
@@ -1196,6 +1404,23 @@ const GridEdit = props => {
     }
   }, /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
+  }, /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: {
+      components: {
+        Table: {
+          rowHoverBg: '#eb461912',
+          rowSelectedBg: '#eb4619',
+          rowSelectedHoverBg: '#eb4619',
+          cellFontSize: 12,
+          cellFontSizeSM: 13,
+          headerBg: '#ffffff'
+          // cellPaddingBlock: 0,
+          // cellPaddingBlockSM: 0,
+          // cellPaddingInlineSM: 0,
+          // cellPaddingInline: 0
+        }
+      }
+    }
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
     t: t,
     tableRef: tableRef,
@@ -1263,7 +1488,7 @@ const GridEdit = props => {
       selectedRowKeys: mergedSelectedKeys,
       preserveSelectedRowKeys: true
     }
-  }))))), /*#__PURE__*/React.createElement(Toaster, {
+  })))))), /*#__PURE__*/React.createElement(Toaster, {
     position: toast,
     toastOptions: {
       className: 'react-hot-toast'