es-grid-template 1.9.60 → 1.9.62

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

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _rcMasterUi = require("rc-master-ui");
-var _utils = require("../hook/utils");
+var _utils = require("../../table-component/hook/utils");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactNumericComponent = require("react-numeric-component");
 var _dayjs = _interopRequireDefault(require("dayjs"));
@@ -20,8 +20,11 @@ var _colors = require("@ant-design/colors");
 var _EditForm = require("../components/EditForm");
 var _useContext = require("../useContext");
 var _locale = require("rc-master-ui/es/locale");
+var _hooks = require("../../grid-component/hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import type { EditType } from "rc-master-ui"
+
 const {
   SHOW_PARENT
 } = _rcMasterUi.TreeSelect;
@@ -49,7 +52,9 @@ const EditableCell = props => {
     // children,
     column,
     indexRow,
-    indexCol
+    indexCol,
+    // visibleColumns,
+    handleNextCell
     // cellEditing,
     // ...restProps
   } = props;
@@ -67,8 +72,7 @@ const EditableCell = props => {
   } = (0, _react.useContext)(_useContext.TableContext);
   const datePickerRef = _react.default.useRef(null);
   const dateTimePickerRef = _react.default.useRef(null);
-  // const timePickerRef = React.useRef(null);
-
+  const timePickerRef = _react.default.useRef(null);
   const colFormat = typeof column?.format === 'function' ? column?.format(record) : column?.format;
   const cellFormat = (0, _utils.getFormat)(colFormat, format);
   const inputNode = (value, onChange) => {
@@ -76,6 +80,7 @@ const EditableCell = props => {
     const date = !(0, _utils.isEmpty)(value) ? (0, _utils.convertDateToDayjs)(new Date(value), dateFormat) : null;
     const maxDate = (0, _utils.convertDateToDayjs)(column.maxDate, dateFormat) ?? undefined;
     const minDate = (0, _utils.convertDateToDayjs)(column.minDate, dateFormat) ?? undefined;
+    const formValues = getValues();
     const {
       fieldValue,
       columns: selectColumns,
@@ -85,8 +90,9 @@ const EditableCell = props => {
       fieldNames,
       toolbarItems,
       filterOption,
+      filterKey,
       inputKey,
-      // toolbarClick,
+      toolbarClick,
       loadOptions,
       validateOption,
       options: propsOptions
@@ -104,7 +110,24 @@ const EditableCell = props => {
     const options = validateOption ? validateOption(record, column.field) : selectOptions ?? [];
     const optionsTree = validateOption ? (0, _utils.convertArrayWithIndent)(validateOption(record, column.field)) : selectOptions ? (0, _utils.convertArrayWithIndent)(selectOptions) : [];
 
-    // const currt = flatColumns2()
+    // const focusToken = (token: FormatToken, fmt: string) => {
+    //   const input: HTMLInputElement | null =
+    //     timePickerRef.current?.nativeElement?.querySelector('input') ??
+    //     timePickerRef.current?.input;
+
+    //   if (!input) return;
+
+    //   const start = fmt.indexOf(token);
+    //   if (start === -1) return;
+
+    //   input.focus();
+
+    //   input.setSelectionRange(start, start + token.length - 1);
+
+    //   requestAnimationFrame(() => {
+    //     input.setSelectionRange(start, start + token.length);
+    //   });
+    // };
 
     switch (editType) {
       case 'date':
@@ -115,10 +138,7 @@ const EditableCell = props => {
             type: 'mask'
           },
           autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId
-
-          // locale={buddhistLocale}
-          ,
+          defaultOpen: column.field === startCell?.colId,
           style: {
             width: '100%',
             height: '100%'
@@ -172,9 +192,7 @@ const EditableCell = props => {
           format: {
             format: dateFormat,
             type: 'mask'
-          }
-          // locale={buddhistLocale}
-          ,
+          },
           style: {
             width: '100%',
             height: '100%'
@@ -186,8 +204,20 @@ 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"
+          ,
+
+          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={true}
+          ,
+
+          onCalendarChange: (newDate, dateString) => {
             const newDateValue = dateString ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString, dateFormat)).format() : null;
             onChange(newDateValue);
             setTimeout(() => {
@@ -195,32 +225,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':
@@ -274,7 +300,17 @@ const EditableCell = props => {
         });
       case 'time':
         const timeFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
-        const time = value ? (0, _dayjs.default)(value, timeFormat) : null;
+
+        //  chỉ nhận giá trị dạng HH:mm | mm:HH => convert
+
+        let time = value ?? undefined;
+        const typeTime = (0, _utils.getDateValueType)(value);
+        if (typeTime === 'time') {
+          time = value ? (0, _dayjs.default)(value, timeFormat) : undefined;
+        } else {
+          const abc = value ? (0, _moment.default)(value).format(timeFormat) : undefined;
+          time = abc ? (0, _dayjs.default)(abc, timeFormat) : undefined;
+        }
         const maxTimeValue = !(0, _utils.isEmpty)(column.maxTime) ? (0, _dayjs.default)(column.maxTime).format(timeFormat) : null;
         const minTimeValue = !(0, _utils.isEmpty)(column.minTime) ? (0, _dayjs.default)(column.minTime).format(timeFormat) : null;
 
@@ -283,6 +319,7 @@ const EditableCell = props => {
         const maxTime = maxTimeValue ? (0, _dayjs.default)(maxTimeValue, timeFormat) : undefined;
         const minTime = minTimeValue ? (0, _dayjs.default)(minTimeValue, timeFormat) : undefined;
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.TimePicker, {
+          ref: timePickerRef,
           format: {
             format: timeFormat,
             type: 'mask'
@@ -303,33 +340,119 @@ const EditableCell = props => {
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId,
-          onChange: (newDate, dateString) => {
+          defaultOpen: column.field === startCell?.colId
+
+          // onChange={(newDate, dateString) => {
+
+          //   if (typeTime === 'time') {
+
+          //     onChange(dateString)
+
+          //   } else {
+
+          //     // const datetime = dayjs(dateString as string, timeFormat, true);
+
+          //     const newVal =  newDate ? moment(newDate.toDate()).format() : undefined
+
+          //     // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
+          //     onChange(newVal)
+
+          //   }
+
+          //   setTimeout(() => {
+          //     // @ts-ignore
+          //     dateTimePickerRef.current?.focus()
+          //   }, 0)
+
+          // }}
+
+          // onBlur={() => {
+          //   const formState = getValues()
+          //   const itemState = getValues(dataIndex)
+          //   // @ts-ignore
+          //   const prevState = record[dataIndex]
+          //   const newState = itemState
+
+          //   let newValue = newState
+
+          //   if (typeTime === 'time') {
+
+          //     newValue = newState
+
+          //   } else {
+
+          //     const datetime = dayjs(newState as string, timeFormat, true);
+
+          //     const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : undefined
+          //     onChange(newVal)
+
+          //     newValue = newVal
+
+          //   }
+
+          //   if (prevState !== newState) {
+          //     handleCellChange?.({
+          //       key: key as any,
+          //       field: column.field ?? column.field as any,
+          //       record: formState,
+          //       prevState,
+          //       newState: newValue,
+          //       option: newValue,
+          //       indexCol,
+          //       indexRow,
+          //       type: 'blur'
+          //     })
+          //   }
+          // }}
+
+          //  needConfirm={false}
+          ,
+
+          onCalendarChange: (newDate, dateString) => {
             // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
-            onChange(dateString);
+
+            // onChange(newDateValue)
+
+            if (typeTime === 'time') {
+              onChange(dateString);
+            } else {
+              // const datetime = dayjs(dateString as string, timeFormat, true);
+
+              const newVal = newDate ? (0, _moment.default)(newDate.toDate()).format() : undefined;
+
+              // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
+              onChange(newVal);
+            }
             setTimeout(() => {
               // @ts-ignore
-              dateTimePickerRef.current?.focus();
-            }, 0);
+              timePickerRef.current?.focus();
+            });
           },
-          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'
+                });
+              }
+            }
+          },
+          onKeyDown: e => {
+            if (e?.code === "Tab") {
+              handleNextCell?.();
             }
           }
         });
@@ -353,37 +476,31 @@ const EditableCell = props => {
             align: colSelect.textAlign
           };
         });
-        let valueSelectTable = value;
+        let valueSelectTable = formValues[dataIndex];
         if (fieldValue) {
           // @ts-ignore
-          valueSelectTable = record[fieldValue] ?? value;
+          valueSelectTable = record[fieldValue] ?? formValues[dataIndex];
         }
-
-        // if (isMulti || selectMode === 'checkbox') {
-        //   // @ts-ignore
-        //   valueSelectTable = (!isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0) ? options.filter((val: any) => record[dataIndex]?.includes(val[keySelect])) : undefined
-
-        // }
-
         return /*#__PURE__*/_react.default.createElement(_asyncTableSelect.AsyncTableSelect, {
           columns: columnsTable,
           options: options,
           defaultOptions: options,
           value: valueSelectTable ?? undefined,
-          rowData: record,
           autoDestroy: true,
           onChange: (val, option) => {
-            onChange(val);
+            onChange(val ?? '');
             const formState = getValues();
-            // const itemState = getValues(dataIndex)
+            const formNewState = {
+              ...getValues(),
+              [dataIndex]: !(0, _utils.isNullOrUndefined)(formState[dataIndex]) ? formState[dataIndex] : undefined
+            };
             // @ts-ignore
-            const prevState = record[dataIndex];
-            const newState = val;
+            const prevState = record[dataIndex] ?? undefined;
+            const newState = val ?? undefined;
             handleCellChange?.({
-              // @ts-ignore
-              key: record[rowKey],
+              key,
               field: column.field ?? column.field,
-              record: formState,
+              record: formNewState,
               prevState,
               newState,
               option: option,
@@ -413,71 +530,123 @@ const EditableCell = props => {
           status: isInvalid ? 'error' : undefined,
           dropdownRender: menu => {
             if (toolbarItems && toolbarItems.length > 0) {
-              return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, menu, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Divider, {
+              return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, menu, toolbarItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Divider, {
                 style: {
                   margin: '8px 0'
                 }
               }), /*#__PURE__*/_react.default.createElement("div", {
                 className: 'toolbar-control d-flex justify-content-end'
-              }));
+              }, toolbarItems.map(it => {
+                return /*#__PURE__*/_react.default.createElement("div", {
+                  key: it.key,
+                  className: 'toolbar-item',
+                  onClick: () => toolbarClick?.({
+                    item: it,
+                    column
+                  })
+                }, it.template ? (0, _hooks.getTemplate)(it.template) : /*#__PURE__*/_react.default.createElement(_rcMasterUi.Button, {
+                  className: "toolbar-item-btn"
+                }, it.icon && (0, _hooks.getTemplate)(it.icon), it.title));
+              }))));
             } else {
               return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", menu);
             }
           },
-          filterOption: filterOption,
+          filterOption: filterKey ? (input, option) => {
+            const searchValue = (0, _utils.removeVietnameseTones)(input.toLowerCase() ?? '');
+            const filterValues = filterKey.some(k => {
+              const val = option?.[k];
+              return (0, _utils.removeVietnameseTones)((val ?? '').toString().toLowerCase()).includes(searchValue);
+            });
+            return filterValues;
+          } : filterOption,
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
-          },
-          onBlur: event => {
-            if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-              const val = event.inputValue;
-              onChange(val);
-              const formState = getValues();
-              // const itemState = getValues(dataIndex)
-              // @ts-ignore
-              const prevState = record[dataIndex];
-              const newState = val;
-              handleCellChange?.({
-                key,
-                field: column.field ?? column.field,
-                record: formState,
-                prevState,
-                newState,
-                option: {
-                  value: val,
-                  label: val,
-                  searchTextAsValue: true
-                },
-                indexCol,
-                indexRow,
-                type: 'blur'
-              });
-            }
-          },
+          }
+
+          // onBlur={(event: any) => {
+
+          //   if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
+          //     const val = event.inputValue
+          //     onChange(val ?? undefined)
+
+          //     const formState = getValues()
+          //     // const itemState = getValues(dataIndex)
+          //     // @ts-ignore
+          //     const prevState = record[dataIndex]
+          //     const newState = val
+
+          //     handleCellChange?.({
+          //       key,
+          //       field: column.field ?? column.field as any,
+          //       record: formState,
+          //       prevState,
+          //       newState,
+          //       option: { value: val, label: val, searchTextAsValue: true } as any,
+          //       indexCol,
+          //       indexRow,
+          //       type: 'blur'
+          //     })
+          //   }
+          // }}
+
+          // onKeyDown={(event: any) => {
+
+          //   if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
+
+          //     const val = event.target.value
+          //     onChange(val)
+
+          //     const formState = getValues()
+          //     // const itemState = getValues(dataIndex)
+          //     // @ts-ignore
+          //     const prevState = record[dataIndex]
+          //     const newState = val
+
+          //     handleCellChange?.({
+          //       key,
+          //       field: column.field ?? column.field as any,
+          //       record: formState,
+          //       prevState,
+          //       newState,
+          //       option: { value: val, label: val, searchTextAsValue: true } as any,
+          //       indexCol,
+          //       indexRow,
+          //       type: 'blur'
+          //     })
+
+          //   }
+
+          // }}
+          ,
+
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });
       case 'select':
