es-grid-template 1.9.60 → 1.9.62

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

@@ -1,19 +1,23 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from "react";
-import { DatePicker, TimePicker, ColorPicker, Divider, Input, Row, Col } from "rc-master-ui";
-import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertArrayWithIndent, convertDateToDayjs, convertLabelToTitle, getDatepickerFormat, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets, getFormat } from "../hook/utils";
+import { DatePicker, TimePicker, ColorPicker, Input } from "rc-master-ui";
+import { Divider, Row, Col, Button } from "rc-master-ui";
+// import type { EditType } from "rc-master-ui"
+
+import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertArrayWithIndent, convertDateToDayjs, convertLabelToTitle, getDatepickerFormat, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets, getFormat, removeVietnameseTones, getDateValueType } from "../../table-component/hook/utils";
 import classNames from "classnames";
 import { NumericFormat } from "react-numeric-component";
 import dayjs from "dayjs";
 import moment from "moment";
 import { Controller } from "react-hook-form";
-import { Checkbox, TreeSelect, Select } from "rc-master-ui";
+import { Checkbox, Select, TreeSelect } from "rc-master-ui";
 import { AsyncSelect } from "../components/async-select";
 import { AsyncTableSelect } from "../components/async-table-select";
 import { cyan, green, red, blue } from '@ant-design/colors';
 import { EditForm } from "../components/EditForm";
 import { TableContext } from "../useContext";
 import { useLocale } from "rc-master-ui/es/locale";
+import { getTemplate } from "../../grid-component/hooks";
 const {
   SHOW_PARENT
 } = TreeSelect;
@@ -41,7 +45,9 @@ const EditableCell = props => {
     // children,
     column,
     indexRow,
-    indexCol
+    indexCol,
+    // visibleColumns,
+    handleNextCell
     // cellEditing,
     // ...restProps
   } = props;
@@ -59,8 +65,7 @@ const EditableCell = props => {
   } = useContext(TableContext);
   const datePickerRef = React.useRef(null);
   const dateTimePickerRef = React.useRef(null);
