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

es-grid-template

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useContext } from "react";
import { Button, ColorPicker, DatePicker, Divider, Input, TimePicker, Row, Col } from "antd";
import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertArrayWithIndent, convertDateToDayjs,
// convertDayjsToDate,
convertLabelToTitle,
// customWeekStartEndFormat,
getDatepickerFormat, getTemplate, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets, getFormat
// isEditable,
// convertDayjsToDate
} from "./hooks";
// import moment from "moment";
// import dayjs from "dayjs";
// import {TreeSelect} from "antd";
import classNames from "classnames";
import { NumericFormat } from "react-numeric-component";
import { TableContext } from "./useContext";
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 "./async-select";
import { AsyncTableSelect } from "./async-table-select";
import { cyan, green, red, blue } from '@ant-design/colors';

// import moment from "moment";

const {
  SHOW_PARENT
} = TreeSelect;
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,
    // title,
    editType,
    record,
    index,
    children,
    column,
    indexRow,
    indexCol,
    cellEditing,
    // errors,
    ...restProps
  } = props;
  const {
    format,
    control,
    getValues,
    handleCellChange,
    getRowKey,
    errors,
    id
  } = 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;

    // 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.dataIndex) : propsOptions;
    const options = validateOption ? validateOption(record, column.dataIndex) : selectOptions ?? [];
    const optionsTree = validateOption ? convertArrayWithIndent(validateOption(record, column.dataIndex)) : selectOptions ? convertArrayWithIndent(selectOptions) : [];

    // const currt = flatColumns2()

    switch (editType) {
      case 'date':
        return /*#__PURE__*/React.createElement(DatePicker, {
          ref: datePickerRef,
          format: {
            format: dateFormat,
            type: 'mask'
          }
          // locale={buddhistLocale}
          ,
          style: {
            width: '100%',
            height: '100%'
          },
          value: date,
          onBlur: () => {
            const formState = getValues();
            const itemState = getValues(dataIndex);
            // @ts-ignore
            const prevState = record[dataIndex];
            const newState = itemState;
            const key = getRowKey?.(record, index);
            if (newState !== prevState) {
              handleCellChange?.({
                key: key,
                field: column.field ?? column.dataIndex,
                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

          // onOpenChange={(open) => {
          //   console.log(open)
          //   if (open) {
          //     handleSubmit(onSubmit)
          //   }
          // }}
          ,

          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-form-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,
          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;
            // console.log('newDateValue', newDateValue)
            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;
            const key = getRowKey?.(record, index);
            if (prevState !== newState) {
              handleCellChange?.({
                key: key,
                field: column.field ?? column.dataIndex,
                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-form-error`
        });
      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-form-error`
        });
      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-form-error`
        });
      case 'time':
        const timeFormat = getDatepickerFormat(editType, cellFormat);
        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[column.dataIndex]) ? dayjs(record[column.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,
          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-form-error`
        });
      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[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0 ? options.filter(val => record[column.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,
          onChange: (val, option) => {
            onChange(val ?? '');
            const formState = getValues();
            // const itemState = getValues(dataIndex)
            // @ts-ignore
            const prevState = record[dataIndex];
            const newState = val;
            handleCellChange?.({
              key: getRowKey?.(record, index),
              field: column.field ?? column.dataIndex,
              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 === cellEditing?.column.field
          // autoFocus={true}
          ,
          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'
              }, toolbarItems.map(it => {
                return /*#__PURE__*/React.createElement("div", {
                  key: it.key,
                  className: 'toolbar-item',
                  onClick: () => toolbarClick?.({
                    item: it,
                    column
                  })
                }, it.template ? getTemplate(it.template) : /*#__PURE__*/React.createElement(Button, {
                  className: "toolbar-item-btn"
                }, it.icon && getTemplate(it.icon), it.title));
              })));
            } else {
              return /*#__PURE__*/React.createElement(React.Fragment, null, " ", menu);
            }
          },
          filterOption: filterOption,
          fieldNames: fieldNames ? fieldNames : {
            value: keySelect,
            label: inputKey ?? 'label'
          },
          "data-tooltip-content": message,
          "data-tooltip-id": `${id}-tooltip-form-error`
        });
      case 'select':
        let valueSelect = value;
        if (fieldValue) {
          // @ts-ignore
          valueSelect = record[fieldValue] ?? value;
        }
        if (isMulti || selectMode === 'checkbox') {
          // @ts-ignore
          valueSelect = !isNullOrUndefined(record[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0 ? options.filter(val => record[column.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: getRowKey?.(record, index),
              field: column.field ?? column.dataIndex,
              record: formState,
              prevState,
              newState,
              option: option,
              indexCol,
              indexRow,
              type: 'blur'
            });
          },
          showSearch: true,
          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
          valueSelectAble: true,
          defaultOpen: column.field === cellEditing?.column.field
          // autoFocus={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',
          status: isInvalid ? 'error' : undefined,
          filterOption: filterOption,
          fieldNames: fieldNames ? fieldNames : {
            value: keySelect,
            label: inputKey ?? 'label'
          },
          "data-tooltip-content": message,
          "data-tooltip-id": `${id}-tooltip-form-error`
        });
      case 'asyncSelect':
        let valueAsyncSelect = value;
        if (fieldValue) {
          // @ts-ignore
          valueAsyncSelect = record[fieldValue] ?? value;
        }
        if (isMulti || selectMode === 'checkbox') {
          // @ts-ignore
          valueAsyncSelect = !isNullOrUndefined(record[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0 ? options.filter(val => record[column.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: getRowKey?.(record, index),
              field: column.field ?? column.dataIndex,
              record: formState,
              prevState,
              newState,
              option: option,
              indexCol,
              indexRow,
              type: 'blur'
            });
          },
          showSearch: true,
          defaultOpen: column.field === cellEditing?.column.field
          // autoFocus={true}
          ,
          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'
          },
          "data-tooltip-content": message,
          "data-tooltip-id": `${id}-tooltip-form-error`
        });
      case 'treeSelect':
        // let valueTreeSelect

        const newTreeData = convertLabelToTitle(optionsTree);
        // @ts-ignore
        // const valueTreeSelect = column?.editSelectSettings?.isMulti ? (Array.isArray(record[column.dataIndex]) ? record[column.dataIndex] : []) : record[column.dataIndex]

        let valueTreeSelect = value;
        if (fieldValue) {
          // @ts-ignore
          valueTreeSelect = record[fieldValue] ?? value;
        }
        if (isMulti || selectMode === 'checkbox') {
          // @ts-ignore
          valueTreeSelect = !isNullOrUndefined(record[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0 ? options.filter(val => record[column.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 === cellEditing?.column.field
          // autoFocus={true}
          ,
          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: getRowKey?.(record, index),
              field: column.field ?? column.dataIndex,
              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-form-error`
        });
      case 'checkbox':
        return /*#__PURE__*/React.createElement("div", {
          style: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: column.align ?? 'left',
            paddingInline: 5,
            height: '100%',
            width: '100%'
          }
        }, /*#__PURE__*/React.createElement(Checkbox, {
          checked: Boolean(value)
          // style={{ textAlign: column.align ?? 'left' }}
          ,
          onChange: val => {
            const newVal = parseBooleanToValue(val.target.checked, typeof value);
            onChange(newVal);
            const key = getRowKey?.(record, index);
            const formState = getValues();
            handleCellChange?.({
              key: key,
              record: formState,
              option: value,
              prevState: value,
              newState: newVal,
              field: column.field ?? column.dataIndex,
              indexCol,
              indexRow,
              type: 'blur'
            });
          },
          disabled: isDisable(column, record) ?? false
        }));

      // case 'form':
      //
      //   const valueForm = record[column.dataIndex]
      //
      //   return (
      //     <EditForm
      //       column={col}
      //       t={t}
      //       id={`col${indexCol}-record${indexRow}`}
      //       value={valueForm}
      //       fieldKey={'name'}
      //       recordData={record}
      //       indexRow={indexRow}
      //       cellFocus={cellFocus}
      //       onChange={(val: any) => {
      //         // record[column.dataIndex] = val
      //         const newrecordData = {
      //           ...record,
      //           [column.dataIndex]: val
      //         }
      //         handleCellChange(val, val, newrecordData, col, indexRow, indexCol)
      //       }}
      //       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[column.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,
      //             [column.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 key = getRowKey?.(record, index);
            const formState = getValues();
            handleCellChange?.({
              key: key,
              field: column.field ?? column.dataIndex,
              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[column.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[column.dataIndex]) {
      //             record[column.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 ? 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'
          }),
          onValueChange: values => {
            onChange(values?.floatValue);
          },
          onBlur: () => {
            const formState = getValues();
            const itemState = getValues(dataIndex);

            // @ts-ignore
            const prevState = record[dataIndex];
            const newState = value;
            const key = getRowKey?.(record, index);
            // @ts-ignore
            if (itemState !== record[dataIndex]) {
              handleCellChange?.({
                key: key,
                field: column.field ?? column.dataIndex,
                option: newState,
                record: formState,
                prevState,
                newState,
                indexCol,
                indexRow,
                type: 'blur'
              });
            }
          },
          "data-tooltip-content": message,
          "data-tooltip-id": `${id}-tooltip-form-error`
        }));
      default:
        return /*#__PURE__*/React.createElement(Input, {
          id: `col${indexCol}-record${indexRow}`,
          style: {
            textAlign: column.align
          }
          // @ts-ignore
          // value={!isNullOrUndefined(record[column.dataIndex]) ? record[column.dataIndex] : ''}
          ,
          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;
            //
            // console.log('newState', newState)
            // console.log('prevState', prevState)
            const key = getRowKey?.(record, index);
            // @ts-ignore
            if (newState !== prevState) {
              handleCellChange?.({
                key: key,
                record: formState,
                option: value,
                prevState,
                newState,
                field: column.field ?? column.dataIndex,
                indexCol,
                indexRow,
                type: 'blur'
              });
            }
          },
          onPressEnter: () => {
            const key = getRowKey?.(record, index);
            const formState = getValues();
            const newState = getValues(dataIndex);
            // @ts-ignore
            const prevState = record[dataIndex];
            // @ts-ignore
            // if (itemState !== record[dataIndex]) {

            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-form-error`
        });
    }
  };
  return /*#__PURE__*/React.createElement("div", restProps, editing ? /*#__PURE__*/React.createElement(Controller, {
    name: dataIndex,
    control: control,
    render: ({
      field: {
        value,
        onChange
      }
    }) => inputNode(value, onChange)
  }) : children);
};
export default EditableCell;