es-grid-template 0.1.1 → 0.1.2-2

package/es/grid-component/EditableCell.js

@@ -1,24 +1,26 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from "react";
-import { Button, DatePicker, Divider, Input, TimePicker } from "antd";
+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
+getDatepickerFormat, getTemplate, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets
 // 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 { Checkbox, Select } from "rc-master-ui";
+import { AsyncSelect } from "./async-select";
+import { AsyncTableSelect } from "./async-table-select";
+import { cyan, green, red, blue } from '@ant-design/colors';
 
 // import moment from "moment";
 
@@ -59,16 +61,30 @@ const EditableCell = props => {
   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;
+    const {
+      fieldValue,
+      columns: selectColumns,
+      isMulti,
+      selectMode,
+      menuWidth,
+      fieldNames,
+      toolbarItems,
+      filterOption,
+      inputKey,
+      toolbarClick,
+      loadOptions,
+      validateOption,
+      options: selectOptions
+    } = column.editSelectSettings || {};
+    const isInvalid = false;
+    const keySelect = checkFieldKey(column?.editSelectSettings?.fieldKey);
+    const options = validateOption ? validateOption(record, column.dataIndex) : selectOptions ?? [];
+    const optionsTree = validateOption ? convertArrayWithIndent(validateOption(record, column.dataIndex)) : selectOptions ? convertArrayWithIndent(selectOptions) : [];
     switch (editType) {
       case 'date':
         return /*#__PURE__*/React.createElement(DatePicker, {
@@ -94,6 +110,7 @@ const EditableCell = props => {
             if (newState !== prevState) {
               handleCellChange?.({
                 key: key,
+                field: column.field ?? column.dataIndex,
                 record: formState,
                 prevState,
                 newState,
@@ -126,12 +143,6 @@ const EditableCell = props => {
           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}`}
         , {
@@ -171,6 +182,7 @@ const EditableCell = props => {
             if (prevState !== newState) {
               handleCellChange?.({
                 key: key,
+                field: column.field ?? column.dataIndex,
                 record: formState,
                 prevState,
                 newState,
@@ -245,7 +257,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container'
         });
       case 'selectTable':
-        const rr = column?.editSelectSettings && column?.editSelectSettings.columns ? column?.editSelectSettings.columns : [];
+        const rr = selectColumns ?? [];
         const columnsTable = rr.map(colSelect => {
           return {
             title: colSelect.headerTemplate ? colSelect.headerTemplate : t ? t(colSelect.headerText) : colSelect.headerText,
@@ -264,53 +276,24 @@ const EditableCell = props => {
             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') {
+        let valueSelectTable = value;
+        if (fieldValue) {
           // @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]
-          } : '';
+          valueSelectTable = record[fieldValue] ?? value;
         }
-        // @ts-ignore
-        if (!valueSelectTable && column?.editSelectSettings?.defaultValue?.(record[column.dataIndex], record)) {
+        if (isMulti || selectMode === 'checkbox') {
           // @ts-ignore
-          valueSelectTable = column?.editSelectSettings?.defaultValue(record[column.dataIndex], record);
+          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;
         }
-        console.log('valueSelectTable', valueSelectTable);
-        return /*#__PURE__*/React.createElement(AsyncTableSelect, {
-          id: `col${indexCol}-record${indexRow}`,
+        return /*#__PURE__*/React.createElement(AsyncTableSelect
+        // id={`col${indexCol}-record${indexRow}`}
+        , {
           columns: columnsTable,
           options: options,
-          defaultOptions: options
-          // value={valueSelectTable}
-          ,
-          value: value,
+          defaultOptions: options,
+          value: valueSelectTable,
           onChange: (val, option) => {
-            onChange(val);
+            onChange(val ?? '');
             const formState = getValues();
             // const itemState = getValues(dataIndex)
             // @ts-ignore
@@ -318,6 +301,7 @@ const EditableCell = props => {
             const newState = val;
             handleCellChange?.({
               key: getRowKey?.(record, index),
+              field: column.field ?? column.dataIndex,
               record: formState,
               prevState,
               newState,
@@ -326,9 +310,9 @@ const EditableCell = props => {
             });
           },
           showSearch: true,
-          mode: column?.editSelectSettings?.isMulti || column?.editSelectSettings?.selectMode === 'checkbox' ? 'multiple' : undefined,
-          focusToSelectAll: true,
-          selectMode: column?.editSelectSettings?.selectMode,
+          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
+          valueSelectAble: true,
+          selectMode: selectMode,
           style: {
             width: '100%',
             height: '100%'
@@ -337,24 +321,24 @@ const EditableCell = props => {
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
           rowKey: keySelect,
-          popupMatchSelectWidth: column?.editSelectSettings?.menuWidth ? column?.editSelectSettings?.menuWidth + 10 : undefined,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
           optionFilterProp: "label",
           popupClassName: 'be-popup-container',
-          loadOptions: column?.editSelectSettings?.loadOptions,
+          loadOptions: loadOptions,
           status: isInvalid ? 'error' : undefined,
           dropdownRender: menu => {
-            if (column?.editSelectSettings?.toolbarItems && column?.editSelectSettings?.toolbarItems.length > 0) {
+            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'
-              }, column?.editSelectSettings?.toolbarItems.map(it => {
+              }, toolbarItems.map(it => {
                 return /*#__PURE__*/React.createElement("div", {
                   key: it.key,
                   className: 'toolbar-item',
-                  onClick: () => column?.editSelectSettings?.toolbarClick?.({
+                  onClick: () => toolbarClick?.({
                     item: it,
                     column
                   })
@@ -366,88 +350,151 @@ const EditableCell = props => {
               return /*#__PURE__*/React.createElement(React.Fragment, null, " ", menu);
             }
           },
-          filterOption: column?.editSelectSettings?.filterOption,
-          fieldNames: column?.editSelectSettings?.fieldNames ? column?.editSelectSettings?.fieldNames : {
+          filterOption: filterOption,
+          fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
-            label: column?.editSelectSettings?.inputKey ?? 'label'
+            label: 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)
-        //
-        //   }
-        //
-        // }
-
+        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, {
-          id: `col${indexCol}-record${indexRow}`,
+          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,
+              type: 'blur'
+            });
+          },
           showSearch: true,
-          valueSelectAble: true
-
-          // isMulti={column?.editSelectSettings?.isMulti}
-          ,
+          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
+          valueSelectAble: true,
           style: {
-            width: '100%'
+            width: '100%',
+            height: '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);
+          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={() => {
-          //   const formState = getValues()
-          //   // const itemState = getValues(dataIndex)
+        });
+      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,
+              type: 'blur'
+            });
+          },
+          showSearch: true,
+          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
+          valueSelectAble: true,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          placeholder: t ? t('Select') : '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'>
           //
-          //   // @ts-ignore
-          //   const prevState = record[dataIndex]
-          //   // const newState = value
+          //                     {it.icon && getTemplate(it.icon)}
+          //                     {it.title}
+          //                   </Button>
+          //                 )}
           //
-          //   // console.log('prevState', prevState)
-          //   // console.log('newState', newState)
-          //   // console.log('itemState', itemState)
+          //               </div>
+          //             )
+          //           })}
           //
-          //   if (value !== prevState) {
-          //     // @ts-ignore
-          //     handleCellChange?.({key: record[rowKey], record: formState, type: 'blur'})
+          //         </div>
+          //       </>
+          //     )
+          //   } else {
+          //     return <> {menu}</>
           //   }
+          //
           // }}
           ,
-          popupClassName: 'be-popup-container'
+          filterOption: filterOption,
+          fieldNames: fieldNames ? fieldNames : {
+            value: keySelect,
+            label: inputKey ?? 'label'
+          }
         });
       case 'treeSelect':
         // let valueTreeSelect
@@ -497,22 +544,35 @@ const EditableCell = props => {
           status: isInvalid ? 'error' : undefined
         });
       case 'checkbox':
-        return /*#__PURE__*/React.createElement(Input
-        // @ts-ignore
-        , {
-          checked: record[column.dataIndex],
-          id: `col${indexCol}-record${indexRow}`,
-          type: "checkbox",
+        return /*#__PURE__*/React.createElement("div", {
           style: {
-            textAlign: column.align ?? 'left'
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: column.align ?? 'left',
+            paddingInline: 5,
+            height: '100%'
           }
-          // onChange={(val) => {
-          //   record[column.dataIndex] = val.currentTarget.checked
-          //   handleCellChange(val.currentTarget.checked, val.currentTarget.checked, record, col, indexRow, indexCol)
-          // }}
+        }, /*#__PURE__*/React.createElement(Checkbox, {
+          checked: Boolean(value)
+          // style={{ textAlign: column.align ?? 'left' }}
           ,
+          onChange: val => {
+            const newVal = parseBooleanToValue(val.target.checked, typeof value);
+            onChange(newVal);
+            const key = getRowKey?.(record, index);
+            const formState = getValues();
+            handleCellChange?.({
+              key: key,
+              record: formState,
+              option: value,
+              prevState: value,
+              newState: newVal,
+              field: column.field ?? column.dataIndex,
+              type: 'blur'
+            });
+          },
           disabled: isDisable(column, record) ?? false
-        });
+        }));
 
       // case 'form':
       //
@@ -572,28 +632,50 @@ const EditableCell = props => {
       //   )
 
       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)
-          // }}
+        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()}`,
+              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':
@@ -648,13 +730,7 @@ const EditableCell = props => {
             '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);
           },
@@ -665,12 +741,13 @@ const EditableCell = props => {
             // @ts-ignore
             const prevState = record[dataIndex];
             const newState = value;
-
+            const key = getRowKey?.(record, index);
             // @ts-ignore
             if (itemState !== record[dataIndex]) {
-              // @ts-ignore
               handleCellChange?.({
-                key: record[rowKey],
+                key: key,
+                field: column.field ?? column.dataIndex,
+                option: newState,
                 record: formState,
                 prevState,
                 newState,
@@ -678,26 +755,6 @@ const EditableCell = props => {
               });
             }
           }
-
-          // 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, {
@@ -713,30 +770,27 @@ const EditableCell = props => {
           value: !isNullOrUndefined(value) ? value : '',
           onBlur: () => {
             const formState = getValues();
-            const itemState = getValues(dataIndex);
-            // // @ts-ignore
-            // const prevState = record[dataIndex]
-            // const newState = value
+            // const itemState = getValues(dataIndex)
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = value;
             //
             // console.log('newState', newState)
             // console.log('prevState', prevState)
-
+            const key = getRowKey?.(record, index);
             // @ts-ignore
-            if (itemState !== record[dataIndex]) {
-              // @ts-ignore
+            if (newState !== prevState) {
               handleCellChange?.({
-                key: record[rowKey],
+                key: key,
                 record: formState,
+                option: value,
+                prevState,
+                newState,
+                field: column.field ?? column.dataIndex,
                 type: 'blur'
               });
             }
-          }
-
-          // onKeyDown={(e: any) => {
-          //   console.log('onKeyDown edit', e.key)
-          // }}
-          ,
-
+          },
           onPressEnter: () => {
             const formState = getValues();
             const newState = getValues(dataIndex);
@@ -755,49 +809,12 @@ const EditableCell = props => {
             // }
           },
           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)
-          // }}
+          // invalid={isInvalid}
         });
     }
   };
-  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, {
+  return /*#__PURE__*/React.createElement("div", restProps, editing ? /*#__PURE__*/React.createElement(Controller, {
     name: dataIndex,
     control: control,
     render: ({