es-grid-template 1.8.71 → 1.8.72

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

@@ -0,0 +1,1075 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _utils = require("../hook/utils");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactNumericComponent = require("react-numeric-component");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _moment = _interopRequireDefault(require("moment"));
+var _reactHookForm = require("react-hook-form");
+var _rcMasterUi = require("rc-master-ui");
+var _asyncSelect = require("../components/async-select");
+var _asyncTableSelect = require("../components/async-table-select");
+var _colors = require("@ant-design/colors");
+var _EditForm = require("../components/EditForm");
+var _useContext = require("../useContext");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const {
+  SHOW_PARENT
+} = _rcMasterUi.TreeSelect;
+const {
+  TextArea
+} = _antd.Input;
+const filterTreeNode = (input, treeNode) => {
+  const {
+    title,
+    value
+  } = treeNode;
+  if (typeof title === "string" || typeof title === 'number') {
+    return title.toString().toLowerCase().includes(input.toLowerCase()) || value.toLowerCase().includes(input.toLowerCase());
+  }
+  return value.toLowerCase().includes(input.toLowerCase());
+};
+const EditableCell = props => {
+  const {
+    // t,
+    // editing,
+    dataIndex,
+    editType,
+    record,
+    // index,
+    // children,
+    column,
+    indexRow,
+    indexCol
+    // cellEditing,
+    // ...restProps
+  } = props;
+  const {
+    format,
+    control,
+    getValues,
+    handleCellChange,
+    errors,
+    id,
+    startCell,
+    rowKey,
+    t
+  } = (0, _react.useContext)(_useContext.TableContext);
+  const datePickerRef = _react.default.useRef(null);
+  const dateTimePickerRef = _react.default.useRef(null);
+  // const timePickerRef = React.useRef(null);
+
+  const colFormat = typeof column?.format === 'function' ? column?.format(record) : column?.format;
+  const cellFormat = (0, _utils.getFormat)(colFormat, format);
+  const inputNode = (value, onChange) => {
+    const dateFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
+    const date = !(0, _utils.isEmpty)(value) ? (0, _utils.convertDateToDayjs)(new Date(value), dateFormat) : null;
+    const maxDate = (0, _utils.convertDateToDayjs)(column.maxDate, dateFormat) ?? undefined;
+    const minDate = (0, _utils.convertDateToDayjs)(column.minDate, dateFormat) ?? undefined;
+    const {
+      fieldValue,
+      columns: selectColumns,
+      isMulti,
+      selectMode,
+      menuWidth,
+      fieldNames,
+      toolbarItems,
+      filterOption,
+      inputKey,
+      // toolbarClick,
+      loadOptions,
+      validateOption,
+      options: propsOptions
+    } = column.editSelectSettings || {};
+    const isInvalid = column.field ? errors[column.field] : false;
+
+    // @ts-ignore
+    const key = record[rowKey];
+    const field = column.field ?? '';
+
+    // const message = errors && column.field && errors[column.field] ? errors[column.field].message : ''
+    const message = isInvalid?.message;
+    const keySelect = (0, _utils.checkFieldKey)(column?.editSelectSettings?.fieldKey);
+    const selectOptions = typeof propsOptions === 'function' ? propsOptions(record, column.field) : propsOptions;
+    const options = validateOption ? validateOption(record, column.field) : selectOptions ?? [];
+    const optionsTree = validateOption ? (0, _utils.convertArrayWithIndent)(validateOption(record, column.field)) : selectOptions ? (0, _utils.convertArrayWithIndent)(selectOptions) : [];
+
+    // const currt = flatColumns2()
+
+    switch (editType) {
+      case 'date':
+        return /*#__PURE__*/_react.default.createElement(_antd.DatePicker, {
+          ref: datePickerRef,
+          format: {
+            format: dateFormat,
+            type: 'mask'
+          },
+          autoFocus: column.field === startCell?.colId,
+          defaultOpen: column.field === startCell?.colId
+
+          // locale={buddhistLocale}
+          ,
+          style: {
+            width: '100%',
+            height: '100%'
+          }
+          // value={date}
+          ,
+          defaultValue: date
+          // preserveInvalidOnBlur
+          ,
+
+          onBlur: () => {
+            const formState = getValues();
+            const itemState = getValues(dataIndex);
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = itemState;
+            if (newState !== prevState) {
+              handleCellChange?.({
+                key: key,
+                field: column.field,
+                record: formState,
+                prevState,
+                newState,
+                option: newState,
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          },
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          disabled: (0, _utils.isDisable)(column, record) ?? false,
+          maxDate: maxDate,
+          minDate: minDate,
+          onChange: (newDate, dateString) => {
+            const newDateValue = dateString ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString, dateFormat)).format() : null;
+            onChange(newDateValue);
+            setTimeout(() => {
+              // @ts-ignore
+              datePickerRef.current?.focus();
+            }, 0);
+          },
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`
+        });
+      case 'datetime':
+        return /*#__PURE__*/_react.default.createElement(_antd.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: (0, _utils.isDisable)(column, record) ?? false,
+          maxDate: maxDate,
+          minDate: minDate,
+          onChange: (newDate, dateString) => {
+            const newDateValue = dateString ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString, dateFormat)).format() : null;
+            onChange(newDateValue);
+            setTimeout(() => {
+              // @ts-ignore
+              dateTimePickerRef.current?.focus();
+            }, 0);
+          },
+          onBlur: () => {
+            const formState = getValues();
+            const itemState = getValues(dataIndex);
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = itemState;
+            if (prevState !== newState) {
+              handleCellChange?.({
+                key: key,
+                field: column.field ?? column.field,
+                record: formState,
+                prevState,
+                newState,
+                option: newState,
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          },
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`,
+          autoFocus: column.field === startCell?.colId,
+          defaultOpen: column.field === startCell?.colId
+        });
+      case 'month':
+      case 'quarter':
+      case 'year':
+        const pickerFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
+        const maxDateValue1 = !(0, _utils.isEmpty)(column.maxDate) ? (0, _dayjs.default)(column.maxDate, pickerFormat) : undefined;
+        const minDateValue1 = !(0, _utils.isEmpty)(column.minDate) ? (0, _dayjs.default)(column.minDate, pickerFormat) : undefined;
+        return /*#__PURE__*/_react.default.createElement(_antd.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: (0, _utils.isDisable)(column, record) ?? false,
+          maxDate: maxDateValue1,
+          minDate: minDateValue1,
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`,
+          autoFocus: column.field === startCell?.colId,
+          defaultOpen: column.field === startCell?.colId
+        });
+      case 'week':
+        const weekFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
+        const maxWeekValue = !(0, _utils.isEmpty)(column.maxDate) ? (0, _dayjs.default)(column.maxDate, weekFormat) : undefined;
+        const minWeekValue = !(0, _utils.isEmpty)(column.minDate) ? (0, _dayjs.default)(column.minDate, weekFormat) : undefined;
+        return /*#__PURE__*/_react.default.createElement(_antd.DatePicker, {
+          format: val => (0, _utils.customWeekStartEndFormat)(val, weekFormat),
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          picker: editType,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          disabled: (0, _utils.isDisable)(column, record) ?? false,
+          maxDate: maxWeekValue,
+          minDate: minWeekValue,
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`,
+          autoFocus: column.field === startCell?.colId,
+          defaultOpen: column.field === startCell?.colId
+        });
+      case 'time':
+        const timeFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
+        const time = value ? (0, _dayjs.default)(value, timeFormat) : null;
+        const maxTimeValue = !(0, _utils.isEmpty)(column.maxTime) ? (0, _dayjs.default)(column.maxTime).format(timeFormat) : null;
+        const minTimeValue = !(0, _utils.isEmpty)(column.minTime) ? (0, _dayjs.default)(column.minTime).format(timeFormat) : null;
+
+        // @ts-ignore
+        // const timeValue = !isEmpty(record[dataIndex]) ? dayjs(record[dataIndex], timeFormat) : null
+        const maxTime = maxTimeValue ? (0, _dayjs.default)(maxTimeValue, timeFormat) : undefined;
+        const minTime = minTimeValue ? (0, _dayjs.default)(minTimeValue, timeFormat) : undefined;
+        return /*#__PURE__*/_react.default.createElement(_antd.TimePicker, {
+          format: {
+            format: timeFormat,
+            type: 'mask'
+          },
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          maxDate: maxTime,
+          minDate: minTime
+          // value={time}
+          ,
+          defaultValue: time,
+          disabled: (0, _utils.isDisable)(column, record) ?? false,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`,
+          autoFocus: column.field === startCell?.colId,
+          defaultOpen: column.field === startCell?.colId,
+          onChange: (newDate, dateString) => {
+            // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+            onChange(dateString);
+            setTimeout(() => {
+              // @ts-ignore
+              dateTimePickerRef.current?.focus();
+            }, 0);
+          },
+          onBlur: () => {
+            const formState = getValues();
+            const itemState = getValues(dataIndex);
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = itemState;
+            if (prevState !== newState) {
+              handleCellChange?.({
+                key: key,
+                field: column.field ?? column.field,
+                record: formState,
+                prevState,
+                newState,
+                option: newState,
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          }
+        });
+      case 'selectTable':
+        const rr = selectColumns ?? [];
+        const columnsTable = rr.map(colSelect => {
+          return {
+            title: colSelect.headerTemplate ? colSelect.headerTemplate : t ? t(colSelect.headerText) : colSelect.headerText,
+            dataIndex: colSelect.field ?? colSelect.dataIndex,
+            key: colSelect.dataIndex,
+            render: colSelect.template ? (text, recd, ind) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colSelect.template?.({
+              value: text,
+              rowData: recd,
+              column: colSelect,
+              field: colSelect.field,
+              index: ind,
+              [colSelect.field]: text
+            })) : undefined,
+            width: colSelect.width,
+            ellipsis: true,
+            align: colSelect.textAlign
+          };
+        });
+        let valueSelectTable = value;
+        if (fieldValue) {
+          // @ts-ignore
+          valueSelectTable = record[fieldValue] ?? value;
+        }
+
+        // if (isMulti || selectMode === 'checkbox') {
+        //   // @ts-ignore
+        //   valueSelectTable = (!isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0) ? options.filter((val: any) => record[dataIndex]?.includes(val[keySelect])) : undefined
+
+        // }
+
+        return /*#__PURE__*/_react.default.createElement(_asyncTableSelect.AsyncTableSelect
+        // id={`col${indexCol}-record${indexRow}`}
+        , {
+          columns: columnsTable,
+          options: options,
+          defaultOptions: options,
+          value: valueSelectTable,
+          rowData: record,
+          autoDestroy: true,
+          onChange: (val, option) => {
+            onChange(val ?? '');
+            const formState = getValues();
+            // const itemState = getValues(dataIndex)
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = val;
+            handleCellChange?.({
+              // @ts-ignore
+              key: record[rowKey],
+              field: column.field ?? column.field,
+              record: formState,
+              prevState,
+              newState,
+              option: option,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          },
+          showSearch: true,
+          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
+          valueSelectAble: true,
+          selectMode: selectMode,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          defaultOpen: column.field === startCell?.colId,
+          autoFocus: column.field === startCell?.colId
+
+          // defaultOpen={column.field === cellEditing?.column.field}
+          ,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          allowClear: column.isClearable ?? false,
+          maxTagCount: 'responsive',
+          rowKey: keySelect,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
+          optionFilterProp: "label",
+          popupClassName: 'be-popup-container',
+          loadOptions: loadOptions,
+          status: isInvalid ? 'error' : undefined,
+          dropdownRender: menu => {
+            if (toolbarItems && toolbarItems.length > 0) {
+              return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, menu, /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+                style: {
+                  margin: '8px 0'
+                }
+              }), /*#__PURE__*/_react.default.createElement("div", {
+                className: 'toolbar-control d-flex justify-content-end'
+              }));
+            } else {
+              return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", menu);
+            }
+          },
+          filterOption: filterOption,
+          fieldNames: fieldNames ? fieldNames : {
+            value: keySelect,
+            label: inputKey ?? 'label'
+          },
+          onBlur: event => {
+            if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
+              const val = event.inputValue;
+              onChange(val ?? '');
+              const formState = getValues();
+              // const itemState = getValues(dataIndex)
+              // @ts-ignore
+              const prevState = record[dataIndex];
+              const newState = val;
+              handleCellChange?.({
+                key,
+                field: column.field ?? column.field,
+                record: formState,
+                prevState,
+                newState,
+                option: {
+                  value: val,
+                  label: val,
+                  searchTextAsValue: true
+                },
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          },
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`
+        });
+      case 'select':
+        let valueSelect = value;
+        if (fieldValue) {
+          // @ts-ignore
+          valueSelect = record[fieldValue] ?? value;
+        }
+
+        // if (isMulti || selectMode === 'checkbox') {
+        //   // @ts-ignore
+        //   valueSelect = (!isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0) ? options.filter((val: any) => record[dataIndex]?.includes(val[keySelect])) : undefined
+
+        // }
+
+        return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
+          options: options,
+          value: valueSelect,
+          onChange: (val, option) => {
+            onChange(val ?? '');
+            const formState = getValues();
+            // const itemState = getValues(dataIndex)
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = val;
+            handleCellChange?.({
+              key,
+              field: column.field ?? column.field,
+              record: formState,
+              prevState,
+              newState,
+              option: option,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          },
+          autoDestroy: true,
+          showSearch: true,
+          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
+          valueSelectAble: true,
+          defaultOpen: column.field === startCell?.colId,
+          autoFocus: column.field === startCell?.colId
+
+          // defaultOpen={column.field === cellEditing?.column.field}
+          ,
+
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          allowClear: column.isClearable ?? false,
+          maxTagCount: 'responsive',
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
+          optionFilterProp: "label",
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          filterOption: filterOption,
+          fieldNames: fieldNames ? fieldNames : {
+            value: keySelect,
+            label: inputKey ?? 'label'
+          },
+          onBlur: event => {
+            if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
+              const val = event.inputValue;
+              onChange(val ?? '');
+              const formState = getValues();
+              // const itemState = getValues(dataIndex)
+              // @ts-ignore
+              const prevState = record[dataIndex];
+              const newState = val;
+              handleCellChange?.({
+                key,
+                field: column.field ?? column.field,
+                record: formState,
+                prevState,
+                newState,
+                option: {
+                  value: val,
+                  label: val,
+                  searchTextAsValue: true
+                },
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          },
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`
+        });
+      case 'asyncSelect':
+        let valueAsyncSelect = value;
+        if (fieldValue) {
+          // @ts-ignore
+          valueAsyncSelect = record[fieldValue] ?? value;
+        }
+
+        // if (isMulti || selectMode === 'checkbox') {
+        //   // @ts-ignore
+        //   valueAsyncSelect = (!isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0) ? options.filter((val: any) => record[dataIndex]?.includes(val[keySelect])) : undefined
+
+        // }
+
+        return /*#__PURE__*/_react.default.createElement(_asyncSelect.AsyncSelect, {
+          options: options,
+          defaultOptions: options,
+          value: valueAsyncSelect,
+          onChange: (val, option) => {
+            onChange(val ?? '');
+            const formState = getValues();
+            // const itemState = getValues(dataIndex)
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = val;
+            handleCellChange?.({
+              key,
+              field: column.field ?? column.field,
+              record: formState,
+              prevState,
+              newState,
+              option: option,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          },
+          autoDestroy: true,
+          showSearch: true,
+          defaultOpen: column.field === startCell?.colId,
+          autoFocus: column.field === startCell?.colId
+
+          // defaultOpen={column.field === cellEditing?.column.field}
+          ,
+          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
+          valueSelectAble: true,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          allowClear: column.isClearable ?? false,
+          maxTagCount: 'responsive',
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
+          optionFilterProp: "label",
+          popupClassName: 'be-popup-container',
+          loadOptions: loadOptions,
+          status: isInvalid ? 'error' : undefined
+          // dropdownRender={(menu) => {
+          //   if (toolbarItems && toolbarItems.length > 0) {
+          //     return (
+          //       <>
+          //         {menu}
+          //         <Divider style={{margin: '8px 0'}}/>
+          //
+          //         <div
+          //           className={'toolbar-control d-flex justify-content-end'}
+          //         >
+          //           {toolbarItems.map((it) => {
+          //             return (
+          //               <div
+          //                 key={it.key}
+          //                 className={'toolbar-item'}
+          //                 onClick={() => toolbarClick?.({item: it, column})}
+          //               >
+          //                 {it.template ? getTemplate(it.template) : (
+          //                   <Button className='toolbar-item-btn'>
+          //
+          //                     {it.icon && getTemplate(it.icon)}
+          //                     {it.title}
+          //                   </Button>
+          //                 )}
+          //
+          //               </div>
+          //             )
+          //           })}
+          //
+          //         </div>
+          //       </>
+          //     )
+          //   } else {
+          //     return <> {menu}</>
+          //   }
+          //
+          // }}
+          ,
+          filterOption: filterOption,
+          fieldNames: fieldNames ? fieldNames : {
+            value: keySelect,
+            label: inputKey ?? 'label'
+          },
+          onBlur: event => {
+            if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
+              const val = event.inputValue;
+              onChange(val ?? '');
+              const formState = getValues();
+              // const itemState = getValues(dataIndex)
+              // @ts-ignore
+              const prevState = record[dataIndex];
+              const newState = val;
+              handleCellChange?.({
+                key,
+                field: column.field ?? column.field,
+                record: formState,
+                prevState,
+                newState,
+                option: {
+                  value: val,
+                  label: val,
+                  searchTextAsValue: true
+                },
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          },
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`
+        });
+      case 'treeSelect':
+        // let valueTreeSelect
+
+        const newTreeData = (0, _utils.convertLabelToTitle)(optionsTree);
+        // @ts-ignore
+        // const valueTreeSelect = column?.editSelectSettings?.isMulti ? (Array.isArray(record[dataIndex]) ? record[dataIndex] : []) : record[dataIndex]
+
+        let valueTreeSelect = value;
+        if (fieldValue) {
+          // @ts-ignore
+          valueTreeSelect = record[fieldValue] ?? value;
+        }
+
+        // if (isMulti || selectMode === 'checkbox') {
+        //   // @ts-ignore
+        //   valueTreeSelect = (!isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0) ? options.filter((val: any) => record[dataIndex]?.includes(val[keySelect])) : undefined
+
+        // }
+
+        return /*#__PURE__*/_react.default.createElement(_rcMasterUi.TreeSelect, {
+          id: `col${indexCol}-record${indexRow}`,
+          className: 'be-tree-select',
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          value: valueTreeSelect,
+          dropdownStyle: {
+            maxHeight: 400,
+            overflow: 'auto'
+          },
+          treeData: newTreeData,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
+          treeDefaultExpandAll: true,
+          defaultOpen: column.field === startCell?.colId,
+          autoFocus: column.field === startCell?.colId
+
+          // defaultOpen={column.field === cellEditing?.column.field}
+          ,
+          virtual: true,
+          allowClear: true,
+          showSearch: true
+          // maxTagTextLength={column?.editSelectSettings?.showItems}
+          ,
+          maxTagCount: column?.editSelectSettings?.showItems,
+          maxTagPlaceholder: 2,
+          treeTitleRender: column?.editSelectSettings?.formatOptionLabel,
+          showCheckedStrategy: SHOW_PARENT,
+          multiple: column?.editSelectSettings?.selectMode === 'checkbox' || column?.editSelectSettings?.isMulti
+          // fieldNames={{label: inputKey ? inputKey : 'title', value: keySelect, children: 'children'}}
+          ,
+          treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox',
+          filterTreeNode: filterTreeNode,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
+          onSelect: (val, option) => {
+            onChange(val ?? '');
+            const formState = getValues();
+            // const itemState = getValues(dataIndex)
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = val;
+            handleCellChange?.({
+              key,
+              field: column.field,
+              record: formState,
+              prevState,
+              newState,
+              option: option,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          },
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`
+        });
+      case 'checkbox':
+        return /*#__PURE__*/_react.default.createElement("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: column.align ?? 'center',
+            paddingInline: 5,
+            height: '100%',
+            width: '100%'
+          }
+        }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Checkbox, {
+          checked: Boolean(value)
+          // style={{ textAlign: column.align ?? 'left' }}
+          ,
+          onChange: val => {
+            const newVal = typeof value === "number" ? (0, _utils.parseBooleanToValue)(val.target.checked, typeof value) : val.target.checked;
+            onChange(newVal);
+            const formState = getValues();
+            handleCellChange?.({
+              key,
+              record: formState,
+              option: value,
+              prevState: value,
+              newState: newVal,
+              field: column.field ?? column.field,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          },
+          disabled: (0, _utils.isDisable)(column, record) ?? false
+        }));
+      case 'form':
+        const valueForm = value;
+        return /*#__PURE__*/_react.default.createElement(_EditForm.EditForm, {
+          rowData: record,
+          column: column,
+          t: t,
+          id: `col${indexCol}-record${indexRow}`,
+          value: valueForm,
+          fieldKey: column.editFromSettings?.fieldKey,
+          indexRow: indexRow
+
+          // cellFocus={column.field === cellEditing?.column.field}
+          ,
+
+          onChange: val => {
+            const formState = getValues();
+
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = val;
+            handleCellChange?.({
+              key,
+              field: column.field,
+              record: {
+                ...formState,
+                [column.field ?? '']: val
+              },
+              prevState,
+              newState,
+              option: val,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          }
+          // cellEditing={cellEditing}
+
+          // menuPortalTarget={tableContainerRef}
+          // classNamePrefix={column.classElement ?? 'select'}
+          ,
+          placeholder: t ? t(column.placeholder ? column.placeholder : '') : column.placeholder ? column.placeholder : '',
+          menuWidth: column.editFromSettings?.menuWidth,
+          menuHeight: column.editFromSettings?.menuHeight
+        });
+
+      // case 'file':
+      //   const valueFile = record[dataIndex]
+      //   return (
+      //
+      //
+      //       <InputFile
+      //         value={valueFile}
+      //         uploading={column.uploading}
+      //         allowedExtensions={column.allowedExtensions}
+      //         asyncUploadSettings={column.asyncUploadSettings}
+      //         disable={isDisable(col, record)}
+      //         onChange={(val: string) => {
+      //
+      //           const newValue = Array.isArray(val) ? val.map((it: any) => it) : val
+      //           const newrecordData = {
+      //             ...record,
+      //             [dataIndex]: newValue
+      //           }
+      //           handleCellChange(val, newValue, newrecordData, col, indexRow, indexCol)
+      //         }}
+      //
+      //
+      //       />
+      //
+      //
+      //   )
+
+      case 'color':
+        const color = (0, _utils.isColor)(value) ? value : '#ffffff';
+        const presets = (0, _utils.genPresets)({
+          blue: _colors.blue,
+          red: _colors.red,
+          green: _colors.green,
+          cyan: _colors.cyan
+        });
+        return /*#__PURE__*/_react.default.createElement(_antd.ColorPicker, {
+          value: color,
+          allowClear: column.isClearable ?? true,
+          onChangeComplete: valueColor => {
+            onChange(`#${valueColor.toHex()}`);
+            const formState = getValues();
+            handleCellChange?.({
+              key,
+              field,
+              option: `#${valueColor.toHex()}`,
+              record: formState,
+              prevState: value,
+              newState: `#${valueColor.toHex()}`,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          },
+          presets: presets,
+          panelRender: (_, {
+            components: {
+              Picker,
+              Presets
+            }
+          }) => /*#__PURE__*/_react.default.createElement(_antd.Row, {
+            justify: "space-between",
+            wrap: false,
+            className: "custom-panel be-popup-container"
+          }, /*#__PURE__*/_react.default.createElement(_antd.Col, {
+            span: 12
+          }, /*#__PURE__*/_react.default.createElement(Presets, null)), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+            type: "vertical",
+            style: {
+              height: 'auto'
+            }
+          }), /*#__PURE__*/_react.default.createElement(_antd.Col, {
+            flex: "auto"
+          }, /*#__PURE__*/_react.default.createElement(Picker, null)))
+        });
+
+      // case 'image':
+      //   let image = record[dataIndex]
+      //   return (
+      //     <ImageUpload
+      //       id={`col${indexCol}-record${indexRow}`}
+      //       defaultImage={image}
+      //       width={column.width}
+      //       height={38}
+      //       onKeyDown={(val: any, path: string) => {
+      //         const checkKey = checkKeyDown(val, col, indexRow + 1, indexCol + 1)
+      //         if (checkKey === 'ArrecordDown' || checkKey === 'ArrecordUp' || checkKey === 'Enter') {
+      //           let newVal = ''
+      //           if (newVal != record[dataIndex]) {
+      //             record[dataIndex] = path
+      //             // handleDataChange(path, record, col, indexRow, indexCol)
+      //             handleCellChange(path, record, col, indexRow, indexCol)
+      //           }
+      //         }
+      //       }}
+      //     />
+      //   )
+
+      case 'numeric':
+        const thousandSeparator = cellFormat?.thousandSeparator;
+        const decimalSeparator = cellFormat?.decimalSeparator;
+
+        // let floatValue = value
+
+        const numericFormatProps = {
+          value,
+          thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+          decimalSeparator: (0, _utils.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.default.createElement(_reactNumericComponent.NumericFormat, (0, _extends2.default)({
+          id: `col${indexCol}-record${indexRow}`
+          // value={value ? numericFormatter(value.toString(), numericFormatProps) : ''}
+          // value={value}
+        }, numericFormatProps, {
+          min: column.min,
+          max: column.max,
+          customInput: _antd.Input
+          // valueIsNumericString={true}
+          ,
+          placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
+          autoComplete: 'off',
+          className: (0, _classnames.default)('be-cell-editing  rounded-0 input-element', {
+            'is-invalid': isInvalid,
+            'be-cell-edit-align-center': column.align === 'center',
+            'be-cell-edit-align-left': column.align === 'left',
+            'be-cell-edit-align-right': !column.align || column.align === 'right'
+          }),
+          autoFocus: column.field === startCell?.colId,
+          onValueChange: values => {
+            onChange(values?.floatValue || 0);
+          },
+          onBlur: () => {
+            const formState = getValues();
+            const itemState = getValues(dataIndex);
+
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = value;
+            // @ts-ignore
+            if (itemState !== record[dataIndex]) {
+              handleCellChange?.({
+                key: key,
+                field,
+                option: newState,
+                record: formState,
+                prevState,
+                newState,
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          },
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`
+        }));
+      default:
+        return /*#__PURE__*/_react.default.createElement(TextArea, {
+          id: `col${indexCol}-record${indexRow}`,
+          style: {
+            textAlign: column.align,
+            resize: 'none',
+            height: '100%'
+          },
+          disabled: (0, _utils.isDisable)(column, record) ?? false,
+          className: (0, _classnames.default)('be-cell-editing rounded-0 input-element'),
+          placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
+          value: !(0, _utils.isNullOrUndefined)(value) ? value : '',
+          onBlur: () => {
+            const formState = getValues();
+            // const itemState = getValues(dataIndex)
+
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = value;
+            if (newState !== prevState) {
+              handleCellChange?.({
+                key: key,
+                record: formState,
+                option: value,
+                prevState,
+                newState,
+                field,
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          },
+          onPressEnter: () => {
+            const formState = getValues();
+            const newState = getValues(dataIndex);
+            // @ts-ignore
+            const prevState = record[dataIndex];
+
+            // @ts-ignore
+
+            handleCellChange?.({
+              key: key,
+              newState,
+              prevState,
+              record: formState,
+              indexCol,
+              indexRow,
+              type: 'enter'
+            });
+            // }
+          },
+          onChange: onChange,
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`,
+          autoSize: {
+            minRows: 1,
+            maxRows: 1
+          }
+        });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    name: dataIndex,
+    control: control,
+    render: ({
+      field: {
+        value,
+        onChange
+      }
+    }) => inputNode(value, onChange)
+  });
+};
+var _default = exports.default = EditableCell;