es-grid-template 1.2.0 → 1.2.2

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

@@ -12,7 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _antd = require("antd");
 var _reactHookForm = require("react-hook-form");
 var _reactHotToast = require("react-hot-toast");
-var _useColumns = require("../hooks/useColumns");
+var _columns = require("../hooks/columns");
 var _EditableCell = _interopRequireDefault(require("../EditableCell"));
 var _GridStyle = require("../GridStyle");
 var _useContext = require("../useContext");
@@ -23,10 +23,13 @@ var _TableGrid = _interopRequireDefault(require("../TableGrid"));
 var _hooks = require("../hooks");
 var _Message = _interopRequireDefault(require("../../Message/Message"));
 var _rcMasterUi = require("rc-master-ui");
+var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import Command from "../Command";
 
+// import useLazyKVMap from "rc-master-ui/es/table/hooks/useLazyKVMap";
+
 _dayjs.default.extend(_customParseFormat.default);
 const toast = 'top-right';
 const GridEdit = props => {
@@ -41,24 +44,37 @@ const GridEdit = props => {
     selectionSettings,
     height,
     format,
-    // onDataChange,
     triggerChangeData,
+    triggerChangeColumns,
     onCellPaste,
     onCellChange,
+    triggerPaste,
     style,
     getRowKey,
     className,
     toolbarItems,
+    defaultValue,
+    expandable,
+    onCellClick,
     ...rest
   } = props;
-
-  // const forceUpdate = useForceUpdate();
-  // const [updateKey, setUpdateKey] = useState(0);
-
+  const {
+    mode,
+    type,
+    // checkboxOnly,
+    // hideSelectAll,
+    columnWidth
+    // selectedRowKeys,
+    // defaultSelectedRowKeys
+  } = selectionSettings || {};
   const isSelecting = (0, _react.useRef)(false);
   const startCell = (0, _react.useRef)(null);
+  const childrenColumnName = 'children';
   const isSelectingRow = (0, _react.useRef)(false);
   const rowStart = (0, _react.useRef)(null);
+
+  // const [getRecordByKey] = useLazyKVMap(dataSource, childrenColumnName, getRowKey);
+
   const itemsAdd = [{
     key: '10',
     label: '10 rows'
@@ -72,71 +88,346 @@ const GridEdit = props => {
   const [form] = _antd.Form.useForm();
   const [editingKey, setEditingKey] = (0, _react.useState)('');
   const [selectedCells, setSelectedCells] = (0, _react.useState)(new Set());
+  const [pasteCells, setPasteCells] = (0, _react.useState)(new Set());
+  const [isSelectDragging, setSelectIsDragging] = (0, _react.useState)(false);
+  const [isPasteDragging, setIsPasteDragging] = (0, _react.useState)(false); // isPasteDragging == tiếp tục hiển thị con trỏ crosshair
+
+  // const [showDraggingPoint, setShowDraggingPoint] = useState(false);
+
   const [rowsSelected, setRowsSelected] = (0, _react.useState)(new Set());
-  const [selectedCell, setSelectedCell] = (0, _react.useState)(null);
-  const handleAdd = item => {
-    console.log(item);
+  const [startSelectedCells, setStartSelectedCell] = (0, _react.useState)(null);
+  const [innerExpandedKeys, setInnerExpandedKeys] = _react.default.useState(() => {
+    // if (defaultExpandedRowKeys) {
+    //   return defaultExpandedRowKeys;
+    // }
+    // if (defaultExpandAllRows) {
+    return (0, _hooks.findAllChildrenKeys)(dataSource, getRowKey, childrenColumnName) ?? [];
+    // }
+    // return [];
+  });
+  const mergedExpandedKeys = _react.default.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
+  const [mergedSelectedKeys, setMergedSelectedKeys] = (0, _useMergedState.default)([], {
+    value: []
+  });
+  const rowsFocus = _react.default.useMemo(() => {
+    return [...new Set(Array.from(selectedCells).map(item => parseInt(item.split('-')[0])))] ?? [];
+  }, [selectedCells]);
+  const onTriggerExpand = _react.default.useCallback(record => {
+    const key = getRowKey(record, dataSource.indexOf(record));
+    let newExpandedKeys;
+    const hasKey = mergedExpandedKeys.has(key);
+    if (hasKey) {
+      mergedExpandedKeys.delete(key);
+      newExpandedKeys = [...mergedExpandedKeys];
+    } else {
+      newExpandedKeys = [...mergedExpandedKeys, key];
+    }
+    setInnerExpandedKeys(newExpandedKeys);
+  }, [getRowKey, mergedExpandedKeys, dataSource]);
+  const handleAddSingle = item => {
+    const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
+    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : (0, _hooks.newGuid)();
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const newData = [...dataSource, defaultValue ? {
+        ...defaultRowValue,
+        id: undefined,
+        rowId
+      } : {
+        id: undefined,
+        rowId
+      }];
+      triggerChangeData?.(newData, 'Add');
+    }
+  };
+  const handleAddMulti = (item, e) => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
+      const newRows = Array.from({
+        length: Number(e.key)
+      }).map(() => defaultRowValue ? {
+        ...defaultRowValue,
+        id: undefined,
+        rowId: (0, _hooks.newGuid)()
+      } : {
+        id: undefined,
+        rowId: (0, _hooks.newGuid)()
+      });
+      const newData = dataSource.concat(newRows);
+      triggerChangeData?.(newData, 'Add');
+    }
+  };
+  const handleDuplicate = () => {
+    // không tính tree
+
+    // Cập nhật data mới
+    const newData = [...dataSource];
+    const duplicatedItems = rowsFocus.map(index => ({
+      ...newData[index],
+      rowId: (0, _hooks.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 = (0, _hooks.getDefaultValue)(defaultValue);
+    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : (0, _hooks.newGuid)();
+    const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      if (!record.parentId) {
+        // Cập nhật data mới
+        const newData = [...dataSource];
+        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        newData.splice(index, 0, {
+          ...defaultRowValue,
+          rowId,
+          parentId: null,
+          id: undefined
+        });
+        triggerChangeData?.(newData, 'INSERT_BEFORE');
+      } else {
+        const newData = [...dataSource];
+        const parent = (0, _hooks.findItemByKey)(newData, rowKey, record.parentId);
+
+        // Cập nhật childData mới
+        const childData = parent?.children ? [...parent.children] : [];
+        const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        childData.splice(index, 0, {
+          ...defaultRowValue,
+          rowId,
+          parentId: record.parentId,
+          id: undefined
+        });
+        const newRowData = {
+          ...parent,
+          children: childData
+        };
+        const newDataSource = (0, _hooks.updateArrayByKey)(newData, newRowData, rowKey);
+        triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
+      }
+    }
+  };
+  const handleInsertAfter = item => {
+    const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
+    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : (0, _hooks.newGuid)();
+    const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
+
+    // const record = getRecordByKey()
+
     if (item.onClick) {
-      console.log('cccccccccccccccc');
+      item.onClick({
+        toolbar: item
+      });
     } else {
-      console.log('bbbbbbbbbbbbb');
+      if (!record.parentId) {
+        // Cập nhật data mới
+        const newData = [...dataSource];
+        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        newData.splice(index + 1, 0, {
+          ...defaultRowValue,
+          rowId,
+          parentId: null
+        });
+        triggerChangeData?.(newData, 'INSERT_AFTER');
+      } else {
+        const newData = [...dataSource];
+        const parent = (0, _hooks.findItemByKey)(newData, rowKey, record.parentId);
+
+        // Cập nhật childData mới
+        const childData = parent?.children ? [...parent.children] : [];
+        const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        childData.splice(index + 1, 0, {
+          ...defaultRowValue,
+          rowId,
+          parentId: record.parentId
+        });
+        const newRowData = {
+          ...parent,
+          children: childData
+        };
+        const newDataSource = (0, _hooks.updateArrayByKey)(newData, newRowData, rowKey);
+        triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
+      }
     }
   };
-  const handleDuplicate = () => {};
-  const handleInsertBefore = () => {};
-  const handleInsertAfter = () => {};
   const handleDeleteAll = () => {};
   const toolbarItemsBottom = (0, _react.useMemo)(() => {
-    return toolbarItems?.filter(it => it.position === 'Bottom').map(item => {
-      return {
-        ...item,
-        template: () => {
-          return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
-            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
-          }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
-            menu: {
-              items: itemsAdd,
-              onClick: () => handleAdd(item)
+    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.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
+                className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+              }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+                style: {
+                  color: '#28c76f',
+                  borderColor: '#28c76f'
+                },
+                className: 'toolbar-button toolbar-dropdown-button',
+                menu: {
+                  items: itemsAdd,
+                  onClick: e => handleAddMulti(item, e)
+                }
+              }, /*#__PURE__*/_react.default.createElement("span", {
+                style: {
+                  color: '#28c76f'
+                },
+                onClick: () => handleAddSingle(item)
+              }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item'))));
             }
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item')), item.key === 'DUPLICATE' && item.visible !== false && editingKey && /*#__PURE__*/_react.default.createElement("div", {
-            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
-          }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
-            color: "green",
-            variant: 'outlined',
-            onClick: handleDuplicate,
-            className: "d-flex be-button"
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Duplicate') : 'Duplicate')), item.key === 'INSERT_BEFORE' && item.visible !== false && editingKey && /*#__PURE__*/_react.default.createElement("div", {
-            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
-          }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
-            color: "green",
-            variant: 'outlined',
-            onClick: handleInsertBefore,
-            className: "d-flex be-button"
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item before') : 'Insert item before')), item.key === 'INSERT_AFTER' && item.visible !== false && editingKey && /*#__PURE__*/_react.default.createElement("div", {
-            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
-          }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
-            color: "green",
-            variant: 'outlined',
-            onClick: handleInsertAfter,
-            className: "d-flex be-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.default.createElement("div", {
-            className: (0, _classnames.default)(`be-toolbar-item  ${item.className}`)
-          }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
-            color: "primary",
-            variant: 'outlined',
-            onClick: handleDeleteAll,
-            className: "d-flex be-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.default.createElement("div", {
+                className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+              }, /*#__PURE__*/_react.default.createElement(_antd.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.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
+              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleAddMulti(item, e)
+              }
+            }, /*#__PURE__*/_react.default.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.default.createElement(_react.Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/_react.default.createElement(_antd.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.default.createElement(_react.Fragment, null, item.key === 'INSERT_BEFORE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/_react.default.createElement(_antd.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.default.createElement(_react.Fragment, null, item.key === 'INSERT_AFTER' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/_react.default.createElement(_antd.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.default.createElement("div", {
+              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/_react.default.createElement(_antd.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
       };
     });
-  }, [toolbarItems]);
+  }, [handleAddMulti, handleAddSingle, itemsAdd, rowsFocus.length, t, toolbarItems]);
   const {
     control,
     handleSubmit,
     setValue,
     trigger,
-    getValues
+    getValues,
+    reset
     // formState: { errors }
   } = (0, _reactHookForm.useForm)({
     mode: 'onChange'
@@ -148,13 +439,16 @@ const GridEdit = props => {
   const isEditing = record => record[rowKey] === editingKey;
   (0, _react.useEffect)(() => {
     const handleClickOutside = event => {
-      const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
       const element = event.target;
+      const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
       const container = document.querySelector(".be-popup-container");
       // const containerHidden = document.querySelector(".be-popup-container.ant-picker-dropdown-hidden")
 
+      // const toolbarContainer = document.getElementsByClassName("ui-rc-toolbar");
+      const itemContainer = document.querySelector(".ui-rc-toolbar-selection-overflow-item");
       const isInsideContainer = element.closest(".be-popup-container") && container;
-      if (isInsideContainer) {
+      const isInsideToolbar = element.closest(".ui-rc-toolbar-selection-overflow-item") && itemContainer;
+      if (isInsideContainer || isInsideToolbar) {
         return;
       }
       if (tableBodies.length > 0) {
@@ -174,36 +468,237 @@ const GridEdit = props => {
       document.removeEventListener("click", handleClickOutside);
     };
   }, []);
-  const handleMouseDown = (row, col, e) => {
+  const handleMouseDown = (record, row, col, e) => {
     if (e.button === 2) {
       e.stopPropagation();
       return;
     }
-    setSelectedCell({
-      row,
-      col
-    });
     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 {
+      // isSelecting.current = true;
+      // startCell.current = { row, col };
+
+      // if (!isPasteDragging) {
+      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 })
+    //   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);
+    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: (0, _hooks.flattenData)(childrenColumnName, dataSource)[row][columnKey]
+      };
+      // return { row, col, value: '' };
+    });
+
+    // Xác định min/max row và col để sắp xếp dữ liệu
+    const minRow = Math.min(...selectedArray.map(cell => cell.row));
+    const maxRow = Math.max(...selectedArray.map(cell => cell.row));
+    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 = (0, _hooks.addRows8)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
+    const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[(0, _hooks.getFirstSelectCell)(pastesArray).row];
+    if (!record.parentId) {
+      // Cập nhật data mới
+      const newData = [...dataSource];
+
+      // Lấy vị trí bắt đầu
+      // const { row: startRow, col: startCol } = selectedCell;
+      const startRow = (0, _hooks.getFirstSelectCell)(pastesArray).row;
+      const startCol = (0, _hooks.getFirstSelectCell)(selectedCells).col;
+      const pastedRows = [];
+      const pastedColumns = new Set();
+      newRange.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: (0, _hooks.newGuid)()
+          });
+        }
+        rowValues.forEach((cellValue, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= columns.length) {
+            // Không vượt quá số cột
+            return;
+          }
+
+          // @ts-ignore
+          const columnKey = columns[targetCol].field;
+
+          // @ts-ignore
+          newData[targetRow] = {
+            ...newData[targetRow],
+            [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
+          };
+          pastedColumns.add(columnKey);
+        });
+
+        // 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 = (0, _hooks.getFirstSelectCell)(selectedCells).col;
+    const colEnd = (0, _hooks.getLastSelectCell)(selectedCells).col;
+    const startPasteRow = (0, _hooks.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) return;
+    if (!isSelecting.current || !startCell.current) {
+      return;
+    }
     const {
       row: startRow,
       col: startCol
     } = startCell.current;
-    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}`);
+    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++) {
+          newSelectedCells.add(`${r}-${c}`);
+        }
+      }
+      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++) {
+          newSelectedCells.add(`${r}-${c}`);
+        }
+      }
+      const colStart = (0, _hooks.getFirstSelectCell)(selectedCells).col;
+      const colEnd = (0, _hooks.getLastSelectCell)(selectedCells).col;
+      const rowSelectedEnd = (0, _hooks.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);
+      }
+      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)
     }
-    setSelectedCells(newSelectedCells);
   };
   const handleClickRowHeader = (row, col) => {
     const newSelectedCells = new Set();
@@ -272,23 +767,46 @@ const GridEdit = props => {
     setRowsSelected(newSelectedRows);
     setSelectedCells(newSelectedCells);
   };
-  const handleMouseUp = () => {
-    isSelecting.current = false;
-    startCell.current = null;
-    isSelectingRow.current = false;
-    rowStart.current = null;
+  const handleCellClick = (indexRow, record, column) => {
+    const cellClickCallback = newOptions => {
+      if (newOptions) {
+        const newElem = {
+          ...column,
+          editSelectSettings: {
+            ...(column?.editSelectSettings ? {
+              ...column?.editSelectSettings
+            } : {}),
+            options: newOptions
+          }
+        };
+        const rrr = (0, _hooks.updateArrayByKey)([...columns], newElem, 'field');
+        triggerChangeColumns?.(rrr, 'click');
+      }
+    };
+    if (onCellClick) {
+      onCellClick({
+        index: indexRow,
+        rowId: record.rowId,
+        cellValue: record[record.field],
+        type: "Editing",
+        field: column.field,
+        rowData: record
+      }, cellClickCallback);
+    }
   };
   const handleCopy = e => {
     const selectedArray = Array.from(selectedCells).map(key => {
       const [row, col] = key.split("-").map(Number);
       // @ts-ignore
-      const columnKey = columns[col].dataIndex;
+      const columnKey = columns[col].field;
+
       // @ts-ignore
       return {
         row,
         col,
-        value: dataSource[row][columnKey]
+        value: (0, _hooks.flattenData)(childrenColumnName, dataSource)[row][columnKey]
       };
+      // return { row, col, value: '' };
     });
 
     // Xác định min/max row và col để sắp xếp dữ liệu
@@ -319,133 +837,131 @@ const GridEdit = props => {
     e.clipboardData.setData("text/plain", copyText);
     (0, _Message.default)(t ? t('CopySuccessful') : 'Copy Successful');
   };
-  const handlePaste = (e, indexCol, indexRow) => {
+  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"));
+    if (!record.parentId) {
+      // Cập nhật data mới
+      const newData = [...dataSource];
 
-    // Lấy vị trí bắt đầu
-    // const { row: startRow, col: startCol } = selectedCell;
-    const startRow = indexRow;
-    const startCol = indexCol;
+      // @ts-ignore
+      const indexRows = newData.findIndex(it => it[rowKey] === record[rowKey]);
 
-    // Cập nhật data mới
-    const newData = [...dataSource];
-    const pastedRows = [];
-    const pastedColumns = new Set();
-    rows.forEach((rowValues, rowIndex) => {
-      const targetRow = startRow + rowIndex;
+      // Lấy vị trí bắt đầu
+      // const { row: startRow, col: startCol } = selectedCell;
+      const startRow = indexRows;
+      const startCol = indexCol;
 
-      // 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: newGuid()
+      // 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: (0, _hooks.newGuid)()
+          });
+        }
+        rowValues.forEach((cellValue, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= columns.length) {
+            // Không vượt quá số cột
+            return;
+          }
+
+          // @ts-ignore
+          const columnKey = columns[targetCol].field;
+
+          // @ts-ignore
+          newData[targetRow] = {
+            ...newData[targetRow],
+            [columnKey]: cellValue.trim()
+          };
+          pastedColumns.add(columnKey);
         });
-      }
-      rowValues.forEach((cellValue, colIndex) => {
-        const targetCol = startCol + colIndex;
-        if (targetCol >= columns.length) return; // Không vượt quá số cột
 
-        // @ts-ignore
-        const columnKey = columns[targetCol].dataIndex;
-        // @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 = (0, _hooks.findItemByKey)(newData, rowKey, record.parentId);
 
-      // Lưu dòng được paste
-      pastedRows.push(newData[targetRow]);
-    });
-    const pastedColumnsArray = Array.from(pastedColumns) ?? [];
-    console.log(pastedColumnsArray);
-    console.log(pastedRows);
+      // Cập nhật childData mới
+      const childData = parent?.children ? [...parent.children] : [];
 
-    //  // trigger DataChange + trigger paste
+      // 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;
 
-    // const handlePasteCallback = (callbackData: RecordType[]) => {
-    //
-    //   const newDataUpdate  = updateData(dataSource, callbackData, rowKey as any)
-    //
-    //   // setData(newDataUpdate)
-    //   // onDataChange?.(newData)
-    //   onCellPaste?.dataChange?.(newDataUpdate)
-    // }
-    //
-    //
-    // if (onCellPaste && onCellPaste.onPasted) {
-    //
-    //   if (onCellPaste.onPasted.length > 1) {
-    //     onCellPaste.onPasted({
-    //       pasteData: pastedRows,
-    //       type: 'onPaste',
-    //       data: dataSource,
-    //       pastedColumns: pastedColumnsArray as string[]
-    //     }, handlePasteCallback)
-    //
-    //   } else {
-    //     onCellPaste.onPasted({
-    //       pasteData: pastedRows,
-    //       type: 'onPaste',
-    //       data: dataSource,
-    //       pastedColumns: ['']
-    //     }, handlePasteCallback)
-    //
-    //     onCellPaste.dataChange?.(newData)
-    //
-    //     // setData(newData);
-    //     // onDataChange?.(newData)
-    //   }
-    //
-    // }
+        // 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: (0, _hooks.newGuid)(),
+            parentId: parent[rowKey ?? 'id']
+          });
+        }
+        rowValues.forEach((cellValue, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= columns.length) {
+            // Không vượt quá số cột
+            return;
+          }
+
+          // @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 = (0, _hooks.updateArrayByKey)(newData, newRowData, rowKey);
+      triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource);
+    }
   };
   const onSubmit = formData => {
-    console.log('onSubmit', formData);
     try {
       // const record = (await form.validateFields()) as RecordType;
       const row = {
         ...formData
       };
-      // const rowData = { ...record };
-
-      // columns.forEach(column => {
-      //
-      //   // @ts-ignore
-      //   if (column.editType === 'date' && rowData[column.dataIndex]) {
-      //     // @ts-ignore
-      //     rowData[column.dataIndex] = !isEmpty(record[column.dataIndex]) ? moment(row[column.dataIndex]).format() : null
-      //   }
-      // });
-
       const newData = [...dataSource];
+
       // @ts-ignore
       const index = newData.findIndex(item => formData[rowKey] === item[rowKey]);
-
-      // setIsManualUpdate(true);
-
+      const rs = (0, _hooks.updateArrayByKey)(dataSource, row, rowKey);
       if (index > -1) {
-        const item = newData[index];
-        newData.splice(index, 1, {
-          ...item,
-          ...row
-        });
-        triggerChangeData?.(newData, 'onChange');
-
-        // trigger DataChange
-        // setData(newData);
-        // onDataChange?.(newData)
-      } else {
-        newData.push(row);
-        // trigger DataChange
-
-        // setData(newData);
-        // onDataChange?.(newData)
+        triggerChangeData?.(rs, 'onChange');
       }
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -454,29 +970,18 @@ const GridEdit = props => {
   const handleCellChange = args => {
     const {
       record,
-      type,
+      type: changeType,
       newState,
       prevState,
       option,
       field
     } = args;
 
-    // console.log('newState', newState)
-    //
-    // console.log('getValues()', getValues())
-
     // const newRecord = getValues()
 
-    if (type === 'enter') {
-      console.log('aaaaaa enter');
-    }
-    if (type === 'blur') {
-      // onCellChange
-
+    if (changeType === 'enter') {}
+    if (changeType === 'blur') {
       const handleChangeCallback = callbackData => {
-        // const newDataUpdate  = updateData(data, callbackData, rowKey as any)
-
-        console.log('callbackData', callbackData);
         const callbackRecord = callbackData;
         Object.entries(callbackRecord).forEach(([name, value]) => {
           setValue(name, value);
@@ -485,7 +990,6 @@ const GridEdit = props => {
       };
       if (onCellChange) {
         if (onCellChange.length > 1) {
-          console.log('onCellChange Callback');
           onCellChange({
             field,
             indexCol: 1,
@@ -499,7 +1003,6 @@ const GridEdit = props => {
             sumValue: []
           }, handleChangeCallback);
         } else {
-          console.log('onCellChange');
           onCellChange({
             field,
             indexCol: 1,
@@ -515,16 +1018,15 @@ const GridEdit = props => {
           onSubmit(record);
         }
       }
-      console.log('aaaaaa blur');
     }
-    if (prevState && newState && prevState !== newState && type === 'enter') {
-      console.log('enter');
+    if (prevState && newState && prevState !== newState && changeType === 'enter') {
       onSubmit(record);
     }
   };
   const handleEdit = (record, col, editType, e) => {
     // @ts-ignore
     setEditingKey(record[rowKey]);
+    reset();
 
     // const formattedRecord = { ...record };
 
@@ -554,19 +1056,20 @@ const GridEdit = props => {
     // });
 
     if (e.key === 'Enter' || editType === 'date' || e.type === 'dblclick') {} else {
-      setValue(col.dataIndex, e.key);
+      setValue(col.dataIndex, editType === 'numeric' ? !isNaN(Number(e.key)) ? Number(e.key) : '' : e.key);
+      // setValue(col.dataIndex, e.key)
     }
     if (editType === 'select') {
       // setSearchValue(e.key)
       // setOpen(true)
     }
-    if (selectedCell?.row !== undefined && selectedCell?.col !== undefined) {
+    if (startSelectedCells?.row !== undefined && startSelectedCells?.col !== undefined) {
       setTimeout(() => {
         // const input = document.querySelector(`.ui-rc-table-row[data-row-key="${selectedCell.row}"] .cell-editing[data-col-index="${selectedCell.col}"] input`) as HTMLInputElement;
-        const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${selectedCell.row}"].cell-editing[data-col-index="${selectedCell.col}"] input`);
+        const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${startSelectedCells.row}"].cell-editing[data-col-index="${startSelectedCells.col}"] input`);
         // const input =  document.getElementById(`col${selectedCell.col}-record${selectedCell.row}`) as HTMLInputElement;
 
