es-grid-template 1.4.1 → 1.4.2

package/lib/grid-component/EditableCell.js

@@ -54,6 +54,7 @@ const EditableCell = props => {
     indexRow,
     indexCol,
     cellEditing,
+    // errors,
     ...restProps
   } = props;
   const {
@@ -61,7 +62,8 @@ const EditableCell = props => {
     control,
     getValues,
     handleCellChange,
-    getRowKey
+    getRowKey,
+    errors
   } = (0, _react.useContext)(_useContext.TableContext);
   const datePickerRef = _react.default.useRef(null);
   const dateTimePickerRef = _react.default.useRef(null);
@@ -88,7 +90,10 @@ const EditableCell = props => {
       validateOption,
       options: propsOptions
     } = column.editSelectSettings || {};
-    const isInvalid = false;
+    const isInvalid = column.field ? errors[column.field] : false;
+
+    // const message = errors && column.field && errors[column.field] ? errors[column.field].message : ''
+    const message = isInvalid?.message;
     const keySelect = (0, _hooks.checkFieldKey)(column?.editSelectSettings?.fieldKey);
     const selectOptions = typeof propsOptions === 'function' ? propsOptions(record, column.dataIndex) : propsOptions;
     const options = validateOption ? validateOption(record, column.dataIndex) : selectOptions ?? [];
@@ -153,7 +158,10 @@ const EditableCell = props => {
               datePickerRef.current?.focus();
             }, 0);
           },
-          popupClassName: 'be-popup-container'
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": "tooltip-form-error"
         });
       case 'datetime':
         return /*#__PURE__*/_react.default.createElement(_antd.DatePicker
@@ -206,7 +214,10 @@ const EditableCell = props => {
               });
             }
           },
-          popupClassName: 'be-popup-container'
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": "tooltip-form-error"
         });
       case 'month':
       case 'quarter':
@@ -229,7 +240,10 @@ const EditableCell = props => {
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxDateValue1,
           minDate: minDateValue1,
-          popupClassName: 'be-popup-container'
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": "tooltip-form-error"
         });
       case 'week':
         const weekFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
@@ -246,7 +260,10 @@ const EditableCell = props => {
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxWeekValue,
           minDate: minWeekValue,
-          popupClassName: 'be-popup-container'
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": "tooltip-form-error"
         });
       case 'time':
         const timeFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
@@ -270,7 +287,10 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          popupClassName: 'be-popup-container'
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": "tooltip-form-error"
         });
       case 'selectTable':
         const rr = selectColumns ?? [];
@@ -375,7 +395,9 @@ const EditableCell = props => {
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
-          }
+          },
+          "data-tooltip-content": message,
+          "data-tooltip-id": "tooltip-form-error"
         });
       case 'select':
         let valueSelect = value;
@@ -431,7 +453,9 @@ const EditableCell = props => {
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
-          }
+          },
+          "data-tooltip-content": message,
+          "data-tooltip-id": "tooltip-form-error"
         });
       case 'asyncSelect':
         let valueAsyncSelect = value;
@@ -526,7 +550,9 @@ const EditableCell = props => {
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
-          }
+          },
+          "data-tooltip-content": message,
+          "data-tooltip-id": "tooltip-form-error"
         });
       case 'treeSelect':
         // let valueTreeSelect
@@ -597,7 +623,9 @@ const EditableCell = props => {
             });
           },
           popupClassName: 'be-popup-container',
-          status: isInvalid ? 'error' : undefined
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": "tooltip-form-error"
         });
       case 'checkbox':
         return /*#__PURE__*/_react.default.createElement("div", {
@@ -818,7 +846,9 @@ const EditableCell = props => {
                 type: 'blur'
               });
             }
-          }
+          },
+          "data-tooltip-content": message,
+          "data-tooltip-id": "tooltip-form-error"
         }));
       default:
         return /*#__PURE__*/_react.default.createElement(_antd.Input, {
@@ -878,9 +908,10 @@ const EditableCell = props => {
             });
             // }
           },
-          onChange: onChange
-
-          // invalid={isInvalid}
+          onChange: onChange,
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": "tooltip-form-error"
         });
     }
   };

package/lib/grid-component/InternalTable.d.ts

@@ -4,5 +4,6 @@ import type { GridTableProps } from "./type";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import './styles.scss';
+export declare const SELECTION_COLUMN: {};
 declare const InternalTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
 export default InternalTable;