es-grid-template 1.5.16 → 1.6.0

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

@@ -27,6 +27,8 @@ 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 {faker} from "@faker-js/faker";
@@ -182,6 +184,35 @@ const validateData = async (data, formSchema) => {
     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,
@@ -189,6 +220,7 @@ const GridEdit = props => {
     t,
     columns,
     dataSource,
+    originData,
     components,
     allowResizing,
     rowKey = 'id',
@@ -215,12 +247,17 @@ const GridEdit = props => {
     setTooltipContent,
     onBlur,
     locale,
+    mergedFilterKeys,
+    setMergedFilterKeys,
+    wrapSettings,
     ...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());
@@ -381,7 +418,14 @@ const GridEdit = props => {
   // const [editingKey, setEditingKey] = useState<string | number>('')
 
   const [dataErrors, setDataErrors] = (0, _react.useState)([]);
-  const [isFilter, setIsFilter] = _react.default.useState(false);
+
+  // 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,
@@ -414,8 +458,12 @@ const GridEdit = props => {
     }
   }, [validate, dataSource]);
   const rowsFocus = _react.default.useMemo(() => {
-    return [...new Set(Array.from(rangeCells).map(item => parseInt(item.split('-')[0])))] ?? [];
-  }, [rangeCells]);
+    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, {
@@ -457,7 +505,7 @@ const GridEdit = props => {
       triggerChangeData?.(newData, 'Add');
     }
   }, [dataSource, defaultValue, triggerChangeData]);
