es-grid-template 1.5.13 → 1.5.15

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

@@ -26,6 +26,7 @@ var _Message = _interopRequireDefault(require("../../Message/Message"));
 var _rcMasterUi = require("rc-master-ui");
 var _becoxyIcons = require("becoxy-icons");
 var _InternalTable = require("../InternalTable");
+var _reactNumericComponent = require("react-numeric-component");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import {faker} from "@faker-js/faker";
@@ -36,119 +37,120 @@ const {
 } = _antd.Typography;
 _dayjs.default.extend(_customParseFormat.default);
 const toast = 'top-right';
-const defaultContext = [{
-  key: 'INSERT_BEFORE',
-  label: 'Thêm dòng bên trên',
-  icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.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.default.createElement(_becoxyIcons.Plus, {
-    fontSize: 14
-  }),
-  children: [{
-    parentKey: 'INSERT_AFTER',
-    key: 'INSERT_AFTER_1',
-    label: 'Thêm 1 dòng',
-    row: 1
-  }, {
-    parentKey: 'INSERT_AFTER',
-    key: 'INSERT_AFTER_10',
-    label: 'Thêm 10 dòng',
-    row: 10
-  }, {
-    parentKey: 'INSERT_AFTER',
-    key: 'INSERT_AFTER_50',
-    label: 'Thêm 50 dòng',
-    row: 50
-  }, {
-    parentKey: 'INSERT_AFTER',
-    key: 'INSERT_AFTER_100',
-    label: 'Thêm 100 dòng',
-    row: 100
-  }, {
-    parentKey: 'INSERT_AFTER',
-    key: 'INSERT_AFTER_ADV',
-    label: 'Tùy chỉnh'
-  }]
-}, {
-  key: 'INSERT_CHILDREN',
-  // label: 'Insert item children',
-  label: 'Thêm cấp con',
-  icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
-    fontSize: 14
-  })
-  // children: [
-  //   {
-  //     parentKey: 'INSERT_AFTER',
-  //     key: 'INSERT_AFTER_1',
-  //     label: 'Thêm 1 dòng',
-  //     row: 1
-  //   },
-  //   {
-  //     parentKey: 'INSERT_AFTER',
-  //     key: 'INSERT_AFTER_10',
-  //     label: 'Thêm 10 dòng',
-  //     row: 10
-  //   },
-  //   {
-  //     parentKey: 'INSERT_AFTER',
-  //     key: 'INSERT_AFTER_50',
-  //     label: 'Thêm 50 dòng',
-  //     row: 50
-  //   },
-  //   {
-  //     parentKey: 'INSERT_AFTER',
-  //     key: 'INSERT_AFTER_100',
-  //     label: 'Thêm 100 dòng',
-  //     row: 100
-  //   },
-  //   {
-  //     parentKey: 'INSERT_AFTER',
-  //     key: 'INSERT_AFTER_ADV',
-  //     label: 'Tùy chỉnh'
-  //   }
-  // ]
-}, {
-  key: 'DELETE_CONTENT',
-  label: 'Xóa nội dung',
-  icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Trash2, {
-    fontSize: 14
-  })
-}, {
-  key: 'DELETE_ROWS',
-  label: 'Xóa dòng',
-  icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.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 [];
@@ -212,6 +214,7 @@ const GridEdit = props => {
     validate,
     setTooltipContent,
     onBlur,
+    locale,
     ...rest
   } = props;
   const ref = (0, _react.useRef)(null);
@@ -257,123 +260,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.default.useMemo(() => {
+    return [{
+      key: 'INSERT_BEFORE',
+      // label: 'Thêm dòng bên trên',
+      label: `${t ? t(locale?.add_rows_before ?? 'Add rows before') : 'Add rows before'}`,
+      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
+        fontSize: 14
+      }),
+      children: [{
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_1',
+        label: `${t ? t(locale?.add_1 ?? 'Add 1 rows') : 'Add 1 rows'}`,
+        row: 1
+      }, {
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_10',
+        label: `${t ? t(locale?.add_10 ?? 'Add 10 rows') : 'Add 10 rows'}`,
+        row: 10
+      }, {
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_50',
+        label: `${t ? t(locale?.add_50 ?? 'Add 50 rows') : 'Add 50 rows'}`,
+        row: 50
+      }, {
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_100',
+        label: `${t ? t(locale?.add_100 ?? 'Add 100 rows') : 'Add 100 rows'}`,
+        row: 100
+      }, {
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_ADV',
+        label: `${t ? t(locale?.custom ?? 'Custom') : 'Custom'}`
+      }]
+    }, {
+      key: 'INSERT_AFTER',
+      label: `${t ? t(locale?.add_rows_after ?? 'Add rows after') : 'Add rows before'}`,
+      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
+        fontSize: 14
+      }),
+      children: [{
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_1',
+        label: `${t ? t(locale?.add_1 ?? 'Add 1 rows') : 'Add 1 rows'}`,
+        row: 1
+      }, {
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_10',
+        label: `${t ? t(locale?.add_10 ?? 'Add 10 rows') : 'Add 10 rows'}`,
+        row: 10
+      }, {
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_50',
+        label: `${t ? t(locale?.add_50 ?? 'Add 50 rows') : 'Add 50 rows'}`,
+        row: 50
+      }, {
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_100',
+        label: `${t ? t(locale?.add_100 ?? 'Add 100 rows') : 'Add 100 rows'}`,
+        row: 100
+      }, {
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_ADV',
+        label: `${t ? t(locale?.custom ?? 'Custom') : 'Custom'}`
+      }]
+    }, {
+      key: 'INSERT_CHILDREN',
+      // label: 'Insert item children',
+      label: `${t ? t(locale?.add_children ?? 'Add children') : 'Add children'}`,
+      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
+        fontSize: 14
+      })
+      // children: [
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_1',
+      //     label: 'Thêm 1 dòng',
+      //     row: 1
+      //   },
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_10',
+      //     label: 'Thêm 10 dòng',
+      //     row: 10
+      //   },
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_50',
+      //     label: 'Thêm 50 dòng',
+      //     row: 50
+      //   },
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_100',
+      //     label: 'Thêm 100 dòng',
+      //     row: 100
+      //   },
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_ADV',
+      //     label: 'Tùy chỉnh'
+      //   }
+      // ]
+    }, {
+      key: 'DELETE_CONTENT',
+      label: `${t ? t(locale?.delete_content ?? 'Delete content') : 'Delete content'}`,
+      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Trash2, {
+        fontSize: 14
+      })
+    }, {
+      key: 'DELETE_ROWS',
+      label: `${t ? t(locale?.delete_rows ?? 'Delete rows') : 'Delete rows'}`,
+      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Trash2, {
+        fontSize: 14
+      })
+    }];
+  }, [t, locale]);
   const [form] = _antd.Form.useForm();
 
   // const [editingKey, setEditingKey] = useState<string | number>('')
