es-grid-template 1.8.64 → 1.8.66

package/es/grid-component/EditableCell.js

@@ -1,1030 +0,0 @@
-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 { EditForm } from "./EditForm";
-
-// import moment from "moment";
-
-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,
-    // 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}
-          ,
-          defaultValue: date
-          // preserveInvalidOnBlur
-          ,
-
-          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,
-          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}
-          ,
-          defaultValue: date,
-          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
-          disabled: isDisable(column, record) ?? false,
-          maxDate: maxDate,
-          minDate: minDate,
-          onChange: (newDate, dateString) => {
-            const newDateValue = dateString ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
-            onChange(newDateValue);
-            setTimeout(() => {
-              // @ts-ignore
-              dateTimePickerRef.current?.focus();
-            }, 0);
-          },
-          onBlur: () => {
-            const formState = getValues();
-            const itemState = getValues(dataIndex);
-            // @ts-ignore
-            const prevState = record[dataIndex];
-            const newState = itemState;
-            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'
-          },
-          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: getRowKey?.(record, index),
-                field: column.field ?? column.dataIndex,
-                record: formState,
-                prevState,
-                newState,
-                option: {
-                  value: val,
-                  label: val,
-                  searchTextAsValue: true
-                },
-                indexCol,
-                indexRow,
-                type: 'blur'
-              });
-            }
-          },
-          "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'
-          },
-          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: getRowKey?.(record, index),
-                field: column.field ?? column.dataIndex,
-                record: formState,
-                prevState,
-                newState,
-                option: {
-                  value: val,
-                  label: val,
-                  searchTextAsValue: true
-                },
-                indexCol,
-                indexRow,
-                type: 'blur'
-              });
-            }
-          },
-          "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'
-          },
-          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: getRowKey?.(record, index),
-                field: column.field ?? column.dataIndex,
-                record: formState,
-                prevState,
-                newState,
-                option: {
-                  value: val,
-                  label: val,
-                  searchTextAsValue: true
-                },
-                indexCol,
-                indexRow,
-                type: 'blur'
-              });
-            }
-          },
-          "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 ?? '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 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 = value;
-        return /*#__PURE__*/React.createElement(EditForm, {
-          rowData: record,
-          column: column,
-          t: t,
-          id: `col${indexCol}-record${indexRow}`,
-          value: valueForm
-          // fieldKey={'name'}
-          ,
-          fieldKey: column.editFromSettings?.fieldKey
-          // recordData={record}
-          ,
-          indexRow: indexRow,
-          cellFocus: column.field === cellEditing?.column.field,
-          onChange: val => {
-            const formState = getValues();
-
-            // @ts-ignore
-            const prevState = record[dataIndex];
-            const newState = val;
-            handleCellChange?.({
-              key: getRowKey?.(record, index),
-              field: column.field ?? column.dataIndex,
-              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[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}`
-          // value={value ? numericFormatter(value.toString(), numericFormatProps) : ''}
-          // value={value}
-        }, numericFormatProps, {
-          min: column.min,
-          max: column.max,
-          customInput: Input
-          // valueIsNumericString={true}
-          ,
-          placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
-          autoComplete: 'off',
-          className: classNames('be-cell-editing  rounded-0 input-element', {
-            'is-invalid': isInvalid,
-            'be-cell-edit-align-center': column.align === 'center',
-            'be-cell-edit-align-left': column.align === 'left',
-            'be-cell-edit-align-right': !column.align || column.align === 'right'
-          }),
-          onValueChange: values => {
-            onChange(values?.floatValue || 0);
-          },
-          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(TextArea, {
-          id: `col${indexCol}-record${indexRow}`,
-          style: {
-            textAlign: column.align,
-            resize: 'none',
-            height: '100%'
-          }
-
-          // @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;
-            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`,
-          autoSize: {
-            minRows: 1,
-            maxRows: 1
-          }
-        });
-    }
-  };
-  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;