-  // const timePickerRef = React.useRef(null);
-
+  const timePickerRef = React.useRef(null);
   const colFormat = typeof column?.format === 'function' ? column?.format(record) : column?.format;
   const cellFormat = getFormat(colFormat, format);
   const inputNode = (value, onChange) => {
@@ -68,6 +73,7 @@ const EditableCell = props => {
     const date = !isEmpty(value) ? convertDateToDayjs(new Date(value), dateFormat) : null;
     const maxDate = convertDateToDayjs(column.maxDate, dateFormat) ?? undefined;
     const minDate = convertDateToDayjs(column.minDate, dateFormat) ?? undefined;
+    const formValues = getValues();
     const {
       fieldValue,
       columns: selectColumns,
@@ -77,8 +83,9 @@ const EditableCell = props => {
       fieldNames,
       toolbarItems,
       filterOption,
+      filterKey,
       inputKey,
-      // toolbarClick,
+      toolbarClick,
       loadOptions,
       validateOption,
       options: propsOptions
@@ -96,7 +103,24 @@ const EditableCell = props => {
     const options = validateOption ? validateOption(record, column.field) : selectOptions ?? [];
     const optionsTree = validateOption ? convertArrayWithIndent(validateOption(record, column.field)) : selectOptions ? 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':
@@ -107,10 +131,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%'
@@ -164,9 +185,7 @@ const EditableCell = props => {
           format: {
             format: dateFormat,
             type: 'mask'
-          }
-          // locale={buddhistLocale}
-          ,
+          },
           style: {
             width: '100%',
             height: '100%'
@@ -178,8 +197,20 @@ const EditableCell = props => {
           placeholder: t && column.placeholder ? t(column.placeholder) : undefined,
           disabled: 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 ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
             onChange(newDateValue);
             setTimeout(() => {
@@ -187,32 +218,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':
@@ -266,7 +293,17 @@ const EditableCell = props => {
         });
       case 'time':
         const timeFormat = getDatepickerFormat(editType, cellFormat);
-        const time = value ? dayjs(value, timeFormat) : null;
+
+        //  chỉ nhận giá trị dạng HH:mm | mm:HH => convert
+
+        let time = value ?? undefined;
+        const typeTime = getDateValueType(value);
+        if (typeTime === 'time') {
+          time = value ? dayjs(value, timeFormat) : undefined;
+        } else {
+          const abc = value ? moment(value).format(timeFormat) : undefined;
+          time = abc ? dayjs(abc, timeFormat) : undefined;
+        }
         const maxTimeValue = !isEmpty(column.maxTime) ? dayjs(column.maxTime).format(timeFormat) : null;
         const minTimeValue = !isEmpty(column.minTime) ? dayjs(column.minTime).format(timeFormat) : null;
 
@@ -275,6 +312,7 @@ const EditableCell = props => {
         const maxTime = maxTimeValue ? dayjs(maxTimeValue, timeFormat) : undefined;
         const minTime = minTimeValue ? dayjs(minTimeValue, timeFormat) : undefined;
         return /*#__PURE__*/React.createElement(TimePicker, {
+          ref: timePickerRef,
           format: {
             format: timeFormat,
             type: 'mask'
@@ -295,33 +333,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 ? moment(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?.();
             }
           }
         });
@@ -345,37 +469,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.createElement(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]: !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,
@@ -405,71 +523,123 @@ const EditableCell = props => {
           status: isInvalid ? 'error' : undefined,
           dropdownRender: menu => {
             if (toolbarItems && toolbarItems.length > 0) {
-              return /*#__PURE__*/React.createElement(React.Fragment, null, menu, /*#__PURE__*/React.createElement(Divider, {
+              return /*#__PURE__*/React.createElement(React.Fragment, null, menu, toolbarItems && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
                 style: {
                   margin: '8px 0'
                 }
               }), /*#__PURE__*/React.createElement("div", {
                 className: 'toolbar-control d-flex justify-content-end'
-              }));
+              }, toolbarItems.map(it => {
+                return /*#__PURE__*/React.createElement("div", {
+                  key: it.key,
+                  className: 'toolbar-item',
+                  onClick: () => toolbarClick?.({
+                    item: it,
+                    column
+                  })
+                }, it.template ? getTemplate(it.template) : /*#__PURE__*/React.createElement(Button, {
+                  className: "toolbar-item-btn"
+                }, it.icon && getTemplate(it.icon), it.title));
+              }))));
             } else {
               return /*#__PURE__*/React.createElement(React.Fragment, null, " ", menu);
             }
           },
-          filterOption: filterOption,
+          filterOption: filterKey ? (input, option) => {
+            const searchValue = removeVietnameseTones(input.toLowerCase() ?? '');
+            const filterValues = filterKey.some(k => {
+              const val = option?.[k];
+              return 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.createElement(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]: !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,
@@ -478,6 +648,8 @@ const EditableCell = props => {
               type: 'blur'
             });
           }
+          // destroyOnHidden
+          // des
           // autoDestroy={true}
           ,
           showSearch: true,
@@ -496,8 +668,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 = removeVietnameseTones(input.toLowerCase() ?? '');
+            const filterValues = filterKey.some(k => {
+              const val = option?.[k];
+              return removeVietnameseTones((val ?? '').toString().toLowerCase()).includes(searchValue);
+            });
+            return filterValues;
+          } : filterOption,
+          optionRender: column.editSelectSettings?.formatOptionLabel,
+          fieldNames: {
             value: keySelect,
             label: inputKey ?? 'label'
           },
@@ -527,30 +707,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.createElement(React.Fragment, null, menu, toolbarItems && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+                style: {
+                  margin: '8px 0'
+                }
+              }), /*#__PURE__*/React.createElement("div", {
+                className: 'toolbar-control d-flex justify-content-end'
+              }, toolbarItems.map(it => {
+                return /*#__PURE__*/React.createElement("div", {
+                  key: it.key,
+                  className: 'toolbar-item',
+                  onClick: () => toolbarClick?.({
+                    item: it,
+                    column
+                  })
+                }, it.template ? getTemplate(it.template) : /*#__PURE__*/React.createElement(Button, {
+                  className: "toolbar-item-btn"
+                }, it.icon && getTemplate(it.icon), it.title));
+              }))));
+            } else {
+              return /*#__PURE__*/React.createElement(React.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.createElement(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]: !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,
@@ -577,46 +810,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.createElement(React.Fragment, null, menu, toolbarItems && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+                style: {
+                  margin: '8px 0'
+                }
+              }), /*#__PURE__*/React.createElement("div", {
+                className: 'toolbar-control d-flex justify-content-end'
+              }, toolbarItems.map(it => {
+                return /*#__PURE__*/React.createElement("div", {
+                  key: it.key,
+                  className: 'toolbar-item',
+                  onClick: () => toolbarClick?.({
+                    item: it,
+                    column
+                  })
+                }, it.template ? getTemplate(it.template) : /*#__PURE__*/React.createElement(Button, {
+                  className: "toolbar-item-btn"
+                }, it.icon && getTemplate(it.icon), it.title));
+              }))));
+            } else {
+              return /*#__PURE__*/React.createElement(React.Fragment, null, " ", menu);
+            }
+          },
+          optionRender: column.editSelectSettings?.formatOptionLabel,
+          filterOption: filterKey ? (input, option) => {
+            const searchValue = removeVietnameseTones(input.toLowerCase() ?? '');
+            const filterValues = filterKey.some(k => {
+              const val = option?.[k];
+              return removeVietnameseTones((val ?? '').toString().toLowerCase()).includes(searchValue);
+            });
+            return filterValues;
+          } : filterOption,
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
@@ -651,24 +878,12 @@ const EditableCell = props => {
           "data-tooltip-id": `${id}-tooltip-error`
         });
       case 'treeSelect':
-        // let valueTreeSelect
-
         const newTreeData = 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.createElement(TreeSelect, {
           id: `col${indexCol}-record${indexRow}`,
           className: 'be-tree-select',
@@ -681,21 +896,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,
@@ -911,7 +1119,7 @@ const EditableCell = props => {
         // let floatValue = value
 
         const numericFormatProps = {
-          value,
+          value: value || '',
           thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
           decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
           decimalScale: cellFormat?.decimalScale ?? undefined,
@@ -922,8 +1130,6 @@ const EditableCell = props => {
         };
         return /*#__PURE__*/React.createElement(NumericFormat, _extends({
           id: `col${indexCol}-record${indexRow}`
-          // value={value ? numericFormatter(value.toString(), numericFormatProps) : ''}
-          // value={value}
         }, numericFormatProps, {
           min: column.min,
           max: column.max,