-  const handleAddMulti = _react.default.useCallback((item, e) => {
+  const handleAddMulti = _react.default.useCallback((item, n) => {
     if (item.onClick) {
       item.onClick({
         toolbar: item
@@ -465,7 +513,7 @@ const GridEdit = props => {
     } else {
       const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
       const newRows = Array.from({
-        length: Number(e.key)
+        length: n
       }).map(() => defaultRowValue ? {
         ...defaultRowValue,
         id: undefined,
@@ -474,10 +522,13 @@ const GridEdit = props => {
         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, triggerChangeData]);
+  }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
   const handleDuplicate = _react.default.useCallback(() => {
     // không tính tree
 
@@ -492,22 +543,17 @@ const GridEdit = props => {
 
     // 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)];
+    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, rowsFocus, triggerChangeData]);
+  }, [dataSource, originData, rowsFocus, triggerChangeData]);
 
   // thêm n dòng bên trên
   const handleInsertBefore = _react.default.useCallback((item, n) => {
-    //
-    // onRemoveBgSelectedCell(selectedCells.current, id)
-    // onRemoveBorderSelectedCell(selectedCells.current, id)
-    //
-
-    // setTimeout(() => {
-    // onAddBgSelectedCell(selectedCells.current, id)
-    // onAddBorderSelectedCell(selectedCells.current, id)
-    // }, 10)
-
     const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
     // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
 
@@ -519,51 +565,40 @@ const GridEdit = props => {
     } else {
       if (!record?.parentId) {
         // Cập nhật data mới
-        const newData = [...dataSource];
+        // const newData = [...dataSource]
+        const newData = [...originData];
         const newRows = Array.from({
           length: n
-        }).map(() => defaultRowValue ? isFilter ? {
-          ...defaultRowValue,
-          id: undefined,
-          rowId: (0, _hooks.newGuid)(),
-          isFilterState: true
-        } : {
+        }).map(() => defaultRowValue ? {
           ...defaultRowValue,
           id: undefined,
           rowId: (0, _hooks.newGuid)()
-        } : isFilter ? {
-          id: undefined,
-          rowId: (0, _hooks.newGuid)(),
-          isFilterState: true
         } : {
           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 = [...dataSource]
+        const newData = [...originData];
+        const parent = (0, _hooks.findItemByKey)(newData, rowKey, record.parentId);
         const newRows = Array.from({
           length: n
-        }).map(() => defaultRowValue ? isFilter ? {
+        }).map(() => defaultRowValue ? {
           ...defaultRowValue,
           id: undefined,
           rowId: (0, _hooks.newGuid)(),
-          isFilterState: true
+          parentId: parent.rowId
         } : {
-          ...defaultRowValue,
-          id: undefined,
-          rowId: (0, _hooks.newGuid)()
-        } : isFilter ? {
           id: undefined,
           rowId: (0, _hooks.newGuid)(),
-          isFilterState: true
-        } : {
-          id: undefined,
-          rowId: (0, _hooks.newGuid)()
+          parentId: parent.rowId
         });
-        const parent = (0, _hooks.findItemByKey)(newData, rowKey, record.parentId);
 
         // Cập nhật childData mới
         const childData = parent?.children ? [...parent.children] : [];
@@ -577,12 +612,15 @@ const GridEdit = props => {
         triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
       }
     }
-  }, [dataSource, defaultValue, isFilter, rowKey, rowsFocus, triggerChangeData]);
+  }, [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 record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
+    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()
 
@@ -593,51 +631,41 @@ const GridEdit = props => {
     } 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 ? isFilter ? {
-          ...defaultRowValue,
-          id: undefined,
-          rowId: (0, _hooks.newGuid)(),
-          isFilterState: true
-        } : {
+        }).map(() => defaultRowValue ? {
           ...defaultRowValue,
           id: undefined,
           rowId: (0, _hooks.newGuid)()
-        } : isFilter ? {
-          id: undefined,
-          rowId: (0, _hooks.newGuid)(),
-          isFilterState: true
         } : {
           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 = [...dataSource];
+        const newData = [...originData];
+        const parent = (0, _hooks.findItemByKey)(newData, rowKey, record.parentId);
         const newRows = Array.from({
           length: n
-        }).map(() => defaultRowValue ? isFilter ? {
+        }).map(() => defaultRowValue ? {
           ...defaultRowValue,
           id: undefined,
           rowId: (0, _hooks.newGuid)(),
-          isFilterState: true
+          parentId: parent.rowId
         } : {
-          ...defaultRowValue,
-          id: undefined,
-          rowId: (0, _hooks.newGuid)()
-        } : isFilter ? {
           id: undefined,
           rowId: (0, _hooks.newGuid)(),
-          isFilterState: true
-        } : {
-          id: undefined,
-          rowId: (0, _hooks.newGuid)()
+          parentId: parent.rowId
         });
-        const parent = (0, _hooks.findItemByKey)(newData, rowKey, record.parentId);
+        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] : [];
@@ -651,17 +679,18 @@ const GridEdit = props => {
         triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
       }
     }
-  }, [dataSource, defaultValue, isFilter, rowKey, rowsFocus, triggerChangeData]);
+  }, [defaultValue, dataSource, rowsFocus, originData, mergedFilterKeys, setMergedFilterKeys, triggerChangeData, rowKey]);
   const handleInsertChild = _react.default.useCallback(item => {
     const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
-    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : (0, _hooks.newGuid)();
+    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 = [...dataSource]
+      const newData = [...originData];
       let newElement;
       if (!record.children || record.children.length === 0) {
         newElement = {
@@ -682,6 +711,8 @@ const GridEdit = props => {
           }]
         };
       }
+      const rs = mergedFilterKeys ? [...mergedFilterKeys, rowId] : [rowId];
+      setMergedFilterKeys?.(rs);
       const newDataSource = (0, _hooks.updateArrayByKey)(newData, newElement, rowKey);
       triggerChangeData?.(newDataSource, 'INSERT_CHILDREN');
     }
@@ -705,16 +736,25 @@ const GridEdit = props => {
         toolbar: item
       });
     } else {
-      const newData = [...dataSource];
+      // 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 => {
-        newData.splice(index, 1);
+        filterData.splice(index, 1);
       });
-      triggerChangeData?.([...newData], 'DELETE_ROWS');
+
+      // const newData = updateOrInsert(flattenArray([...originData]), filterData)
+      //
+      const rs = (0, _hooks.unFlattenData)(filterData);
+      triggerChangeData?.([...rs], 'DELETE_ROWS');
     }
-  }, [dataSource, rowsFocus, triggerChangeData]);
+    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]);
@@ -738,9 +778,12 @@ const GridEdit = props => {
           newData[rowIndex][field] = '';
         }
       }
