es-grid-template 1.9.59 → 1.9.60

package/es/ali-table/base-table/cell/EditCell.js

@@ -0,0 +1,1252 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from "react";
+import { DatePicker, TimePicker, ColorPicker, Input } from "rc-master-ui";
+import { Divider, Row, Col, Button } 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, 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 type { ColumnSelectTable, ColumnTable, EditType, IFormat } from "../../grid-component/type"
+import { useLocale } from "rc-master-ui/es/locale";
+// import { getTemplate } from "../../grid-component/hooks"
+
+import { getTemplate } from "../../../grid-component/hooks";
+import { AsyncTableSelect } from "../../../table-component/components/async-table-select";
+import { AsyncSelect } from "../../../table-component/components/async-select";
+import { EditForm } from "../../../table-component/components/EditForm";
+const {
+  SHOW_PARENT
+} = TreeSelect;
+const {
+  TextArea
+} = Input;
+const filterTreeNode = (input, treeNode) => {
+  const {
+    title,
+    value
+  } = treeNode;
+  if (typeof title === "string" || typeof title === 'number') {
+    return title.toString().toLowerCase().includes(input.toLowerCase()) || value.toLowerCase().includes(input.toLowerCase());
+  }
+  return value.toLowerCase().includes(input.toLowerCase());
+};
+const EditCell = props => {
+  const {
+    dataIndex,
+    editType,
+    record,
+    column,
+    indexRow,
+    indexCol,
+    format,
+    control,
+    getValues,
+    handleCellChange,
+    errors,
+    tableId,
+    startCell,
+    rowKey,
+    t,
+    // handleNextCell,
+    handleSubmit,
+    onSubmit
+  } = props;
+  const [tableLocal] = useLocale('Table');
+  const datePickerRef = React.useRef(null);
+  const dateTimePickerRef = 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) => {
+    const dateFormat = getDatepickerFormat(editType, cellFormat);
+    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,
+      isMulti,
+      selectMode,
+      menuWidth,
+      fieldNames,
+      toolbarItems,
+      filterOption,
+      filterKey,
+      inputKey,
+      toolbarClick,
+      loadOptions,
+      validateOption,
+      options: propsOptions
+    } = column.editSelectSettings || {};
+    const isInvalid = column.field ? errors[column.field] : false;
+
+    // @ts-ignore
+    const key = record[rowKey];
+    const field = column.field ?? '';
+
+    // const message = errors && column.field && errors[column.field] ? errors[column.field].message : ''
+    const message = isInvalid?.message;
+    const keySelect = checkFieldKey(column?.editSelectSettings?.fieldKey);
+    const selectOptions = typeof propsOptions === 'function' ? propsOptions(record, column.field) : propsOptions;
+    const options = validateOption ? validateOption(record, column.field) : selectOptions ?? [];
+    const optionsTree = validateOption ? convertArrayWithIndent(validateOption(record, column.field)) : selectOptions ? convertArrayWithIndent(selectOptions) : [];
+
+    // 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':
+        return /*#__PURE__*/React.createElement(DatePicker, {
+          ref: datePickerRef,
+          format: {
+            format: dateFormat,
+            type: 'mask'
+          },
+          autoFocus: column.field === startCell?.colId,
+          defaultOpen: column.field === startCell?.colId,
+          style: {
+            width: '100%',
+            height: '100%'
+          }
+          // value={date}
+          ,
+          defaultValue: date
+          // preserveInvalidOnBlur
+          ,
+
+          onBlur: () => {
+            const formState = getValues();
+            const itemState = getValues(dataIndex);
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = itemState;
+            if (newState !== prevState) {
+              handleCellChange?.({
+                key: key,
+                field: column.field,
+                record: formState,
+                prevState,
+                newState,
+                option: newState,
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          },
+          placeholder: t && column.placeholder ? t(column.placeholder) : undefined,
+          disabled: isDisable(column, record) ?? false,
+          maxDate: maxDate,
+          minDate: minDate,
+          onChange: (newDate, dateString) => {
+            const newDateValue = dateString ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
+            onChange(newDateValue);
+            setTimeout(() => {
+              // @ts-ignore
+              datePickerRef.current?.focus();
+            }, 0);
+          },
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${tableId}-tooltip-error`
+        });
+      case 'datetime':
+        return /*#__PURE__*/React.createElement(DatePicker, {
+          ref: dateTimePickerRef,
+          format: {
+            format: dateFormat,
+            type: 'mask'
+          },
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          showTime: true
+          // value={date}
+          ,
+          defaultValue: date,
+          placeholder: t && column.placeholder ? t(column.placeholder) : undefined,
+          disabled: isDisable(column, record) ?? false,
+          maxDate: maxDate,
+          minDate: minDate
+          // mode="date"
+          ,
+
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${tableId}-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(() => {
+              // @ts-ignore
+              dateTimePickerRef.current?.focus();
+            }, 0);
+          },
+          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'
+                });
+              }
+            }
+          }
+        });
+      case 'month':
+      case 'quarter':
+      case 'year':
+        const pickerFormat = getDatepickerFormat(editType, cellFormat);
+        const maxDateValue1 = !isEmpty(column.maxDate) ? dayjs(column.maxDate, pickerFormat) : undefined;
+        const minDateValue1 = !isEmpty(column.minDate) ? dayjs(column.minDate, pickerFormat) : undefined;
+        return /*#__PURE__*/React.createElement(DatePicker, {
+          id: `col${indexCol}-record${indexRow}`,
+          format: {
+            format: pickerFormat,
+            type: 'mask'
+          },
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          picker: editType,
+          placeholder: t && column.placeholder ? t(column.placeholder) : undefined,
+          disabled: isDisable(column, record) ?? false,
+          maxDate: maxDateValue1,
+          minDate: minDateValue1,
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${tableId}-tooltip-error`,
+          autoFocus: column.field === startCell?.colId,
+          defaultOpen: column.field === startCell?.colId
+        });
+      case 'week':
+        const weekFormat = getDatepickerFormat(editType, cellFormat);
+        const maxWeekValue = !isEmpty(column.maxDate) ? dayjs(column.maxDate, weekFormat) : undefined;
+        const minWeekValue = !isEmpty(column.minDate) ? dayjs(column.minDate, weekFormat) : undefined;
+        return /*#__PURE__*/React.createElement(DatePicker, {
+          format: val => customWeekStartEndFormat(val, weekFormat),
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          picker: editType,
+          placeholder: t && column.placeholder ? t(column.placeholder) : undefined,
+          disabled: isDisable(column, record) ?? false,
+          maxDate: maxWeekValue,
+          minDate: minWeekValue,
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${tableId}-tooltip-error`,
+          autoFocus: column.field === startCell?.colId,
+          defaultOpen: column.field === startCell?.colId
+        });
+      case 'time':
+        const timeFormat = getDatepickerFormat(editType, cellFormat);
+
+        //  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;
+
+        // @ts-ignore
+        // const timeValue = !isEmpty(record[dataIndex]) ? dayjs(record[dataIndex], timeFormat) : null
+        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'
+          },
+          placeholder: t && column.placeholder ? t(column.placeholder) : undefined,
+          maxDate: maxTime,
+          minDate: minTime
+          // value={time}
+          ,
+          defaultValue: time,
+          disabled: isDisable(column, record) ?? false,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${tableId}-tooltip-error`,
+          autoFocus: column.field === startCell?.colId,
+          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(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
+              timePickerRef.current?.focus();
+            });
+          },
+          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?.()
+
+          //   }
+
+          // }}
+        });
+      case 'selectTable':
+        const rr = selectColumns ?? [];
+        const columnsTable = rr.map(colSelect => {
+          return {
+            title: colSelect.headerTemplate ? colSelect.headerTemplate : t ? t(colSelect.headerText) : colSelect.headerText,
+            dataIndex: colSelect.field ?? colSelect.dataIndex,
+            key: colSelect.dataIndex,
+            render: colSelect.template ? (text, recd, ind) => /*#__PURE__*/React.createElement(React.Fragment, null, colSelect.template?.({
+              value: text,
+              rowData: recd,
+              column: colSelect,
+              field: colSelect.field,
+              index: ind,
+              [colSelect.field]: text
+            })) : undefined,
+            width: colSelect.width,
+            ellipsis: true,
+            align: colSelect.textAlign
+          };
+        });
+        let valueSelectTable = formValues[dataIndex];
+        if (fieldValue) {
+          // @ts-ignore
+          valueSelectTable = record[fieldValue] ?? formValues[dataIndex];
+        }
+        return /*#__PURE__*/React.createElement(AsyncTableSelect, {
+          columns: columnsTable,
+          options: options,
+          defaultOptions: options,
+          value: valueSelectTable ?? undefined,
+          autoDestroy: true,
+          onChange: (val, option) => {
+            onChange(val ?? '');
+            const formState = getValues();
+            const formNewState = {
+              ...getValues(),
+              [dataIndex]: !isNullOrUndefined(formState[dataIndex]) ? formState[dataIndex] : undefined
+            };
+            // @ts-ignore
+            const prevState = record[dataIndex] ?? undefined;
+            const newState = val ?? undefined;
+            handleCellChange?.({
+              key,
+              field: column.field ?? column.field,
+              record: formNewState,
+              prevState,
+              newState,
+              option: option,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          },
+          showSearch: true,
+          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
+          valueSelectAble: true,
+          selectMode: selectMode,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          defaultOpen: column.field === startCell?.colId,
+          autoFocus: column.field === startCell?.colId,
+          placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
+          allowClear: column.isClearable ?? false,
+          maxTagCount: 'responsive',
+          rowKey: keySelect,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
+          optionFilterProp: "label",
+          popupClassName: 'be-popup-container',
+          loadOptions: loadOptions,
+          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);
+            }
+          },
+          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: 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": `${tableId}-tooltip-error`
+        });
+      case 'select':
+        let valueSelect = formValues[dataIndex];
+        if (fieldValue) {
+          // @ts-ignore
+          valueSelect = record[fieldValue] ?? formValues[dataIndex];
+        }
+        return /*#__PURE__*/React.createElement(Select, {
+          options: options,
+          value: valueSelect ?? '',
+          onChange: (val, option) => {
+            onChange(val ?? '');
+            const formState = getValues();
+            const formNewState = {
+              ...getValues(),
+              [dataIndex]: !isNullOrUndefined(formState[dataIndex]) ? formState[dataIndex] : undefined
+            };
+            // @ts-ignore
+            const prevState = record[dataIndex] ?? undefined;
+            const newState = val ?? undefined;
+            handleCellChange?.({
+              key,
+              field: column.field ?? column.field,
+              record: formNewState,
+              prevState,
+              newState,
+              option: option,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          }
+          // destroyOnHidden
+          // des
+          // autoDestroy={true}
+          ,
+          showSearch: true,
+          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
+          valueSelectAble: true,
+          defaultOpen: column.field === startCell?.colId,
+          autoFocus: column.field === startCell?.colId,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
+          allowClear: column.isClearable ?? false,
+          maxTagCount: 'responsive',
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
+          optionFilterProp: "label",
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          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'
+          },
+          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'
+              });
+            }
+          },
+          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": `${tableId}-tooltip-error`
+        });
+      case 'asyncSelect':
+        let valueAsyncSelect = formValues[dataIndex];
+        if (fieldValue) {
+          // @ts-ignore
+          valueAsyncSelect = record[fieldValue] ?? formValues[dataIndex];
+        }
+        return /*#__PURE__*/React.createElement(AsyncSelect, {
+          options: options,
+          defaultOptions: options,
+          value: valueAsyncSelect ?? undefined,
+          onChange: (val, option) => {
+            onChange(val ?? '');
+            const formState = getValues();
+            const formNewState = {
+              ...getValues(),
+              [dataIndex]: !isNullOrUndefined(formState[dataIndex]) ? formState[dataIndex] : undefined
+            };
+            // @ts-ignore
+            const prevState = record[dataIndex] ?? undefined;
+            const newState = val ?? undefined;
+            handleCellChange?.({
+              key,
+              field: column.field ?? column.field,
+              record: formNewState,
+              prevState,
+              newState,
+              option: option,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          }
+          // autoDestroy={true}
+          ,
+          showSearch: true,
+          defaultOpen: column.field === startCell?.colId,
+          autoFocus: column.field === startCell?.colId,
+          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
+          valueSelectAble: true,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
+          allowClear: column.isClearable ?? false,
+          maxTagCount: 'responsive',
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
+          optionFilterProp: "label",
+          popupClassName: 'be-popup-container',
+          loadOptions: loadOptions,
+          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'
+          },
+          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'
+              });
+            }
+          },
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${tableId}-tooltip-error`
+        });
+      case 'treeSelect':
+        const newTreeData = convertLabelToTitle(optionsTree);
+        let valueTreeSelect = value;
+        if (fieldValue) {
+          // @ts-ignore
+          valueTreeSelect = record[fieldValue] ?? value;
+        }
+        return /*#__PURE__*/React.createElement(TreeSelect, {
+          id: `col${indexCol}-record${indexRow}`,
+          className: 'be-tree-select',
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          value: valueTreeSelect ?? undefined,
+          dropdownStyle: {
+            maxHeight: 400,
+            overflow: 'auto'
+          },
+          treeData: newTreeData,
+          placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
+          treeDefaultExpandAll: true,
+          defaultOpen: column.field === startCell?.colId,
+          autoFocus: column.field === startCell?.colId,
+          virtual: true,
+          allowClear: true,
+          showSearch: true,
+          maxTagCount: column?.editSelectSettings?.showItems,
+          maxTagPlaceholder: 2,
+          treeTitleRender: column?.editSelectSettings?.formatOptionLabel,
+          showCheckedStrategy: SHOW_PARENT,
+          multiple: column?.editSelectSettings?.selectMode === 'checkbox' || column?.editSelectSettings?.isMulti
+          // fieldNames={{label: inputKey ? inputKey : 'title', value: keySelect, children: 'children'}}
+          ,
+          treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox',
+          filterTreeNode: filterTreeNode,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
+          onSelect: (val, option) => {
+            onChange(val);
+            const formState = getValues();
+            // const itemState = getValues(dataIndex)
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = val;
+            handleCellChange?.({
+              key,
+              field: column.field,
+              record: formState,
+              prevState,
+              newState,
+              option: option,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          },
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${tableId}-tooltip-error`
+        });
+      case 'checkbox':
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: column.align ?? 'center',
+            paddingInline: 5,
+            height: '100%',
+            width: '100%'
+          }
+        }, /*#__PURE__*/React.createElement(Checkbox, {
+          checked: Boolean(value)
+          // style={{ textAlign: column.align ?? 'left' }}
+          ,
+          onChange: val => {
+            const newVal = typeof value === "number" ? parseBooleanToValue(val.target.checked, typeof value) : val.target.checked;
+            onChange(newVal);
+            const formState = getValues();
+            handleCellChange?.({
+              key,
+              record: formState,
+              option: value,
+              prevState: value,
+              newState: newVal,
+              field: column.field ?? column.field,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          },
+          disabled: isDisable(column, record) ?? false
+        }));
+      case 'form':
+        const valueForm = value;
+        return /*#__PURE__*/React.createElement(EditForm, {
+          rowData: record,
+          column: column,
+          t: t,
+          id: `col${indexCol}-record${indexRow}`,
+          value: valueForm,
+          fieldKey: column.editFromSettings?.fieldKey,
+          indexRow: indexRow
+
+          // cellFocus={column.field === cellEditing?.column.field}
+          ,
+
+          onChange: val => {
+            const formState = getValues();
+
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = val;
+            handleCellChange?.({
+              key,
+              field: column.field,
+              record: {
+                ...formState,
+                [column.field ?? '']: val
+              },
+              prevState,
+              newState,
+              option: val,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          }
+          // cellEditing={cellEditing}
+
+          // menuPortalTarget={tableContainerRef}
+          // classNamePrefix={column.classElement ?? 'select'}
+          ,
+          placeholder: t ? t(column.placeholder ? column.placeholder : '') : column.placeholder ? column.placeholder : '',
+          menuWidth: column.editFromSettings?.menuWidth,
+          menuHeight: column.editFromSettings?.menuHeight
+        });
+
+      // case 'file':
+      //   const valueFile = record[dataIndex]
+      //   return (
+      //
+      //
+      //       <InputFile
+      //         value={valueFile}
+      //         uploading={column.uploading}
+      //         allowedExtensions={column.allowedExtensions}
+      //         asyncUploadSettings={column.asyncUploadSettings}
+      //         disable={isDisable(col, record)}
+      //         onChange={(val: string) => {
+      //
+      //           const newValue = Array.isArray(val) ? val.map((it: any) => it) : val
+      //           const newrecordData = {
+      //             ...record,
+      //             [dataIndex]: newValue
+      //           }
+      //           handleCellChange(val, newValue, newrecordData, col, indexRow, indexCol)
+      //         }}
+      //
+      //
+      //       />
+      //
+      //
+      //   )
+
+      case 'color':
+        const color = isColor(value) ? value : '#ffffff';
+        const presets = genPresets({
+          blue,
+          red,
+          green,
+          cyan
+        });
+        return /*#__PURE__*/React.createElement(ColorPicker, {
+          value: color,
+          allowClear: column.isClearable ?? true,
+          onChangeComplete: valueColor => {
+            onChange(`#${valueColor.toHex()}`);
+            const formState = getValues();
+            handleCellChange?.({
+              key,
+              field,
+              option: `#${valueColor.toHex()}`,
+              record: formState,
+              prevState: value,
+              newState: `#${valueColor.toHex()}`,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          },
+          presets: presets,
+          panelRender: (_, {
+            components: {
+              Picker,
+              Presets
+            }
+          }) => /*#__PURE__*/React.createElement(Row, {
+            justify: "space-between",
+            wrap: false,
+            className: "custom-panel be-popup-container"
+          }, /*#__PURE__*/React.createElement(Col, {
+            span: 12
+          }, /*#__PURE__*/React.createElement(Presets, null)), /*#__PURE__*/React.createElement(Divider, {
+            type: "vertical",
+            style: {
+              height: 'auto'
+            }
+          }), /*#__PURE__*/React.createElement(Col, {
+            flex: "auto"
+          }, /*#__PURE__*/React.createElement(Picker, null)))
+        });
+
+      // case 'image':
+      //   let image = record[dataIndex]
+      //   return (
+      //     <ImageUpload
+      //       id={`col${indexCol}-record${indexRow}`}
+      //       defaultImage={image}
+      //       width={column.width}
+      //       height={38}
+      //       onKeyDown={(val: any, path: string) => {
+      //         const checkKey = checkKeyDown(val, col, indexRow + 1, indexCol + 1)
+      //         if (checkKey === 'ArrecordDown' || checkKey === 'ArrecordUp' || checkKey === 'Enter') {
+      //           let newVal = ''
+      //           if (newVal != record[dataIndex]) {
+      //             record[dataIndex] = path
+      //             // handleDataChange(path, record, col, indexRow, indexCol)
+      //             handleCellChange(path, record, col, indexRow, indexCol)
+      //           }
+      //         }
+      //       }}
+      //     />
+      //   )
+
+      case 'numeric':
+        const thousandSeparator = cellFormat?.thousandSeparator;
+        const decimalSeparator = cellFormat?.decimalSeparator;
+
+        // let floatValue = value
+
+        const numericFormatProps = {
+          value,
+          thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+          decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+          decimalScale: cellFormat?.decimalScale ?? undefined,
+          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false,
+          allowNegative: cellFormat?.allowNegative ?? true,
+          prefix: cellFormat?.prefix ?? undefined,
+          suffix: cellFormat?.suffix ?? undefined
+        };
+        return /*#__PURE__*/React.createElement(NumericFormat, _extends({
+          id: `col${indexCol}-record${indexRow}`
+        }, numericFormatProps, {
+          min: column.min,
+          max: column.max,
+          customInput: Input
+          // valueIsNumericString={true}
+          ,
+          placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.textPlaceholder,
+          autoComplete: 'off',
+          className: classNames('be-cell-editing  rounded-0 input-element', {
+            'is-invalid': isInvalid,
+            'be-cell-edit-align-center': column.align === 'center',
+            'be-cell-edit-align-left': column.align === 'left',
+            'be-cell-edit-align-right': !column.align || column.align === 'right'
+          }),
+          autoFocus: column.field === startCell?.colId,
+          onValueChange: values => {
+            onChange(values?.floatValue || 0);
+          },
+          onBlur: () => {
+            const formState = getValues();
+            const itemState = getValues(dataIndex);
+
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = value;
+            // @ts-ignore
+            if (itemState !== record[dataIndex]) {
+              handleCellChange?.({
+                key: key,
+                field,
+                option: newState,
+                record: formState,
+                prevState,
+                newState,
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          },
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${tableId}-tooltip-error`
+        }));
+      default:
+        return /*#__PURE__*/React.createElement(TextArea, {
+          id: `col${indexCol}-record${indexRow}`,
+          style: {
+            textAlign: column.align,
+            resize: 'none',
+            height: '100%'
+          },
+          disabled: isDisable(column, record) ?? false,
+          className: classNames('be-cell-editing rounded-0 input-element'),
+          placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.textPlaceholder,
+          value: !isNullOrUndefined(value) ? value : '',
+          onBlur: () => {
+            const formState = getValues();
+            // const itemState = getValues(dataIndex)
+
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = value;
+            if (newState !== prevState) {
+              handleCellChange?.({
+                key: key,
+                record: formState,
+                option: value,
+                prevState,
+                newState,
+                field,
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          },
+          onPressEnter: () => {
+            const formState = getValues();
+            const newState = getValues(dataIndex);
+            // @ts-ignore
+            const prevState = record[dataIndex];
+
+            // @ts-ignore
+
+            handleCellChange?.({
+              key: key,
+              newState,
+              prevState,
+              record: formState,
+              indexCol,
+              indexRow,
+              type: 'enter'
+            });
+            // }
+          },
+          onChange: onChange,
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${tableId}-tooltip-error`,
+          autoSize: {
+            minRows: 1,
+            maxRows: 1
+          }
+        });
+    }
+  };
+  return /*#__PURE__*/React.createElement("form", {
+    onSubmit: handleSubmit(onSubmit)
+  }, /*#__PURE__*/React.createElement(Controller, {
+    name: dataIndex,
+    control: control,
+    render: ({
+      field: {
+        value,
+        onChange
+      }
+    }) => inputNode(value, onChange)
+  }));
+};
+export default EditCell;