-        let valueSelect = value;
+        let valueSelect = formValues[dataIndex];
         if (fieldValue) {
           // @ts-ignore
-          valueSelect = record[fieldValue] ?? value;
+          valueSelect = record[fieldValue] ?? formValues[dataIndex];
         }
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
           options: options,
-          value: valueSelect ?? undefined,
+          value: valueSelect ?? '',
           onChange: (val, option) => {
-            onChange(val);
+            onChange(val ?? '');
             const formState = getValues();
-            // const itemState = getValues(dataIndex)
+            const formNewState = {
+              ...getValues(),
+              [dataIndex]: !(0, _utils.isNullOrUndefined)(formState[dataIndex]) ? formState[dataIndex] : undefined
+            };
             // @ts-ignore
-            const prevState = record[dataIndex];
-            const newState = val;
+            const prevState = record[dataIndex] ?? undefined;
+            const newState = val ?? undefined;
             handleCellChange?.({
               key,
               field: column.field ?? column.field,
-              record: formState,
+              record: formNewState,
               prevState,
               newState,
               option: option,
@@ -486,6 +655,8 @@ const EditableCell = props => {
               type: 'blur'
             });
           }
+          // destroyOnHidden
+          // des
           // autoDestroy={true}
           ,
           showSearch: true,
@@ -504,8 +675,16 @@ const EditableCell = props => {
           optionFilterProp: "label",
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
-          filterOption: filterOption,
-          fieldNames: fieldNames ? fieldNames : {
+          filterOption: filterKey ? (input, option) => {
+            const searchValue = (0, _utils.removeVietnameseTones)(input.toLowerCase() ?? '');
+            const filterValues = filterKey.some(k => {
+              const val = option?.[k];
+              return (0, _utils.removeVietnameseTones)((val ?? '').toString().toLowerCase()).includes(searchValue);
+            });
+            return filterValues;
+          } : filterOption,
+          optionRender: column.editSelectSettings?.formatOptionLabel,
+          fieldNames: {
             value: keySelect,
             label: inputKey ?? 'label'
           },
@@ -535,30 +714,83 @@ const EditableCell = props => {
               });
             }
           },