@@ -1147,7 +1149,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];
 
@@ -1182,13 +1188,38 @@ const GridEdit = props => {
           }
           if (visibleCols[targetCol].editEnable) {
             // @ts-ignore
+            const columnTarget = visibleCols[targetCol];
             const columnKey = visibleCols[targetCol].field;
+            if (columnTarget.type === 'number' && (0, _hooks.isFormattedNumber)(cellValue.trim())) {
+              const colFormat = typeof columnTarget.format === 'function' ? columnTarget.format(record) : columnTarget.format;
+              const valuePasteFormat = (0, _hooks.detectSeparators)(cellValue.trim());
+              const cellFormat = (0, _hooks.getFormat)(colFormat, format);
+              const thousandSeparator = valuePasteFormat?.thousandSeparator ?? cellFormat?.thousandSeparator;
+              const decimalSeparator = valuePasteFormat?.decimalSeparator ?? cellFormat?.decimalSeparator;
+              const dec = cellFormat?.decimalScale;
+              const numericFormatProps = {
+                thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+                decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+                allowNegative: cellFormat?.allowNegative ?? true,
+                prefix: cellFormat?.prefix,
+                suffix: cellFormat?.suffix,
+                decimalScale: dec,
+                fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+              };
+              const val = (0, _reactNumericComponent.removeNumericFormat)(cellValue.trim(), undefined, numericFormatProps);
 
-            // @ts-ignore
-            newData[targetRow] = {
-              ...newData[targetRow],
-              [columnKey]: cellValue.trim()
-            };
+              // @ts-ignore
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [columnKey]: Number(val)
+              };
+            } else {
+              // @ts-ignore
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [columnKey]: cellValue.trim()
+              };
+            }
             pastedColumns.add(columnKey);
           }
         });
@@ -1197,8 +1228,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 = (0, _hooks.findItemByKey)(newData, rowKey, record.parentId);
@@ -1257,6 +1292,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 =>
@@ -1290,6 +1326,7 @@ const GridEdit = props => {
         // ),
       });
     } else {
+      console.log('5555');
       handlePasted(record, indexCol, rowNumber, rowsPasted);
     }
 
@@ -2213,6 +2250,7 @@ const GridEdit = props => {
             }
           },
           onPaste: event => {
+            console.log('aaaaaa');
             if (editingKey.current === '') {
               handlePaste(record, colIndex, rowNumber, event);
               event.preventDefault();
@@ -2537,6 +2575,7 @@ const GridEdit = props => {
     id: id,
     tableRef: tableRef,
     dataSource: dataSource,
+    locale: locale,
     components: {
       ...components,
       body: {
@@ -2622,12 +2661,12 @@ const GridEdit = props => {
       className: 'react-hot-toast'
     }
   }), /*#__PURE__*/_react.default.createElement(_antd.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,