-        const select = document.querySelector(`div.cell-editing[tabindex="${selectedCell?.col}"] .ant-select-selection-search input`);
+        const select = document.querySelector(`div.cell-editing[tabindex="${startSelectedCells?.col}"] .ant-select-selection-search input`);
         if (input) {
           input.focus();
         }
@@ -579,18 +1082,21 @@ const GridEdit = props => {
       }, 0);
     }
   };
-  (0, _react.useEffect)(() => {
-    const tableBody = document.querySelector(".ui-rc-table-tbody");
-    const tableHeader = document.querySelector(".ui-rc-table-header");
-    if (tableBody && tableHeader) {
-      tableBody.addEventListener("scroll", () => {
-        tableHeader.scrollLeft = tableBody.scrollLeft;
-      });
-    }
-  }, []);
-  const scrollToCell = (rowIndex, colIndex, cell, type) => {
+
+  // useEffect(() => {
+  //   const tableBody = document.querySelector(".ui-rc-table-tbody");
+  //   const tableHeader = document.querySelector(".ui-rc-table-header");
+  //
+  //   if (tableBody && tableHeader) {
+  //     tableBody.addEventListener("scroll", () => {
+  //       tableHeader.scrollLeft = tableBody.scrollLeft;
+  //     });
+  //   }
+  // }, []);
+
+  const scrollToCell = (rowIndex, colIndex, cell, scrollType) => {
     const fixedWidth = (0, _hooks.totalFixedWidth)(columns, 'left', selectionSettings);
-    if (type === 'horizontal') {
+    if (scrollType === 'horizontal') {
       if (tableRef.current) {
         tableRef.current.scrollTo({
           left: cell.offsetLeft - fixedWidth,
@@ -610,15 +1116,12 @@ const GridEdit = props => {
       });
     }
   };
-  const handleFocusCell = (rowIndex, colIndex, col, type, e) => {
+  const handleFocusCell = (rowIndex, colIndex, col, scrollType, e) => {
     const isEdit = editingKey !== '';
-    // const cellEdit: any = document.querySelector(`.ui-rc-table-row[data-row-key="${rowIndex}"] .cell-editing[data-col-index="${colIndex}"]`);
-    // const cell: any = document.querySelector(`.ui-rc-table-row[data-row-key="${rowIndex}"] .cell-editable[data-col-index="${colIndex}"]`);
-
     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}"]`);
     const updateSelection = () => {
-      setSelectedCell({
+      setStartSelectedCell({
         row: rowIndex,
         col: colIndex
       });
@@ -631,10 +1134,10 @@ const GridEdit = props => {
           cellEdit.focus();
         }
       }
-      if (type === 'horizontal' && cellEdit) {
+      if (scrollType === 'horizontal' && cellEdit) {
         scrollToCell(rowIndex, colIndex, cellEdit, 'horizontal');
       }
-      if (type === 'vertical' && cell) {
+      if (scrollType === 'vertical' && cell) {
         setEditingKey('');
         updateSelection();
         scrollToCell(rowIndex, colIndex, cellEdit, 'vertical');
@@ -650,11 +1153,52 @@ const GridEdit = props => {
         }
       }
       if (cell) {
-        scrollToCell(rowIndex, colIndex, cell, type);
+        scrollToCell(rowIndex, colIndex, cell, scrollType);
       }
     }
   };
-  const convertColumns = (0, _useColumns.flatColumns)(columns).map((column, colIndex) => {
+  const getCellClass = (record, rowIndex, colIndex) => {
+    const cellKey = `${rowIndex}-${colIndex}`;
+    const topCellKey = `${rowIndex + 1}-${colIndex}`;
+    const leftCellKey = `${rowIndex}-${colIndex + 1}`;
+    const rightCellKey = `${rowIndex}-${colIndex - 1}`;
+    const isSelected = selectedCells.has(cellKey);
+    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 = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowIndex + 1];
+    const cellStart = (0, _hooks.getFirstSelectCell)(selectedCells);
+    const cellEnd = (0, _hooks.getLastSelectCell)(selectedCells);
+    const cellPasteStart = (0, _hooks.getFirstSelectCell)(pasteCells);
+    const cellPasteSEnd = (0, _hooks.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);
+      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} ${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 = (0, _columns.flatColumns2)(columns).map((column, colIndex) => {
     if (!column?.field && !column?.key) {
       return column;
     }
@@ -685,83 +1229,96 @@ const GridEdit = props => {
     }
     return {
       ...column,
-      // editType: getEditType(column, record),
-      onCell: (record, rowIndex) => ({
-        onKeyDown: event => {
-          if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-            if (!isEditing(record) && record[rowKey] !== editingKey) {
-              handleEdit(record, column, column.editType, event);
+      onCell: (record, rowIndex) => {
+        const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
+        return {
+          onKeyDown: event => {
+            const key = getRowKey(record, dataSource.indexOf(record));
+            if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
+              if (!isEditing(record) && record[rowKey] !== editingKey) {
+                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);
+                }
+              }
+              if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < (0, _hooks.flattenArray)(dataSource).length && event.key === 'Enter') {
+                handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
+              }
             }
-            if (editingKey && editingKey !== '' && (rowIndex ?? 0) + 1 < dataSource.length && event.key === 'Enter') {
-              handleFocusCell((rowIndex ?? 0) + 1, colIndex, column, 'vertical', 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 === 'Tab') {
-            if (colIndex + 1 !== columns.length) {
-              handleFocusCell(rowIndex, 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 === 'ArrowRight' && colIndex + 1 !== columns.length) {
-            if (editingKey !== '') {} else {
-              handleFocusCell(rowIndex, colIndex + 1, column, 'horizontal', event);
+            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 === 'ArrowLeft' && colIndex > 0) {
-            if (!column.dataIndex && !column.key || column.field === 'index' || column.field === '#' || column.dataIndex === 'index' || column.dataIndex === '#') {
-              event.stopPropagation();
+            if (event.key === 'ArrowDown' && (rowNumber ?? 0) + 1 < (0, _hooks.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);
+            }
+          },
+          onPaste: event => {
+            if (editingKey === '') {
+              handlePaste(record, colIndex, rowNumber, event);
               event.preventDefault();
-            } else {
-              if (editingKey !== '') {} else {
-                handleFocusCell(rowIndex, colIndex - 1, column, 'horizontal', event);
-              }
             }
-          }
-          if (event.key === 'ArrowDown' && (rowIndex ?? 0) + 1 < dataSource.length) {
-            handleFocusCell((rowIndex ?? 0) + 1, colIndex, column, 'vertical', event);
-          }
-          if (event.key === 'ArrowUp' && (rowIndex ?? 0) > 0) {
-            handleFocusCell((rowIndex ?? 0) - 1, colIndex, column, 'vertical', event);
-          }
-        },
-        onPaste: event => {
-          if (editingKey === '') {
-            handlePaste(event, colIndex, rowIndex);
-            event.preventDefault();
-          }
-        },
-        onCopy: e => {
-          if (editingKey === '') {
-            handleCopy(e);
-            e.preventDefault();
-          }
-        },
-        onDoubleClick: event => {
-          if (!isEditing(record) && record[rowKey] !== editingKey) {
-            handleEdit(record, column, (0, _hooks.getEditType)(column, record), event);
-          }
-        },
-        onClick: () => {
-          if (record[rowKey] !== editingKey && editingKey !== '') {
-            setEditingKey('');
-          }
-        },
-        className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
-        record,
-        column: column,
-        editType: (0, _hooks.getEditType)(column, record),
-        dataIndex: column.dataIndex,
-        title: column.title,
-        'data-col-index': colIndex,
-        'data-row-index': rowIndex,
-        // colIndex: colIndex,
-        indexCol: colIndex,
-        indexRow: rowIndex,
-        editing: isEditing(record),
-        tabIndex: (rowIndex ?? 0) * columns.length + colIndex
-      }),
+          },
+          onCopy: e => {
+            if (editingKey === '') {
+              handleCopy(e);
+              e.preventDefault();
+            }
+          },
+          onDoubleClick: event => {
+            if (!isEditing(record) && record[rowKey] !== editingKey) {
+              handleEdit(record, column, (0, _hooks.getEditType)(column, record), event);
+              handleCellClick(rowNumber, record, column);
+            }
+          },
+          onClick: () => {
+            if (record[rowKey] !== editingKey && editingKey !== '') {
+              setEditingKey('');
+            }
+          },
+          // className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
+          className: getCellClass(record, rowNumber, colIndex),
+          record,
+          column: column,
+          editType: (0, _hooks.getEditType)(column, record),
+          dataIndex: column.dataIndex,
+          title: (0, _columns.getValueCell)(column, record[column.field], format),
+          'data-col-index': colIndex,
+          'data-row-index': rowNumber,
+          editing: isEditing(record),
+          tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
+          style: isPasteDragging ? {
+            cursor: "crosshair"
+          } : {}
+        };
+      },
       render: (value, record, rowIndex) => {
         const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
         return /*#__PURE__*/_react.default.createElement("div", {
@@ -769,13 +1326,26 @@ const GridEdit = props => {
             // selected: selectedCells.has(`${record[rowKey]}-${colIndex}`)
             selected: selectedCells.has(`${rowNumber}-${colIndex}`)
           }),
-          onMouseDown: event => handleMouseDown(rowNumber, colIndex, event)
-          // onMouseEnter={() => handleMouseEnter(record[rowKey], colIndex)}
-          ,
-          onMouseEnter: () => handleMouseEnter(rowNumber, colIndex)
+          onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
+          onMouseEnter: () => handleMouseEnter(rowNumber, colIndex),
+          onMouseUp: handleMouseUp
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: 'ui-rc_content'
-        }, (0, _useColumns.renderContent)(column, value, record, rowIndex, format)));
+        }, (0, _columns.renderContent)(column, value, record, rowIndex, format)), (0, _hooks.getLastSelectCell)(selectedCells).row === rowNumber && (0, _hooks.getLastSelectCell)(selectedCells).col === colIndex && !isSelectDragging &&
+        /*#__PURE__*/
+        // showDraggingPoint &&
+        _react.default.createElement("div", {
+          className: 'dragging-point'
+          // onMouseEnter={(event) => handlePointEnter(event)}
+          // onMouseLeave={() => handlePointLeave()}
+          ,
+          onMouseDown: () => {
+            setIsPasteDragging(true);
+          },
+          onDoubleClick: handlePointDoubleClick
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: 'dot-point'
+        })));
       }
     };
   });
@@ -803,7 +1373,12 @@ const GridEdit = props => {
   }, [convertColumns]);
   const mergedColumns = _react.default.useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
   const bottomToolbar = () => {
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: 'ui-rc-toolbar-bottom',
+      style: {
+        borderBottom: '1px solid #e0e0e0'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
       style: {
         width: '100%'
       },
@@ -814,6 +1389,9 @@ const GridEdit = props => {
       // }}
     }));
   };
+  const onSelectChange = keys => {
+    setMergedSelectedKeys(keys);
+  };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     heightTable: height,
     style: {
@@ -833,6 +1411,23 @@ const GridEdit = props => {
     }
   }, /*#__PURE__*/_react.default.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
+  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.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.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
     t: t,
     tableRef: tableRef,
@@ -845,6 +1440,7 @@ const GridEdit = props => {
     },
     className: (0, _classnames.default)(className, 'grid-editable'),
     rowKey: rowKey,
+    getRowKey: getRowKey,
     columns: mergedColumns,
     showSorterTooltip: {
       target: 'sorter-icon'
@@ -855,13 +1451,51 @@ const GridEdit = props => {
       ...selectionSettings,
       checkboxOnly: true
     } : undefined,
-    style: {
-      ...style,
-      minHeight: height
-    },
     rowHoverable: false,
-    bottomToolbar: bottomToolbar
-  }))))), /*#__PURE__*/_react.default.createElement(_reactHotToast.Toaster, {
+    bottomToolbar: bottomToolbar,
+    expandable: {
+      ...expandable,
+      expandedRowKeys: innerExpandedKeys,
+      expandIcon: args => {
+        const {
+          record,
+          expanded
+        } = args;
+
+        // @ts-ignore
+        if (record?.children?.length > 0 || record?.isChildren) {
+          return expanded ? /*#__PURE__*/_react.default.createElement("button", {
+            onClick: e => {
+              e.preventDefault();
+              e.stopPropagation();
+              onTriggerExpand(record);
+              // onExpand(record, e)
+            },
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded'
+          }) : /*#__PURE__*/_react.default.createElement("button", {
+            onClick: e => {
+              e.preventDefault();
+              e.stopPropagation();
+              onTriggerExpand(record);
+              // onExpand(record, e)
+            },
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
+          });
+        } else {
+          return /*#__PURE__*/_react.default.createElement("button", {
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced'
+          });
+        }
+      }
+    },
+    rowSelection: columns && columns.length === 0 ? undefined : {
+      type: mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
+      columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
+      onChange: onSelectChange,
+      selectedRowKeys: mergedSelectedKeys,
+      preserveSelectedRowKeys: true
+    }
+  })))))), /*#__PURE__*/_react.default.createElement(_reactHotToast.Toaster, {
     position: toast,
     toastOptions: {
       className: 'react-hot-toast'