es-grid-template 1.4.0 → 1.4.1

package/es/grid-component/InternalTable.js

@@ -92,8 +92,8 @@ const InternalTable = props => {
     ...rest
   } = props;
   const rowKey = React.useMemo(() => {
-    return editAble ? 'rowId' : propRowKey ?? 'id';
-  }, [editAble, propRowKey]);
+    return propRowKey ?? 'rowId';
+  }, [propRowKey]);
   const local = lang && lang === 'en' ? en : vi;
   const buddhistLocale = {
     ...local,

package/es/grid-component/TableGrid.js

@@ -12,7 +12,7 @@ import classNames from "classnames";
 import { checkDecimalSeparator, checkThousandSeparator,
 // filterDataByColumns2,
 // filterDataByColumns3,
-filterDataByColumns4,
+filterDataByColumns4, getFormat,
 // convertFlatColumn,
 isEmpty,
 // newGuid,
@@ -413,46 +413,6 @@ const TableGrid = props => {
     // }}
     ,
 
-    summary: () => {
-      if (typeof summary === 'function') {
-        return summary(dataSource);
-      }
-      if (!summary) {
-        return undefined;
-      }
-      return /*#__PURE__*/React.createElement(Table.Summary, {
-        fixed: true
-      }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns(!!mode ? [Table.SELECTION_COLUMN, ...columns] : [...columns]).filter(col => col.hidden !== true).map((col, index) => {
-        const cellFormat = col.format ? typeof col.format === 'function' ? col.format({}) : col.format : format;
-        const thousandSeparator = cellFormat?.thousandSeparator;
-        const decimalSeparator = cellFormat?.decimalSeparator;
-
-        // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
-        const dec = cellFormat?.decimalScale;
-        const sumValue = col.type === 'number' ? sumDataByField(dataSource, col?.key) : 0;
-        const value = !isEmpty(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
-        const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
-        const numericFormatProps = {
-          thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
-          decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
-          allowNegative: cellFormat?.allowNegative ?? false,
-          prefix: cellFormat?.prefix,
-          suffix: cellFormat?.suffix,
-          decimalScale: dec,
-          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
-        };
-        return /*#__PURE__*/React.createElement(Table.Summary.Cell, {
-          key: col.key,
-          index: index,
-          align: col.align ?? 'right',
-          className: 'ui-rc-table-cell-ellipsis'
-        }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : numericFormatter(cellValue, numericFormatProps));
-      })));
-    },
-    pagination: !pagination || pagination && pagination?.onChange ? false : {
-      showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
-      ...pagination
-    },
     onFilter: val => {
       handleOnFilter(val);
       // triggerFilter?.(convertFilters(val))
@@ -507,6 +467,49 @@ const TableGrid = props => {
     },
     expandable: {
       ...expandable
+    },
+    summary: () => {
+      if (typeof summary === 'function') {
+        return summary(dataSource);
+      }
+      if (!summary) {
+        return undefined;
+      }
+      return /*#__PURE__*/React.createElement(Table.Summary, {
+        fixed: true
+      }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns(!!mode ? [Table.SELECTION_COLUMN, ...columns] : [...columns]).filter(col => col.hidden !== true).map((col, index) => {
+        // const cellFormat: IFormat | undefined = col.format ? typeof col.format === 'function' ? col.format({}) : col.format : format
+
+        const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
+        const cellFormat = getFormat(colFormat, format);
+        const thousandSeparator = cellFormat?.thousandSeparator;
+        const decimalSeparator = cellFormat?.decimalSeparator;
+
+        // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
+        const dec = cellFormat?.decimalScale;
+        const sumValue = col.type === 'number' ? sumDataByField(dataSource, col?.key) : 0;
+        const value = !isEmpty(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
+        const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
+        const numericFormatProps = {
+          thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+          decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+          allowNegative: cellFormat?.allowNegative ?? false,
+          prefix: cellFormat?.prefix,
+          suffix: cellFormat?.suffix,
+          decimalScale: dec,
+          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+        };
+        return /*#__PURE__*/React.createElement(Table.Summary.Cell, {
+          key: col.key,
+          index: index,
+          align: col.align ?? 'right',
+          className: 'ui-rc-table-cell-ellipsis'
+        }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : numericFormatter(cellValue, numericFormatProps));
+      })));
+    },
+    pagination: !pagination || pagination && pagination?.onChange ? false : {
+      showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
+      ...pagination
     }
   })), /*#__PURE__*/React.createElement("div", null), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/React.createElement(Pagination
   // style={{padding: '0.75rem 1rem'}}

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

@@ -4,7 +4,7 @@ import { Fragment, useCallback } from 'react';
 // import Command from "../Command";
 import { Button, Space } from "antd";
 import { Select } from "rc-master-ui";
-import { findItemPath, getTypeFilter } from "./utils";
+import { findItemPath, getFormat, getTypeFilter } from "./utils";
 import { booleanOperator, numberOperator, stringOperator, translateOption } from "./constant";
 import { flatColumns2, renderContent, renderFilter } from "./columns";
 import { SearchOutlined } from "@ant-design/icons";
@@ -282,7 +282,8 @@ const useColumns = config => {
             };
           },
           render: (value, record, rowIndex) => {
-            const cellFormat = col.format ? typeof col.format === 'function' ? col.format(record) : col.format : format;
+            const colFormat = typeof col.format === 'function' ? col.format(record) : col.format;
+            const cellFormat = getFormat(colFormat, format);
             if (groupSetting && groupSetting.hiddenColumnGroup === false) {
               if (record.children) {
                 return renderContent(col, value, record, rowIndex, cellFormat);

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

@@ -21,6 +21,21 @@ export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): string[];
 export declare const updateColumns: (columns: any[], includes: string[]) => any[];
 export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string[]) => any[];
+export declare const getFormat: (colFormat?: IFormat, format?: IFormat) => {
+    thousandSeparator: string;
+    decimalSeparator: string;
+    decimalScale: number;
+    allowNegative: boolean;
+    prefix: string;
+    suffix: string;
+    fixedDecimalScale: boolean;
+    dateFormat: string;
+    datetimeFormat: string;
+    timeFormat: string;
+    weekFormat: string;
+    monthFormat: string;
+    yearFormat: string;
+};
 export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
 export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
 export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
@@ -109,7 +124,7 @@ export declare function getCellsByPosition(cellSet: any, position?: string): any
 export declare const addBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
 export declare const removeBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
 export declare const removeBorderClass2: (className: string, id?: string) => void;
-export declare const onAddBgSelectedCell: (selectedCells: any, id?: string) => void;
+export declare const onAddBgSelectedCell: (selectedCells: any, id?: string, isFocusCellIndex?: boolean) => void;
 export declare const onAddBorderSelectedCell: (selectedCells: any, id?: string) => void;
 export declare const onRemoveBgSelectedCell: (selectedCells: any, id?: string, rowsSelected?: any) => void;
 export declare const onRemoveBorderSelectedCell: (selectedCells: any, id?: string) => void;

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

@@ -171,6 +171,25 @@ export const updateColumnsByGroup = (columns, columnsGroup) => {
     return newColumn;
   });
 };
