es-grid-template 1.9.26 → 1.9.28

package/lib/table-component/TableContainerEdit.js

@@ -12,6 +12,8 @@ var _utils = require("./hook/utils");
 var _reactVirtual = require("@tanstack/react-virtual");
 var _reactHookForm = require("react-hook-form");
 var _antd = require("antd");
+var _button = _interopRequireDefault(require("rc-master-ui/es/button"));
+var _dropdown = _interopRequireDefault(require("rc-master-ui/es/dropdown"));
 var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
 var _reactNumericComponent = require("react-numeric-component");
 var _useContext = require("./useContext");
@@ -81,19 +83,15 @@ const TableContainerEdit = props => {
     expandable,
     wrapSettings,
     recordDoubleClick,
-    // triggerFilter,
     selectionSettings,
     isSelectionChange,
     setIsSelectionChange,
-    // onContextMenu,
     contextMenuItems,
     setSorterChange,
     setFilterChange,
     defaultFilter,
     onCellPaste,
-    // triggerPaste,
     validate,
-    // triggerChangeData,
     onCellChange,
     onDataChange,
     defaultValue,
@@ -291,14 +289,16 @@ const TableContainerEdit = props => {
 
     copy(tsv).then(() => {}).catch(() => {});
   }, [startCell, endCell, table]);
-  const triggerChangeData = _react.default.useCallback(newData => {
-    onDataChange?.(newData);
+  const triggerChangeData = _react.default.useCallback((newData, args) => {
+    onDataChange?.(newData, args);
   }, [onDataChange, dataSource]);
   const triggerPaste = _react.default.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
       const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...originData]), (0, _utils.flattenArray)([...callbackData]));
       const rs = (0, _utils.unFlattenData)(rsFilterData);
-      triggerChangeData(rs);
+      triggerChangeData(rs, {
+        type: 'OnPaste'
+      });
     };
     if (onCellPaste && onCellPaste.onPasted) {
       if (onCellPaste.onPasted.length > 1) {
@@ -319,10 +319,14 @@ const TableContainerEdit = props => {
           data: originData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
-        triggerChangeData(newData);
+        triggerChangeData(newData, {
+          type: 'OnPaste'
+        });
       }
     } else {
-      triggerChangeData(newData);
+      triggerChangeData(newData, {
+        type: 'OnPaste'
+      });
     }
   }, [onCellPaste, originData, triggerChangeData]);
   const handlePasted = _react.default.useCallback(pasteData => {
@@ -750,7 +754,9 @@ const TableContainerEdit = props => {
       const index = (0, _utils.flattenData)(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
       const rs = (0, _utils.updateArrayByKey)(newData, row, rowKey);
       if (index > -1) {
-        triggerChangeData?.(rs);
+        triggerChangeData?.(rs, {
+          type: 'CellChange'
+        });
       }
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -770,7 +776,9 @@ const TableContainerEdit = props => {
       const index = (0, _utils.flattenData)(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
       const rs = (0, _utils.updateArrayByKey)(newData, row, rowKey);
       if (index > -1) {
-        triggerChangeData?.(rs);
+        triggerChangeData?.(rs, {
+          type: 'CellChange'
+        });
       }
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -970,7 +978,9 @@ const TableContainerEdit = props => {
     const rs = (0, _utils.updateOrInsert)(originData, rsFilter);
     // const rs2  = mergeWithFilter(originData, rsFilter)
 
-    triggerChangeData?.(rs);
+    triggerChangeData?.(rs, {
+      type: 'DUPLICATE'
+    });
   }, [dataSource, focusedCell, originData, rowKey, table, triggerChangeData]);
 
   // thêm n dòng bên trên
@@ -1006,7 +1016,10 @@ const TableContainerEdit = props => {
         setMergedFilterKeys?.(rs);
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
         newData.splice(index, 0, ...newRows);
-        triggerChangeData?.(newData);
+        triggerChangeData?.(newData, {
+          type: 'INSERT_BEFORE',
+          row: n
+        });
       } else {
         const newData = [...originData];
         const parent = (0, _utils.findItemByKey)(newData, rowKey, record.parentId);
@@ -1032,7 +1045,10 @@ const TableContainerEdit = props => {
           children: childData
         };
         const newDataSource = (0, _utils.updateArrayByKey)(newData, newRowData, rowKey);
-        triggerChangeData?.(newDataSource);
+        triggerChangeData?.(newDataSource, {
+          type: 'INSERT_BEFORE',
+          row: n
+        });
       }
     }
   }, [defaultValue, focusedCell, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, table, triggerChangeData]);
@@ -1070,7 +1086,10 @@ const TableContainerEdit = props => {
         setMergedFilterKeys?.(rs);
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
         newData.splice(index + 1, 0, ...newRows);
-        triggerChangeData?.(newData);
+        triggerChangeData?.(newData, {
+          type: 'INSERT_AFTER',
+          row: n
+        });
       } else {
         const newData = [...originData];
         const parent = (0, _utils.findItemByKey)(newData, rowKey, record.parentId);
@@ -1099,7 +1118,10 @@ const TableContainerEdit = props => {
           children: childData
         };
         const newDataSource = (0, _utils.updateArrayByKey)(newData, newRowData, rowKey);
-        triggerChangeData?.(newDataSource);
+        triggerChangeData?.(newDataSource, {
+          type: 'INSERT_AFTER',
+          row: n
+        });
       }
     }
   }, [defaultValue, table, focusedCell?.rowId, originData, mergedFilterKeys, setMergedFilterKeys, triggerChangeData, rowKey]);
