es-grid-template 1.4.0 → 1.4.2

package/es/grid-component/table/Group.d.ts

@@ -9,6 +9,7 @@ type Props<T> = GridTableProps<T> & {
     triggerGroupColumns?: (groupedColumns: string[]) => void;
     triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[]) => void;
     triggerFilter?: (queries: any) => void;
+    setTooltipContent?: any;
 };
 declare const Group: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Group;

package/es/grid-component/type.d.ts

@@ -1,7 +1,7 @@
 import type { Key, ReactElement, ReactNode } from "react";
 import type React from "react";
 import type { IOperator } from "./hooks";
-import type { TypeFilter, TableProps as RcTableProps, TableColumnType as RcColumnType, EditType } from "rc-master-ui";
+import type { TypeFilter, TableProps as RcTableProps, TableColumnType as RcColumnType, EditType, TablePaginationConfig } from "rc-master-ui";
 import type { FilterOperator, TableRowSelection } from "rc-master-ui/es/table/interface";
 import type { ToolbarItem as RcToolbarItem } from "rc-master-ui/es/toolbar";
 import type { ItemType } from "rc-master-ui/es/menu/interface";
@@ -135,12 +135,13 @@ export type ColumnTemplate<RecordType> = {
     field: string;
 };
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
-export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
+export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary' | 'pagination'> {
     editAble?: boolean;
     groupAble?: boolean;
     groupColumns?: string[];
     groupSetting?: IGroupSetting;
     onChooseColumns?: (props: IOnChooseColumns) => void;
+    pagination?: false | PaginationConfig;
     showCustomTooltip?: boolean;
     sortMultiple?: boolean;
     dataSource: RecordType[];
@@ -193,7 +194,11 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
     onCellClick?: (args: ICellClick, callback?: any) => void;
     rowEditable?: (rowData: RecordType) => boolean;
+    validate?: any;
 }
+export type PaginationConfig = TablePaginationConfig & {
+    currentPage?: number;
+};
 export type ICellClick = {
     index: number;
     indexCol?: number;

package/es/grid-component/useContext.d.ts

@@ -12,6 +12,7 @@ export interface IContext<RecordType> {
     form?: any;
     format?: IFormat;
     control?: any;
+    errors?: any;
     trigger?: any;
     handleSubmit?: any;
     onSubmit?: SubmitHandler<any>;

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;