+export const getFormat = (colFormat, format) => {
+  return {
+    thousandSeparator: colFormat?.thousandSeparator ?? format?.thousandSeparator,
+    decimalSeparator: colFormat?.decimalSeparator ?? format?.decimalSeparator,
+    decimalScale: colFormat?.decimalScale ?? format?.decimalScale,
+    allowNegative: colFormat?.allowNegative ?? format?.allowNegative,
+    // check nhập số âm
+    prefix: colFormat?.prefix ?? format?.prefix,
+    suffix: colFormat?.suffix ?? format?.suffix,
+    fixedDecimalScale: colFormat?.fixedDecimalScale ?? format?.fixedDecimalScale,
+    // mặc định thêm số 0 sau số thập phân
+    dateFormat: colFormat?.dateFormat ?? format?.dateFormat,
+    datetimeFormat: colFormat?.datetimeFormat ?? format?.datetimeFormat,
+    timeFormat: colFormat?.timeFormat ?? format?.timeFormat,
+    weekFormat: colFormat?.weekFormat ?? format?.weekFormat,
+    monthFormat: colFormat?.monthFormat ?? format?.monthFormat,
+    yearFormat: colFormat?.yearFormat ?? format?.yearFormat
+  };
+};
 export const getDatepickerFormat = (type, format) => {
   const typeFormat = type ? type.toLowerCase() : '';
   switch (typeFormat) {
@@ -1544,7 +1563,7 @@ export const removeBorderClass2 = (className, id) => {
     });
   }
 };