@@ -1137,7 +1159,9 @@ const TableContainerEdit = props => {
       const rs = mergedFilterKeys ? [...mergedFilterKeys, rowId] : [rowId];
       setMergedFilterKeys?.(rs);
       const newDataSource = (0, _utils.updateArrayByKey)(newData, newElement, rowKey);
-      triggerChangeData?.(newDataSource);
+      triggerChangeData?.(newDataSource, {
+        type: 'INSERT_CHILDREN'
+      });
     }
     setTimeout(() => {
       const row = table.getRowModel().rows.find(it => it.id === focusedCell?.rowId);
@@ -1180,12 +1204,18 @@ const TableContainerEdit = props => {
           buttonsStyling: false
         }).then(async result => {
           if (result.value) {
-            triggerChangeData?.([...newDaa]);
+            triggerChangeData?.([...newDaa], {
+              type: 'DELETE_ROWS',
+              row: rowsFocus.length
+            });
           } else if (result.dismiss === MySwal.DismissReason.cancel) {}
         });
       } else {
         // không hiện dialog  
-        triggerChangeData?.([...newDaa]);
+        triggerChangeData?.([...newDaa], {
+          type: 'DELETE_ROWS',
+          row: rowsFocus.length
+        });
       }
     }
   }, [commandSettings, originData, rowKey, rowsFocus, t, triggerChangeData]);
@@ -1211,11 +1241,15 @@ const TableContainerEdit = props => {
           buttonsStyling: false
         }).then(async result => {
           if (result.value) {
-            triggerChangeData?.([]);
+            triggerChangeData?.([], {
+              type: 'DELETE'
+            });
           } else if (result.dismiss === MySwal.DismissReason.cancel) {}
         });
       } else {
-        triggerChangeData?.([]);
+        triggerChangeData?.([], {
+          type: 'DELETE'
+        });
       }
     }
   }, [commandSettings, t, triggerChangeData]);
@@ -1261,7 +1295,9 @@ const TableContainerEdit = props => {
         return updatedRow;
       });
       const newData = (0, _utils.unFlattenData)(rs);
