es-grid-template 1.3.5 → 1.3.6

package/assets/index.css

@@ -222,6 +222,9 @@
 .ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-paste-border-left {
   border-inline-end: 1px dashed #949494;
 }
+.ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-paste-border-top {
+  border-bottom: 1px dashed #949494 !important;
+}
 .ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-border-right {
   border-inline-end: 1px solid #0550C5;
 }

package/assets/index.scss

@@ -426,6 +426,9 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         &.cell-paste-border-left {
           border-inline-end: 1px dashed #949494;
         }
+        &.cell-paste-border-top {
+          border-bottom: 1px dashed #949494 !important;
+        }
 
         &.cell-border-right {
           border-inline-end: 1px solid $border-selected-color;

package/es/grid-component/EditableCell.js

@@ -572,6 +572,7 @@ const EditableCell = props => {
           },
           treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox',
           filterTreeNode: filterTreeNode,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
           onSelect: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();

package/es/grid-component/hooks/columns/index.js

@@ -7,7 +7,7 @@ import { DatePicker, Empty, Input, Select } from "rc-master-ui";
 import CheckboxFilter from "../../CheckboxFilter";
 import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection";
 import NumberRange from "../../number-range";
-import Number from "../../number";
+import NumberInput from "../../number";
 // import {Typography} from "antd";
 const {
   RangePicker
@@ -76,7 +76,8 @@ export const getValueCell = (column, value, format) => {
 
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
-      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(value.toFixed(dec)).toString() : value.toString() : '0';
+      const tmpval = typeof value === 'string' ? Number(value) : value;
+      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? tmpval.toFixed(dec) : tmpval.toString() : '0';
       const numericFormatProps = {
         thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
         decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
@@ -144,7 +145,7 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
     case 'Number':
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
-      }, /*#__PURE__*/React.createElement(Number, {
+      }, /*#__PURE__*/React.createElement(NumberInput, {
         t: t,
         value: selectedKeys[0],
         onChange: vals => {

package/es/grid-component/hooks/utils.d.ts

@@ -62,6 +62,13 @@ export declare function addRows8(arr: any, n: number): {
     combined: any[];
     addedRows: any[];
 };
+export declare function addRowsUp(array: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
 export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordType>, convertColumns: any[], t?: any) => ColumnsTable<RecordType>;
 export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
 export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;
@@ -93,3 +100,7 @@ export declare function isRightMostInRegion(rowIndex: number, colIndex: number,
 export declare function isEqualSet(setA: any, setB: any): boolean;
 export declare function isBottomMostInRanges(rowIndex: number, colIndex: number, regions: any[]): boolean;
 export declare const mergedSets: (arr: any[]) => Set<unknown>;
+export declare const sortedSetASC: (setValue: any) => Set<unknown>;
+export declare const sortedSetDSC: (setValue: any) => Set<unknown>;
+export declare const onAddClassSelectedCell: (selectedCells: any, id?: string) => void;
+export declare const onRemoveClassSelectedCell: (selectedCells: any, id?: string) => void;

package/es/grid-component/hooks/utils.js

@@ -623,6 +623,146 @@ export function addRows8(arr, n) {
     addedRows
   };
 }
+export function addRowsUp(array, n) {
+  const arr = array.reverse();
+  if (!Array.isArray(arr) || arr.length === 0) return {
+    combined: arr,
+    addedRows: []
+  };
+  const m = arr.length;
+  const numCols = arr[0].length;
+  const addedRows = [];
+
+  // Hàm kiểm tra kiểu date hợp lệ
+  const isValidDate = item => {
+    // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
+    // return !isNaN(Date.parse(d))
+
+    if (typeof item === 'number') {
+      // return 'number'
+      return false;
+    }
+    if (typeof item === 'string') {
+      // Kiểm tra nếu là chuỗi ISO date hợp lệ
+      const date = new Date(item);
+      if (!isNaN(date.getTime()) && item.includes('T')) {
+        // return 'date'
+        return true;
+      }
+      // return 'string'
+      return false;
+    }
+    return !isNaN(Date.parse(item));
+  };
+
+  // Lấy giá trị mẫu của cột j từ hàng đầu tiên
+  const getSample = j => arr[0][j];
+
+  // Xác định chế độ xử lý cho mỗi cột:
+  // mode = 'number-stepping' | 'date-stepping' | 'number-constant' | 'cycle'
+  const modes = [];
+  const steps = []; // bước tăng, nếu có (cho number hoặc date)
+
+  for (let j = 0; j < numCols; j++) {
+    const sample = getSample(j);
+    if (m === 1) {
+      // Nếu mảng chỉ có 1 hàng: nếu là số thì giữ nguyên; nếu là date thì tăng 1 ngày; còn lại giữ nguyên.
+      if (typeof sample === "number") {
+        modes[j] = "number-constant";
+      } else if (isValidDate(sample)) {
+        modes[j] = "date-stepping";
+        steps[j] = 24 * 3600 * 1000; // 1 ngày = 86400000 ms
+      } else {
+        modes[j] = "cycle";
+      }
+    } else if (m === 2) {
+      // Nếu mảng có 2 hàng: nếu là số thì tính bước = row2 - row1, tương tự với date
+      const first = arr[0][j],
+        second = arr[1][j];
+      if (typeof first === "number" && typeof second === "number") {
+        modes[j] = "number-stepping";
+        steps[j] = second - first;
+      } else if (isValidDate(first) && isValidDate(second)) {
+        modes[j] = "date-stepping";
+        steps[j] = Date.parse(second) - Date.parse(first);
+      } else {
+        modes[j] = "cycle";
+      }
+    } else {
+      // Nếu mảng có >2 hàng
+      const first = arr[0][j],
+        second = arr[1][j],
+        third = arr[2][j];
+      if (typeof first === "number" && typeof second === "number" && typeof third === "number") {
+        const step1 = second - first;
+        const step2 = third - second;
+        if (step1 === step2) {
+          modes[j] = "number-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else if (isValidDate(first) && isValidDate(second) && isValidDate(third)) {
+        const step1 = Date.parse(second) - Date.parse(first);
+        const step2 = Date.parse(third) - Date.parse(second);
+        if (step1 === step2) {
+          modes[j] = "date-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else {
+        modes[j] = "cycle";
+      }
+    }
+  }
+
+  // Tạo các dòng mới (thêm n dòng)
+  // Với mỗi cột, nếu chế độ là stepping thì lấy giá trị cuối của mảng ban đầu và cộng thêm (i+1)*step
+  // Nếu chế độ là cycle thì dùng arr[i mod m][j]
+  for (let i = n - 1; i >= 0; i--) {
+    const newRow = [];
+    for (let j = 0; j < numCols; j++) {
+      let newValue;
+      switch (modes[j]) {
+        case "number-constant":
+          // Mảng có 1 hàng, số giữ nguyên
+          newValue = arr[0][j];
+          break;
+        case "number-stepping":
+          {
+            // Lấy giá trị cuối của cột j trong mảng ban đầu
+
+            const lastValue = arr[m - 1][j];
+            newValue = lastValue - (i + 1) * steps[j] * -1;
+          }
+          break;
+        case "date-stepping":
+          {
+            // Lấy giá trị cuối, chuyển về date, cộng thêm (i+1)*step, chuyển lại về định dạng ISO
+
+            const lastDate = new Date(array[m - 1][j]);
+            const newTime = lastDate.getTime() - (i + 1) * steps[j] * -1;
+            newValue = moment(new Date(newTime)).format();
+          }
+          break;
+        case "cycle":
+        default:
+          // Lặp lại nội dung theo vòng tròn: dùng hàng thứ (i mod m)
+
+          newValue = arr[i % m][j];
+          break;
+      }
+      newRow.push(newValue);
+    }
+    addedRows.push(newRow);
+  }
+  const combined = arr.concat(addedRows);
+  return {
+    combined,
+    addedRows
+  };
+}
 export const transformColumns = (cols, convertColumns, t) => {
   // @ts-ignore
   return cols.map(column => {
@@ -1196,4 +1336,54 @@ export function isBottomMostInRanges(rowIndex, colIndex, regions) {
 }
 export const mergedSets = arr => {
   return new Set(arr.flatMap(set => Array.from(set)));
+};
+export const sortedSetASC = setValue => {
+  const sorted = Array.from(setValue).sort((a, b) => {
+    const [a1, a2] = a.split("-").map(Number);
+    const [b1, b2] = b.split("-").map(Number);
+    return a1 - b1 || a2 - b2;
+  });
+  return new Set(sorted);
+};
+export const sortedSetDSC = setValue => {
+  const sorted = Array.from(setValue).sort((a, b) => {
+    const [a1, a2] = a.split("-").map(Number);
+    const [b1, b2] = b.split("-").map(Number);
+    return b1 - a1 || b2 - a2;
+  });
+  return new Set(sorted);
+};
+export const onAddClassSelectedCell = (selectedCells, id) => {
+  const selectors = Array.from(selectedCells).map(pos => {
+    const [row1, col1] = pos.split('-');
+    return `[data-row-index="${row1}"][data-col-index="${col1}"]`;
+  });
+
+  // const cells = document.querySelectorAll(selectors.join(','));
+
+  const table = document.querySelector(`#${id}`);
+  console.log('table', table);
+  const cells = table?.querySelectorAll(selectors.join(','));
+  if (cells) {
+    cells.forEach(cell => {
+      cell.classList.add('selected');
+    });
+  }
+};
+export const onRemoveClassSelectedCell = (selectedCells, id) => {
+  const selectors = Array.from(selectedCells).map(pos => {
+    const [row, col] = pos.split('-');
+    return `[data-row-index="${row}"][data-col-index="${col}"]`;
+  });
+  const table = document.querySelector(`#${id}`);
+  const cells = table?.querySelectorAll(selectors.join(','));
+  // const cells = table?.querySelectorAll(selectors.join(','))
+
+  // const cells = table?.querySelectorAll('.ui-rc-table-cell.selected');
+
+  if (cells) {
+    cells.forEach(cell => {
+      cell.classList.remove('selected');
+    });
+  }
 };

package/es/grid-component/number/index.d.ts

@@ -6,5 +6,5 @@ type Props = {
     value: number | string | undefined;
     onChange?: (values: any[]) => void;
 };
-declare const Number: (props: Props) => React.JSX.Element;
-export default Number;
+declare const NumberInput: (props: Props) => React.JSX.Element;
+export default NumberInput;

package/es/grid-component/number/index.js

@@ -2,7 +2,7 @@ import React, { Fragment } from "react";
 import { NumericFormat } from "react-numeric-component";
 import { Input } from "rc-master-ui";
 import { checkDecimalSeparator, checkThousandSeparator } from "../hooks";
-const Number = props => {
+const NumberInput = props => {
   const {
     t,
     value,
@@ -36,4 +36,4 @@ const Number = props => {
     autoFocus: true
   }));
 };
-export default Number;
+export default NumberInput;

package/es/grid-component/styles.scss

@@ -426,6 +426,9 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         &.cell-paste-border-left {
           border-inline-end: 1px dashed #949494;
         }
+        &.cell-paste-border-top {
+          border-bottom: 1px dashed #949494 !important;
+        }
 
         &.cell-border-right {
           border-inline-end: 1px solid $border-selected-color;

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

@@ -13,7 +13,7 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { addRows8, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex,
+import { addRows8, addRowsUp, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex,
 // isBottomMostInRanges,
 isBottomMostInRegion,
 // isContinuous,
@@ -21,7 +21,7 @@ isEditable,
 // isEqualSet,
 isObjEmpty, isRightMostInRegion, isTopMostInRegion,
 // mergedSets,
-newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
+newGuid, sortedSetASC, totalFixedWidth, updateArrayByKey } from "../hooks";
 import Message from "../../Message/Message";
 // import Command from "../Command";
 
@@ -849,8 +849,14 @@ const GridEdit = props => {
   };
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells, ...pastesArray]);
-    setSelectedCells(mergedSet);
+
+    // console.log('pastesArray', pastesArray)
+    // console.log('selectedCells', selectedCells)
+
+    setSelectedCells(sortedSetASC(mergedSet));
     setPasteCells(new Set());
+    const rowSelectedFirst = getFirstSelectCell(selectedCells).row;
+    const rowPasteLast = getLastSelectCell(pasteCells).row;
     const selectedArray = Array.from(selectedCells).map(key => {
       const [row, col] = key.split("-").map(Number);
       // @ts-ignore
@@ -884,7 +890,17 @@ const GridEdit = props => {
     }) => {
       table[row - minRow][col - minCol] = value;
     });
-    const newRange = addRows8(table, getRowsPasteIndex(pastesArray).length);
+    let newRange = {
+      combined: [],
+      addedRows: []
+    };
+    if (rowPasteLast > rowSelectedFirst) {
+      // kéo xuóng
+      newRange = addRows8(table, getRowsPasteIndex(pastesArray).length);
+    } else {
+      // kéo lên
+      newRange = addRowsUp(table, getRowsPasteIndex(pastesArray).length);
+    }
     const record = flattenData(childrenColumnName, dataSource)[getFirstSelectCell(pastesArray).row];
     if (!record?.parentId) {
       // Cập nhật data mới
@@ -1049,11 +1065,14 @@ const GridEdit = props => {
         // kéo lên trên
 
         const rowSelectedStart = getFirstSelectCell(selectedCells).row;
-        const newPasteCells = new Set();
-        for (let r = Math.min(rowSelectedStart, row); r <= Math.max(rowSelectedStart, row) - 1; r++) {
-          for (let c = Math.min(colStart, col); c <= Math.max(colStart, colEnd); c++) {
-            newPasteCells.add(`${r}-${c}`);
+        if (row < rowSelectedStart) {
+          const newPasteCells = new Set();
+          for (let r = Math.min(rowSelectedStart, row); r <= Math.max(rowSelectedStart, row) - 1; r++) {
+            for (let c = Math.min(colStart, col); c <= Math.max(colStart, colEnd); c++) {
+              newPasteCells.add(`${r}-${c}`);
+            }
           }
+          setPasteCells(newPasteCells);
         }
       }
       if (col > colEnd) {
@@ -1701,7 +1720,9 @@ const GridEdit = props => {
     const isTopSelected = selectedCells.has(topCellKey);
     const isLeftSelected = selectedCells.has(leftCellKey);
     const isRightSelected = selectedCells.has(rightCellKey);
+    const topPasteCellKey = `${rowIndex + 1}-${colIndex}`;
     const isPasteSelected = pasteCells.has(cellKey);
+    const isPasteTopSelected = pasteCells.has(topPasteCellKey);
     const isPasteLeftSelected = pasteCells.has(leftCellKey);
     const isPasteRightSelected = pasteCells.has(rightCellKey);
     const cellClass = isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable';
@@ -1710,15 +1731,20 @@ const GridEdit = props => {
     const cellEnd = getLastSelectCell(selectedCells);
     const cellPasteStart = getFirstSelectCell(pasteCells);
     const cellPasteSEnd = getLastSelectCell(pasteCells);
-    const isPasteBottom = pasteCells.size && cellPasteSEnd && rowIndex === Math.max(cellPasteStart.row, cellPasteSEnd.row);
+    const isPasteBottom = cellPasteSEnd.row > cellStart.row && pasteCells.size && cellPasteSEnd && rowIndex === Math.max(cellPasteStart.row, cellPasteSEnd.row);
+
+    // const rowSelectedFirst = getFirstSelectCell(selectedCells).row
+    // const rowPasteLast = getLastSelectCell(pasteCells).row
+
     if (!isSelected && !isPasteSelected) {
       // const isTop = prevRecordEditing && !isEditing(prevRecordEditing) && rowIndex === Math.min(cellStart.row - 1, cellEnd?.row);
       const isTop = prevRecordEditing && !isEditing(prevRecordEditing) && isTopMostInRegion(rowIndex + 1, colIndex, selectedCells);
       const isLeft = colIndex + 1 === Math.min(cellStart.col, cellEnd?.col);
       const isRight = colIndex - 1 === Math.max(cellStart.col, cellEnd?.col);
+      const isPasteTop = cellPasteSEnd.row < cellStart.row && isTopMostInRegion(rowIndex + 1, colIndex, pasteCells);
       const isPasteLeft = colIndex + 1 === Math.min(cellPasteStart.col, cellPasteSEnd?.col);
       const isPasteRight = colIndex - 1 === Math.max(cellPasteStart.col, cellPasteSEnd?.col);
-      return isTopSelected || isLeftSelected || isRightSelected ? `${cellClass} ${isTop ? `cell-border-top` : ''} ${isLeft ? `cell-border-left` : ''} ${isPasteBottom ? `cell-paste-border-bottom` : ''} ${isRight ? `next-cell-border-left` : ''}` : isPasteLeftSelected || isPasteRightSelected ? `${cellClass} ${isPasteLeft ? `cell-paste-border-left` : ''} ${isPasteRight ? `next-cell-paste-border-left` : ''}` : cellClass;
+      return isTopSelected || isLeftSelected || isRightSelected ? `${cellClass} ${isTop ? `cell-border-top` : ''} ${isLeft ? `cell-border-left` : ''} ${isPasteBottom ? `cell-paste-border-bottom` : ''} ${isRight ? `next-cell-border-left` : ''}` : isPasteLeftSelected || isPasteRightSelected || isPasteTopSelected ? `${cellClass} ${isPasteLeft ? `cell-paste-border-left` : ''} ${isPasteRight ? `next-cell-paste-border-left` : ''} ${isPasteTop ? `cell-paste-border-top` : ''}` : cellClass;
     }
     const isBottom = isBottomMostInRegion(rowIndex, colIndex, selectedCells);
     // const isBottom = isBottomMostInRanges(rowIndex, colIndex, [selectedCells, ...ctrlCells])
@@ -1990,7 +2016,7 @@ const GridEdit = props => {
           ,
           onMouseDown: e => {
             // e.stopPropagation()
-            // e.preventDefault()
+            e.preventDefault();
             setIsPasteDragging(true);
           },
           onDoubleClick: handlePointDoubleClick

package/lib/grid-component/EditableCell.js

@@ -574,6 +574,7 @@ const EditableCell = props => {
           },
           treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox',
           filterTreeNode: filterTreeNode,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
           onSelect: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();

package/lib/grid-component/hooks/columns/index.js

@@ -87,7 +87,8 @@ const getValueCell = (column, value, format) => {
 
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
-      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(value.toFixed(dec)).toString() : value.toString() : '0';
+      const tmpval = typeof value === 'string' ? Number(value) : value;
+      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? tmpval.toFixed(dec) : tmpval.toString() : '0';
       const numericFormatProps = {
         thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
         decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),

package/lib/grid-component/hooks/utils.d.ts

@@ -62,6 +62,13 @@ export declare function addRows8(arr: any, n: number): {
     combined: any[];
     addedRows: any[];
 };
+export declare function addRowsUp(array: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
 export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordType>, convertColumns: any[], t?: any) => ColumnsTable<RecordType>;
 export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
 export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;
@@ -93,3 +100,7 @@ export declare function isRightMostInRegion(rowIndex: number, colIndex: number,
 export declare function isEqualSet(setA: any, setB: any): boolean;
 export declare function isBottomMostInRanges(rowIndex: number, colIndex: number, regions: any[]): boolean;
 export declare const mergedSets: (arr: any[]) => Set<unknown>;
+export declare const sortedSetASC: (setValue: any) => Set<unknown>;
+export declare const sortedSetDSC: (setValue: any) => Set<unknown>;
+export declare const onAddClassSelectedCell: (selectedCells: any, id?: string) => void;
+export declare const onRemoveClassSelectedCell: (selectedCells: any, id?: string) => void;

package/lib/grid-component/hooks/utils.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.addRowIdArray = void 0;
 exports.addRows8 = addRows8;
+exports.addRowsUp = addRowsUp;
 exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = exports.checkChild = exports.buildConnectedRegions = void 0;
 exports.compareDate = compareDate;
 exports.compareDates = compareDates;
@@ -23,7 +24,7 @@ exports.isEmpty = exports.isEditable = exports.isDisable = void 0;
 exports.isEqualSet = isEqualSet;
 exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = void 0;
 exports.isRightMostInRegion = isRightMostInRegion;
-exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.removeFieldRecursive = exports.removeColumns = exports.parseCells = exports.parseBooleanToValue = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = void 0;
+exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sortedSetDSC = exports.sortedSetASC = exports.removeFieldRecursive = exports.removeColumns = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveClassSelectedCell = exports.onAddClassSelectedCell = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment/moment"));
 var _uuid = require("uuid");
@@ -690,6 +691,146 @@ function addRows8(arr, n) {
     addedRows
   };
 }
+function addRowsUp(array, n) {
+  const arr = array.reverse();
+  if (!Array.isArray(arr) || arr.length === 0) return {
+    combined: arr,
+    addedRows: []
+  };
+  const m = arr.length;
+  const numCols = arr[0].length;
+  const addedRows = [];
+
+  // Hàm kiểm tra kiểu date hợp lệ
+  const isValidDate = item => {
+    // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
+    // return !isNaN(Date.parse(d))
+
+    if (typeof item === 'number') {
+      // return 'number'
+      return false;
+    }
+    if (typeof item === 'string') {
+      // Kiểm tra nếu là chuỗi ISO date hợp lệ
+      const date = new Date(item);
+      if (!isNaN(date.getTime()) && item.includes('T')) {
+        // return 'date'
+        return true;
+      }
+      // return 'string'
+      return false;
+    }
+    return !isNaN(Date.parse(item));
+  };
+
+  // Lấy giá trị mẫu của cột j từ hàng đầu tiên
+  const getSample = j => arr[0][j];
+
+  // Xác định chế độ xử lý cho mỗi cột:
+  // mode = 'number-stepping' | 'date-stepping' | 'number-constant' | 'cycle'
+  const modes = [];
+  const steps = []; // bước tăng, nếu có (cho number hoặc date)
+
+  for (let j = 0; j < numCols; j++) {
+    const sample = getSample(j);
+    if (m === 1) {
+      // Nếu mảng chỉ có 1 hàng: nếu là số thì giữ nguyên; nếu là date thì tăng 1 ngày; còn lại giữ nguyên.
+      if (typeof sample === "number") {
+        modes[j] = "number-constant";
+      } else if (isValidDate(sample)) {
+        modes[j] = "date-stepping";
+        steps[j] = 24 * 3600 * 1000; // 1 ngày = 86400000 ms
+      } else {
+        modes[j] = "cycle";
+      }
+    } else if (m === 2) {
+      // Nếu mảng có 2 hàng: nếu là số thì tính bước = row2 - row1, tương tự với date
+      const first = arr[0][j],
+        second = arr[1][j];
+      if (typeof first === "number" && typeof second === "number") {
+        modes[j] = "number-stepping";
+        steps[j] = second - first;
+      } else if (isValidDate(first) && isValidDate(second)) {
+        modes[j] = "date-stepping";
+        steps[j] = Date.parse(second) - Date.parse(first);
+      } else {
+        modes[j] = "cycle";
+      }
+    } else {
+      // Nếu mảng có >2 hàng
+      const first = arr[0][j],
+        second = arr[1][j],
+        third = arr[2][j];
+      if (typeof first === "number" && typeof second === "number" && typeof third === "number") {
+        const step1 = second - first;
+        const step2 = third - second;
+        if (step1 === step2) {
+          modes[j] = "number-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else if (isValidDate(first) && isValidDate(second) && isValidDate(third)) {
+        const step1 = Date.parse(second) - Date.parse(first);
+        const step2 = Date.parse(third) - Date.parse(second);
+        if (step1 === step2) {
+          modes[j] = "date-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else {
+        modes[j] = "cycle";
+      }
+    }
+  }
+
+  // Tạo các dòng mới (thêm n dòng)
+  // Với mỗi cột, nếu chế độ là stepping thì lấy giá trị cuối của mảng ban đầu và cộng thêm (i+1)*step
+  // Nếu chế độ là cycle thì dùng arr[i mod m][j]
+  for (let i = n - 1; i >= 0; i--) {
+    const newRow = [];
+    for (let j = 0; j < numCols; j++) {
+      let newValue;
+      switch (modes[j]) {
+        case "number-constant":
+          // Mảng có 1 hàng, số giữ nguyên
+          newValue = arr[0][j];
+          break;
+        case "number-stepping":
+          {
+            // Lấy giá trị cuối của cột j trong mảng ban đầu
+
+            const lastValue = arr[m - 1][j];
+            newValue = lastValue - (i + 1) * steps[j] * -1;
+          }
+          break;
+        case "date-stepping":
+          {
+            // Lấy giá trị cuối, chuyển về date, cộng thêm (i+1)*step, chuyển lại về định dạng ISO
+
+            const lastDate = new Date(array[m - 1][j]);
+            const newTime = lastDate.getTime() - (i + 1) * steps[j] * -1;
+            newValue = (0, _moment.default)(new Date(newTime)).format();
+          }
+          break;
+        case "cycle":
+        default:
+          // Lặp lại nội dung theo vòng tròn: dùng hàng thứ (i mod m)
+
+          newValue = arr[i % m][j];
+          break;
+      }
+      newRow.push(newValue);
+    }
+    addedRows.push(newRow);
+  }
+  const combined = arr.concat(addedRows);
+  return {
+    combined,
+    addedRows
+  };
+}
 const transformColumns = (cols, convertColumns, t) => {
   // @ts-ignore
   return cols.map(column => {
@@ -1282,4 +1423,58 @@ function isBottomMostInRanges(rowIndex, colIndex, regions) {
 const mergedSets = arr => {
   return new Set(arr.flatMap(set => Array.from(set)));
 };
-exports.mergedSets = mergedSets;
+exports.mergedSets = mergedSets;
+const sortedSetASC = setValue => {
+  const sorted = Array.from(setValue).sort((a, b) => {
+    const [a1, a2] = a.split("-").map(Number);
+    const [b1, b2] = b.split("-").map(Number);
+    return a1 - b1 || a2 - b2;
+  });
+  return new Set(sorted);
+};
+exports.sortedSetASC = sortedSetASC;
+const sortedSetDSC = setValue => {
+  const sorted = Array.from(setValue).sort((a, b) => {
+    const [a1, a2] = a.split("-").map(Number);
+    const [b1, b2] = b.split("-").map(Number);
+    return b1 - a1 || b2 - a2;
+  });
+  return new Set(sorted);
+};
+exports.sortedSetDSC = sortedSetDSC;
+const onAddClassSelectedCell = (selectedCells, id) => {
+  const selectors = Array.from(selectedCells).map(pos => {
+    const [row1, col1] = pos.split('-');
+    return `[data-row-index="${row1}"][data-col-index="${col1}"]`;
+  });
+
+  // const cells = document.querySelectorAll(selectors.join(','));
+
+  const table = document.querySelector(`#${id}`);
+  console.log('table', table);
+  const cells = table?.querySelectorAll(selectors.join(','));
+  if (cells) {
+    cells.forEach(cell => {
+      cell.classList.add('selected');
+    });
+  }
+};
+exports.onAddClassSelectedCell = onAddClassSelectedCell;
+const onRemoveClassSelectedCell = (selectedCells, id) => {
+  const selectors = Array.from(selectedCells).map(pos => {
+    const [row, col] = pos.split('-');
+    return `[data-row-index="${row}"][data-col-index="${col}"]`;
+  });
+  const table = document.querySelector(`#${id}`);
+  const cells = table?.querySelectorAll(selectors.join(','));
+  // const cells = table?.querySelectorAll(selectors.join(','))
+
+  // const cells = table?.querySelectorAll('.ui-rc-table-cell.selected');
+
+  if (cells) {
+    cells.forEach(cell => {
+      cell.classList.remove('selected');
+    });
+  }
+};
+exports.onRemoveClassSelectedCell = onRemoveClassSelectedCell;

package/lib/grid-component/number/index.d.ts

@@ -6,5 +6,5 @@ type Props = {
     value: number | string | undefined;
     onChange?: (values: any[]) => void;
 };
-declare const Number: (props: Props) => React.JSX.Element;
-export default Number;
+declare const NumberInput: (props: Props) => React.JSX.Element;
+export default NumberInput;

package/lib/grid-component/number/index.js

@@ -10,7 +10,7 @@ var _rcMasterUi = require("rc-master-ui");
 var _hooks = require("../hooks");
 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; }
-const Number = props => {
+const NumberInput = props => {
   const {
     t,
     value,
@@ -44,4 +44,4 @@ const Number = props => {
     autoFocus: true
   }));
 };
-var _default = exports.default = Number;
+var _default = exports.default = NumberInput;

package/lib/grid-component/styles.scss

@@ -426,6 +426,9 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         &.cell-paste-border-left {
           border-inline-end: 1px dashed #949494;
         }
+        &.cell-paste-border-top {
+          border-bottom: 1px dashed #949494 !important;
+        }
 
         &.cell-border-right {
           border-inline-end: 1px solid $border-selected-color;

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

@@ -849,8 +849,14 @@ const GridEdit = props => {
   };
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells, ...pastesArray]);
-    setSelectedCells(mergedSet);
+
+    // console.log('pastesArray', pastesArray)
+    // console.log('selectedCells', selectedCells)
+
+    setSelectedCells((0, _hooks.sortedSetASC)(mergedSet));
     setPasteCells(new Set());
+    const rowSelectedFirst = (0, _hooks.getFirstSelectCell)(selectedCells).row;
+    const rowPasteLast = (0, _hooks.getLastSelectCell)(pasteCells).row;
     const selectedArray = Array.from(selectedCells).map(key => {
       const [row, col] = key.split("-").map(Number);
       // @ts-ignore
@@ -884,7 +890,17 @@ const GridEdit = props => {
     }) => {
       table[row - minRow][col - minCol] = value;
     });
-    const newRange = (0, _hooks.addRows8)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
+    let newRange = {
+      combined: [],
+      addedRows: []
+    };
+    if (rowPasteLast > rowSelectedFirst) {
+      // kéo xuóng
+      newRange = (0, _hooks.addRows8)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
+    } else {
+      // kéo lên
+      newRange = (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
@@ -1049,11 +1065,14 @@ const GridEdit = props => {
         // kéo lên trên
 
         const rowSelectedStart = (0, _hooks.getFirstSelectCell)(selectedCells).row;
-        const newPasteCells = new Set();
-        for (let r = Math.min(rowSelectedStart, row); r <= Math.max(rowSelectedStart, row) - 1; r++) {
-          for (let c = Math.min(colStart, col); c <= Math.max(colStart, colEnd); c++) {
-            newPasteCells.add(`${r}-${c}`);
+        if (row < rowSelectedStart) {
+          const newPasteCells = new Set();
+          for (let r = Math.min(rowSelectedStart, row); r <= Math.max(rowSelectedStart, row) - 1; r++) {
+            for (let c = Math.min(colStart, col); c <= Math.max(colStart, colEnd); c++) {
+              newPasteCells.add(`${r}-${c}`);
+            }
           }
+          setPasteCells(newPasteCells);
         }
       }
       if (col > colEnd) {
@@ -1701,7 +1720,9 @@ const GridEdit = props => {
     const isTopSelected = selectedCells.has(topCellKey);
     const isLeftSelected = selectedCells.has(leftCellKey);
     const isRightSelected = selectedCells.has(rightCellKey);
+    const topPasteCellKey = `${rowIndex + 1}-${colIndex}`;
     const isPasteSelected = pasteCells.has(cellKey);
+    const isPasteTopSelected = pasteCells.has(topPasteCellKey);
     const isPasteLeftSelected = pasteCells.has(leftCellKey);
     const isPasteRightSelected = pasteCells.has(rightCellKey);
     const cellClass = isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable';
@@ -1710,15 +1731,20 @@ const GridEdit = props => {
     const cellEnd = (0, _hooks.getLastSelectCell)(selectedCells);
     const cellPasteStart = (0, _hooks.getFirstSelectCell)(pasteCells);
     const cellPasteSEnd = (0, _hooks.getLastSelectCell)(pasteCells);
-    const isPasteBottom = pasteCells.size && cellPasteSEnd && rowIndex === Math.max(cellPasteStart.row, cellPasteSEnd.row);
+    const isPasteBottom = cellPasteSEnd.row > cellStart.row && pasteCells.size && cellPasteSEnd && rowIndex === Math.max(cellPasteStart.row, cellPasteSEnd.row);
+
+    // const rowSelectedFirst = getFirstSelectCell(selectedCells).row
+    // const rowPasteLast = getLastSelectCell(pasteCells).row
+
     if (!isSelected && !isPasteSelected) {
       // const isTop = prevRecordEditing && !isEditing(prevRecordEditing) && rowIndex === Math.min(cellStart.row - 1, cellEnd?.row);
       const isTop = prevRecordEditing && !isEditing(prevRecordEditing) && (0, _hooks.isTopMostInRegion)(rowIndex + 1, colIndex, selectedCells);
       const isLeft = colIndex + 1 === Math.min(cellStart.col, cellEnd?.col);
       const isRight = colIndex - 1 === Math.max(cellStart.col, cellEnd?.col);
+      const isPasteTop = cellPasteSEnd.row < cellStart.row && (0, _hooks.isTopMostInRegion)(rowIndex + 1, colIndex, pasteCells);
       const isPasteLeft = colIndex + 1 === Math.min(cellPasteStart.col, cellPasteSEnd?.col);
       const isPasteRight = colIndex - 1 === Math.max(cellPasteStart.col, cellPasteSEnd?.col);
-      return isTopSelected || isLeftSelected || isRightSelected ? `${cellClass} ${isTop ? `cell-border-top` : ''} ${isLeft ? `cell-border-left` : ''} ${isPasteBottom ? `cell-paste-border-bottom` : ''} ${isRight ? `next-cell-border-left` : ''}` : isPasteLeftSelected || isPasteRightSelected ? `${cellClass} ${isPasteLeft ? `cell-paste-border-left` : ''} ${isPasteRight ? `next-cell-paste-border-left` : ''}` : cellClass;
+      return isTopSelected || isLeftSelected || isRightSelected ? `${cellClass} ${isTop ? `cell-border-top` : ''} ${isLeft ? `cell-border-left` : ''} ${isPasteBottom ? `cell-paste-border-bottom` : ''} ${isRight ? `next-cell-border-left` : ''}` : isPasteLeftSelected || isPasteRightSelected || isPasteTopSelected ? `${cellClass} ${isPasteLeft ? `cell-paste-border-left` : ''} ${isPasteRight ? `next-cell-paste-border-left` : ''} ${isPasteTop ? `cell-paste-border-top` : ''}` : cellClass;
     }
     const isBottom = (0, _hooks.isBottomMostInRegion)(rowIndex, colIndex, selectedCells);
     // const isBottom = isBottomMostInRanges(rowIndex, colIndex, [selectedCells, ...ctrlCells])
@@ -1990,7 +2016,7 @@ const GridEdit = props => {
           ,
           onMouseDown: e => {
             // e.stopPropagation()
-            // e.preventDefault()
+            e.preventDefault();
             setIsPasteDragging(true);
           },
           onDoubleClick: handlePointDoubleClick

package/package.json

@@ -1,109 +1,109 @@
-{
-  "name": "es-grid-template",
-  "version": "1.3.5",
-  "description": "es-grid-template",
-  "keywords": [
-    "react",
-    "react-component",
-    "grid",
-    "table"
-  ],
-  "license": "MIT",
-  "main": "lib/index",
-  "module": "es/index",
-  "files": [
-    "lib",
-    "es",
-    "assets/*.css",
-    "assets/*.scss"
-  ],
-  "scripts": {
-    "__compile": "father build && ",
-    "compile": "father build && sass assets/index.scss assets/index.css",
-    "docs:build": "dumi build",
-    "__docs:deploy": "gh-pages -d dist",
-    "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
-    "now-build": "npm run docs:build",
-    "prepare": "dumi setup",
-    "prepublishOnly": "npm run compile",
-    "postpublish": "npm run docs:build",
-    "__postpublish": "npm run docs:build && npm run docs:deploy",
-    "start": "dumi dev",
-    "test": "vitest --watch false",
-    "coverage": "vitest run --coverage"
-  },
-  "dependencies": {
-    "@ant-design/colors": "^8.0.0",
-    "@ant-design/cssinjs": "^1.22.0",
-    "@ant-design/cssinjs-utils": "^1.1.1",
-    "@ant-design/icons": "^5.5.2",
-    "@babel/runtime": "^7.11.2",
-    "@core-rc/rc-select": "^0.0.8",
-    "@ctrl/tinycolor": "^3.6.1",
-    "@faker-js/faker": "^9.5.0",
-    "@floating-ui/react": "^0.27.5",
-    "@rc-component/color-picker": "^2.0.1",
-    "@rc-component/father-plugin": "^2.0.1",
-    "@rc-component/trigger": "^2.0.0",
-    "@rc-component/util": "^1.0.1",
-    "@types/react-resizable": "^3.0.8",
-    "@types/styled-components": "^5.1.34",
-    "@vitest/coverage-v8": "^2.0.5",
-    "antd": "^5.24.1",
-    "antd-style": "^3.7.1",
-    "becoxy-icons": "^2.0.1",
-    "classnames": "^2.3.1",
-    "dayjs": "^1.11.13",
-    "lodash": "^4.17.21",
-    "moment": "^2.30.1",
-    "postcss": "^8.4.35",
-    "rc-checkbox": "^3.5.0",
-    "rc-dropdown": "^4.2.1",
-    "rc-field-form": "^2.6.0",
-    "rc-master-ui": "^1.1.24",
-    "rc-select": "^14.16.3",
-    "rc-tooltip": "^6.3.0",
-    "rc-tree": "^5.10.1",
-    "rc-tree-select": "^5.24.5",
-    "react-hook-form": "^7.54.2",
-    "react-hot-toast": "^2.5.2",
-    "react-numeric-component": "^1.0.7",
-    "react-resizable": "^3.0.5",
-    "react-tooltip": "^5.28.1",
-    "sass": "^1.81.0",
-    "styled-components": "^6.1.15",
-    "sweetalert2": "^11.4.14",
-    "sweetalert2-react-content": "^5.0.0",
-    "throttle-debounce": "^5.0.2",
-    "vitest": "^2.0.5"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.26.4",
-    "@babel/preset-env": "^7.26.9",
-    "@rc-component/np": "^1.0.3",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.4.0",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@types/warning": "^3.0.0",
-    "cross-env": "^7.0.0",
-    "dumi": "^2.2.13",
-    "eslint": "^8.56.0",
-    "eslint-plugin-unicorn": "^55.0.0",
-    "father": "^4.0.0",
-    "gh-pages": "^3.1.0",
-    "less": "^4.1.1",
-    "np": "^7.1.0",
-    "rc-test": "^7.0.9",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^4.0.5"
-  },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
-  },
-  "umi": {
-    "configFile": "config.ts"
-  }
-}
+{
+  "name": "es-grid-template",
+  "version": "1.3.6",
+  "description": "es-grid-template",
+  "keywords": [
+    "react",
+    "react-component",
+    "grid",
+    "table"
+  ],
+  "license": "MIT",
+  "main": "lib/index",
+  "module": "es/index",
+  "files": [
+    "lib",
+    "es",
+    "assets/*.css",
+    "assets/*.scss"
+  ],
+  "scripts": {
+    "__compile": "father build && ",
+    "compile": "father build && sass assets/index.scss assets/index.css",
+    "docs:build": "dumi build",
+    "__docs:deploy": "gh-pages -d dist",
+    "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
+    "now-build": "npm run docs:build",
+    "prepare": "dumi setup",
+    "prepublishOnly": "npm run compile",
+    "postpublish": "npm run docs:build",
+    "__postpublish": "npm run docs:build && npm run docs:deploy",
+    "start": "dumi dev",
+    "test": "vitest --watch false",
+    "coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@ant-design/colors": "^8.0.0",
+    "@ant-design/cssinjs": "^1.22.0",
+    "@ant-design/cssinjs-utils": "^1.1.1",
+    "@ant-design/icons": "^5.5.2",
+    "@babel/runtime": "^7.11.2",
+    "@core-rc/rc-select": "^0.0.8",
+    "@ctrl/tinycolor": "^3.6.1",
+    "@faker-js/faker": "^9.5.0",
+    "@floating-ui/react": "^0.27.5",
+    "@rc-component/color-picker": "^2.0.1",
+    "@rc-component/father-plugin": "^2.0.1",
+    "@rc-component/trigger": "^2.0.0",
+    "@rc-component/util": "^1.0.1",
+    "@types/react-resizable": "^3.0.8",
+    "@types/styled-components": "^5.1.34",
+    "@vitest/coverage-v8": "^2.0.5",
+    "antd": "^5.24.1",
+    "antd-style": "^3.7.1",
+    "becoxy-icons": "^2.0.1",
+    "classnames": "^2.3.1",
+    "dayjs": "^1.11.13",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "postcss": "^8.4.35",
+    "rc-checkbox": "^3.5.0",
+    "rc-dropdown": "^4.2.1",
+    "rc-field-form": "^2.6.0",
+    "rc-master-ui": "^1.1.24",
+    "rc-select": "^14.16.3",
+    "rc-tooltip": "^6.3.0",
+    "rc-tree": "^5.10.1",
+    "rc-tree-select": "^5.24.5",
+    "react-hook-form": "^7.54.2",
+    "react-hot-toast": "^2.5.2",
+    "react-numeric-component": "^1.0.7",
+    "react-resizable": "^3.0.5",
+    "react-tooltip": "^5.28.1",
+    "sass": "^1.81.0",
+    "styled-components": "^6.1.15",
+    "sweetalert2": "^11.4.14",
+    "sweetalert2-react-content": "^5.0.0",
+    "throttle-debounce": "^5.0.2",
+    "vitest": "^2.0.5"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.26.4",
+    "@babel/preset-env": "^7.26.9",
+    "@rc-component/np": "^1.0.3",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/warning": "^3.0.0",
+    "cross-env": "^7.0.0",
+    "dumi": "^2.2.13",
+    "eslint": "^8.56.0",
+    "eslint-plugin-unicorn": "^55.0.0",
+    "father": "^4.0.0",
+    "gh-pages": "^3.1.0",
+    "less": "^4.1.1",
+    "np": "^7.1.0",
+    "rc-test": "^7.0.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "umi": {
+    "configFile": "config.ts"
+  }
+}