-export const onAddBgSelectedCell = (selectedCells, id) => {
+export const onAddBgSelectedCell = (selectedCells, id, isFocusCellIndex) => {
   const selectors = Array.from(selectedCells).map(pos => {
     const [row1, col1] = pos.split('-');
     return `[data-row-index="${row1}"][data-col-index="${col1}"]`;
@@ -1559,7 +1578,7 @@ export const onAddBgSelectedCell = (selectedCells, id) => {
   const rowsArray = [...new Set([...selectedCells].map(item => item.split("-")[0]))];
   const rowsSelectors = rowsArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
   const cellsIndex = table && rowsSelectors.length > 0 ? table?.querySelectorAll(rowsSelectors) : null;
-  if (cellsIndex) {
+  if (cellsIndex && isFocusCellIndex !== false) {
     cellsIndex.forEach(cell => {
       cell.classList.add('focus');
     });

package/es/grid-component/styles.scss

@@ -426,7 +426,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       &.rc-ui-cell-index {
         &.focus {
           background-color: $cell-index-focus-bg;
-          font-weight: 500;
+          //font-weight: 500;
         }
         &.selected {
           background-color: $cell-index-selected-bg !important;
@@ -681,18 +681,18 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     //  background-color: #f0f0f0;
     //}
 
-    .ui-rc_cell-content--index {
-      &.focus {
-        background-color: $cell-index-focus-bg;
-        //color: #fff;
-        //font-weight: 500;
-      }
-      &.selected {
-        background-color: $cell-index-selected-bg;
-        color: #fff;
-        //font-weight: 500;
-      }
-    }
+    //.ui-rc_cell-content--index {
+    //  &.focus {
+    //    background-color: $cell-index-focus-bg;
+    //    //color: #fff;
+    //    //font-weight: 500;
+    //  }
+    //  &.selected {
+    //    background-color: $cell-index-selected-bg;
+    //    color: #fff;
+    //    //font-weight: 500;
+    //  }
+    //}
 
     .#{$prefix}-table-tbody {
 

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 { addClassBorderPasteCell, addClassCellIndexSelected, addRows8, addRowsUp, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, hideDraggingPoint, isEditable, isEqualSet, isObjEmpty, newGuid, onAddBorderSelectedCell, onAddBgSelectedCell, onRemoveBorderSelectedCell, onRemoveBgSelectedCell, removeClassBorderPasteCell, removeClassCellIndexSelected, showDraggingPoint, sortedSetASC, totalFixedWidth, updateArrayByKey } from "../hooks";
+import { addClassBorderPasteCell, addClassCellIndexSelected, addRows8, addRowsUp, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, hideDraggingPoint, isEditable, isEqualSet, isObjEmpty, newGuid, onAddBorderSelectedCell, onAddBgSelectedCell, onRemoveBorderSelectedCell, onRemoveBgSelectedCell, removeClassBorderPasteCell, removeClassCellIndexSelected, showDraggingPoint, sortedSetASC, totalFixedWidth, updateArrayByKey, getFormat } from "../hooks";
 import Message from "../../Message/Message";
 import { Toolbar, ConfigProvider, InputNumber } from "rc-master-ui";
 import classnames from "classnames";
@@ -149,6 +149,9 @@ const GridEdit = props => {
   // quét vùng được paste - tiếp tục hiển thị con trỏ crosshair
   // const isPasteDragging = useRef(false);
 
+  const visibleCols = React.useMemo(() => {
+    return flatColumns2(columns.filter(it => it.visible !== false));
+  }, [columns]);
   const id = React.useMemo(() => {
     return tableId ?? faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -507,7 +510,7 @@ const GridEdit = props => {
       const newData = [...dataSource];
 
       // colIndex => field
-      const colIndexToField = flatColumns2(columns).map(col => col.field);
+      const colIndexToField = flatColumns2(visibleCols).map(col => col.field);
 
       // Duyệt qua mỗi ô cần xóa
       for (const cell of selectedCells.current) {
@@ -859,7 +862,9 @@ const GridEdit = props => {
   };
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
-    const tmpCols = flatColumns2(columns.filter(it => it.visible !== false));
+    const tmpCols = {
+      ...visibleCols
+    };
     const rowSelectedFirst = getFirstSelectCell(selectedCells.current).row;
     const rowPasteLast = getLastSelectCell(pasteCells.current).row;
     const selectedArray = Array.from(selectedCells.current).map(key => {
@@ -1250,7 +1255,7 @@ const GridEdit = props => {
       col
     };
     const newSelectedCells = new Set();
-    const tCols = editAbleColumns(columns);
+    const tCols = editAbleColumns(visibleCols);
     for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
       for (let c = Math.min(tCols.length, col) + 1; c <= Math.max(tCols.length, col); c++) {
         newSelectedCells.add(`${r}-${c}`);
@@ -1270,7 +1275,7 @@ const GridEdit = props => {
     hideDraggingPoint(selectedCells.current, id);
     selectedCells.current = newSelectedCells;
     rowsSelected.current = new Set([`${row}-${col}`]);
-    onAddBgSelectedCell(newSelectedCells, id);
+    onAddBgSelectedCell(newSelectedCells, id, false);
     onAddBorderSelectedCell(newSelectedCells, id);
     addClassCellIndexSelected(new Set([`${row}-${col}`]), id);
   };
@@ -1412,13 +1417,13 @@ const GridEdit = props => {
         }
         rowValues.forEach((cellValue, colIndex) => {
           const targetCol = startCol + colIndex;
-          if (targetCol >= columns.length) {
+          if (targetCol >= visibleCols.length) {
             // Không vượt quá số cột
             return;
           }
-          if (columns[targetCol].editEnable) {
+          if (visibleCols[targetCol].editEnable) {
             // @ts-ignore
-            const columnKey = columns[targetCol].field;
+            const columnKey = visibleCols[targetCol].field;
 
             // @ts-ignore
             newData[targetRow] = {
@@ -1461,13 +1466,13 @@ const GridEdit = props => {
         }
         rowValues.forEach((cellValue, colIndex) => {
           const targetCol = startCol + colIndex;
-          if (targetCol >= columns.length) {
+          if (targetCol >= visibleCols.length) {
             // Không vượt quá số cột
             return;
           }
-          if (columns[targetCol].editEnable) {
+          if (visibleCols[targetCol].editEnable) {
             // @ts-ignore
-            const columnKey = columns[targetCol].field;
+            const columnKey = visibleCols[targetCol].field;
 
             // @ts-ignore
             childData[targetRow] = {
@@ -1783,7 +1788,7 @@ const GridEdit = props => {
   // }, []);
 
   const scrollToCell = (rowIndex, colIndex, cell, scrollType) => {
-    const fixedWidth = totalFixedWidth(columns, 'left', selectionSettings);
+    const fixedWidth = totalFixedWidth(visibleCols, 'left', selectionSettings);
     if (scrollType === 'horizontal') {
       if (tableRef.current) {
         tableRef.current.scrollTo({
@@ -1904,7 +1909,7 @@ const GridEdit = props => {
                 setEditingKey('');
               }
             },
-            tabIndex: (rowIndex ?? 0) * columns.length + colIndex
+            tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex
           };
         },
         render: (value, record) => {
@@ -1971,14 +1976,18 @@ const GridEdit = props => {
                 }
               }
               if (event.key === 'Tab') {
-                if (colIndex + 1 !== columns.length) {
-                  handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
-                } else {
-                  event.stopPropagation();
-                  event.preventDefault();
+                if (editingKey) {} else {
+                  if (colIndex + 1 !== visibleCols.length) {
+                    // console.log('bbbbb')
+                    handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
+                  } else {
+                    // console.log('fffff')
+                    event.stopPropagation();
+                    event.preventDefault();
+                  }
                 }
               }
-              if (event.key === 'ArrowRight' && colIndex + 1 !== columns.length) {
+              if (event.key === 'ArrowRight' && colIndex + 1 !== visibleCols.length) {
                 if (editingKey !== '') {} else {
                   handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
                 }
@@ -2058,6 +2067,10 @@ const GridEdit = props => {
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
               setEditingKey('');
+            } else {
+              if (editingKey) {
+                handleCellClick(rowNumber, record, column);
+              }
             }
           },
           className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : `rc-ui-cell-editable cell-editable ${!isEditable(column, record) ? 'disable' : ''}`,
@@ -2077,7 +2090,7 @@ const GridEdit = props => {
           editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column, record),
           cellEditing,
           t,
-          tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
+          tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
           style: isPasteDragging ? {
             cursor: "crosshair"
           } : {}
@@ -2108,6 +2121,8 @@ const GridEdit = props => {
       },
       render: (value, record, rowIndex) => {
         const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
+        const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+        const cellFormat = getFormat(colFormat, format);
         return /*#__PURE__*/React.createElement("div", {
           className: classNames('ui-rc_cell-content', {
             // disable: !isEditable(column as any, record)
@@ -2129,7 +2144,7 @@ const GridEdit = props => {
           // }}
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
-        }, renderContent(column, value, record, rowIndex, column.format ? typeof column.format === 'function' ? column.format(record) : column.format : format)),
+        }, renderContent(column, value, record, rowIndex, cellFormat)),
         // selectedCells.current && selectedCells.current.size > 0 && getLastSelectCell(selectedCells.current).row === rowNumber &&
         // getLastSelectCell(selectedCells.current).col === colIndex &&
         // isEditable(column as any, record) &&

package/lib/grid-component/InternalTable.js

@@ -92,8 +92,8 @@ const InternalTable = props => {
     ...rest
   } = props;
   const rowKey = _react.default.useMemo(() => {
-    return editAble ? 'rowId' : propRowKey ?? 'id';
-  }, [editAble, propRowKey]);
+    return propRowKey ?? 'rowId';
+  }, [propRowKey]);
   const local = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
   const buddhistLocale = {
     ...local,

package/lib/grid-component/TableGrid.js

@@ -413,46 +413,6 @@ const TableGrid = props => {
     // }}
     ,
 
-    summary: () => {
-      if (typeof summary === 'function') {
-        return summary(dataSource);
-      }
-      if (!summary) {
-        return undefined;
-      }
-      return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary, {
-        fixed: true
-      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _columns.flatColumns)(!!mode ? [_rcMasterUi.Table.SELECTION_COLUMN, ...columns] : [...columns]).filter(col => col.hidden !== true).map((col, index) => {
-        const cellFormat = col.format ? typeof col.format === 'function' ? col.format({}) : col.format : format;
-        const thousandSeparator = cellFormat?.thousandSeparator;
-        const decimalSeparator = cellFormat?.decimalSeparator;
-
-        // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
-        const dec = cellFormat?.decimalScale;
-        const sumValue = col.type === 'number' ? (0, _hooks.sumDataByField)(dataSource, col?.key) : 0;
-        const value = !(0, _hooks.isEmpty)(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
-        const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
-        const numericFormatProps = {
-          thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
-          decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
-          allowNegative: cellFormat?.allowNegative ?? false,
-          prefix: cellFormat?.prefix,
-          suffix: cellFormat?.suffix,
-          decimalScale: dec,
-          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
-        };
-        return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Cell, {
-          key: col.key,
-          index: index,
-          align: col.align ?? 'right',
-          className: 'ui-rc-table-cell-ellipsis'
-        }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps));
-      })));
-    },
-    pagination: !pagination || pagination && pagination?.onChange ? false : {
-      showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
-      ...pagination
-    },
     onFilter: val => {
       handleOnFilter(val);
       // triggerFilter?.(convertFilters(val))
@@ -507,6 +467,49 @@ const TableGrid = props => {
     },
     expandable: {
       ...expandable
+    },
+    summary: () => {
+      if (typeof summary === 'function') {
+        return summary(dataSource);
+      }
+      if (!summary) {
+        return undefined;
+      }
+      return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary, {
+        fixed: true
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _columns.flatColumns)(!!mode ? [_rcMasterUi.Table.SELECTION_COLUMN, ...columns] : [...columns]).filter(col => col.hidden !== true).map((col, index) => {
+        // const cellFormat: IFormat | undefined = col.format ? typeof col.format === 'function' ? col.format({}) : col.format : format
+
+        const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
+        const cellFormat = (0, _hooks.getFormat)(colFormat, format);
+        const thousandSeparator = cellFormat?.thousandSeparator;
+        const decimalSeparator = cellFormat?.decimalSeparator;
+
+        // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
+        const dec = cellFormat?.decimalScale;
+        const sumValue = col.type === 'number' ? (0, _hooks.sumDataByField)(dataSource, col?.key) : 0;
+        const value = !(0, _hooks.isEmpty)(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
+        const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
+        const numericFormatProps = {
+          thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+          decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+          allowNegative: cellFormat?.allowNegative ?? false,
+          prefix: cellFormat?.prefix,
+          suffix: cellFormat?.suffix,
+          decimalScale: dec,
+          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+        };
+        return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Cell, {
+          key: col.key,
+          index: index,
+          align: col.align ?? 'right',
+          className: 'ui-rc-table-cell-ellipsis'
+        }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps));
+      })));
+    },
+    pagination: !pagination || pagination && pagination?.onChange ? false : {
+      showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
+      ...pagination
     }
   })), /*#__PURE__*/_react.default.createElement("div", null), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/_react.default.createElement(_pagination.default
   // style={{padding: '0.75rem 1rem'}}

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

@@ -293,7 +293,8 @@ const useColumns = config => {
             };
           },
           render: (value, record, rowIndex) => {
-            const cellFormat = col.format ? typeof col.format === 'function' ? col.format(record) : col.format : format;
+            const colFormat = typeof col.format === 'function' ? col.format(record) : col.format;
+            const cellFormat = (0, _utils.getFormat)(colFormat, format);
             if (groupSetting && groupSetting.hiddenColumnGroup === false) {
               if (record.children) {
                 return (0, _columns.renderContent)(col, value, record, rowIndex, cellFormat);

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

@@ -21,6 +21,21 @@ export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): string[];
 export declare const updateColumns: (columns: any[], includes: string[]) => any[];
 export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string[]) => any[];
+export declare const getFormat: (colFormat?: IFormat, format?: IFormat) => {
+    thousandSeparator: string;
+    decimalSeparator: string;
+    decimalScale: number;
+    allowNegative: boolean;
+    prefix: string;
+    suffix: string;
+    fixedDecimalScale: boolean;
+    dateFormat: string;
+    datetimeFormat: string;
+    timeFormat: string;
+    weekFormat: string;
+    monthFormat: string;
+    yearFormat: string;
+};
 export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
 export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
 export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
@@ -109,7 +124,7 @@ export declare function getCellsByPosition(cellSet: any, position?: string): any
 export declare const addBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
 export declare const removeBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
 export declare const removeBorderClass2: (className: string, id?: string) => void;
-export declare const onAddBgSelectedCell: (selectedCells: any, id?: string) => void;
+export declare const onAddBgSelectedCell: (selectedCells: any, id?: string, isFocusCellIndex?: boolean) => void;
 export declare const onAddBorderSelectedCell: (selectedCells: any, id?: string) => void;
 export declare const onRemoveBgSelectedCell: (selectedCells: any, id?: string, rowsSelected?: any) => void;
 export declare const onRemoveBorderSelectedCell: (selectedCells: any, id?: string) => void;

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

@@ -16,7 +16,7 @@ exports.findAllChildrenKeys = findAllChildrenKeys;
 exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemPath = exports.findItemByKey = void 0;
 exports.getBottomRowCells = getBottomRowCells;
 exports.getCellsByPosition = getCellsByPosition;
-exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = void 0;
+exports.getFormat = exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
 exports.hideDraggingPoint = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
 exports.invalidDate = invalidDate;
@@ -216,6 +216,26 @@ const updateColumnsByGroup = (columns, columnsGroup) => {
   });
 };
 exports.updateColumnsByGroup = updateColumnsByGroup;
+const getFormat = (colFormat, format) => {
+  return {
+    thousandSeparator: colFormat?.thousandSeparator ?? format?.thousandSeparator,
+    decimalSeparator: colFormat?.decimalSeparator ?? format?.decimalSeparator,
+    decimalScale: colFormat?.decimalScale ?? format?.decimalScale,
+    allowNegative: colFormat?.allowNegative ?? format?.allowNegative,
+    // check nhập số âm
+    prefix: colFormat?.prefix ?? format?.prefix,
+    suffix: colFormat?.suffix ?? format?.suffix,
+    fixedDecimalScale: colFormat?.fixedDecimalScale ?? format?.fixedDecimalScale,
+    // mặc định thêm số 0 sau số thập phân
+    dateFormat: colFormat?.dateFormat ?? format?.dateFormat,
+    datetimeFormat: colFormat?.datetimeFormat ?? format?.datetimeFormat,
+    timeFormat: colFormat?.timeFormat ?? format?.timeFormat,
+    weekFormat: colFormat?.weekFormat ?? format?.weekFormat,
+    monthFormat: colFormat?.monthFormat ?? format?.monthFormat,
+    yearFormat: colFormat?.yearFormat ?? format?.yearFormat
+  };
+};
+exports.getFormat = getFormat;
 const getDatepickerFormat = (type, format) => {
   const typeFormat = type ? type.toLowerCase() : '';
   switch (typeFormat) {
@@ -1642,7 +1662,7 @@ const removeBorderClass2 = (className, id) => {
   }
 };
 exports.removeBorderClass2 = removeBorderClass2;
-const onAddBgSelectedCell = (selectedCells, id) => {
+const onAddBgSelectedCell = (selectedCells, id, isFocusCellIndex) => {
   const selectors = Array.from(selectedCells).map(pos => {
     const [row1, col1] = pos.split('-');
     return `[data-row-index="${row1}"][data-col-index="${col1}"]`;
@@ -1657,7 +1677,7 @@ const onAddBgSelectedCell = (selectedCells, id) => {
   const rowsArray = [...new Set([...selectedCells].map(item => item.split("-")[0]))];
   const rowsSelectors = rowsArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
   const cellsIndex = table && rowsSelectors.length > 0 ? table?.querySelectorAll(rowsSelectors) : null;
-  if (cellsIndex) {
+  if (cellsIndex && isFocusCellIndex !== false) {
     cellsIndex.forEach(cell => {
       cell.classList.add('focus');
     });

package/lib/grid-component/styles.scss

@@ -426,7 +426,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       &.rc-ui-cell-index {
         &.focus {
           background-color: $cell-index-focus-bg;
-          font-weight: 500;
+          //font-weight: 500;
         }
         &.selected {
           background-color: $cell-index-selected-bg !important;
@@ -681,18 +681,18 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     //  background-color: #f0f0f0;
     //}
 
-    .ui-rc_cell-content--index {
-      &.focus {
-        background-color: $cell-index-focus-bg;
-        //color: #fff;
-        //font-weight: 500;
-      }
-      &.selected {
-        background-color: $cell-index-selected-bg;
-        color: #fff;
-        //font-weight: 500;
-      }
-    }
+    //.ui-rc_cell-content--index {
+    //  &.focus {
+    //    background-color: $cell-index-focus-bg;
+    //    //color: #fff;
+    //    //font-weight: 500;
+    //  }
+    //  &.selected {
+    //    background-color: $cell-index-selected-bg;
+    //    color: #fff;
+    //    //font-weight: 500;
+    //  }
+    //}
 
     .#{$prefix}-table-tbody {
 

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

@@ -157,6 +157,9 @@ const GridEdit = props => {
   // quét vùng được paste - tiếp tục hiển thị con trỏ crosshair
   // const isPasteDragging = useRef(false);
 
+  const visibleCols = _react.default.useMemo(() => {
+    return (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false));
+  }, [columns]);
   const id = _react.default.useMemo(() => {
     return tableId ?? _faker.faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -515,7 +518,7 @@ const GridEdit = props => {
       const newData = [...dataSource];
 
       // colIndex => field
-      const colIndexToField = (0, _columns.flatColumns2)(columns).map(col => col.field);
+      const colIndexToField = (0, _columns.flatColumns2)(visibleCols).map(col => col.field);
 
       // Duyệt qua mỗi ô cần xóa
       for (const cell of selectedCells.current) {
@@ -867,7 +870,9 @@ const GridEdit = props => {
   };
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
-    const tmpCols = (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false));
+    const tmpCols = {
+      ...visibleCols
+    };
     const rowSelectedFirst = (0, _hooks.getFirstSelectCell)(selectedCells.current).row;
     const rowPasteLast = (0, _hooks.getLastSelectCell)(pasteCells.current).row;
     const selectedArray = Array.from(selectedCells.current).map(key => {
@@ -1258,7 +1263,7 @@ const GridEdit = props => {
       col
     };
     const newSelectedCells = new Set();
-    const tCols = (0, _hooks.editAbleColumns)(columns);
+    const tCols = (0, _hooks.editAbleColumns)(visibleCols);
     for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
       for (let c = Math.min(tCols.length, col) + 1; c <= Math.max(tCols.length, col); c++) {
         newSelectedCells.add(`${r}-${c}`);
@@ -1278,7 +1283,7 @@ const GridEdit = props => {
     (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
     selectedCells.current = newSelectedCells;
     rowsSelected.current = new Set([`${row}-${col}`]);
-    (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
+    (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id, false);
     (0, _hooks.onAddBorderSelectedCell)(newSelectedCells, id);
     (0, _hooks.addClassCellIndexSelected)(new Set([`${row}-${col}`]), id);
   };
@@ -1420,13 +1425,13 @@ const GridEdit = props => {
         }
         rowValues.forEach((cellValue, colIndex) => {
           const targetCol = startCol + colIndex;
-          if (targetCol >= columns.length) {
+          if (targetCol >= visibleCols.length) {
             // Không vượt quá số cột
             return;
           }
-          if (columns[targetCol].editEnable) {
+          if (visibleCols[targetCol].editEnable) {
             // @ts-ignore
-            const columnKey = columns[targetCol].field;
+            const columnKey = visibleCols[targetCol].field;
 
             // @ts-ignore
             newData[targetRow] = {
@@ -1469,13 +1474,13 @@ const GridEdit = props => {
         }
         rowValues.forEach((cellValue, colIndex) => {
           const targetCol = startCol + colIndex;
-          if (targetCol >= columns.length) {
+          if (targetCol >= visibleCols.length) {
             // Không vượt quá số cột
             return;
           }
-          if (columns[targetCol].editEnable) {
+          if (visibleCols[targetCol].editEnable) {
             // @ts-ignore
-            const columnKey = columns[targetCol].field;
+            const columnKey = visibleCols[targetCol].field;
 
             // @ts-ignore
             childData[targetRow] = {
@@ -1791,7 +1796,7 @@ const GridEdit = props => {
   // }, []);
 
   const scrollToCell = (rowIndex, colIndex, cell, scrollType) => {
-    const fixedWidth = (0, _hooks.totalFixedWidth)(columns, 'left', selectionSettings);
+    const fixedWidth = (0, _hooks.totalFixedWidth)(visibleCols, 'left', selectionSettings);
     if (scrollType === 'horizontal') {
       if (tableRef.current) {
         tableRef.current.scrollTo({
@@ -1912,7 +1917,7 @@ const GridEdit = props => {
                 setEditingKey('');
               }
             },
-            tabIndex: (rowIndex ?? 0) * columns.length + colIndex
+            tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex
           };
         },
         render: (value, record) => {
@@ -1979,14 +1984,18 @@ const GridEdit = props => {
                 }
               }
               if (event.key === 'Tab') {
-                if (colIndex + 1 !== columns.length) {
-                  handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
-                } else {
-                  event.stopPropagation();
-                  event.preventDefault();
+                if (editingKey) {} else {
+                  if (colIndex + 1 !== visibleCols.length) {
+                    // console.log('bbbbb')
+                    handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
+                  } else {
+                    // console.log('fffff')
+                    event.stopPropagation();
+                    event.preventDefault();
+                  }
                 }
               }
-              if (event.key === 'ArrowRight' && colIndex + 1 !== columns.length) {
+              if (event.key === 'ArrowRight' && colIndex + 1 !== visibleCols.length) {
                 if (editingKey !== '') {} else {
                   handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
                 }
@@ -2066,6 +2075,10 @@ const GridEdit = props => {
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
               setEditingKey('');
+            } else {
+              if (editingKey) {
+                handleCellClick(rowNumber, record, column);
+              }
             }
           },
           className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : `rc-ui-cell-editable cell-editable ${!(0, _hooks.isEditable)(column, record) ? 'disable' : ''}`,
@@ -2085,7 +2098,7 @@ const GridEdit = props => {
           editing: isEditing(record) && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record),
           cellEditing,
           t,
-          tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
+          tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
           style: isPasteDragging ? {
             cursor: "crosshair"
           } : {}
@@ -2116,6 +2129,8 @@ const GridEdit = props => {
       },
       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);
         return /*#__PURE__*/_react.default.createElement("div", {
           className: (0, _classnames.default)('ui-rc_cell-content', {
             // disable: !isEditable(column as any, record)
@@ -2137,7 +2152,7 @@ const GridEdit = props => {
           // }}
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: 'ui-rc_content'
-        }, (0, _columns.renderContent)(column, value, record, rowIndex, column.format ? typeof column.format === 'function' ? column.format(record) : column.format : format)),
+        }, (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat)),
         // selectedCells.current && selectedCells.current.size > 0 && getLastSelectCell(selectedCells.current).row === rowNumber &&
         // getLastSelectCell(selectedCells.current).col === colIndex &&
         // isEditable(column as any, record) &&

package/package.json

@@ -1,109 +1,109 @@
-{
-  "name": "es-grid-template",
-  "version": "1.4.0",
-  "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.31",
-    "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.4.1",
+  "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.31",
+    "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"
+  }
+}