-      triggerChangeData?.([...newData], 'DELETE_CONTENT');
+      const rsFilterData = (0, _hooks.updateOrInsert)((0, _hooks.flattenArray)([...originData]), newData);
+
+      // triggerChangeData?.([...newData], 'DELETE_CONTENT')
+      triggerChangeData?.([...rsFilterData], 'DELETE_CONTENT');
     }
-  }, [dataSource, triggerChangeData, visibleCols]);
+  }, [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 => {
@@ -760,13 +803,13 @@ const GridEdit = props => {
                 className: 'toolbar-button toolbar-dropdown-button',
                 menu: {
                   items: itemsAdd,
-                  onClick: e => handleAddMulti(item, e)
+                  onClick: e => handleAddMulti(item, Number(e.key))
                 }
               }, /*#__PURE__*/_react.default.createElement("span", {
                 style: {
                   color: '#28c76f'
                 },
-                onClick: () => handleAddSingle(item)
+                onClick: () => handleAddMulti(item, 1)
               }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
             }
           };
@@ -810,13 +853,13 @@ const GridEdit = props => {
               className: 'toolbar-button toolbar-dropdown-button',
               menu: {
                 items: itemsAdd,
-                onClick: e => handleAddMulti(item, e)
+                onClick: e => handleAddMulti(item, Number(e.key))
               }
             }, /*#__PURE__*/_react.default.createElement("span", {
               style: {
                 color: '#28c76f'
               },
-              onClick: () => handleAddSingle(item)
+              onClick: () => handleAddMulti(item, 1)
             }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
           }
         };
@@ -949,7 +992,7 @@ const GridEdit = props => {
         ...item
       };
     });
