es-grid-template 0.0.7 → 0.0.13

package/es/grid-component/EditableCell.js

@@ -0,0 +1,842 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useContext } from "react";
+import { Button, DatePicker, Divider, Input, TimePicker } from "antd";
+import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertArrayWithIndent, convertDateToDayjs,
+// convertDayjsToDate,
+convertLabelToTitle,
+// customWeekStartEndFormat,
+getDatepickerFormat, getTemplate, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate
+// convertDayjsToDate
+} from "./hooks";
+// import moment from "moment";
+// import dayjs from "dayjs";
+import { TreeSelect } from "antd";
+import { AsyncTableSelect } from "./async-table-select";
+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 { Select } from "rc-master-ui";
+
+// import moment from "moment";
+
+const {
+  SHOW_PARENT
+} = TreeSelect;
+const filterTreeNode = (input, treeNode) => {
+  const {
+    title,
+    value
+  } = treeNode;
+  return title.toLowerCase().includes(input.toLowerCase()) || value.toLowerCase().includes(input.toLowerCase());
+};
+const EditableCell = props => {
+  const {
+    t,
+    editing,
+    dataIndex,
+    title,
+    editType,
+    record,
+    index,
+    children,
+    column,
+    indexRow,
+    indexCol,
+    ...restProps
+  } = props;
+  const {
+    rowKey,
+    format,
+    control,
+    getValues,
+    handleCellChange
+  } = useContext(TableContext);
+  const datePickerRef = React.useRef(null);
+  const dateTimePickerRef = React.useRef(null);
+  // const timePickerRef = React.useRef(null);
+
+  const isInvalid = false;
+  const keySelect = checkFieldKey(column?.editSelectSettings?.fieldKey);
+  const inputKey = column?.editSelectSettings?.inputKey;
+  const options = column?.editSelectSettings?.validateOption ? column?.editSelectSettings?.validateOption(record, column.dataIndex) : column?.editSelectSettings?.options ? column?.editSelectSettings?.options : [];
+  const optionsTree = column?.editSelectSettings?.validateOption ? convertArrayWithIndent(column?.editSelectSettings?.validateOption(record, column.dataIndex)) : column?.editSelectSettings?.options ? convertArrayWithIndent(column?.editSelectSettings?.options) : [];
+  const inputNode = (value, onChange) => {
+    const dateFormat = getDatepickerFormat(editType, column);
+    const date = !isEmpty(value) ? convertDateToDayjs(new Date(value), dateFormat) : null;
+    const maxDate = convertDateToDayjs(column.maxDate, dateFormat) ?? undefined;
+    const minDate = convertDateToDayjs(column.minDate, dateFormat) ?? undefined;
+    switch (editType) {
+      case 'date':
+        return /*#__PURE__*/React.createElement(DatePicker
+        // id={`col${indexCol}-record${indexRow}`}
+        , {
+          ref: datePickerRef,
+          format: {
+            format: dateFormat,
+            type: 'mask'
+          }
+
+          // locale={buddhistLocale}
+          ,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          value: date
+          // defaultValue={date}
+          ,
+
+          onBlur: () => {
+            const formState = getValues();
+            const itemState = getValues(dataIndex);
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = itemState;
+            if (newState !== prevState) {
+              // @ts-ignore
+              handleCellChange?.({
+                key: record[rowKey],
+                record: formState,
+                prevState,
+                newState,
+                type: 'blur'
+              });
+            }
+          },
+          placeholder: column.placeholder,
+          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'
+        });
+      case 'datetime':
+        // const dateTimeFormat  = getDatepickerFormat(editType, column)
+        // // @ts-ignore
+        // // const dateTimeValue = !isEmpty(record[column.dataIndex]) ? convertDateToDayjs(new Date(record[column.dataIndex]), dateTimeFormat) : null
+        // const maxDateTime =  convertDateToDayjs(column.maxDate, dateTimeFormat) ??  undefined
+        // const minDateTime =  convertDateToDayjs(column.minDate, dateTimeFormat) ??  undefined
+
+        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: column.placeholder,
+          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) {
+              // @ts-ignore
+              handleCellChange?.({
+                key: record[rowKey],
+                record: formState,
+                prevState,
+                newState,
+                type: 'blur'
+              });
+            }
+          },
+          popupClassName: 'be-popup-container'
+        });
+      case 'month':
+      case 'quarter':
+      case 'year':
+        const pickerFormat = getDatepickerFormat(editType, column);
+        // @ts-ignore
+        // const dateValue = !isEmpty(record[column.dataIndex]) ? dayjs(record[column.key], pickerFormat) : null
+        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%'
+          }
+          // defaultValue={dateValue}
+          ,
+          picker: editType,
+          placeholder: column.placeholder,
+          disabled: isDisable(column, record) ?? false,
+          maxDate: maxDateValue1,
+          minDate: minDateValue1
+          // onChange={(dValue, dateString) => {
+          //   const newDateValue = dateString ? dateString : null
+          //
+          //   // record[column.dataIndex] = newDateValue
+          //   // handleCellChange(newDateValue, newDateValue,  record, col, indexRow, indexCol)
+          // }}
+          ,
+          popupClassName: 'be-popup-container'
+        });
+      case 'week':
+        const weekFormat = getDatepickerFormat(editType, column);
+
+        // @ts-ignore
+        // const weekValue = !isEmpty(record[column.dataIndex]) ? dayjs(record[column.dataIndex], weekFormat) : null
+        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%'
+          }
+          // defaultValue={weekValue}
+          ,
+          picker: editType,
+          placeholder: column.placeholder,
+          disabled: isDisable(column, record) ?? false,
+          maxDate: maxWeekValue,
+          minDate: minWeekValue
+          // onChange={(dateValue, dateString) => {
+          //   const newDateValue = dateString ? dateString : null
+          //
+          //   record[column.dataIndex] = newDateValue
+          //   handleCellChange(newDateValue, newDateValue,  record, col, indexRow, indexCol)
+          // }}
+          ,
+          popupClassName: 'be-popup-container'
+        });
+      case 'time':
+        const timeFormat = getDatepickerFormat(editType, column);
+        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'
+          }
+          // defaultValue={timeValue}
+          ,
+          maxDate: maxTime,
+          minDate: minTime,
+          disabled: isDisable(column, record) ?? false
+          // onChange={(values: any, timeString) => {
+          //   const newTimeValue = timeString ? timeString : null
+          //   const newrecordData = {
+          //     ...record,
+          //     // [column.dataIndex]: newTimeValue
+          //   }
+          //
+          //   // handleCellChange(newTimeValue, newTimeValue, newrecordData, col, indexRow, indexCol)
+          // }}
+          ,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          popupClassName: 'be-popup-container'
+        });
+      case 'selectTable':
+        const rr = column?.editSelectSettings && column?.editSelectSettings.columns ? column?.editSelectSettings.columns : [];
+        const columnsTable = rr.map(colSelect => {
+          return {
+            title: colSelect.headerTemplate ? colSelect.headerTemplate : t ? t(colSelect.headerText) : colSelect.headerText,
+            dataIndex: 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.dataIndex,
+              index: ind,
+              [colSelect.dataIndex]: text
+            })) : undefined,
+            width: colSelect.width,
+            ellipsis: true,
+            align: colSelect.textAlign
+          };
+        });
+
+        // let valueSelectTable
+        //
+        // if (column?.editSelectSettings?.isMulti || column?.editSelectSettings?.selectMode === 'checkbox') {
+        //   valueSelectTable = (!isNullOrUndefined(record[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0) ? options.filter((val: any) => record[column.dataIndex]?.includes(val[keySelect])) : undefined
+        // } else {
+        //   valueSelectTable = record[column?.editSelectSettings?.fieldValue ?? column.dataIndex] ?? ''
+        // }
+        //
+        // if (!valueSelectTable && column?.editSelectSettings?.defaultValue?.(record[column.dataIndex], record)) {
+        //   valueSelectTable = column?.editSelectSettings?.defaultValue(record[column.dataIndex], record)
+        // }
+        //
+        //
+
+        let valueSelectTable;
+        if (column?.editSelectSettings?.isMulti || column?.editSelectSettings?.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;
+        } else {
+          // const find = (!isNullOrUndefined(record[column.dataIndex]) && record[column.dataIndex] !== '') ? options?.find((val: any) => val[keySelect] === record[column?.editSelectSettings?.fieldValue ?? column.dataIndex]) : ''
+          // @ts-ignore
+          const find = !isNullOrUndefined(record[column.dataIndex]) && record[column.dataIndex] !== '' ? options?.find(val => val[keySelect] === record[column.dataIndex]) : '';
+          valueSelectTable = find ? {
+            label: find[column?.editSelectSettings?.inputKey ?? column.dataIndex],
+            // @ts-ignore
+            [column.dataIndex]: find[column?.editSelectSettings?.fieldValue ?? keySelect],
+            key: find[column?.editSelectSettings?.fieldValue ?? keySelect],
+            [keySelect]: find[column?.editSelectSettings?.fieldValue ?? keySelect]
+          } : '';
+        }
+        // @ts-ignore
+        if (!valueSelectTable && column?.editSelectSettings?.defaultValue?.(record[column.dataIndex], record)) {
+          // @ts-ignore
+          valueSelectTable = column?.editSelectSettings?.defaultValue(record[column.dataIndex], record);
+        }
+        return /*#__PURE__*/React.createElement(AsyncTableSelect, {
+          id: `col${indexCol}-record${indexRow}`,
+          columns: columnsTable,
+          options: options,
+          defaultOptions: options
+          // onChange={(val: any, option) => {
+          //   // const newValue = val && (column?.editSelectSettings?.isMulti || column?.editSelectSettings?.selectMode === 'checkbox') ? (val?.map((item: any) => item[keySelect]) ?? []) : (val ? val[keySelect] : null)
+          //   const newrecordData = {
+          //     ...record,
+          //     [column.dataIndex]: val
+          //   }
+          //
+          //   // handleCellChange(option, val, newrecordData, col, indexRow, indexCol)
+          // }}
+          ,
+          showSearch: true,
+          mode: column?.editSelectSettings?.isMulti || column?.editSelectSettings?.selectMode === 'checkbox' ? 'multiple' : undefined,
+          focusToSelectAll: true,
+          selectMode: column?.editSelectSettings?.selectMode,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          value: valueSelectTable,
+          placeholder: t ? t('Select') : 'Select',
+          allowClear: column.isClearable ?? false,
+          maxTagCount: 'responsive',
+          rowKey: keySelect,
+          popupMatchSelectWidth: column?.editSelectSettings?.menuWidth ? column?.editSelectSettings?.menuWidth + 10 : undefined,
+          optionFilterProp: "label",
+          popupClassName: 'be-popup-container'
+          // onPaste={(e: any) => handleOnCellPaste(e, indexRow, indexCol)}
+          ,
+          loadOptions: column?.editSelectSettings?.loadOptions,
+          status: isInvalid ? 'error' : undefined,
+          dropdownRender: menu => {
+            if (column?.editSelectSettings?.toolbarItems && column?.editSelectSettings?.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'
+              }, column?.editSelectSettings?.toolbarItems.map(it => {
+                return /*#__PURE__*/React.createElement("div", {
+                  key: it.key,
+                  className: 'toolbar-item',
+                  onClick: () => column?.editSelectSettings?.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: column?.editSelectSettings?.filterOption,
+          fieldNames: column?.editSelectSettings?.fieldNames ? column?.editSelectSettings?.fieldNames : {
+            value: keySelect,
+            label: column?.editSelectSettings?.inputKey ?? 'label'
+          }
+        });
+      case 'select':
+        // let valueCustomSelect
+        // if (column?.editSelectSettings?.isMulti) {
+        //   valueCustomSelect = (!isNullOrUndefined(record[column.dataIndex]) && record[column.dataIndex]?.length > 0) ? options.filter((val: any) => record[column.dataIndex]?.includes(val[keySelect])) : []
+        // } else {
+        //
+        //   valueCustomSelect = (!isNullOrUndefined(record[column.dataIndex]) && record[column.dataIndex] !== '') ? options?.find((val: any) => val[keySelect] === record[column.dataIndex]) : ''
+        //
+        // }
+        //
+        // if (!valueCustomSelect && column?.editSelectSettings?.defaultValue) {
+        //
+        //   if (column?.editSelectSettings.fieldLabel && record[column?.editSelectSettings.fieldLabel]) {
+        //
+        //     // valueCustomSelect = {...column?.editSelectSettings?.defaultValue(record), label: record[column?.editSelectSettings.fieldLabel]}
+        //     valueCustomSelect = {...column?.editSelectSettings?.defaultValue(record[column.dataIndex], record), label: record[column?.editSelectSettings.fieldLabel]}
+        //
+        //   } else {
+        //     valueCustomSelect = column?.editSelectSettings?.defaultValue(record[column.dataIndex], record)
+        //
+        //   }
+        //
+        // }
+
+        return /*#__PURE__*/React.createElement(Select, {
+          id: `col${indexCol}-record${indexRow}`,
+          showSearch: true,
+          valueSelectAble: true
+
+          // isMulti={column?.editSelectSettings?.isMulti}
+          ,
+          style: {
+            width: '100%'
+          },
+          value: value
+          // options={options}
+          ,
+          options: [{
+            value: 'jack',
+            label: 'Jack'
+          }, {
+            value: 'lucy',
+            label: 'Lucy'
+          }, {
+            value: 'Yiminghe',
+            label: 'yiminghe'
+          }, {
+            value: 'disabled',
+            label: 'Disabled',
+            disabled: true
+          }],
+          placeholder: t ? t('Select') : 'Select',
+          onChange: (val, item) => {
+            console.log('item', item);
+            onChange(val);
+          },
+          onBlur: () => {
+            const formState = getValues();
+            // const itemState = getValues(dataIndex)
+
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            // const newState = value
+
+            // console.log('prevState', prevState)
+            // console.log('newState', newState)
+            // console.log('itemState', itemState)
+            if (value !== prevState) {
+              // @ts-ignore
+              handleCellChange?.({
+                key: record[rowKey],
+                record: formState,
+                type: 'blur'
+              });
+            }
+          },
+          popupClassName: 'be-popup-container'
+        });
+      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];
+        return /*#__PURE__*/React.createElement(TreeSelect, {
+          id: `col${indexCol}-record${indexRow}`,
+          className: 'be-tree-select',
+          style: {
+            width: '100%'
+          },
+          value: valueTreeSelect,
+          dropdownStyle: {
+            maxHeight: 400,
+            overflow: 'auto'
+          },
+          treeData: newTreeData,
+          placeholder: t ? t('Select') : 'Select',
+          treeDefaultExpandAll: true,
+          virtual: true,
+          allowClear: 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'
+          // getPopupContainer={() => tableWrapperRef.current}
+          ,
+          filterTreeNode: filterTreeNode
+          // onChange={(val: any) => {
+          //   record[column.dataIndex] = val
+          //   handleCellChange(val, val, record, col, indexRow, indexCol)
+          //
+          // }}
+          ,
+
+          status: isInvalid ? 'error' : undefined
+        });
+      case 'checkbox':
+        return /*#__PURE__*/React.createElement(Input
+        // @ts-ignore
+        , {
+          checked: record[column.dataIndex],
+          id: `col${indexCol}-record${indexRow}`,
+          type: "checkbox",
+          style: {
+            textAlign: column.align ?? 'left'
+          }
+          // onChange={(val) => {
+          //   record[column.dataIndex] = val.currentTarget.checked
+          //   handleCellChange(val.currentTarget.checked, val.currentTarget.checked, record, col, indexRow, indexCol)
+          // }}
+          ,
+          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 = record[column.dataIndex]
+
+        return /*#__PURE__*/React.createElement(Input, {
+          type: 'color',
+          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')
+
+          // onChange={(val: any) => {
+          //   if (record[column.dataIndex] !== val.target?.value) {
+          //     record[column.dataIndex] = val.target?.value
+          //   }
+          // }}
+          // onBlur={(val: any) => {
+          //   handleCellChange(val, val.target?.value, record, col, indexRow, indexCol)
+          // }}
+        });
+
+      // 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 = column.format?.thousandSeparator ? column.format?.thousandSeparator : format?.thousandSeparator;
+        const decimalSeparator = column.format?.decimalSeparator ? column.format?.decimalSeparator : format?.decimalSeparator;
+
+        // let floatValue = value
+
+        const numericFormatProps = {
+          value,
+          thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+          decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+          decimalScale: !isEmpty(column.format?.decimalScale) ? column.format?.decimalScale : undefined,
+          fixedDecimalScale: !isEmpty(column.format?.fixedDecimalScale) ? column.format?.fixedDecimalScale : false,
+          allowNegative: column.format?.allowNegative ?? true,
+          prefix: column.format?.prefix ?? undefined,
+          suffix: column.format?.suffix ?? undefined
+        };
+        return /*#__PURE__*/React.createElement(NumericFormat, _extends({
+          id: `col${indexCol}-record${indexRow}`
+        }, numericFormatProps, {
+          min: column.min,
+          max: column.max,
+          customInput: Input
+          // valueIsNumericString={true}
+          ,
+          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'
+          })
+
+          // onFocus={(e) => {
+          //   e.target.setSelectionRange(0, e.target.innerText.length - 1)
+          // }}
+          ,
+
+          onValueChange: values => {
+            onChange(values?.floatValue);
+          },
+          onBlur: () => {
+            const formState = getValues();
+            const itemState = getValues(dataIndex);
+
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = value;
+
+            // @ts-ignore
+            if (itemState !== record[dataIndex]) {
+              // @ts-ignore
+              handleCellChange?.({
+                key: record[rowKey],
+                record: formState,
+                prevState,
+                newState,
+                type: 'blur'
+              });
+            }
+          }
+
+          // onBlur={() => {
+          //   const tempValue = tempResource[indexRow][column.dataIndex]
+          //
+          //   if (indexFocus !== -1 && tempValue !== valueNumeric) {
+          //     if (column.min || column.min === 0 || column.max || column.max === 0) {
+          //       handleCellChange(valueNumeric, valueNumeric, record, col, indexRow, indexCol)
+          //     } else {
+          //       handleCellChange(valueNumeric, valueNumeric, record, col, indexRow, indexCol)
+          //     }
+          //   }
+          //
+          // }}
+
+          // onPaste={(e: any) => handleOnCellPaste(e, indexRow, indexCol)}
+
+          // onKeyDown={(e: any) => {
+          //   onInputKeydown(e, floatValue, floatValue, record, col, indexRow, indexCol)
+          //
+          // }}
+        }));
+      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'),
+          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)
+
+            // @ts-ignore
+            if (itemState !== record[dataIndex]) {
+              // @ts-ignore
+              handleCellChange?.({
+                key: record[rowKey],
+                record: formState,
+                type: 'blur'
+              });
+            }
+          }
+
+          // onKeyDown={(e: any) => {
+          //   console.log('onKeyDown edit', e.key)
+          // }}
+          ,
+
+          onPressEnter: () => {
+            const formState = getValues();
+            const newState = getValues(dataIndex);
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            // @ts-ignore
+            // if (itemState !== record[dataIndex]) {
+            // @ts-ignore
+            handleCellChange?.({
+              key: record[rowKey],
+              newState,
+              prevState,
+              record: formState,
+              type: 'enter'
+            });
+            // }
+          },
+          onChange: onChange
+          // onFocus={(e) => {
+          //   e.target.setSelectionRange(0, e.target.innerText.length - 1)
+          // }}
+          // invalid={isInvalid}
+
+          // onChange={(val: any) => {
+          //
+          //   handleCellUpdate('text', val.target?.value, record, col, indexRow, indexCol)
+          //
+          // }}
+          // onPaste={(e: any) => handleOnCellPaste(e, indexRow, indexCol)}
+          // onBlur={(val: any) => {
+          //   const tempValue = tempResource[indexRow][column.dataIndex]
+          //
+          //   if (indexFocus !== -1 && tempValue !== record[column.dataIndex]) {
+          //
+          //     handleCellChange(val.target?.value, val.target?.value, record, col, indexRow, indexCol)
+          //
+          //   }
+          // }}
+          // onKeyDown={(e: any) => {
+          //   onInputKeydown(e, e.target?.value, e.target?.value, record, col, indexRow, indexCol)
+          // }}
+        });
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", restProps, editing ?
+  /*#__PURE__*/
+  // <Form.Item
+  //   name={dataIndex}
+  //
+  //   style={{ margin: 0 }}
+  //   // rules={[
+  //   //   {
+  //   //     required: true,
+  //   //     message: ``,
+  //   //
+  //   //   },
+  //   // ]}
+  // >
+  //   {inputNode()}
+  // </Form.Item>
+  React.createElement(Controller, {
+    name: dataIndex,
+    control: control,
+    render: ({
+      field: {
+        value,
+        onChange
+      }
+    }) => inputNode(value, onChange)
+  }) : children);
+};
+export default EditableCell;