es-grid-template 1.8.70 → 1.8.72

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

@@ -0,0 +1,1066 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useContext } from "react";
+import { ColorPicker, DatePicker, Divider, Input, TimePicker, Row, Col } from "antd";
+import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertArrayWithIndent, convertDateToDayjs, convertLabelToTitle, getDatepickerFormat, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets, getFormat } from "../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";
+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 EditableCell = props => {
+  const {
+    // t,
+    // editing,
+    dataIndex,
+    editType,
+    record,
+    // index,
+    // children,
+    column,
+    indexRow,
+    indexCol
+    // cellEditing,
+    // ...restProps
+  } = props;
+  const {
+    format,
+    control,
+    getValues,
+    handleCellChange,
+    errors,
+    id,
+    startCell,
+    rowKey,
+    t
+  } = useContext(TableContext);
+  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 {
+      fieldValue,
+      columns: selectColumns,
+      isMulti,
+      selectMode,
+      menuWidth,
+      fieldNames,
+      toolbarItems,
+      filterOption,
+      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 currt = flatColumns2()
+
+    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
+
+          // locale={buddhistLocale}
+          ,
+          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 ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          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": `${id}-tooltip-error`
+        });
+      case 'datetime':
+        return /*#__PURE__*/React.createElement(DatePicker
+        // id={`col${indexCol}-record${indexRow}`}
+        , {
+          ref: dateTimePickerRef,
+          format: {
+            format: dateFormat,
+            type: 'mask'
+          }
+          // locale={buddhistLocale}
+          ,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          showTime: true
+          // value={date}
+          ,
+          defaultValue: date,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          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
+              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'
+              });
+            }
+          },
+          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':
+      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 ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          disabled: isDisable(column, record) ?? false,
+          maxDate: maxDateValue1,
+          minDate: minDateValue1,
+          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 '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 ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          disabled: isDisable(column, record) ?? false,
+          maxDate: maxWeekValue,
+          minDate: minWeekValue,
+          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 'time':
+        const timeFormat = getDatepickerFormat(editType, cellFormat);
+        const time = value ? dayjs(value, timeFormat) : null;
+        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, {
+          format: {
+            format: timeFormat,
+            type: 'mask'
+          },
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          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": `${id}-tooltip-error`,
+          autoFocus: column.field === startCell?.colId,
+          defaultOpen: column.field === startCell?.colId,
+          onChange: (newDate, dateString) => {
+            // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+            onChange(dateString);
+            setTimeout(() => {
+              // @ts-ignore
+              dateTimePickerRef.current?.focus();
+            }, 0);
+          },
+          onBlur: () => {
+            const formState = getValues();
+            const itemState = getValues(dataIndex);
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = itemState;
+            if (prevState !== newState) {
+              handleCellChange?.({
+                key: key,
+                field: column.field ?? column.field,
+                record: formState,
+                prevState,
+                newState,
+                option: newState,
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          }
+        });
+      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 = value;
+        if (fieldValue) {
+          // @ts-ignore
+          valueSelectTable = record[fieldValue] ?? value;
+        }
+
+        // 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
+        // id={`col${indexCol}-record${indexRow}`}
+        , {
+          columns: columnsTable,
+          options: options,
+          defaultOptions: options,
+          value: valueSelectTable,
+          rowData: record,
+          autoDestroy: true,
+          onChange: (val, option) => {
+            onChange(val ?? '');
+            const formState = getValues();
+            // const itemState = getValues(dataIndex)
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = val;
+            handleCellChange?.({
+              // @ts-ignore
+              key: record[rowKey],
+              field: column.field ?? column.field,
+              record: formState,
+              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
+
+          // defaultOpen={column.field === cellEditing?.column.field}
+          ,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          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, /*#__PURE__*/React.createElement(Divider, {
+                style: {
+                  margin: '8px 0'
+                }
+              }), /*#__PURE__*/React.createElement("div", {
+                className: 'toolbar-control d-flex justify-content-end'
+              }));
+            } else {
+              return /*#__PURE__*/React.createElement(React.Fragment, null, " ", menu);
+            }
+          },
+          filterOption: 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": `${id}-tooltip-error`
+        });
+      case 'select':
+        let valueSelect = value;
+        if (fieldValue) {
+          // @ts-ignore
+          valueSelect = record[fieldValue] ?? value;
+        }
+
+        // if (isMulti || selectMode === 'checkbox') {
+        //   // @ts-ignore
+        //   valueSelect = (!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(Select, {
+          options: options,
+          value: valueSelect,
+          onChange: (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 ?? column.field,
+              record: formState,
+              prevState,
+              newState,
+              option: option,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          },
+          autoDestroy: true,
+          showSearch: true,
+          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
+          valueSelectAble: true,
+          defaultOpen: column.field === startCell?.colId,
+          autoFocus: column.field === startCell?.colId
+
+          // defaultOpen={column.field === cellEditing?.column.field}
+          ,
+
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          allowClear: column.isClearable ?? false,
+          maxTagCount: 'responsive',
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
+          optionFilterProp: "label",
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          filterOption: 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": `${id}-tooltip-error`
+        });
+      case 'asyncSelect':
+        let valueAsyncSelect = value;
+        if (fieldValue) {
+          // @ts-ignore
+          valueAsyncSelect = record[fieldValue] ?? value;
+        }
+
+        // if (isMulti || selectMode === 'checkbox') {
+        //   // @ts-ignore
+        //   valueAsyncSelect = (!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(AsyncSelect, {
+          options: options,
+          defaultOptions: options,
+          value: valueAsyncSelect,
+          onChange: (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 ?? column.field,
+              record: formState,
+              prevState,
+              newState,
+              option: option,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          },
+          autoDestroy: true,
+          showSearch: true,
+          defaultOpen: column.field === startCell?.colId,
+          autoFocus: column.field === startCell?.colId
+
+          // defaultOpen={column.field === cellEditing?.column.field}
+          ,
+          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
+          valueSelectAble: true,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          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 (
+          //       <>
+          //         {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,
+          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": `${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',
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          value: valueTreeSelect,
+          dropdownStyle: {
+            maxHeight: 400,
+            overflow: 'auto'
+          },
+          treeData: newTreeData,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          treeDefaultExpandAll: true,
+          defaultOpen: column.field === startCell?.colId,
+          autoFocus: column.field === startCell?.colId
+
+          // defaultOpen={column.field === cellEditing?.column.field}
+          ,
+          virtual: true,
+          allowClear: true,
+          showSearch: true
+          // maxTagTextLength={column?.editSelectSettings?.showItems}
+          ,
+          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": `${id}-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}`
+          // value={value ? numericFormatter(value.toString(), numericFormatProps) : ''}
+          // value={value}
+        }, numericFormatProps, {
+          min: column.min,
+          max: column.max,
+          customInput: Input
+          // valueIsNumericString={true}
+          ,
+          placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
+          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": `${id}-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 ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
+          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": `${id}-tooltip-error`,
+          autoSize: {
+            minRows: 1,
+            maxRows: 1
+          }
+        });
+    }
+  };
+  return /*#__PURE__*/React.createElement(Controller, {
+    name: dataIndex,
+    control: control,
+    render: ({
+      field: {
+        value,
+        onChange
+      }
+    }) => inputNode(value, onChange)
+  });
+};
+export default EditableCell;