es-grid-template 1.5.13 → 1.5.15

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

@@ -19,132 +19,134 @@ import { addClassBorderPasteCell, addClassCellIndexSelected, addRows8, addRowsUp
 onRemoveBgSelectedCell, removeClassBorderPasteCell, removeClassCellIndexSelected, showDraggingPoint, sortedSetASC, totalFixedWidth, updateArrayByKey, getFormat,
 // isRangeCell,
 // isSelectedCell,
-onRemoveBgCellIndex, onAddBgCellIndex, onAddBorderSelectedCell, onRemoveBorderSelectedCell } from "../hooks";
+onRemoveBgCellIndex, onAddBgCellIndex, onAddBorderSelectedCell, onRemoveBorderSelectedCell, isFormattedNumber, checkThousandSeparator, checkDecimalSeparator, detectSeparators } from "../hooks";
 import Message from "../../Message/Message";
 import { Toolbar, ConfigProvider, InputNumber } from "rc-master-ui";
 import classnames from "classnames";
 import { Plus, Trash2 } from "becoxy-icons";
 // import {faker} from "@faker-js/faker";
 import { SELECTION_COLUMN } from "../InternalTable";
+import { removeNumericFormat } from "react-numeric-component";
 const {
   Paragraph,
   Title
 } = Typography;
 dayjs.extend(customParseFormat);
 const toast = 'top-right';