+          onKeyDown: event => {
+            if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
+              const val = event.target.value;
+              onChange(val);
+              const formState = getValues();
+              // const itemState = getValues(dataIndex)
+              // @ts-ignore
+              const prevState = record[dataIndex];
+              const newState = val;
+              handleCellChange?.({
+                key,
+                field: column.field ?? column.field,
+                record: formState,
+                prevState,
+                newState,
+                option: {
+                  value: val,
+                  label: val,
+                  searchTextAsValue: true
+                },
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          },
+          dropdownRender: menu => {
+            if (toolbarItems && toolbarItems.length > 0) {
+              return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, menu, toolbarItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Divider, {
+                style: {
+                  margin: '8px 0'
+                }
+              }), /*#__PURE__*/_react.default.createElement("div", {
+                className: 'toolbar-control d-flex justify-content-end'
+              }, toolbarItems.map(it => {
+                return /*#__PURE__*/_react.default.createElement("div", {
+                  key: it.key,
+                  className: 'toolbar-item',
+                  onClick: () => toolbarClick?.({
+                    item: it,
+                    column
+                  })
+                }, it.template ? (0, _hooks.getTemplate)(it.template) : /*#__PURE__*/_react.default.createElement(_rcMasterUi.Button, {
+                  className: "toolbar-item-btn"
+                }, it.icon && (0, _hooks.getTemplate)(it.icon), it.title));
+              }))));
+            } else {
+              return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", menu);
+            }
+          },
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });
       case 'asyncSelect':