-      triggerChangeData?.([...newData]);
+      triggerChangeData?.([...newData], {
+        type: 'DELETE_CONTENT'
+      });
     }
   };
   const toolbarItemsBottom = _react.default.useMemo(() => {
@@ -1275,7 +1311,7 @@ const TableContainerEdit = props => {
             template: () => {
               return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
                 className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-              }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+              }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
                 style: {
                   color: '#28c76f',
                   borderColor: '#28c76f'
@@ -1283,7 +1319,7 @@ const TableContainerEdit = props => {
                 variant: 'outlined',
                 onClick: () => handleAddMulti(item, 1),
                 className: "d-flex toolbar-button"
-              }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+              }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
                 overlayClassName: 'be-popup-container',
                 trigger: ['click'],
                 style: {
@@ -1311,7 +1347,7 @@ const TableContainerEdit = props => {
             template: () => {
               return /*#__PURE__*/_react.default.createElement("div", {
                 className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-              }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+              }, /*#__PURE__*/_react.default.createElement(_button.default, {
                 style: {
                   color: '#eb4619',
                   borderColor: '#eb4619'
@@ -1336,7 +1372,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1344,7 +1380,7 @@ const TableContainerEdit = props => {
               variant: 'outlined',
               onClick: () => handleAddMulti(item, 1),
               className: "d-flex toolbar-button"
-            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
               title: "",
               overlayClassName: 'be-popup-container',
               style: {
@@ -1372,7 +1408,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1391,7 +1427,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1399,7 +1435,7 @@ const TableContainerEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertBefore(item, 1),
               className: "d-flex toolbar-button"
-            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
               overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
@@ -1426,7 +1462,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1434,7 +1470,7 @@ const TableContainerEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertAfter(item, 1),
               className: "d-flex toolbar-button"
-            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
               overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
@@ -1461,7 +1497,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1480,7 +1516,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#eb4619',
                 borderColor: '#eb4619'
@@ -1499,7 +1535,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#eb4619',
                 borderColor: '#eb4619'
@@ -1527,7 +1563,7 @@ const TableContainerEdit = props => {
             template: () => {
               return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
                 className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-              }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+              }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
                 style: {
                   color: '#28c76f',
                   borderColor: '#28c76f'
@@ -1535,7 +1571,7 @@ const TableContainerEdit = props => {
                 variant: 'outlined',
                 onClick: () => handleAddMulti(item, 1),
                 className: "d-flex toolbar-button"
-              }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+              }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
                 overlayClassName: 'be-popup-container',
                 trigger: ['click'],
                 style: {
@@ -1563,7 +1599,7 @@ const TableContainerEdit = props => {
             template: () => {
               return /*#__PURE__*/_react.default.createElement("div", {
                 className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-              }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+              }, /*#__PURE__*/_react.default.createElement(_button.default, {
                 style: {
                   color: '#eb4619',
                   borderColor: '#eb4619'
@@ -1588,7 +1624,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1596,7 +1632,7 @@ const TableContainerEdit = props => {
               variant: 'outlined',
               onClick: () => handleAddMulti(item, 1),
               className: "d-flex toolbar-button"
-            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
               title: "",
               overlayClassName: 'be-popup-container',
               style: {
@@ -1624,7 +1660,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1643,7 +1679,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1651,7 +1687,7 @@ const TableContainerEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertBefore(item, 1),
               className: "d-flex toolbar-button"
-            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
               overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
@@ -1678,7 +1714,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1686,7 +1722,7 @@ const TableContainerEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertAfter(item, 1),
               className: "d-flex toolbar-button"
-            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
               overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
@@ -1713,7 +1749,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1732,7 +1768,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#eb4619',
                 borderColor: '#eb4619'
@@ -1751,7 +1787,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#eb4619',
                 borderColor: '#eb4619'

package/lib/table-component/body/EditableCell.js

@@ -184,8 +184,53 @@ const EditableCell = props => {
           placeholder: t && column.placeholder ? t(column.placeholder) : undefined,
           disabled: (0, _utils.isDisable)(column, record) ?? false,
           maxDate: maxDate,
-          minDate: minDate,
-          onChange: (newDate, dateString) => {
+          minDate: minDate
+          // mode="date"
+
+          // onChange={(newDate, dateString) => {
+
+          //   const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+
+          //   onChange(newDateValue)
+
+          //   setTimeout(() => {
+          //     // @ts-ignore
+          //     dateTimePickerRef.current?.focus()
+          //   }, 0)
+
+          // }}
+
+          // onBlur={() => {
+          //   const formState = getValues()
+          //   const itemState = getValues(dataIndex)
+          //   // @ts-ignore
+          //   const prevState = record[dataIndex]
+          //   const newState = itemState
+
+          //   if (prevState !== newState) {
+          //     handleCellChange?.({
+          //       key: key as any,
+          //       field: column.field ?? column.field as any,
+          //       record: formState,
+          //       prevState,
+          //       newState,
+          //       option: newState,
+          //       indexCol,
+          //       indexRow,
+          //       type: 'blur'
+          //     })
+          //   }
+          // }}
+          ,
+
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`,
+          autoFocus: column.field === startCell?.colId,
+          defaultOpen: column.field === startCell?.colId,
+          needConfirm: false,
+          onCalendarChange: (newDate, dateString) => {
             const newDateValue = dateString ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString, dateFormat)).format() : null;
             onChange(newDateValue);
             setTimeout(() => {
@@ -193,32 +238,28 @@ const EditableCell = props => {
               dateTimePickerRef.current?.focus();
             }, 0);
           },
-          onBlur: () => {
-            const formState = getValues();
-            const itemState = getValues(dataIndex);
-            // @ts-ignore
-            const prevState = record[dataIndex];
-            const newState = itemState;
-            if (prevState !== newState) {
-              handleCellChange?.({
-                key: key,
-                field: column.field ?? column.field,
-                record: formState,
-                prevState,
-                newState,
-                option: newState,
-                indexCol,
-                indexRow,
-                type: 'blur'
-              });
+          onOpenChange: open => {
+            if (!open) {
+              const formState = getValues();
+              const itemState = getValues(dataIndex);
+              // @ts-ignore
+              const prevState = record[dataIndex];
+              const newState = itemState;
+              if (prevState !== newState) {
+                handleCellChange?.({
+                  key: key,
+                  field: column.field ?? column.field,
+                  record: formState,
+                  prevState,
+                  newState,
+                  option: newState,
+                  indexCol,
+                  indexRow,
+                  type: 'blur'
+                });
+              }
             }
-          },
-          popupClassName: 'be-popup-container',
-          status: isInvalid ? 'error' : undefined,
-          "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-error`,
-          autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId
+          }
         });
       case 'month':
       case 'quarter':

package/lib/table-component/body/TableBody.js

@@ -41,7 +41,7 @@ const TableBody = ({
   //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
   const rowVirtualizer = (0, _reactVirtual.useVirtualizer)({
     count: rows.length,
-    estimateSize: () => 36,
+    estimateSize: () => 32,
     //estimate row height for accurate scrollbar dragging
     getScrollElement: () => tableContainerRef.current,
     //measure dynamic row height, except in firefox because it measures table border height incorrectly

package/lib/table-component/body/TableBodyCell.js

@@ -346,7 +346,7 @@ const TableBodyCell = props => {
       style: {
         ...cellStyles,
         display: 'flex',
-        minHeight: 36,
+        minHeight: 32,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         ...(0, _utils.getCommonPinningStyles)(cell.column)
@@ -397,9 +397,10 @@ const TableBodyCell = props => {
     style: {
       ...cellStyles,
       display: 'flex',
+      alignItems: 'center',
       width: cell.column.getSize(),
       minWidth: cell.column.getSize(),
-      minHeight: 36,
+      minHeight: 32,
       ...(0, _utils.getCommonPinningStyles)(cell.column)
     },
     onMouseEnter: e => {
@@ -463,6 +464,9 @@ const TableBodyCell = props => {
       }
     },
     onClick: e => {
+      if (e.detail === 2) {
+        return;
+      }
       recordClick?.({
         e,
         rowData: record,

package/lib/table-component/body/TableBodyCellEdit.js

@@ -543,7 +543,8 @@ const TableBodyCellEdit = props => {
     setEditingKey?.(record[rowKey]);
     // setTooltipContent('')
 
-    handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
+    // handleCellClick?.(rowNumber, record, columnMeta as any, record[rowKey], record[columnMeta.field ?? ''])
+
     reset?.();
 
     // const formattedRecord = { ...record };
@@ -904,7 +905,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        height: '32px',
         userSelect: 'none',
         width: cell.column.getSize(),
         // flexBasis: cell.column.getSize(),
@@ -993,7 +994,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        height: '32px',
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1019,7 +1020,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        height: '32px',
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1157,11 +1158,12 @@ const TableBodyCellEdit = props => {
     }),
     style: {
       display: 'flex',
+      alignItems: 'center',
       width: cell.column.getSize(),
       minWidth: cell.column.getSize(),
       // flex: 1,
       // maxWidth: cell.column.getSize(),
-      height: '36px',
+      height: '32px',
       ...(0, _utils.getCommonPinningStyles)(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
     },

package/lib/table-component/footer/TableFooterRow.js

@@ -23,7 +23,7 @@ const TableFooterRow = ({
       ...rowStyles,
       display: "grid",
       width: "100%",
-      height: 37,
+      height: 32,
       gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
     },
     className: "ui-rc-grid-footer-row"