-const defaultContext = [{
-  key: 'INSERT_BEFORE',
-  label: 'Thêm dòng bên trên',
-  icon: /*#__PURE__*/React.createElement(Plus, {
-    fontSize: 14
-  }),
-  children: [{
-    parentKey: 'INSERT_BEFORE',
-    key: 'INSERT_BEFORE_1',
-    label: 'Thêm 1 dòng',
-    row: 1
-  }, {
-    parentKey: 'INSERT_BEFORE',
-    key: 'INSERT_BEFORE_10',
-    label: 'Thêm 10 dòng',
-    row: 10
-  }, {
-    parentKey: 'INSERT_BEFORE',
-    key: 'INSERT_BEFORE_50',
-    label: 'Thêm 50 dòng',
-    row: 50
-  }, {
-    parentKey: 'INSERT_BEFORE',
-    key: 'INSERT_BEFORE_100',
-    label: 'Thêm 100 dòng',
-    row: 100
-  }, {
-    parentKey: 'INSERT_BEFORE',
-    key: 'INSERT_BEFORE_ADV',
-    label: 'Tùy chỉnh'
-  }]
-}, {
-  key: 'INSERT_AFTER',
-  label: 'Thêm dòng bên dưới',
-  icon: /*#__PURE__*/React.createElement(Plus, {
-    fontSize: 14
-  }),
-  children: [{
-    parentKey: 'INSERT_AFTER',
-    key: 'INSERT_AFTER_1',
-    label: 'Thêm 1 dòng',
-    row: 1
-  }, {
-    parentKey: 'INSERT_AFTER',
-    key: 'INSERT_AFTER_10',
-    label: 'Thêm 10 dòng',
-    row: 10
-  }, {
-    parentKey: 'INSERT_AFTER',
-    key: 'INSERT_AFTER_50',
-    label: 'Thêm 50 dòng',
-    row: 50
-  }, {
-    parentKey: 'INSERT_AFTER',
-    key: 'INSERT_AFTER_100',
-    label: 'Thêm 100 dòng',
-    row: 100
-  }, {
-    parentKey: 'INSERT_AFTER',
-    key: 'INSERT_AFTER_ADV',
-    label: 'Tùy chỉnh'
-  }]
-}, {
-  key: 'INSERT_CHILDREN',
-  // label: 'Insert item children',
-  label: 'Thêm cấp con',
-  icon: /*#__PURE__*/React.createElement(Plus, {
-    fontSize: 14
-  })
-  // children: [
-  //   {
-  //     parentKey: 'INSERT_AFTER',
-  //     key: 'INSERT_AFTER_1',
-  //     label: 'Thêm 1 dòng',
-  //     row: 1
-  //   },
-  //   {
-  //     parentKey: 'INSERT_AFTER',
-  //     key: 'INSERT_AFTER_10',
-  //     label: 'Thêm 10 dòng',
-  //     row: 10
-  //   },
-  //   {
-  //     parentKey: 'INSERT_AFTER',
-  //     key: 'INSERT_AFTER_50',
-  //     label: 'Thêm 50 dòng',
-  //     row: 50
-  //   },
-  //   {
-  //     parentKey: 'INSERT_AFTER',
-  //     key: 'INSERT_AFTER_100',
-  //     label: 'Thêm 100 dòng',
-  //     row: 100
-  //   },
-  //   {
-  //     parentKey: 'INSERT_AFTER',
-  //     key: 'INSERT_AFTER_ADV',
-  //     label: 'Tùy chỉnh'
-  //   }
-  // ]
-}, {
-  key: 'DELETE_CONTENT',
-  label: 'Xóa nội dung',
-  icon: /*#__PURE__*/React.createElement(Trash2, {
-    fontSize: 14
-  })
-}, {
-  key: 'DELETE_ROWS',
-  label: 'Xóa dòng',
-  icon: /*#__PURE__*/React.createElement(Trash2, {
-    fontSize: 14
-  })
-}];
+// const defaultContext = [
+//   {
+//     key: 'INSERT_BEFORE',
+//     label: 'Thêm dòng bên trên',
+//     icon: <Plus fontSize={14} />,
+//     children: [
+//       {
+//         parentKey: 'INSERT_BEFORE',
+//         key: 'INSERT_BEFORE_1',
+//         label: 'Thêm 1 dòng',
+//         row: 1
+//       },
+//       {
+//         parentKey: 'INSERT_BEFORE',
+//         key: 'INSERT_BEFORE_10',
+//         label: 'Thêm 10 dòng',
+//         row: 10
+//       },
+//       {
+//         parentKey: 'INSERT_BEFORE',
+//         key: 'INSERT_BEFORE_50',
+//         label: 'Thêm 50 dòng',
+//         row: 50
+//       },
+//       {
+//         parentKey: 'INSERT_BEFORE',
+//         key: 'INSERT_BEFORE_100',
+//         label: 'Thêm 100 dòng',
+//         row: 100
+//       },
+//       {
+//         parentKey: 'INSERT_BEFORE',
+//         key: 'INSERT_BEFORE_ADV',
+//         label: 'Tùy chỉnh'
+//       }
+//     ]
+//   },
+//   {
+//     key: 'INSERT_AFTER',
+//     label: 'Thêm dòng bên dưới',
+//     icon: <Plus fontSize={14} />,
+//     children: [
+//       {
+//         parentKey: 'INSERT_AFTER',
+//         key: 'INSERT_AFTER_1',
+//         label: 'Thêm 1 dòng',
+//         row: 1
+//       },
+//       {
+//         parentKey: 'INSERT_AFTER',
+//         key: 'INSERT_AFTER_10',
+//         label: 'Thêm 10 dòng',
+//         row: 10
+//       },
+//       {
+//         parentKey: 'INSERT_AFTER',
+//         key: 'INSERT_AFTER_50',
+//         label: 'Thêm 50 dòng',
+//         row: 50
+//       },
+//       {
+//         parentKey: 'INSERT_AFTER',
+//         key: 'INSERT_AFTER_100',
+//         label: 'Thêm 100 dòng',
+//         row: 100
+//       },
+//       {
+//         parentKey: 'INSERT_AFTER',
+//         key: 'INSERT_AFTER_ADV',
+//         label: 'Tùy chỉnh'
+//       }
+//     ]
+//   },
+//   {
+//     key: 'INSERT_CHILDREN',
+//     // label: 'Insert item children',
+//     label: 'Thêm cấp con',
+//     icon: <Plus fontSize={14} />
+//     // children: [
+//     //   {
+//     //     parentKey: 'INSERT_AFTER',
+//     //     key: 'INSERT_AFTER_1',
+//     //     label: 'Thêm 1 dòng',
+//     //     row: 1
+//     //   },
+//     //   {
+//     //     parentKey: 'INSERT_AFTER',
+//     //     key: 'INSERT_AFTER_10',
+//     //     label: 'Thêm 10 dòng',
+//     //     row: 10
+//     //   },
+//     //   {
+//     //     parentKey: 'INSERT_AFTER',
+//     //     key: 'INSERT_AFTER_50',
+//     //     label: 'Thêm 50 dòng',
+//     //     row: 50
+//     //   },
+//     //   {
+//     //     parentKey: 'INSERT_AFTER',
+//     //     key: 'INSERT_AFTER_100',
+//     //     label: 'Thêm 100 dòng',
+//     //     row: 100
+//     //   },
+//     //   {
+//     //     parentKey: 'INSERT_AFTER',
+//     //     key: 'INSERT_AFTER_ADV',
+//     //     label: 'Tùy chỉnh'
+//     //   }
+//     // ]
+//   },
+//   { key: 'DELETE_CONTENT', label: 'Xóa nội dung', icon: <Trash2 fontSize={14} /> },
+//   { key: 'DELETE_ROWS', label: 'Xóa dòng', icon: <Trash2 fontSize={14} /> }
+// ]
+
 const validateData = async (data, formSchema) => {
   if (!formSchema) {
     return [];
@@ -208,6 +210,7 @@ const GridEdit = props => {
     validate,
     setTooltipContent,
     onBlur,
+    locale,
     ...rest
   } = props;
   const ref = useRef(null);
@@ -253,123 +256,122 @@ const GridEdit = props => {
       label: `100 ${t ? t('rows') : 'rows'}`
     }];
   }, [t]);
