es-grid-template/lib/grid-component/table/GridEdit.js

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
var _classnames = _interopRequireDefault(require("classnames"));
var _antd = require("antd");
var _reactHookForm = require("react-hook-form");
var _reactHotToast = require("react-hot-toast");
var _yup = require("@hookform/resolvers/yup");
var _columns = require("../hooks/columns");
var _EditableCell = _interopRequireDefault(require("../EditableCell"));
var _GridStyle = require("../GridStyle");
var _useContext = require("../useContext");
var _dayjs = _interopRequireDefault(require("dayjs"));
require("dayjs/locale/es");
require("dayjs/locale/vi");
var _TableGrid = _interopRequireDefault(require("../TableGrid"));
var _hooks = require("../hooks");
var _Message = _interopRequireDefault(require("../../Message/Message"));
var _rcMasterUi = require("rc-master-ui");
var _becoxyIcons = require("becoxy-icons");
var _InternalTable = require("../InternalTable");
var _reactNumericComponent = require("react-numeric-component");
var _HeaderContent = _interopRequireDefault(require("../hooks/content/HeaderContent"));
var _sortable = require("@dnd-kit/sortable");
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 {Button, Dropdown, Form, Modal, Typography} from "antd"

// import {faker} from "@faker-js/faker";

const {
  Paragraph,
  Title
} = _antd.Typography;
_dayjs.default.extend(_customParseFormat.default);
const toast = 'top-right';
// const defaultContext = [
//   {
//     key: 'INSERT_BEFORE',
//     label: 'Thêm dòng bên trên',
//     icon: <Plus fontSize={14} />,
//     children: [
//       {
//         parentKey: 'INSERT_BEFORE',
//         key: 'INSERT_BEFORE_1',
//         label: 'Thêm 1 dòng',
//         row: 1
//       },
//       {
//         parentKey: 'INSERT_BEFORE',
//         key: 'INSERT_BEFORE_10',
//         label: 'Thêm 10 dòng',
//         row: 10
//       },
//       {
//         parentKey: 'INSERT_BEFORE',
//         key: 'INSERT_BEFORE_50',
//         label: 'Thêm 50 dòng',
//         row: 50
//       },
//       {
//         parentKey: 'INSERT_BEFORE',
//         key: 'INSERT_BEFORE_100',
//         label: 'Thêm 100 dòng',
//         row: 100
//       },
//       {
//         parentKey: 'INSERT_BEFORE',
//         key: 'INSERT_BEFORE_ADV',
//         label: 'Tùy chỉnh'
//       }
//     ]
//   },
//   {
//     key: 'INSERT_AFTER',
//     label: 'Thêm dòng bên dưới',
//     icon: <Plus fontSize={14} />,
//     children: [
//       {
//         parentKey: 'INSERT_AFTER',
//         key: 'INSERT_AFTER_1',
//         label: 'Thêm 1 dòng',
//         row: 1
//       },
//       {
//         parentKey: 'INSERT_AFTER',
//         key: 'INSERT_AFTER_10',
//         label: 'Thêm 10 dòng',
//         row: 10
//       },
//       {
//         parentKey: 'INSERT_AFTER',
//         key: 'INSERT_AFTER_50',
//         label: 'Thêm 50 dòng',
//         row: 50
//       },
//       {
//         parentKey: 'INSERT_AFTER',
//         key: 'INSERT_AFTER_100',
//         label: 'Thêm 100 dòng',
//         row: 100
//       },
//       {
//         parentKey: 'INSERT_AFTER',
//         key: 'INSERT_AFTER_ADV',
//         label: 'Tùy chỉnh'
//       }
//     ]
//   },
//   {
//     key: 'INSERT_CHILDREN',
//     // label: 'Insert item children',
//     label: 'Thêm cấp con',
//     icon: <Plus fontSize={14} />
//     // children: [
//     //   {
//     //     parentKey: 'INSERT_AFTER',
//     //     key: 'INSERT_AFTER_1',
//     //     label: 'Thêm 1 dòng',
//     //     row: 1
//     //   },
//     //   {
//     //     parentKey: 'INSERT_AFTER',
//     //     key: 'INSERT_AFTER_10',
//     //     label: 'Thêm 10 dòng',
//     //     row: 10
//     //   },
//     //   {
//     //     parentKey: 'INSERT_AFTER',
//     //     key: 'INSERT_AFTER_50',
//     //     label: 'Thêm 50 dòng',
//     //     row: 50
//     //   },
//     //   {
//     //     parentKey: 'INSERT_AFTER',
//     //     key: 'INSERT_AFTER_100',
//     //     label: 'Thêm 100 dòng',
//     //     row: 100
//     //   },
//     //   {
//     //     parentKey: 'INSERT_AFTER',
//     //     key: 'INSERT_AFTER_ADV',
//     //     label: 'Tùy chỉnh'
//     //   }
//     // ]
//   },
//   { key: 'DELETE_CONTENT', label: 'Xóa nội dung', icon: <Trash2 fontSize={14} /> },
//   { key: 'DELETE_ROWS', label: 'Xóa dòng', icon: <Trash2 fontSize={14} /> }
// ]

