es-grid-template 0.1.0 → 0.1.2-1

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";
 
@@ -52,56 +54,67 @@ const EditableCell = props => {
     format,
     control,
     getValues,
-    handleCellChange
+    handleCellChange,
+    getRowKey
   } = useContext(TableContext);
   const datePickerRef = React.useRef(null);
   const dateTimePickerRef = React.useRef(null);
   // const timePickerRef = React.useRef(null);
 
-  const isInvalid = false;
-  const keySelect = checkFieldKey(column?.editSelectSettings?.fieldKey);
-  const inputKey = column?.editSelectSettings?.inputKey;
-  const options = column?.editSelectSettings?.validateOption ? column?.editSelectSettings?.validateOption(record, column.dataIndex) : column?.editSelectSettings?.options ? column?.editSelectSettings?.options : [];
-  const optionsTree = column?.editSelectSettings?.validateOption ? convertArrayWithIndent(column?.editSelectSettings?.validateOption(record, column.dataIndex)) : column?.editSelectSettings?.options ? convertArrayWithIndent(column?.editSelectSettings?.options) : [];
   const inputNode = (value, onChange) => {
     const dateFormat = getDatepickerFormat(editType, column);
     const date = !isEmpty(value) ? convertDateToDayjs(new Date(value), dateFormat) : null;
     const maxDate = convertDateToDayjs(column.maxDate, dateFormat) ?? undefined;
     const minDate = convertDateToDayjs(column.minDate, dateFormat) ?? undefined;
+    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
-        // id={`col${indexCol}-record${indexRow}`}
-        , {
+        return /*#__PURE__*/React.createElement(DatePicker, {
           ref: datePickerRef,
           format: {
             format: dateFormat,
             type: 'mask'
           }
-
           // locale={buddhistLocale}
           ,
           style: {
             width: '100%',
             height: '100%'
           },
-          value: date
-          // defaultValue={date}
-          ,
-
+          value: date,
           onBlur: () => {
             const formState = getValues();
             const itemState = getValues(dataIndex);
             // @ts-ignore
             const prevState = record[dataIndex];
             const newState = itemState;
+            const key = getRowKey?.(record, index);
             if (newState !== prevState) {
-              // @ts-ignore
               handleCellChange?.({
-                key: record[rowKey],
+                key: key,
+                field: column.field ?? column.dataIndex,
                 record: formState,
                 prevState,
                 newState,
+                option: newState,
                 type: 'blur'
               });
             }
@@ -130,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}`}
         , {
@@ -158,6 +165,7 @@ const EditableCell = props => {
           minDate: minDate,
           onChange: (newDate, dateString) => {
             const newDateValue = dateString ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
+            // console.log('newDateValue', newDateValue)
             onChange(newDateValue);
             setTimeout(() => {
               // @ts-ignore
@@ -170,13 +178,15 @@ const EditableCell = props => {
             // @ts-ignore
             const prevState = record[dataIndex];
             const newState = itemState;
+            const key = getRowKey?.(record, index);
             if (prevState !== newState) {
-              // @ts-ignore
               handleCellChange?.({
-                key: record[rowKey],
+                key: key,
+                field: column.field ?? column.dataIndex,
                 record: formState,
                 prevState,
                 newState,
+                option: newState,
                 type: 'blur'
               });
             }
@@ -187,8 +197,6 @@ const EditableCell = props => {
       case 'quarter':
       case 'year':
         const pickerFormat = getDatepickerFormat(editType, column);
-        // @ts-ignore
-        // const dateValue = !isEmpty(record[column.dataIndex]) ? dayjs(record[column.key], pickerFormat) : null
         const maxDateValue1 = !isEmpty(column.maxDate) ? dayjs(column.maxDate, pickerFormat) : undefined;
         const minDateValue1 = !isEmpty(column.minDate) ? dayjs(column.minDate, pickerFormat) : undefined;
         return /*#__PURE__*/React.createElement(DatePicker, {
@@ -200,28 +208,16 @@ const EditableCell = props => {
           style: {
             width: '100%',
             height: '100%'
-          }
-          // defaultValue={dateValue}
-          ,
+          },
           picker: editType,
           placeholder: column.placeholder,
           disabled: isDisable(column, record) ?? false,
           maxDate: maxDateValue1,
-          minDate: minDateValue1
-          // onChange={(dValue, dateString) => {
-          //   const newDateValue = dateString ? dateString : null
-          //
-          //   // record[column.dataIndex] = newDateValue
-          //   // handleCellChange(newDateValue, newDateValue,  record, col, indexRow, indexCol)
-          // }}
-          ,
+          minDate: minDateValue1,
           popupClassName: 'be-popup-container'
         });
       case 'week':
         const weekFormat = getDatepickerFormat(editType, column);
-
-        // @ts-ignore
-        // const weekValue = !isEmpty(record[column.dataIndex]) ? dayjs(record[column.dataIndex], weekFormat) : null
         const maxWeekValue = !isEmpty(column.maxDate) ? dayjs(column.maxDate, weekFormat) : undefined;
         const minWeekValue = !isEmpty(column.minDate) ? dayjs(column.minDate, weekFormat) : undefined;
         return /*#__PURE__*/React.createElement(DatePicker, {
@@ -229,21 +225,12 @@ const EditableCell = props => {
           style: {
             width: '100%',
             height: '100%'
-          }
-          // defaultValue={weekValue}
-          ,
+          },
           picker: editType,
           placeholder: column.placeholder,
           disabled: isDisable(column, record) ?? false,
           maxDate: maxWeekValue,
-          minDate: minWeekValue
-          // onChange={(dateValue, dateString) => {
-          //   const newDateValue = dateString ? dateString : null
-          //
-          //   record[column.dataIndex] = newDateValue
-          //   handleCellChange(newDateValue, newDateValue,  record, col, indexRow, indexCol)
-          // }}
-          ,
+          minDate: minWeekValue,
           popupClassName: 'be-popup-container'
         });
       case 'time':
@@ -259,22 +246,10 @@ const EditableCell = props => {
           format: {
             format: timeFormat,
             type: 'mask'
-          }
-          // defaultValue={timeValue}
-          ,
+          },
           maxDate: maxTime,
           minDate: minTime,
-          disabled: isDisable(column, record) ?? false
-          // onChange={(values: any, timeString) => {
-          //   const newTimeValue = timeString ? timeString : null
-          //   const newrecordData = {
-          //     ...record,
-          //     // [column.dataIndex]: newTimeValue
-          //   }
-          //
-          //   // handleCellChange(newTimeValue, newTimeValue, newrecordData, col, indexRow, indexCol)
-          // }}
-          ,
+          disabled: isDisable(column, record) ?? false,
           style: {
             width: '100%',
             height: '100%'
@@ -282,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,
@@ -301,90 +276,69 @@ 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;
         }
-        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
-          // onChange={(val: any, option) => {
-          //   // const newValue = val && (column?.editSelectSettings?.isMulti || column?.editSelectSettings?.selectMode === 'checkbox') ? (val?.map((item: any) => item[keySelect]) ?? []) : (val ? val[keySelect] : null)
-          //   const newrecordData = {
-          //     ...record,
-          //     [column.dataIndex]: val
-          //   }
-          //
-          //   // handleCellChange(option, val, newrecordData, col, indexRow, indexCol)
-          // }}
-          ,
+          defaultOptions: options,
+          value: valueSelectTable,
+          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: 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%'
           },
-          value: valueSelectTable,
           placeholder: t ? t('Select') : 'Select',
           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'
-          // onPaste={(e: any) => handleOnCellPaste(e, indexRow, indexCol)}
-          ,
-          loadOptions: column?.editSelectSettings?.loadOptions,
+          popupClassName: 'be-popup-container',
+          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
                   })
@@ -396,89 +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);
-          },
-          onBlur: () => {
+          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'
+          }
+        });
+      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 = value
-
-            // console.log('prevState', prevState)
-            // console.log('newState', newState)
-            // console.log('itemState', itemState)
-            if (value !== prevState) {
-              // @ts-ignore
-              handleCellChange?.({
-                key: record[rowKey],
-                record: formState,
-                type: 'blur'
-              });
-            }
+            const newState = val;
+            handleCellChange?.({
+              key: getRowKey?.(record, index),
+              field: column.field ?? column.dataIndex,
+              record: formState,
+              prevState,
+              newState,
+              option: option,
+              type: 'blur'
+            });
           },
-          popupClassName: 'be-popup-container'
+          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'>
+          //
+          //                     {it.icon && getTemplate(it.icon)}
+          //                     {it.title}
+          //                   </Button>
+          //                 )}
+          //
+          //               </div>
+          //             )
+          //           })}
+          //
+          //         </div>
+          //       </>
+          //     )
+          //   } else {
+          //     return <> {menu}</>
+          //   }
+          //
+          // }}
+          ,
+          filterOption: filterOption,
+          fieldNames: fieldNames ? fieldNames : {
+            value: keySelect,
+            label: inputKey ?? 'label'
+          }
         });
       case 'treeSelect':
         // let valueTreeSelect
@@ -528,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':
       //
@@ -603,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':
@@ -679,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);
           },
@@ -696,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,
@@ -709,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, {
@@ -744,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);
@@ -786,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: ({