-
-  // const defaultContext = React.useMemo(() => {
-  //   return  [
-  //     {
-  //       key: 'INSERT_BEFORE',
-  //       label: 'Thêm dòng bên trên',
-  //       icon: <Plus fontSize={14} />,
-  //       children: [
-  //         {
-  //           parentKey: 'INSERT_BEFORE',
-  //           key: 'INSERT_BEFORE_1',
-  //           label: 'Thêm 1 dòng',
-  //           row: 1
-  //         },
-  //         {
-  //           parentKey: 'INSERT_BEFORE',
-  //           key: 'INSERT_BEFORE_10',
-  //           label: 'Thêm 10 dòng',
-  //           row: 10
-  //         },
-  //         {
-  //           parentKey: 'INSERT_BEFORE',
-  //           key: 'INSERT_BEFORE_50',
-  //           label: 'Thêm 50 dòng',
-  //           row: 50
-  //         },
-  //         {
-  //           parentKey: 'INSERT_BEFORE',
-  //           key: 'INSERT_BEFORE_100',
-  //           label: 'Thêm 100 dòng',
-  //           row: 100
-  //         },
-  //         {
-  //           parentKey: 'INSERT_BEFORE',
-  //           key: 'INSERT_BEFORE_ADV',
-  //           label: 'Tùy chỉnh'
-  //         }
-  //       ]
-  //     },
-  //     {
-  //       key: 'INSERT_AFTER',
-  //       label: 'Thêm dòng bên dưới',
-  //       icon: <Plus fontSize={14} />,
-  //       children: [
-  //         {
-  //           parentKey: 'INSERT_AFTER',
-  //           key: 'INSERT_AFTER_1',
-  //           label: 'Thêm 1 dòng',
-  //           row: 1
-  //         },
-  //         {
-  //           parentKey: 'INSERT_AFTER',
-  //           key: 'INSERT_AFTER_10',
-  //           label: 'Thêm 10 dòng',
-  //           row: 10
-  //         },
-  //         {
-  //           parentKey: 'INSERT_AFTER',
-  //           key: 'INSERT_AFTER_50',
-  //           label: 'Thêm 50 dòng',
-  //           row: 50
-  //         },
-  //         {
-  //           parentKey: 'INSERT_AFTER',
-  //           key: 'INSERT_AFTER_100',
-  //           label: 'Thêm 100 dòng',
-  //           row: 100
-  //         },
-  //         {
-  //           parentKey: 'INSERT_AFTER',
-  //           key: 'INSERT_AFTER_ADV',
-  //           label: 'Tùy chỉnh'
-  //         }
-  //       ]
-  //     },
-  //     {
-  //       key: 'INSERT_CHILDREN',
-  //       // label: 'Insert item children',
-  //       label: 'Thêm cấp con',
-  //       icon: <Plus fontSize={14} />
-  //       // children: [
-  //       //   {
-  //       //     parentKey: 'INSERT_AFTER',
-  //       //     key: 'INSERT_AFTER_1',
-  //       //     label: 'Thêm 1 dòng',
-  //       //     row: 1
-  //       //   },
-  //       //   {
-  //       //     parentKey: 'INSERT_AFTER',
-  //       //     key: 'INSERT_AFTER_10',
-  //       //     label: 'Thêm 10 dòng',
-  //       //     row: 10
-  //       //   },
-  //       //   {
-  //       //     parentKey: 'INSERT_AFTER',
-  //       //     key: 'INSERT_AFTER_50',
-  //       //     label: 'Thêm 50 dòng',
-  //       //     row: 50
-  //       //   },
-  //       //   {
-  //       //     parentKey: 'INSERT_AFTER',
-  //       //     key: 'INSERT_AFTER_100',
-  //       //     label: 'Thêm 100 dòng',
-  //       //     row: 100
-  //       //   },
-  //       //   {
-  //       //     parentKey: 'INSERT_AFTER',
-  //       //     key: 'INSERT_AFTER_ADV',
-  //       //     label: 'Tùy chỉnh'
-  //       //   }
-  //       // ]
-  //     },
-  //     { key: 'DELETE_CONTENT', label: 'Xóa nội dung', icon: <Trash2 fontSize={14} /> },
-  //     { key: 'DELETE_ROWS', label: 'Xóa dòng', icon: <Trash2 fontSize={14} /> }
-  //   ]
-  // }, [])
-
+  const defaultContext = React.useMemo(() => {
+    return [{
+      key: 'INSERT_BEFORE',
+      // label: 'Thêm dòng bên trên',
+      label: `${t ? t(locale?.add_rows_before ?? 'Add rows before') : 'Add rows before'}`,
+      icon: /*#__PURE__*/React.createElement(Plus, {
+        fontSize: 14
+      }),
+      children: [{
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_1',
+        label: `${t ? t(locale?.add_1 ?? 'Add 1 rows') : 'Add 1 rows'}`,
+        row: 1
+      }, {
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_10',
+        label: `${t ? t(locale?.add_10 ?? 'Add 10 rows') : 'Add 10 rows'}`,
+        row: 10
+      }, {
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_50',
+        label: `${t ? t(locale?.add_50 ?? 'Add 50 rows') : 'Add 50 rows'}`,
+        row: 50
+      }, {
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_100',
+        label: `${t ? t(locale?.add_100 ?? 'Add 100 rows') : 'Add 100 rows'}`,
+        row: 100
+      }, {
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_ADV',
+        label: `${t ? t(locale?.custom ?? 'Custom') : 'Custom'}`
+      }]
+    }, {
+      key: 'INSERT_AFTER',
+      label: `${t ? t(locale?.add_rows_after ?? 'Add rows after') : 'Add rows before'}`,
+      icon: /*#__PURE__*/React.createElement(Plus, {
+        fontSize: 14
+      }),
+      children: [{
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_1',
+        label: `${t ? t(locale?.add_1 ?? 'Add 1 rows') : 'Add 1 rows'}`,
+        row: 1
+      }, {
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_10',
+        label: `${t ? t(locale?.add_10 ?? 'Add 10 rows') : 'Add 10 rows'}`,
+        row: 10
+      }, {
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_50',
+        label: `${t ? t(locale?.add_50 ?? 'Add 50 rows') : 'Add 50 rows'}`,
+        row: 50
+      }, {
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_100',
+        label: `${t ? t(locale?.add_100 ?? 'Add 100 rows') : 'Add 100 rows'}`,
+        row: 100
+      }, {
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_ADV',
+        label: `${t ? t(locale?.custom ?? 'Custom') : 'Custom'}`
+      }]
+    }, {
+      key: 'INSERT_CHILDREN',
+      // label: 'Insert item children',
+      label: `${t ? t(locale?.add_children ?? 'Add children') : 'Add children'}`,
+      icon: /*#__PURE__*/React.createElement(Plus, {
+        fontSize: 14
+      })
+      // children: [
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_1',
+      //     label: 'Thêm 1 dòng',
+      //     row: 1
+      //   },
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_10',
+      //     label: 'Thêm 10 dòng',
+      //     row: 10
+      //   },
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_50',
+      //     label: 'Thêm 50 dòng',
+      //     row: 50
+      //   },
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_100',
+      //     label: 'Thêm 100 dòng',
+      //     row: 100
+      //   },
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_ADV',
+      //     label: 'Tùy chỉnh'
+      //   }
+      // ]
+    }, {
+      key: 'DELETE_CONTENT',
+      label: `${t ? t(locale?.delete_content ?? 'Delete content') : 'Delete content'}`,
+      icon: /*#__PURE__*/React.createElement(Trash2, {
+        fontSize: 14
+      })
+    }, {
+      key: 'DELETE_ROWS',
+      label: `${t ? t(locale?.delete_rows ?? 'Delete rows') : 'Delete rows'}`,
+      icon: /*#__PURE__*/React.createElement(Trash2, {
+        fontSize: 14
+      })
+    }];
+  }, [t, locale]);
   const [form] = Form.useForm();
 
   // const [editingKey, setEditingKey] = useState<string | number>('')