-  }, [handleAddMulti, handleAddSingle, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
+  }, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
   const {
     control,
     handleSubmit,
@@ -969,8 +1012,6 @@ const GridEdit = props => {
   //   return record[rowKey as any] === editingKey.current
   // }, [editingKey, rowKey])
 
-  // console.log('isEditing', isEditing)
-
   _react.default.useEffect(() => {
     const handleClickOutside = event => {
       const element = event.target;
@@ -1028,7 +1069,7 @@ const GridEdit = props => {
       // document.removeEventListener('touchstart', handleClickOutside)
     };
   }, [dataSource, id, onBlur]);
-  const triggerDragPaste = pastesArray => {
+  const triggerDragPaste = (pastesArray, ctrlKey) => {
     const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
     const tmpCols = {
       ...visibleCols
@@ -1047,6 +1088,9 @@ const GridEdit = props => {
       };
       // 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));
@@ -1070,57 +1114,69 @@ const GridEdit = props => {
     let newRange;
     if (rowPasteLast > rowSelectedFirst) {
       // kéo xuóng
-      newRange = (0, _hooks.addRows8)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
+      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 = (0, _hooks.addRowsUp)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
+      newRange = ctrlKey ? (0, _hooks.addRowsUpWithCtrl)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length) : (0, _hooks.addRowsUp)(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.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;
-          }
+    // const record = flattenData(childrenColumnName, dataSource)[getFirstSelectCell(pastesArray).row]
 
-          // @ts-ignore
-          const columnKey = tmpCols[targetCol].field;
+    // if (!record?.parentId) {
 
-          // @ts-ignore
-          newData[targetRow] = {
-            ...newData[targetRow],
-            [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
-          };
-          pastedColumns.add(columnKey);
+    // 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;
+        }
 
-        // Lưu dòng được paste
-        pastedRows.push(newData[targetRow]);
+        // @ts-ignore
+        const columnKey = tmpCols[targetCol].field;
+
+        // @ts-ignore
+        newData[targetRow] = {
+          ...newData[targetRow],
+          [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
+        };
+        pastedColumns.add(columnKey);
       });
-      const pastedColumnsArray = Array.from(pastedColumns) ?? [];
-      triggerPaste?.(pastedRows, pastedColumnsArray, newData);
-    }
+
+      // Lưu dòng được paste
+      pastedRows.push(newData[targetRow]);
+    });
+    const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+
+    // 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) {
@@ -1149,13 +1205,9 @@ const GridEdit = props => {
   };
   const handlePasted = (record, indexCol, rowNumber, pasteData) => {
     const rows = pasteData.slice(0, onCellPaste?.maxRowsPaste ?? 200);
-    console.log('rows', rows);
-    console.log('record', record);
     if (!record?.parentId) {
-      console.log('1');
-
       // Cập nhật data mới
-      const newData = [...dataSource];
+      const newData = (0, _hooks.flattenArray)([...dataSource]);
 
       // const indexRows =  newData.findIndex((it) => it[rowKey as any] === record[rowKey])
 
@@ -1186,10 +1238,12 @@ const GridEdit = props => {
             // Không vượt quá số cột
             return;
           }
-          if (visibleCols[targetCol].editEnable) {
-            // @ts-ignore
-            const columnTarget = visibleCols[targetCol];
+          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());
@@ -1228,15 +1282,17 @@ const GridEdit = props => {
         pastedRows.push(newData[targetRow]);
       });
       const pastedColumnsArray = Array.from(pastedColumns) ?? [];
-      console.log('pastedRows', pastedRows);
-      console.log('pastedColumnsArray', pastedColumnsArray);
-      console.log('newData', newData);
-      triggerPaste?.(pastedRows, pastedColumnsArray, newData);
+
+      // 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 {
-      console.log('2');
       // Cập nhật data mới
-      const newData = [...dataSource];
-      const parent = (0, _hooks.findItemByKey)(newData, rowKey, record.parentId);
+      // 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] : [];
@@ -1264,7 +1320,9 @@ const GridEdit = props => {
             // Không vượt quá số cột
             return;
           }
-          if (visibleCols[targetCol].editEnable) {
+          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;
 
@@ -1284,15 +1342,27 @@ const GridEdit = props => {
       const newRowData = {
         ...parent,
         children: childData
-      };
-      const newDataSource = (0, _hooks.updateArrayByKey)(newData, newRowData, rowKey);
-      triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource);
+      }; // item đã được filter
+
+      // const newDataSource =  updateArrayByKey(newData, newRowData, rowKey as string)
+      const newDataSource = (0, _hooks.updateArrayByKey)(originData, newRowData, rowKey);
+
+      //
+      // // const rsFilterData = updateDataByFilter(flattenArray([...originData]), flattenArray(newDataSource))
+      // // const rsFilterData = mergeWithFilter(flattenArray([...originData]), flattenArray(newDataSource))
+
+      // const rsFilterData1 = updateOrInsert(flattenArray([...originData]), flattenArray([...newDataSource]))
+      //
+      //
+      // // const rs = unFlattenData(rsFilterData)
+      // const rs1 = unFlattenData(rsFilterData1)
+
+      triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource, []);
     }
   };
   const handlePaste = (record, indexCol, rowNumber, e) => {
     // const clipboard: any = (e.clipboardData || (window && window?.Clipboard)).getData("text")
     const pasteData = e.clipboardData.getData("text/plain");
-    console.log('pasteData', pasteData);
 
     // Chuyển đổi dữ liệu từ clipboard thành mảng
     const rowsPasted = pasteData.split("\n").map(row =>
@@ -1326,131 +1396,8 @@ const GridEdit = props => {
         // ),
       });
     } else {
-      console.log('5555');
       handlePasted(record, indexCol, rowNumber, rowsPasted);
     }
-
-    // const rows = rowsPasted.slice(0, (onCellPaste?.maxRowsPaste ?? 200));
-    //
-    //
-    // if (!record?.parentId ) {
-    //
-    //   // Cập nhật data mới
-    //   const newData = [...dataSource];
-    //
-    //   // @ts-ignore
-    //   const indexRows =  newData.findIndex((it) => it[rowKey] === record[rowKey])
-    //
-    //   // Lấy vị trí bắt đầu
-    //   // const { row: startRow, col: startCol } = selectedCell;
-    //   const startRow = indexRows
-    //   const startCol = indexCol
-    //
-    //
-    //
-    //   // const flattData = flattenArray(newData);
-    //
-    //   const pastedRows: RecordType[] = [];
-    //   const pastedColumns = new Set()
-    //
-    //
-    //   rows.forEach((rowValues: any, rowIndex: any) => {
-    //     const targetRow = startRow + rowIndex;
-    //
-    //     // Nếu vượt quá số dòng hiện có, thêm dòng mới
-    //     if (targetRow >= newData.length) {
-    //       // @ts-ignore
-    //       // newData.push({ id: newGuid()});
-    //       newData.push({ id: undefined, rowId: newGuid()});
-    //     }
-    //
-    //     rowValues.forEach((cellValue: any, colIndex: any) => {
-    //       const targetCol = startCol + colIndex;
-    //       if (targetCol >= columns.length) { // Không vượt quá số cột
-    //         return
-    //       }
-    //
-    //       if (columns[targetCol].editEnable) {
-    //         // @ts-ignore
-    //         const columnKey = columns[targetCol].field;
-    //
-    //         // @ts-ignore
-    //         newData[targetRow] = { ...newData[targetRow], [columnKey]: cellValue.trim() };
-    //         pastedColumns.add(columnKey);
-    //       }
-    //
-    //     });
-    //
-    //     // Lưu dòng được paste
-    //     pastedRows.push(newData[targetRow]);
-    //
-    //   });
-    //
-    //   const pastedColumnsArray = Array.from(pastedColumns) ?? [];
-    //
-    //   triggerPaste?.(pastedRows, pastedColumnsArray as string[], newData)
-    //
-    //
-    // } else  {
-    //
-    //   // Cập nhật data mới
-    //   const newData = [...dataSource];
-    //
-    //   const parent  =  findItemByKey(newData, rowKey as any, record.parentId)
-    //
-    //   // Cập nhật childData mới
-    //   const childData: any[] = parent?.children ? [...parent.children] : []
-    //
-    //
-    //   // Lấy vị trí bắt đầu
-    //   // const { row: startRow, col: startCol } = selectedCell;
-    //   const startRow = childData.findIndex((it) => it[rowKey] === record[rowKey])
-    //   const startCol = indexCol
-    //
-    //   const pastedRows: RecordType[] = []
-    //   const pastedColumns = new Set()
-    //
-    //
-    //   rows.forEach((rowValues: any, rowIndex: any) => {
-    //     const targetRow = startRow + rowIndex
-    //
-    //     // Nếu vượt quá số dòng hiện có, thêm dòng mới
-    //     if (targetRow >= childData.length) {
-    //
-    //       childData.push({ id: undefined, rowId: newGuid(), parentId: parent[rowKey ?? 'id']})
-    //     }
-    //
-    //     rowValues.forEach((cellValue: any, colIndex: any) => {
-    //       const targetCol = startCol + colIndex
-    //       if (targetCol >= columns.length) { // Không vượt quá số cột
-    //         return
-    //       }
-    //
-    //       if (columns[targetCol].editEnable) {
-    //
-    //         // @ts-ignore
-    //         const columnKey = columns[targetCol].field
-    //
-    //         // @ts-ignore
-    //         childData[targetRow] = { ...childData[targetRow], [columnKey]: cellValue.trim() }
-    //         pastedColumns.add(columnKey)
-    //       }
-    //
-    //     })
-    //
-    //     // Lưu dòng được paste
-    //     pastedRows.push(childData[targetRow])
-    //
-    //   })
-    //
-    //   const pastedColumnsArray = Array.from(pastedColumns) ?? []
-    //
-    //   const newRowData = {...parent, children: childData}
-    //
-    //   const newDataSource =  updateArrayByKey(newData, newRowData, rowKey as string)
-    //
-    //   triggerPaste?.(pastedRows, pastedColumnsArray as string[], newDataSource )
-    // }
   };
   const handlePointDoubleClick = e => {
     // e.preventDefault()
@@ -1561,7 +1508,7 @@ const GridEdit = props => {
     // nếu ctrlCell length > 0 thì set selectCells
 
     if (pasteCells && pasteCells.current.size > 0) {
-      triggerDragPaste(pasteCells.current);
+      triggerDragPaste(pasteCells.current, e.ctrlKey);
     } else {
       setRangeCells(selectedCells.current);
       const target = e.target;
@@ -1589,6 +1536,7 @@ const GridEdit = props => {
       col: startCol
     } = startCell.current;
     if (e.ctrlKey) {
+
       // const newCtrlCells = new Set();
       // for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
       //   for (let c = Math.min(startCol, col); c <= Math.max(startCol, col); c++) {
@@ -1598,7 +1546,7 @@ const GridEdit = props => {
 
       // setCurrentCtrlCells(newCtrlCells)
 
-      return;
+      // return
     }
     if (!isPasteDragging) {
       // chọn vùng copy
@@ -1703,10 +1651,8 @@ const GridEdit = props => {
       (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
     }
     selectedCells.current = newSelectedCells;
-
-    // onAddBgSelectedCell(newSelectedCells, id)
-    // onAddBorderSelectedCell(newSelectedCells, id)
-
+    (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
+    (0, _hooks.onAddBorderSelectedCell)(newSelectedCells, id);
     (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
     (0, _hooks.showDraggingPoint)(newSelectedCells, id);
   };
@@ -1862,7 +1808,9 @@ const GridEdit = props => {
       const row = {
         ...formData
       };
-      const newData = [...dataSource];
+
+      // const newData = [...dataSource]
+      const newData = [...originData];
 
       // @ts-ignore
       const index = (0, _hooks.flattenData)(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
@@ -1906,7 +1854,8 @@ const GridEdit = props => {
             indexRow,
             rowData: record,
             rowId: key,
-            rowsData: [...dataSource],
+            // rowsData: [...dataSource],
+            rowsData: [...originData],
             sumValue: []
           }, handleChangeCallback);
         } else {
@@ -1919,7 +1868,8 @@ const GridEdit = props => {
             indexRow,
             rowData: record,
             rowId: key,
-            rowsData: [...dataSource],
+            // rowsData: [...dataSource],
+            rowsData: [...originData],
             sumValue: []
           }, handleChangeCallback);
           onSubmit(record);
@@ -1930,7 +1880,7 @@ const GridEdit = props => {
       onSubmit(record);
     }
   };
-  const handleEdit = (record, col, editType, e) => {
+  const handleEdit = (record, col, editType, rowIndex, e) => {
     (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
     setTooltipContent('');
 
@@ -1972,7 +1922,17 @@ const GridEdit = props => {
     if (startSelectedCells.current && startSelectedCells.current.row !== undefined && startSelectedCells.current.col !== undefined) {
       setTimeout(() => {
         const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${startSelectedCells.current.row}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] input`);
+        const textarea = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${startSelectedCells.current.row}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] textarea`);
         const select = document.querySelector(`div.cell-editing[tabindex="${startSelectedCells.current.col}"] .ant-select-selection-search input`);
+        if (textarea) {
+          // input.focus({
+          //   preventScroll: true,
+          //   cursor: 'end'
+          // })
+
+          textarea.focus();
+          textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+        }
         if (input) {
           input.focus();
         }
@@ -1982,7 +1942,7 @@ const GridEdit = props => {
           // @ts-ignore
           select.focus();
         }
-      }, 0);
+      }, 20);
     }
   };
 
@@ -2153,6 +2113,31 @@ const GridEdit = props => {
     }
     return {
       ...column,
+      title: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(SortableHeaderCell, {
+        columnKey: column.field
+      }, /*#__PURE__*/_react.default.createElement(_HeaderContent.default, {
+        column: {
+          ...column
+        },
+        t: t,
+        id: id,
+        wrapSettings: wrapSettings,
+        onClick: () => {
+          handleClickColHeader(column, colIndex);
+        },
+        onCopy: e => {
+          if (editingKey.current === '') {
+            handleCopy(e);
+            e.preventDefault();
+          }
+        },
+        onPaste: event => {
+          if (editingKey.current === '') {
+            handlePaste(dataSource[0], colIndex, 0, event);
+            event.preventDefault();
+          }
+        }
+      }))),
       onCell: (record, rowIndex) => {
         const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
         return {
@@ -2165,7 +2150,7 @@ const GridEdit = props => {
                   // ~~ khi editingKey = ''
                   event.preventDefault();
                   event.stopPropagation();
-                  handleEdit(record, column, column.editType, event);
+                  handleEdit(record, column, column.editType, rowNumber, event);
 
                   // onRemoveBgSelectedCell(selectedCells.current, id)
                   // onRemoveBorderSelectedCell(selectedCells.current, id)
@@ -2181,20 +2166,22 @@ const GridEdit = props => {
                     onTriggerExpand(record);
                   }
                 } else {
-                  if (event.key === 'Enter') {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    if (editingKey && editingKey.current !== '' && (rowNumber ?? 0) + 1 < (0, _hooks.flattenArray)(dataSource).length && event.key === 'Enter') {
-                      handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
-                    } else {
-                      // // focus cell hiện tại và tắt edit
-                      // handleFocusCell((rowNumber ?? 0), colIndex, column, 'vertical', event)
-                      // setEditingKey('')
-
-                      // thêm dòng mới
-
-                      handleAddSingle();
-                      handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event, true);
+                  if (event.shiftKey && event.key === 'Enter') {} else {
+                    if (event.key === 'Enter') {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      if (editingKey && editingKey.current !== '' && (rowNumber ?? 0) + 1 < (0, _hooks.flattenArray)(dataSource).length && event.key === 'Enter') {
+                        handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
+                      } else {
+                        // // focus cell hiện tại và tắt edit
+                        // handleFocusCell((rowNumber ?? 0), colIndex, column, 'vertical', event)
+                        // setEditingKey('')
+
+                        // thêm dòng mới
+
+                        handleAddSingle();
+                        handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event, true);
+                      }
                     }
                   }
                 }
@@ -2250,7 +2237,6 @@ const GridEdit = props => {
             }
           },
           onPaste: event => {
-            console.log('aaaaaa');
             if (editingKey.current === '') {
               handlePaste(record, colIndex, rowNumber, event);
               event.preventDefault();
@@ -2265,7 +2251,7 @@ const GridEdit = props => {
           onDoubleClick: event => {
             // if (!isEditing(record) && record[rowKey] !== editingKey.current && isEditable(column as any, record)) {
             if (!(record[rowKey] === editingKey.current) && record[rowKey] !== editingKey.current && (0, _hooks.isEditable)(column, record)) {
-              handleEdit(record, column, (0, _hooks.getEditType)(column, record), event);
+              handleEdit(record, column, (0, _hooks.getEditType)(column, record), rowNumber, event);
 
               // onRemoveBgSelectedCell(selectedCells.current, id)
               // onRemoveBorderSelectedCell(selectedCells.current, id)
@@ -2276,17 +2262,21 @@ const GridEdit = props => {
             // isSelecting.current = true;
             // startCell.current = { row: rowNumber, col: colIndex };
 
-            if (selectedCells.size === 0) {
-              // setStartSelectedCell({ row: rowNumber, col: colIndex })
-              // setSelectedCells(new Set([`${rowNumber}-${colIndex}`]));
+            // if (selectedCells.size === 0) {
+            // setStartSelectedCell({ row: rowNumber, col: colIndex })
+            // setSelectedCells(new Set([`${rowNumber}-${colIndex}`]));
+            (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
+            startSelectedCells.current = {
+              row: rowNumber,
+              col: colIndex
+            };
+            selectedCells.current = new Set([`${rowNumber}-${colIndex}`]);
+            rowsSelected.current = new Set();
+            (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
+            (0, _hooks.showDraggingPoint)(selectedCells.current, id);
+            setRangeCells(selectedCells.current);
 
-              startSelectedCells.current = {
-                row: rowNumber,
-                col: colIndex
-              };
-              selectedCells.current = new Set([`${rowNumber}-${colIndex}`]);
-              rowsSelected.current = new Set();
-            }
+            // }
           },
           onClick: () => {
             if (record[rowKey] !== editingKey.current && editingKey.current !== '') {
@@ -2312,7 +2302,7 @@ const GridEdit = props => {
           dataIndex: column.dataIndex,
           indexRow: rowNumber,
           indexCol: colIndex,
-          title: (0, _columns.getValueCell)(column, record[column.field], record, format),
+          title: (0, _columns.getValueCell)(column, record[column.field], record, rowNumber, colIndex, format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
           // 'data-tooltip-id': "tooltip-cell-content",
@@ -2327,35 +2317,51 @@ const GridEdit = props => {
           } : {}
         };
       },
-      onHeaderCell: (data, index) => {
-        return {
-          ...(column.onHeaderCell ? column.onHeaderCell?.(data, index) : {}),
-          onClick: () => {
-            handleClickColHeader(column, colIndex);
-          },
-          onCopy: e => {
-            if (editingKey.current === '') {
-              handleCopy(e);
-              e.preventDefault();
-            }
-          },
-          onPaste: event => {
-            if (editingKey.current === '') {
-              handlePaste(dataSource[0], colIndex, 0, event);
-              event.preventDefault();
-            }
-          },
-          style: {
-            userSelect: 'none'
-          }
-        };
-      },
+      // onHeaderCell: (data: any, index: any) => {
+      //
+      //   return ({
+      //     ...column.onHeaderCell ? column.onHeaderCell?.(data, index) : {},
+      //     // onClick: () => {
+      //     //   handleClickColHeader(column, colIndex)
+      //     // },
+      //     // onCopy: (e: any) => {
+      //     //   if (editingKey.current === '') {
+      //     //     handleCopy(e)
+      //     //     e.preventDefault()
+      //     //   }
+      //     // },
+      //     //
+      //     // onPaste: (event: any) => {
+      //     //   console.log('3333', event)
+      //     //
+      //     //   if (editingKey.current === '') {
+      //     //
+      //     //     handlePaste(dataSource[0], colIndex, 0 as number, event)
+      //     //     event.preventDefault()
+      //     //   }
+      //     //
+      //     // },
+      //     style: {
+      //       userSelect: 'none'
+      //     }
+      //   })
+      // },
+
       render: (value, record, rowIndex) => {
         const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
         const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
         const cellFormat = (0, _hooks.getFormat)(colFormat, format);
         const rowError = dataErrors.find(it => it.index === rowNumber);
         const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null;
+        const handleClick = event => {
+          if (!(record[rowKey] === editingKey.current) && record[rowKey] !== editingKey.current && (0, _hooks.isEditable)(column, record)) {
+            handleEdit(record, column, (0, _hooks.getEditType)(column, record), rowNumber, event);
+
+            // onRemoveBgSelectedCell(selectedCells.current, id)
+            // onRemoveBorderSelectedCell(selectedCells.current, id)
+            handleCellClick(rowNumber, record, column);
+          }
+        };
         return /*#__PURE__*/_react.default.createElement("div", {
           className: (0, _classnames.default)('ui-rc_cell-content', {
             isValid: column.field && rowError && rowError[column.field]?.field === column?.field
@@ -2364,6 +2370,8 @@ const GridEdit = props => {
           onMouseEnter: event => {
             setTooltipContent(cellError ? cellError.message : '');
             handleMouseEnter(rowNumber, colIndex, event);
+
+            // hoveredRow.current = rowNumber
           },
           onMouseUp: handleMouseUp,
           onMouseMove: () => {
@@ -2373,8 +2381,10 @@ const GridEdit = props => {
             }
           }
         }, /*#__PURE__*/_react.default.createElement("div", {
-          className: 'ui-rc_content'
-        }, (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat)), !isDragMouse.current && /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _classnames.default)('ui-rc_content', {
+            'select-cell': ['select', 'selectTable', 'asyncSelect'].includes((0, _hooks.getEditType)(column, record))
+          })
+        }, (0, _columns.renderContent)(column, value, record, rowIndex, colIndex, true, cellFormat, handleClick)), !isDragMouse.current && /*#__PURE__*/_react.default.createElement("div", {
           className: 'dragging-point hidden',
           onMouseDown: e => {
             // e.stopPropagation()
@@ -2580,6 +2590,7 @@ const GridEdit = props => {
       ...components,
       body: {
         cell: _EditableCell.default
+        // row: RowComponent
       }
     },
     className: (0, _classnames.default)(className, 'grid-editable'),
@@ -2641,8 +2652,6 @@ const GridEdit = props => {
     } : undefined,
     triggerChangeColumns: triggerChangeColumns,
     clickHeaderToSort: false,
-    isFilter: isFilter,
-    setIsFilter: setIsFilter,
     contextMenuItems: contextMenuItems,
     contextMenuClick: contextMenuClick,
     onScroll: () => {