es-grid-template/es/table-component/body/EditableCell.js

es-grid-template

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useContext } from "react";
import { DatePicker, TimePicker } from "rc-master-ui";
import { Divider, Row, Col, Input, ColorPicker } 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";
import { useLocale } from "rc-master-ui/es/locale";
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 [tableLocal] = useLocale('Table');
  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,
          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": `${id}-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,
          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 && 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": `${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 && 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": `${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 && 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": `${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;
        }
        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 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,
          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, /*#__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;
        }
        return /*#__PURE__*/React.createElement(Select, {
          options: options,
          value: valueSelect ?? undefined,
          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,
          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: 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;
        }
        return /*#__PURE__*/React.createElement(AsyncSelect, {
          options: options,
          defaultOptions: options,
          value: valueAsyncSelect ?? undefined,
          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,
          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 (
          //       <>
          //         {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':
        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": `${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}`
        }, 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": `${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 && 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": `${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;