@@ -1143,7 +1145,11 @@ const GridEdit = props => {
   };
   const handlePasted = (record, indexCol, rowNumber, pasteData) => {
     const rows = pasteData.slice(0, onCellPaste?.maxRowsPaste ?? 200);
+    console.log('rows', rows);
+    console.log('record', record);
     if (!record?.parentId) {
+      console.log('1');
+
       // Cập nhật data mới
       const newData = [...dataSource];
 
@@ -1178,13 +1184,38 @@ const GridEdit = props => {
           }
           if (visibleCols[targetCol].editEnable) {
             // @ts-ignore
+            const columnTarget = visibleCols[targetCol];
             const columnKey = visibleCols[targetCol].field;
+            if (columnTarget.type === 'number' && isFormattedNumber(cellValue.trim())) {
+              const colFormat = typeof columnTarget.format === 'function' ? columnTarget.format(record) : columnTarget.format;
+              const valuePasteFormat = detectSeparators(cellValue.trim());
+              const cellFormat = getFormat(colFormat, format);
+              const thousandSeparator = valuePasteFormat?.thousandSeparator ?? cellFormat?.thousandSeparator;
+              const decimalSeparator = valuePasteFormat?.decimalSeparator ?? cellFormat?.decimalSeparator;
+              const dec = cellFormat?.decimalScale;
+              const numericFormatProps = {
+                thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+                decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+                allowNegative: cellFormat?.allowNegative ?? true,
+                prefix: cellFormat?.prefix,
+                suffix: cellFormat?.suffix,
+                decimalScale: dec,
+                fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+              };
+              const val = removeNumericFormat(cellValue.trim(), undefined, numericFormatProps);
 
-            // @ts-ignore
-            newData[targetRow] = {
-              ...newData[targetRow],
-              [columnKey]: cellValue.trim()
-            };
+              // @ts-ignore
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [columnKey]: Number(val)
+              };
+            } else {
+              // @ts-ignore
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [columnKey]: cellValue.trim()
+              };
+            }
             pastedColumns.add(columnKey);
           }
         });