const validateData = async (data, formSchema) => {
  if (!formSchema) {
    return [];
  } else {
    const errors = [];
    for (let i = 0; i < data.length; i++) {
      try {
        await formSchema.validate(data[i], {
          abortEarly: false
        });
      } catch (error) {
        errors.push(error.inner.reduce((acc, err) => {
          acc[err.path] = {
            field: err.path,
            index: i,
            message: err.message,
            type: err.type,
            ref: {
              name: err.path
            }
          };
          return {
            ...acc,
            index: i
          };
        }, {}));
      }
    }
    return errors;
  }
};
const SortableHeaderCell = ({
  children,
  columnKey
}) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    isDragging
  } = (0, _sortable.useSortable)({
    id: columnKey
  });
  const style = {
    // ...props.style,
    cursor: 'move',
    // position: 'absolute',
    // left: 3,
    // top: -2,
    ...(isDragging ? {
      zIndex: 9999,
      userSelect: 'none'
    } : {})
    // ...dragActiveStyle(dragState, props.id),
  };
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    ref: setNodeRef,
    style: style
  }, attributes, listeners), children);
};
const GridEdit = props => {
  const {
    id,
    tableRef,
    t,
    columns,
    dataSource,
    originData,
    components,
    allowResizing,
    rowKey = 'id',
    selectionSettings,
    height,
    scrollHeight,
    format,
    triggerChangeData,
    triggerChangeColumns,
    onCellPaste,
    onCellChange,
    triggerPaste,
    style,
    getRowKey,
    className,
    toolbarItems,
    defaultValue,
    expandable,
    onCellClick,
    rowEditable,
    contextMenuItems: propsContext,
    showDefaultContext,
    validate,
    setTooltipContent,
    onBlur,
    locale,
    mergedFilterKeys,
    setMergedFilterKeys,
    wrapSettings,
    isFullScreen,
    ...rest
  } = props;
  const ref = (0, _react.useRef)(null);
  const isSelecting = (0, _react.useRef)(false);
  const startCell = (0, _react.useRef)(null);
  const childrenColumnName = 'children';

  // const hoveredRow: any = useRef(null)
  const isSelectingRow = (0, _react.useRef)(false);
  const rowStart = (0, _react.useRef)(null);
  const rowsSelected = (0, _react.useRef)(new Set());
  const selectedCells = (0, _react.useRef)(new Set());
  const pasteCells = (0, _react.useRef)(new Set());
  const startSelectedCells = (0, _react.useRef)(null);

  // quét vùng chọn
  const isDragMouse = (0, _react.useRef)(false);
  const isMouseDown = (0, _react.useRef)(false);
  const editingKey = (0, _react.useRef)('');
  const cellEditing = (0, _react.useRef)({});

  // quét vùng được paste - tiếp tục hiển thị con trỏ crosshair
  // const isPasteDragging = useRef(false);

  const visibleCols = _react.default.useMemo(() => {
    return (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false));
  }, [columns]);

  //   const id  = React.useMemo(() => {
  //
  //   return tableId ?? faker.string.alpha(20)
  //   // return tableId ?? newGuid()
  //
  // }, [tableId])

  const itemsAdd = _react.default.useMemo(() => {
    return [{
      key: '10',
      label: `10 ${t ? t('rows') : 'rows'}`
    }, {
      key: '50',
      label: `50 ${t ? t('rows') : 'rows'}`
    }, {
      key: '100',
      label: `100 ${t ? t('rows') : 'rows'}`
    }];
  }, [t]);
  const defaultContext = _react.default.useMemo(() => {
    return [{
      key: 'INSERT_BEFORE',
      // label: 'Thêm dòng bên trên',
      label: `${t ? t(locale?.add_rows_before ?? 'Add rows before') : 'Add rows before'}`,
      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
        fontSize: 14
      }),
      children: [{
        parentKey: 'INSERT_BEFORE',
        key: 'INSERT_BEFORE_1',
        label: `${t ? t(locale?.add_1 ?? 'Add 1 rows') : 'Add 1 rows'}`,
        row: 1
      }, {
        parentKey: 'INSERT_BEFORE',
        key: 'INSERT_BEFORE_10',
        label: `${t ? t(locale?.add_10 ?? 'Add 10 rows') : 'Add 10 rows'}`,
        row: 10
      }, {
        parentKey: 'INSERT_BEFORE',
        key: 'INSERT_BEFORE_50',
        label: `${t ? t(locale?.add_50 ?? 'Add 50 rows') : 'Add 50 rows'}`,
        row: 50
      }, {
        parentKey: 'INSERT_BEFORE',
        key: 'INSERT_BEFORE_100',
        label: `${t ? t(locale?.add_100 ?? 'Add 100 rows') : 'Add 100 rows'}`,
        row: 100
      }, {
        parentKey: 'INSERT_BEFORE',
        key: 'INSERT_BEFORE_ADV',
        label: `${t ? t(locale?.custom ?? 'Custom') : 'Custom'}`
      }]
    }, {
      key: 'INSERT_AFTER',
      label: `${t ? t(locale?.add_rows_after ?? 'Add rows after') : 'Add rows before'}`,
      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
        fontSize: 14
      }),
      children: [{
        parentKey: 'INSERT_AFTER',
        key: 'INSERT_AFTER_1',
        label: `${t ? t(locale?.add_1 ?? 'Add 1 rows') : 'Add 1 rows'}`,
        row: 1
      }, {
        parentKey: 'INSERT_AFTER',
        key: 'INSERT_AFTER_10',
        label: `${t ? t(locale?.add_10 ?? 'Add 10 rows') : 'Add 10 rows'}`,
        row: 10
      }, {
        parentKey: 'INSERT_AFTER',
        key: 'INSERT_AFTER_50',
        label: `${t ? t(locale?.add_50 ?? 'Add 50 rows') : 'Add 50 rows'}`,
        row: 50
      }, {
        parentKey: 'INSERT_AFTER',
        key: 'INSERT_AFTER_100',
        label: `${t ? t(locale?.add_100 ?? 'Add 100 rows') : 'Add 100 rows'}`,
        row: 100
      }, {
        parentKey: 'INSERT_AFTER',
        key: 'INSERT_AFTER_ADV',
        label: `${t ? t(locale?.custom ?? 'Custom') : 'Custom'}`
      }]
    }, {
      key: 'INSERT_CHILDREN',
      // label: 'Insert item children',
      label: `${t ? t(locale?.add_children ?? 'Add children') : 'Add children'}`,
      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
        fontSize: 14
      })
      // children: [
      //   {
      //     parentKey: 'INSERT_AFTER',
      //     key: 'INSERT_AFTER_1',
      //     label: 'Thêm 1 dòng',
      //     row: 1
      //   },
      //   {
      //     parentKey: 'INSERT_AFTER',
      //     key: 'INSERT_AFTER_10',
      //     label: 'Thêm 10 dòng',
      //     row: 10
      //   },
      //   {
      //     parentKey: 'INSERT_AFTER',
      //     key: 'INSERT_AFTER_50',
      //     label: 'Thêm 50 dòng',
      //     row: 50
      //   },
      //   {
      //     parentKey: 'INSERT_AFTER',
      //     key: 'INSERT_AFTER_100',
      //     label: 'Thêm 100 dòng',
      //     row: 100
      //   },
      //   {
      //     parentKey: 'INSERT_AFTER',
      //     key: 'INSERT_AFTER_ADV',
      //     label: 'Tùy chỉnh'
      //   }
      // ]
    }, {
      key: 'DELETE_CONTENT',
      label: `${t ? t(locale?.delete_content ?? 'Delete content') : 'Delete content'}`,
      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Trash2, {
        fontSize: 14
      })
    }, {
      key: 'DELETE_ROWS',
      label: `${t ? t(locale?.delete_rows ?? 'Delete rows') : 'Delete rows'}`,
      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Trash2, {
        fontSize: 14
      })
    }];
  }, [t, locale]);

  // const [form] = Form.useForm()

  // const [editingKey, setEditingKey] = useState<string | number>('')

  const [dataErrors, setDataErrors] = (0, _react.useState)([]);

  // const abc = useMemo(() => {
  //
  //   return selectedCells
  //   // return [...new Set(Array.from(selectedCells.current).map((item: any) => parseInt(item.split('-')[0])))]
  //
  // }, [selectedCells])

  const [rangeCells, setRangeCells] = (0, _react.useState)(new Set());
  const [openModalAddRow, setOpenModalAddRow] = (0, _react.useState)({
    open: false,
    type: ''
  });
  const [rowsAdd, setRowsAdd] = (0, _react.useState)(1);

  // const [cellEditing, setCellEditing] = useState<any>(null)

  const [isPasteDragging, setIsPasteDragging] = (0, _react.useState)(false); // isPasteDragging == tiếp tục hiển thị con trỏ crosshair

  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]);
  _react.default.useEffect(() => {
    if (validate && dataSource && dataSource.length) {
      validateData(dataSource, validate).then(error => {
        setDataErrors([...error]);
        // if (getErrors) {
        //   getErrors([...error])
        // }
      });
    }
  }, [validate, dataSource]);
  const rowsFocus = _react.default.useMemo(() => {
    const leng = (0, _hooks.flattenArray)(dataSource).length;
    const arr = [...new Set(Array.from(rangeCells).map(item => parseInt(item.split('-')[0])))];

    // return [...new Set(Array.from(rangeCells).map((item: any) => parseInt(item.split('-')[0])))] ?? []
    return arr.filter(it => it < leng);
  }, [dataSource.length, rangeCells]);
  const contextMenuItems = _react.default.useMemo(() => {
    const a = showDefaultContext !== false ? [...defaultContext] : [];
    const b = propsContext && propsContext.length > 0 ? [...propsContext, {
      type: 'divider'
    }] : [];
    return [...b, ...a];
  }, [propsContext, showDefaultContext]);
  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);
    //
    // onAddBgSelectedCell(rangeCells, id)
    // onAddBorderSelectedCell(rangeCells, id)
  }, [getRowKey, dataSource, mergedExpandedKeys]);
  const handleAddSingle = _react.default.useCallback(item => {
    const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : (0, _hooks.newGuid)();
    if (item && item.onClick) {
      item.onClick({
        toolbar: item
      });
    } else {
      const newData = [...dataSource, defaultValue ? {
        ...defaultRowValue,
        id: undefined,
        rowId
      } : {
        id: undefined,
        rowId
      }];
      triggerChangeData?.(newData, 'Add');
    }
  }, [dataSource, defaultValue, triggerChangeData]);
  const handleAddMulti = _react.default.useCallback((item, n) => {
    if (item.onClick) {
      item.onClick({
        toolbar: item
      });
    } else {
      const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
      const newRows = Array.from({
        length: n
      }).map(() => defaultRowValue ? {
        ...defaultRowValue,
        id: undefined,
        rowId: (0, _hooks.newGuid)()
      } : {
        id: undefined,
        rowId: (0, _hooks.newGuid)()
      });
      const kkk = (0, _hooks.getAllRowKey)(newRows) ?? [];
      const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
      setMergedFilterKeys?.(rs);
      const newData = dataSource.concat(newRows);
      triggerChangeData?.(newData, 'Add');
    }
  }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
  const handleDuplicate = _react.default.useCallback(() => {
    // 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 rsFilter = [...newData.slice(0, insertAfter + 1), ...duplicatedItems, ...newData.slice(insertAfter + 1)];

    // const rs  = updateOrInsertInOrder(originData, rsFilter)
    const rs = (0, _hooks.updateOrInsert)(originData, rsFilter);
    // const rs2  = mergeWithFilter(originData, rsFilter)

    triggerChangeData?.(rs, 'DUPLICATE');
  }, [dataSource, originData, rowsFocus, triggerChangeData]);

  // thêm n dòng bên trên
  const handleInsertBefore = _react.default.useCallback((item, n) => {
    const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
    // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : 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 newData = [...originData];
        const newRows = Array.from({
          length: n
        }).map(() => defaultRowValue ? {
          ...defaultRowValue,
          id: undefined,
          rowId: (0, _hooks.newGuid)()
        } : {
          id: undefined,
          rowId: (0, _hooks.newGuid)()
        });
        const kkk = (0, _hooks.getAllRowKey)(newRows) ?? [];
        const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
        setMergedFilterKeys?.(rs);
        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
        newData.splice(index, 0, ...newRows);
        triggerChangeData?.(newData, 'INSERT_BEFORE');
      } else {
        // const newData = [...dataSource]
        const newData = [...originData];
        const parent = (0, _hooks.findItemByKey)(newData, rowKey, record.parentId);
        const newRows = Array.from({
          length: n
        }).map(() => defaultRowValue ? {
          ...defaultRowValue,
          id: undefined,
          rowId: (0, _hooks.newGuid)(),
          parentId: parent.rowId
        } : {
          id: undefined,
          rowId: (0, _hooks.newGuid)(),
          parentId: parent.rowId
        });

        // 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, ...newRows);
        const newRowData = {
          ...parent,
          children: childData
        };
        const newDataSource = (0, _hooks.updateArrayByKey)(newData, newRowData, rowKey);
        triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
      }
    }
  }, [dataSource, defaultValue, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, triggerChangeData]);

  //thêm 1 dòng bên dưới
  const handleInsertAfter = _react.default.useCallback((item, n) => {
    const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
    const insertAfter = Math.max(...rowsFocus);
    const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[insertAfter];

    // const record: RecordType = flattenData(childrenColumnName, originData)[rowsFocus[rowsFocus.length - 1]]

    // const record = getRecordByKey()

    if (item.onClick) {
      item.onClick({
        toolbar: item
      });
    } else {
      if (!record?.parentId) {
        // Cập nhật data mới
        const newData = [...originData];
        const newRows = Array.from({
          length: n
        }).map(() => defaultRowValue ? {
          ...defaultRowValue,
          id: undefined,
          rowId: (0, _hooks.newGuid)()
        } : {
          id: undefined,
          rowId: (0, _hooks.newGuid)()
        });
        const kkk = (0, _hooks.getAllRowKey)(newRows) ?? [];
        const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
        setMergedFilterKeys?.(rs);
        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
        newData.splice(index + 1, 0, ...newRows);
        triggerChangeData?.(newData, 'INSERT_AFTER');
      } else {
        const newData = [...originData];
        const parent = (0, _hooks.findItemByKey)(newData, rowKey, record.parentId);
        const newRows = Array.from({
          length: n
        }).map(() => defaultRowValue ? {
          ...defaultRowValue,
          id: undefined,
          rowId: (0, _hooks.newGuid)(),
          parentId: parent.rowId
        } : {
          id: undefined,
          rowId: (0, _hooks.newGuid)(),
          parentId: parent.rowId
        });
        const kkk = (0, _hooks.getAllRowKey)(newRows) ?? [];
        const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
        setMergedFilterKeys?.(rs);

        // 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, ...newRows);
        const newRowData = {
          ...parent,
          children: childData
        };
        const newDataSource = (0, _hooks.updateArrayByKey)(newData, newRowData, rowKey);
        triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
      }
    }
  }, [defaultValue, dataSource, rowsFocus, originData, mergedFilterKeys, setMergedFilterKeys, triggerChangeData, rowKey]);
  const handleInsertChild = _react.default.useCallback(item => {
    const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
    const rowId = (0, _hooks.newGuid)();
    const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
    if (item.onClick) {
      item.onClick({
        toolbar: item
      });
    } else {
      // const newData = [...dataSource]
      const newData = [...originData];
      let newElement;
      if (!record.children || record.children.length === 0) {
        newElement = {
          ...record,
          children: [{
            ...defaultRowValue,
            parentId: record.rowId,
            rowId
          }]
        };
      } else {
        newElement = {
          ...record,
          children: [...record.children, {
            ...defaultRowValue,
            parentId: record.rowId,
            rowId
          }]
        };
      }
      const rs = mergedFilterKeys ? [...mergedFilterKeys, rowId] : [rowId];
      setMergedFilterKeys?.(rs);
      const newDataSource = (0, _hooks.updateArrayByKey)(newData, newElement, rowKey);
      triggerChangeData?.(newDataSource, 'INSERT_CHILDREN');
    }
    const key = getRowKey(record, dataSource.indexOf(record));

    // let newExpandedKeys: Key[];
    const hasKey = mergedExpandedKeys.has(key);
    if (!hasKey) {
      const newExpandedKeys = [...mergedExpandedKeys, key];
      setInnerExpandedKeys(newExpandedKeys);
    }
  }, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, rowKey, rowsFocus, triggerChangeData]);
  const handleDeleteRows = _react.default.useCallback(item => {
    // setTimeout(() => {
    // onAddBgSelectedCell(selectedCells.current, id)
    // onAddBorderSelectedCell(selectedCells.current, id)
    // })

    if (item.onClick) {
      item.onClick({
        toolbar: item
      });
    } else {
      // const filterData = flattenArray([...dataSource])
      const filterData = (0, _hooks.flattenArray)([...originData]);
      const indexesToDelete = [...rowsFocus];

      // Sắp xếp giảm dần để xóa từ cuối lên đầu
      indexesToDelete.sort((a, b) => b - a).forEach(index => {
        filterData.splice(index, 1);
      });

      // const newData = updateOrInsert(flattenArray([...originData]), filterData)
      //
      const rs = (0, _hooks.unFlattenData)(filterData);
      triggerChangeData?.([...rs], 'DELETE_ROWS');
    }
    setTimeout(() => {
      (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
      (0, _hooks.showDraggingPoint)(selectedCells.current, id);
    }, 0);
  }, [id, originData, rowsFocus, triggerChangeData]);
  const handleDeleteAll = _react.default.useCallback(() => {
    triggerChangeData?.([], 'INSERT_BEFORE');
  }, [triggerChangeData]);
  const handleDeleteContent = _react.default.useCallback(() => {
    if (selectedCells.current.size > 0) {
      const newData = [...dataSource];

      // colIndex => field
      const colIndexToField = (0, _columns.flatColumns2)(visibleCols).map(col => col.field);

      // Duyệt qua mỗi ô cần xóa
      for (const cell of selectedCells.current) {
        const [rowIndexStr, colIndexStr] = cell.split("-");
        const rowIndex = Number(rowIndexStr);
        const colIndex = Number(colIndexStr);
        const field = colIndexToField[colIndex];
        const column = (0, _columns.flatColumns2)(visibleCols)[colIndex];
        const rowData = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowIndex];
        if (newData[rowIndex] && field && field in newData[rowIndex] && (0, _hooks.isEditable)(column, rowData)) {
          // @ts-ignore
          newData[rowIndex][field] = '';
        }
      }
      const rsFilterData = (0, _hooks.updateOrInsert)((0, _hooks.flattenArray)([...originData]), newData);

      // triggerChangeData?.([...newData], 'DELETE_CONTENT')
      triggerChangeData?.([...rsFilterData], 'DELETE_CONTENT');
    }
  }, [dataSource, originData, triggerChangeData, visibleCols]);
  const toolbarItemsBottom = (0, _react.useMemo)(() => {
    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' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').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, {
                overlayClassName: 'be-popup-container',
                trigger: ['click'],
                style: {
                  color: '#28c76f',
                  borderColor: '#28c76f'
                },
                className: 'toolbar-button toolbar-dropdown-button',
                menu: {
                  items: itemsAdd,
                  onClick: e => handleAddMulti(item, Number(e.key))
                }
              }, /*#__PURE__*/_react.default.createElement("span", {
                style: {
                  color: '#28c76f'
                },
                onClick: () => handleAddMulti(item, 1)
              }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add 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.label ? t ? t(item.label) : item.label : 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, {
              overlayClassName: 'be-popup-container',
              style: {
                color: '#28c76f',
                borderColor: '#28c76f'
              },
              className: 'toolbar-button toolbar-dropdown-button',
              menu: {
                items: itemsAdd,
                onClick: e => handleAddMulti(item, Number(e.key))
              }
            }, /*#__PURE__*/_react.default.createElement("span", {
              style: {
                color: '#28c76f'
              },
              onClick: () => handleAddMulti(item, 1)
            }, item.label ? t ? t(item.label) : item.label : 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.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate')));
          }
        };
      }
      if (item.key === 'INSERT_BEFORE') {
        return {
          ...item,
          template: () => {
            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
            }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
              overlayClassName: 'be-popup-container',
              style: {
                color: '#28c76f',
                borderColor: '#28c76f'
              },
              className: 'toolbar-button toolbar-dropdown-button',
              menu: {
                items: itemsAdd,
                onClick: e => handleInsertBefore(item, Number(e.key))
              }
            }, /*#__PURE__*/_react.default.createElement("span", {
              style: {
                color: '#28c76f'
              },
              onClick: () => handleInsertBefore(item, 1)
            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
          }
        };
      }
      if (item.key === 'INSERT_AFTER') {
        return {
          ...item,
          template: () => {
            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
            }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
              overlayClassName: 'be-popup-container',
              style: {
                color: '#28c76f',
                borderColor: '#28c76f'
              },
              className: 'toolbar-button toolbar-dropdown-button',
              menu: {
                items: itemsAdd,
                onClick: e => handleInsertAfter(item, Number(e.key))
              }
            }, /*#__PURE__*/_react.default.createElement("span", {
              style: {
                color: '#28c76f'
              },
              onClick: () => handleInsertAfter(item, 1)
            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
          }
        };
      }
      if (item.key === 'INSERT_CHILDREN') {
        return {
          ...item,
          template: () => {
            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__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: () => handleInsertChild(item),
              className: "d-flex toolbar-button"
            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children')));
          }
        };
      }
      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.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
          }
        };
      }
      if (item.key === 'DELETE_ROWS') {
        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: () => handleDeleteRows(item),
              className: "d-flex toolbar-button"
            }, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
          }
        };
      }
      return {
        ...item
      };
    });
  }, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
  const {
    control,
    handleSubmit,
    setValue,
    trigger,
    getValues,
    reset,
    formState: {
      errors
    }
  } = (0, _reactHookForm.useForm)({
    mode: 'onChange',
    resolver: validate ? (0, _yup.yupResolver)(validate) : undefined
  });

  // const isEditing = React.useCallback((record: RecordType) => {
  //   return record[rowKey as any] === editingKey.current
  // }, [editingKey, rowKey])

  _react.default.useEffect(() => {
    const handleClickOutside = event => {
      const element = event.target;

      // const tableId = id ? document.getElementById(id) : undefined
      // const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
      const container = document.querySelector(".be-popup-container");
      const containerContextMenu = document.querySelector(".popup-context-menu");
      const tableBody = document.querySelector(`#${id} .ui-rc-table-tbody .ui-rc-table-tbody-virtual-holder`);
      // const containerHidden = document.querySelector(".be-popup-container.ant-picker-dropdown-hidden")

      // const toolbarContainer = document.getElementsByClassName("ui-rc-toolbar");
      const itemContainer = document.querySelector(`#${id} .ui-rc-toolbar-selection-overflow-item`);
      const itemHeader = document.querySelector(`#${id} .ui-rc-table-thead`);
      const isInsideContainer = element.closest(".be-popup-container") && container;
      const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
      const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
      const isInsideHeader = itemHeader && itemHeader.contains(event.target);
      if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext) {
        return;
      }

      // if (ref.current && !ref.current.contains(event.target)) {
      // if (ref.current && tableId && !tableId.contains(event.target as Node)) {

      if (ref.current && tableBody && !tableBody.contains(event.target)) {
        if (editingKey.current) {
          onBlur?.(dataSource);
        }
        setTimeout(() => {
          // setEditingKey('')
          editingKey.current = '';
        });
        isSelecting.current = false;
        startCell.current = null;
        // setSelectedCells(new Set())
        // setRowsSelected(new Set())

        (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
        (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
        (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
        rowsSelected.current = new Set();
        selectedCells.current = new Set();
        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)
    };
  }, [dataSource, id, onBlur]);
  const triggerDragPaste = (pastesArray, ctrlKey) => {
    const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
    const tmpCols = {
      ...visibleCols
    };
    const rowSelectedFirst = (0, _hooks.getFirstSelectCell)(selectedCells.current).row;
    const rowPasteLast = (0, _hooks.getLastSelectCell)(pasteCells.current).row;
    const selectedArray = Array.from(selectedCells.current).map(key => {
      const [row, col] = key.split("-").map(Number);
      const columnKey = tmpCols[col].field;

      // @ts-ignore
      return {
        row,
        col,
        value: (0, _hooks.flattenData)(childrenColumnName, dataSource)[row][columnKey]
      };
      // return { row, col, value: '' };
    });
    const copyRows = selectedArray.map(it => ({
      ...(0, _hooks.flattenData)(childrenColumnName, dataSource)[it.row]
    }));

    // 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;
    });
    let newRange;
    if (rowPasteLast > rowSelectedFirst) {
      // kéo xuóng
      newRange = ctrlKey ? (0, _hooks.addRowsDownWithCtrl)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length) : (0, _hooks.addRowsDown)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
    } else {
      // kéo lên
      newRange = ctrlKey ? (0, _hooks.addRowsUpWithCtrl)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length) : (0, _hooks.addRowsUp)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
    }

    // const record = flattenData(childrenColumnName, dataSource)[getFirstSelectCell(pastesArray).row]

    // if (!record?.parentId) {

    // Cập nhật data mới
    const newData = (0, _hooks.flattenArray)([...dataSource]);
    // const newData = flattenArray([...originData])

    // 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.current).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 >= tmpCols.length) {
          // Không vượt quá số cột
          return;
        }

        // @ts-ignore
        const columnKey = tmpCols[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) ?? [];

    // const rsFilterData = updateDataByFilter(flattenArray([...originData]), newData)
    const rsFilterData = (0, _hooks.updateOrInsert)((0, _hooks.flattenArray)([...originData]), newData);
    // const rsFilterData = mergeWithFilter(flattenArray([...originData]), newData)
    // const rsFilterData = mergeWithFilter2(flattenArray([...originData]), newData)

    const rs = (0, _hooks.unFlattenData)(rsFilterData);
    triggerPaste?.(pastedRows, pastedColumnsArray, rs, copyRows);

    // }

    /// cập nhật cell class
    if (selectedCells.current && selectedCells.current.size > 0) {
      // onRemoveBgSelectedCell(rangeCells, id)
      // onRemoveBorderSelectedCell(rangeCells, id)
    }

    // selectedCells.current = sortedSetASC(mergedSet)
    (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
    const newCells = (0, _hooks.sortedSetASC)(mergedSet);
    selectedCells.current = newCells;
    (0, _hooks.onAddBgCellIndex)(newCells, id);
    setRangeCells(newCells);
    (0, _hooks.onAddBgSelectedCell)(newCells, id);
    (0, _hooks.onAddBorderSelectedCell)(newCells, id);
    setTimeout(() => {
      (0, _hooks.showDraggingPoint)(newCells, id);
    }, 50);

    // setPasteCells(new Set())

    if (pasteCells.current && pasteCells.current.size > 0) {
      (0, _hooks.removeClassBorderPasteCell)(pasteCells.current, 'up', id);
    }
    pasteCells.current = new Set();
  };
  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 = (0, _hooks.flattenArray)([...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: (0, _hooks.newGuid)()
          });
        }
        rowValues.forEach((cellValue, colIndex) => {
          const targetCol = startCol + colIndex;
          if (targetCol >= visibleCols.length) {
            // Không vượt quá số cột
            return;
          }
          const columnTarget = visibleCols[targetCol];
          const isEdit = typeof columnTarget.editEnable === 'function' ? columnTarget.editEnable(newData[targetRow]) : columnTarget.editEnable;
          if (isEdit) {
            const columnKey = visibleCols[targetCol].field;
            // const isEdit = typeof columnTarget.editEnable === 'function' ? columnTarget.editEnable(newData[targetRow]) : columnTarget.editEnable

            if (columnTarget.type === 'number' && (0, _hooks.isFormattedNumber)(cellValue.trim())) {
              const colFormat = typeof columnTarget.format === 'function' ? columnTarget.format(record) : columnTarget.format;
              const valuePasteFormat = (0, _hooks.detectSeparators)(cellValue.trim());
              const cellFormat = (0, _hooks.getFormat)(colFormat, format);
              const thousandSeparator = valuePasteFormat?.thousandSeparator ?? cellFormat?.thousandSeparator;
              const decimalSeparator = valuePasteFormat?.decimalSeparator ?? cellFormat?.decimalSeparator;
              const dec = cellFormat?.decimalScale;
              const numericFormatProps = {
                thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
                decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
                allowNegative: cellFormat?.allowNegative ?? true,
                prefix: cellFormat?.prefix,
                suffix: cellFormat?.suffix,
                decimalScale: dec,
                fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
              };
              const val = (0, _reactNumericComponent.removeNumericFormat)(cellValue.trim(), undefined, numericFormatProps);

              // @ts-ignore
              newData[targetRow] = {
                ...newData[targetRow],
                [columnKey]: Number(val)
              };
            } else {
              // @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) ?? [];

      // const rsFilterData = updateDataByFilter(flattenArray([...originData]), newData)
      // const rsFilterData = mergeWithFilter(flattenArray([...originData]), newData)
      const rsFilterData = (0, _hooks.updateOrInsert)((0, _hooks.flattenArray)([...originData]), newData);
      const rs = (0, _hooks.unFlattenData)(rsFilterData);
      triggerPaste?.(pastedRows, pastedColumnsArray, rs, []);
    } else {
      // Cập nhật data mới
      // const newData = flattenArray([...dataSource])

      const parent = (0, _hooks.findItemByKey)(dataSource, 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: (0, _hooks.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;
          }
          const columnTarget = visibleCols[targetCol];
          const isEdit = typeof columnTarget.editEnable === 'function' ? columnTarget.editEnable(childData[targetRow]) : columnTarget.editEnable;
          if (isEdit) {
            // @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,
        chi