-        let valueAsyncSelect = value;
+        let valueAsyncSelect = formValues[dataIndex];
         if (fieldValue) {
           // @ts-ignore
-          valueAsyncSelect = record[fieldValue] ?? value;
+          valueAsyncSelect = record[fieldValue] ?? formValues[dataIndex];
         }
         return /*#__PURE__*/_react.default.createElement(_asyncSelect.AsyncSelect, {
           options: options,
           defaultOptions: options,
           value: valueAsyncSelect ?? undefined,
           onChange: (val, option) => {
-            onChange(val);
+            onChange(val ?? '');
             const formState = getValues();
-            // const itemState = getValues(dataIndex)
+            const formNewState = {
+              ...getValues(),
+              [dataIndex]: !(0, _utils.isNullOrUndefined)(formState[dataIndex]) ? formState[dataIndex] : undefined
+            };
             // @ts-ignore
-            const prevState = record[dataIndex];
-            const newState = val;
+            const prevState = record[dataIndex] ?? undefined;
+            const newState = val ?? undefined;
             handleCellChange?.({
               key,
               field: column.field ?? column.field,
-              record: formState,
+              record: formNewState,
               prevState,
               newState,
               option: option,
@@ -585,46 +817,40 @@ const EditableCell = props => {
           optionFilterProp: "label",
           popupClassName: 'be-popup-container',
           loadOptions: loadOptions,
-          status: isInvalid ? 'error' : undefined
-          // dropdownRender={(menu) => {
-          //   if (toolbarItems && toolbarItems.length > 0) {
-          //     return (
-          //       <>
-          //         {menu}
-          //         <Divider style={{margin: '8px 0'}}/>
-          //
-          //         <div
-          //           className={'toolbar-control d-flex justify-content-end'}
-          //         >
-          //           {toolbarItems.map((it) => {
-          //             return (
-          //               <div
-          //                 key={it.key}
-          //                 className={'toolbar-item'}
-          //                 onClick={() => toolbarClick?.({item: it, column})}
-          //               >
-          //                 {it.template ? getTemplate(it.template) : (
-          //                   <Button className='toolbar-item-btn'>
-          //
-          //                     {it.icon && getTemplate(it.icon)}
-          //                     {it.title}
-          //                   </Button>
-          //                 )}
-          //
-          //               </div>
-          //             )
-          //           })}
-          //
-          //         </div>
-          //       </>
-          //     )
-          //   } else {
-          //     return <> {menu}</>
-          //   }
-          //
-          // }}
-          ,
-          filterOption: filterOption,
+          status: isInvalid ? 'error' : undefined,
+          dropdownRender: menu => {
+            if (toolbarItems && toolbarItems.length > 0) {
+              return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, menu, toolbarItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Divider, {
+                style: {
+                  margin: '8px 0'
+                }
+              }), /*#__PURE__*/_react.default.createElement("div", {
+                className: 'toolbar-control d-flex justify-content-end'
+              }, toolbarItems.map(it => {
+                return /*#__PURE__*/_react.default.createElement("div", {
+                  key: it.key,
+                  className: 'toolbar-item',
+                  onClick: () => toolbarClick?.({
+                    item: it,
+                    column
+                  })
+                }, it.template ? (0, _hooks.getTemplate)(it.template) : /*#__PURE__*/_react.default.createElement(_rcMasterUi.Button, {
+                  className: "toolbar-item-btn"
+                }, it.icon && (0, _hooks.getTemplate)(it.icon), it.title));
+              }))));
+            } else {
+              return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", menu);
+            }
+          },
+          optionRender: column.editSelectSettings?.formatOptionLabel,
+          filterOption: filterKey ? (input, option) => {
+            const searchValue = (0, _utils.removeVietnameseTones)(input.toLowerCase() ?? '');
+            const filterValues = filterKey.some(k => {
+              const val = option?.[k];
+              return (0, _utils.removeVietnameseTones)((val ?? '').toString().toLowerCase()).includes(searchValue);
+            });
+            return filterValues;
+          } : filterOption,
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
@@ -659,24 +885,12 @@ const EditableCell = props => {
           "data-tooltip-id": `${id}-tooltip-error`
         });
       case 'treeSelect':
-        // let valueTreeSelect
-
         const newTreeData = (0, _utils.convertLabelToTitle)(optionsTree);
-        // @ts-ignore
-        // const valueTreeSelect = column?.editSelectSettings?.isMulti ? (Array.isArray(record[dataIndex]) ? record[dataIndex] : []) : record[dataIndex]
-
         let valueTreeSelect = value;
         if (fieldValue) {
           // @ts-ignore
           valueTreeSelect = record[fieldValue] ?? value;
         }
-
-        // if (isMulti || selectMode === 'checkbox') {
-        //   // @ts-ignore
-        //   valueTreeSelect = (!isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0) ? options.filter((val: any) => record[dataIndex]?.includes(val[keySelect])) : undefined
-
-        // }
-
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.TreeSelect, {
           id: `col${indexCol}-record${indexRow}`,
           className: 'be-tree-select',
@@ -689,21 +903,14 @@ const EditableCell = props => {
             maxHeight: 400,
             overflow: 'auto'
           },
-          treeData: newTreeData
-          // placeholder={t ? t(column.placeholder ?? 'Select') : (column.placeholder ?? 'Select')}
-          ,
-          placeholder: t && column?.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
+          treeData: newTreeData,
+          placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
           treeDefaultExpandAll: true,
           defaultOpen: column.field === startCell?.colId,
-          autoFocus: column.field === startCell?.colId
-
-          // defaultOpen={column.field === cellEditing?.column.field}
-          ,
+          autoFocus: column.field === startCell?.colId,
           virtual: true,
           allowClear: true,
-          showSearch: true
-          // maxTagTextLength={column?.editSelectSettings?.showItems}
-          ,
+          showSearch: true,
           maxTagCount: column?.editSelectSettings?.showItems,
           maxTagPlaceholder: 2,
           treeTitleRender: column?.editSelectSettings?.formatOptionLabel,
@@ -919,7 +1126,7 @@ const EditableCell = props => {
         // let floatValue = value
 
         const numericFormatProps = {
-          value,
+          value: value || '',
           thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
           decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
           decimalScale: cellFormat?.decimalScale ?? undefined,
@@ -930,8 +1137,6 @@ const EditableCell = props => {
         };
         return /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, (0, _extends2.default)({
           id: `col${indexCol}-record${indexRow}`
-          // value={value ? numericFormatter(value.toString(), numericFormatProps) : ''}
-          // value={value}
         }, numericFormatProps, {
           min: column.min,
           max: column.max,