@@ -1193,8 +1224,12 @@ const GridEdit = props => {
         pastedRows.push(newData[targetRow]);
       });
       const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+      console.log('pastedRows', pastedRows);
+      console.log('pastedColumnsArray', pastedColumnsArray);
+      console.log('newData', newData);
       triggerPaste?.(pastedRows, pastedColumnsArray, newData);
     } else {
+      console.log('2');
       // Cập nhật data mới
       const newData = [...dataSource];
       const parent = findItemByKey(newData, rowKey, record.parentId);
@@ -1253,6 +1288,7 @@ const GridEdit = props => {
   const handlePaste = (record, indexCol, rowNumber, e) => {
     // const clipboard: any = (e.clipboardData || (window && window?.Clipboard)).getData("text")
     const pasteData = e.clipboardData.getData("text/plain");
+    console.log('pasteData', pasteData);
 
     // Chuyển đổi dữ liệu từ clipboard thành mảng
     const rowsPasted = pasteData.split("\n").map(row =>
@@ -1286,6 +1322,7 @@ const GridEdit = props => {
         // ),
       });
     } else {
+      console.log('5555');
       handlePasted(record, indexCol, rowNumber, rowsPasted);
     }
 
@@ -2209,6 +2246,7 @@ const GridEdit = props => {
             }
           },
           onPaste: event => {
+            console.log('aaaaaa');
             if (editingKey.current === '') {
               handlePaste(record, colIndex, rowNumber, event);
               event.preventDefault();
@@ -2533,6 +2571,7 @@ const GridEdit = props => {
     id: id,
     tableRef: tableRef,
     dataSource: dataSource,
+    locale: locale,
     components: {
       ...components,
       body: {
@@ -2618,12 +2657,12 @@ const GridEdit = props => {
       className: 'react-hot-toast'
     }
   }), /*#__PURE__*/React.createElement(Modal, {
-    title: "Th\xEAm d\xF2ng",
+    title: `${t ? t(locale?.add_rows ?? 'Add rows') : 'Add rows'}`,
     open: openModalAddRow.open,
     onOk: onOkAddRow,
     onCancel: hideModalAddRow,
-    okText: "Ok",
-    cancelText: "H\u1EE7y",
+    okText: `${t ? t(locale?.ok_btn ?? 'Ok') : 'Ok'}`,
+    cancelText: `${t ? t(locale?.cancel_btn ?? 'Cancel') : 'Cancel'}`,
     className: 'be-popup-container',
     centered: true,
     width: 250,