es-grid-template 1.7.38 → 1.7.39

package/es/table-component/table/TableWrapper.d.ts

@@ -6,19 +6,19 @@ import type { Column } from "@tanstack/react-table";
 type Props<T> = {
     prefix: string;
     id: string;
-    tableContainerRef: React.RefObject<HTMLDivElement | null>;
+    tableContainerRef: React.RefObject<HTMLDivElement>;
     height: number;
     minHeight?: number;
     table: Table<T>;
     summary?: boolean;
     loading?: boolean;
-    commandClick?: (args: Omit<CommandClick<T>, "rows">) => void;
+    commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;
     editAble?: boolean;
     contextMenuItems?: ContextMenuItem[];
     showEmptyText?: boolean;
     contextMenuClick?: any;
-    contextMenuOpen?: (args: Omit<ContextInfo<T>, "item">) => void;
-    contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<T>, "item" | "event">) => string[]);
+    contextMenuOpen?: (args: Omit<ContextInfo<T>, 'item'>) => void;
+    contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<T>, 'item' | 'event'>) => string[]);
     next?: () => void;
     dataSource: T[];
     pagination?: false | PaginationConfig;

package/es/table-component/table/TableWrapper.js

@@ -2,8 +2,7 @@ import classNames from "classnames";
 import TableHead from "../header/TableHead";
 import TableBody from "../body/TableBody";
 import TableFooter from "../footer/TableFooter";
-// import ComponentSpinner from "../../grid-component/LoadingSpinner"
-
+import ComponentSpinner from "../../grid-component/LoadingSpinner";
 import { Tooltip } from "react-tooltip";
 import ContextMenu from "../ContextMenu";
 import React, { useContext } from "react";
@@ -55,7 +54,7 @@ const TableWrapper = props => {
     viewportHeight: windowSize.innerHeight
   });
   const contextMenuItems = React.useMemo(() => {
-    if (typeof contextMenuHidden === "function" && propContextMenuItems && selectedRowData) {
+    if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
         rowInfo: {
           rowData: selectedRowData
@@ -63,15 +62,13 @@ const TableWrapper = props => {
       });
       return propContextMenuItems.filter(item => !hiddenItems.includes(item?.key));
     }
-    if (contextMenuHidden && typeof contextMenuHidden !== "function" && propContextMenuItems) {
+    if (contextMenuHidden && typeof contextMenuHidden !== 'function' && propContextMenuItems) {
       return propContextMenuItems.filter(item => !contextMenuHidden.includes(item?.key));
     }
     return propContextMenuItems;
   }, [propContextMenuItems, contextMenuHidden, selectedRowData]);
   const loadData = page => {
-    if (!hasMoreRef.current || loadingRef.current || loading) {
-      return;
-    }
+    if (!hasMoreRef.current || loadingRef.current || loading) return;
     loadingRef.current = true;
     setTimeout(() => {
       next?.();
@@ -102,14 +99,14 @@ const TableWrapper = props => {
       }
     }
     if (e.target.scrollLeft >= 0 && e.target.scrollLeft + e.target.clientWidth < e.target.scrollWidth) {
-      e.target.classList.add("ui-rc-table-ping-right");
+      e.target.classList.add('ui-rc-table-ping-right');
     } else {
-      e.target.classList.remove("ui-rc-table-ping-right");
+      e.target.classList.remove('ui-rc-table-ping-right');
     }
     if ((e.target.scrollLeft ?? 0) > 0) {
-      e.target.classList.add("ui-rc-table-ping-left");
+      e.target.classList.add('ui-rc-table-ping-left');
     } else {
-      e.target.classList.remove("ui-rc-table-ping-left");
+      e.target.classList.remove('ui-rc-table-ping-left');
     }
   };
   const onContextMenu = data => event => {
@@ -152,8 +149,8 @@ const TableWrapper = props => {
     if (!menuVisible) {
       document.addEventListener(`click`, function onClickOutside(e) {
         const element = e.target;
-        const menuContainer = document.querySelector(".popup-context-menu");
-        const isInsideContainer = element.closest(".popup-context-menu") && menuContainer;
+        const menuContainer = document.querySelector('.popup-context-menu');
+        const isInsideContainer = element.closest('.popup-context-menu') && menuContainer;
         if (isInsideContainer) {
           return;
         }
@@ -169,21 +166,19 @@ const TableWrapper = props => {
   };
   return /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "relative"
+      position: 'relative'
     },
     className: classNames(`${prefix}-grid-container`, {
-      "ui-rc-table-ping-right": tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) >= 0 && (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) < (tableContainerRef.current?.scrollWidth ?? 0),
-      "ui-rc-table-ping-left": tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
+      'ui-rc-table-ping-right': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) >= 0 && (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) < (tableContainerRef.current?.scrollWidth ?? 0),
+      'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
     })
   }, /*#__PURE__*/React.createElement("div", {
-    id: id
-    // id={"rc-ui-table-container"}
-    ,
+    // id={id}
     ref: tableContainerRef,
     style: {
-      overflow: "auto",
+      overflow: 'auto',
       //our scrollable table container
-      position: "relative",
+      position: 'relative',
       //needed for sticky header
       // height: tableHeight ?? '500px' //should be a fixed height
       maxHeight: height,
@@ -196,7 +191,7 @@ const TableWrapper = props => {
     onScroll: handleScroll
   }, /*#__PURE__*/React.createElement("table", {
     style: {
-      display: "grid",
+      display: 'grid',
       minWidth: table.getTotalSize()
     }
   }, /*#__PURE__*/React.createElement(TableHead, {
@@ -229,7 +224,9 @@ const TableWrapper = props => {
     // virtualPaddingRight={virtualPaddingRight}
     // fixedLeftColumns={fixedLeftColumns}
     // fixedRightColumns={fixedRightColumns}
-  }))), /*#__PURE__*/React.createElement(Tooltip, {
+  }))), loading && /*#__PURE__*/React.createElement("div", {
+    className: "spinner-loading"
+  }, /*#__PURE__*/React.createElement(ComponentSpinner, null)), /*#__PURE__*/React.createElement(Tooltip, {
     id: `${id}-tooltip-content`,
     style: {
       zIndex: 1999,

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

@@ -1,9 +1,9 @@
-import type { CheckboxProps, TablePaginationConfig } from "rc-master-ui";
-import type { ItemType } from "rc-master-ui/es/menu/interface";
-import type { OnChangeFn } from "@tanstack/react-table";
-import type { ReactElement, ReactNode } from "react";
-import type { IOperator } from "./hook/constant";
-import type { ColorPickerProps } from "antd";
+import type { CheckboxProps, TablePaginationConfig } from 'rc-master-ui';
+import type { ItemType } from 'rc-master-ui/es/menu/interface';
+import type { OnChangeFn } from '@tanstack/react-table';
+import type { ReactElement, ReactNode } from 'react';
+import type { IOperator } from './hook/constant';
+import type { ColorPickerProps } from 'antd';
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
 declare module "@tanstack/table-core" {
     interface ColumnMeta<any, any> extends ColumnTable {
@@ -47,14 +47,14 @@ export type IFormat = {
     monthFormat?: string;
     yearFormat?: string;
 };
-export type RowSelectMethod = "all" | "none" | "invert" | "single" | "multiple";
-export type EditType = "text" | "numeric" | "asyncSelect" | "date" | "datetime" | "time" | "week" | "month" | "quarter" | "year" | "select" | "checkbox" | "currency" | "image" | "selectTable" | "customSelect" | "form" | "color" | "treeSelect" | "file";
-export type ITextAlign = "center" | "left" | "right";
-export type TypeFilter = "Text" | "Date" | "Time" | "Datetime" | "DateRange" | "Month" | "Quarter" | "Year" | "Week" | "Number" | "NumberRange" | "Dropdown" | "DropTree" | "Checkbox" | "CheckboxTree" | "CheckboxDropdown";
-export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
-export type FilterOperator = "equal" | "notEqual" | "greaterThan" | "greaterThanOrEqual" | "lessThan" | "lessThanOrEqual" | "startsWith" | "endsWith" | "contains";
-export type FixedType = "left" | "right" | boolean;
-export type SelectMode = "checkbox" | "radio" | undefined;
+export type RowSelectMethod = 'all' | 'none' | 'invert' | 'single' | 'multiple';
+export type EditType = 'text' | 'numeric' | 'asyncSelect' | 'date' | 'datetime' | 'time' | 'week' | 'month' | 'quarter' | 'year' | 'select' | 'checkbox' | 'currency' | 'image' | 'selectTable' | 'customSelect' | 'form' | 'color' | 'treeSelect' | 'file';
+export type ITextAlign = 'center' | 'left' | 'right';
+export type TypeFilter = 'Text' | 'Date' | 'Time' | 'Datetime' | 'DateRange' | 'Month' | 'Quarter' | 'Year' | 'Week' | 'Number' | 'NumberRange' | 'Dropdown' | 'DropTree' | 'Checkbox' | 'CheckboxTree' | 'CheckboxDropdown';
+export type IColumnType = 'number' | 'time' | 'date' | 'week' | 'month' | 'file' | 'quarter' | 'year' | 'datetime' | 'string' | 'boolean' | 'checkbox' | 'color' | null | undefined;
+export type FilterOperator = 'equal' | 'notEqual' | 'greaterThan' | 'greaterThanOrEqual' | 'lessThan' | 'lessThanOrEqual' | 'startsWith' | 'endsWith' | 'contains';
+export type FixedType = 'left' | 'right' | boolean;
+export type SelectMode = 'checkbox' | 'radio' | undefined;
 type IGrid = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
 export interface FieldNames {
     value?: string;
@@ -67,7 +67,7 @@ export interface CommandItem {
     type?: string;
     visible?: boolean | ((record: any) => boolean);
     title: string;
-    color?: "blue" | "purple" | "cyan" | "green" | "magenta" | "pink" | "red" | "orange" | "yellow" | "volcano" | "geekblue" | "lime" | "gold";
+    color?: 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
     tooltip?: string;
     icon?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
     template?: ReactNode | ReactElement | ((record: any) => ReactNode | ReactElement);
@@ -92,9 +92,9 @@ export type ColumnTable<RecordType = AnyObject> = {
     format?: IFormat | ((rowData: any) => IFormat);
     allowFiltering?: boolean;
     /**
-     * @deprecated Please use `allowSorter` instead.
-     * @since  1.7.25
-     */
+      * @deprecated Please use `allowSorter` instead.
+      * @since  1.7.25
+      */
     sorter?: boolean;
     allowSorter?: boolean;
     operator?: FilterOperator;
@@ -106,9 +106,9 @@ export type ColumnTable<RecordType = AnyObject> = {
     showFilterSearch?: boolean;
     headerText?: string;
     /**
-     * @deprecated Please use `visible` instead.
-     * @since  1.7.33
-     */
+      * @deprecated Please use `visible` instead.
+      * @since  1.7.33
+      */
     hidden?: boolean;
     visible?: boolean;
     headerTooltip?: boolean | string | (() => ReactNode | ReactElement);
@@ -145,9 +145,9 @@ export type ColumnTable<RecordType = AnyObject> = {
     fixedType?: FixedType;
     fixed?: FixedType;
     /**
-     * @deprecated Please use `wrapSettings` instead.
-     * @since 1.7.34
-     */
+      * @deprecated Please use `wrapSettings` instead.
+      * @since 1.7.34
+      */
     headerTextWrap?: boolean;
     ellipsis?: boolean;
     allowResizing?: boolean;
@@ -205,8 +205,8 @@ export type TableProps<RecordType = AnyObject> = {
     lang?: string;
     contextMenuItems?: ContextMenuItem[];
     showDefaultContext?: boolean;
-    contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<RecordType>, "item" | "event">) => string[]);
-    contextMenuOpen?: (args: Omit<ContextInfo<RecordType>, "item">) => void;
+    contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<RecordType>, 'item' | 'event'>) => string[]);
+    contextMenuOpen?: (args: Omit<ContextInfo<RecordType>, 'item'>) => void;
     contextMenuClick?: (args: ContextInfo<RecordType>) => void;
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
     toolbarItems?: ToolbarItem[];
@@ -216,7 +216,7 @@ export type TableProps<RecordType = AnyObject> = {
         field: string;
         key: string;
         operator: IOperator;
-        predicate: "and" | "or";
+        predicate: 'and' | 'or';
         value: any;
     }[]) => void;
     onSorter?: (args: Sorter[]) => void;
@@ -295,7 +295,7 @@ export type IEditSelectSettings = {
     fieldKey?: string;
     options: any[] | ((rowData: any, field: string) => any[]);
     /**  get value form other field **/
-    fieldValue?: any;
+    fieldValue?: string;
     /** get label form other field **/
     fieldLabel?: string;
     /** cho phép nhập giá trị - onBlur: giá trị search được set thành value **/
@@ -363,7 +363,7 @@ export type ColumnSelectTable = {
     dataIndex?: string;
     type?: IColumnType;
     headerText?: string;
-    fixedType?: "left" | "right" | undefined;
+    fixedType?: 'left' | 'right' | undefined;
     width?: number | undefined;
     minWidth?: number;
     maxWidth?: number;
@@ -387,7 +387,7 @@ export type ITemplateColumn = {
 };
 export type RawValueType = string | number;
 export type ToolbarItem = {
-    position?: "Top" | "Bottom";
+    position?: 'Top' | 'Bottom';
     align?: ITextAlign;
     onClick?: (args: any) => void;
     key?: React.Key;
@@ -435,19 +435,19 @@ export type IOnPastedProps = {
     copyRows: any[];
     pastedColumns: string[];
     pasteData: any[];
-    type: "onPaste" | "onChange" | "onCellPaste";
+    type: 'onPaste' | 'onChange' | 'onCellPaste';
 };
 export type ICellClick = {
     index: number;
     indexCol?: number;
     rowId: string | number;
-    type: "Editing" | "Default";
+    type: 'Editing' | 'Default';
     field: string;
     cellValue: any;
     rowData: any;
 };
 export type CellChangeArgs<T> = {
-    type: "onPaste" | "onChange" | "onCellPaste";
+    type: 'onPaste' | 'onChange' | 'onCellPaste';
     value: any;
     option: AnyObject;
     rowData: T;
@@ -458,19 +458,19 @@ export type CellChangeArgs<T> = {
     indexCol: any;
     sumValue?: any[];
 };
-export type IWrapMode = "Header" | "Both" | "Content";
+export type IWrapMode = 'Header' | 'Both' | 'Content';
 export type IWrapSettings = {
     wrapMode?: IWrapMode;
 };
 export type SelectionSettings<T = AnyObject> = {
-    mode?: "checkbox" | "radio";
-    type?: "single" | "multiple";
+    mode?: 'checkbox' | 'radio';
+    type?: 'single' | 'multiple';
     checkboxOnly?: boolean;
     columnWidth?: number;
     hideSelectAll?: boolean;
     selectedRowKeys?: Key[];
     defaultSelectedRowKeys?: Key[];
-    getCheckboxProps?: (record: T) => Partial<Omit<CheckboxProps, "checked" | "defaultChecked">>;
+    getCheckboxProps?: (record: T) => Partial<Omit<CheckboxProps, 'checked' | 'defaultChecked'>>;
 };
 export type SelectionSelectFn<T = AnyObject> = (record: T, selected: boolean, selectedRows: T[], nativeEvent: Event) => void;
 export type RowSelection<T> = {
@@ -480,7 +480,7 @@ export type RowSelection<T> = {
     onChange?: (selectedRowKeys: Key[], selectedRows: T[], info: {
         type: RowSelectMethod;
     }, selectedRow: T) => void;
-    getCheckboxProps?: (record: T) => Partial<Omit<CheckboxProps, "checked" | "defaultChecked">>;
+    getCheckboxProps?: (record: T) => Partial<Omit<CheckboxProps, 'checked' | 'defaultChecked'>>;
     onSelect?: SelectionSelectFn<T>;
     /** @deprecated This function is deprecated and should use `onChange` instead */
     onSelectMultiple?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
@@ -513,7 +513,7 @@ export type ContextInfo<RecordType> = {
     event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
     item: ItemType;
 };
-export type Presets = Required<ColorPickerProps>["presets"][number];
+export type Presets = Required<ColorPickerProps>['presets'][number];
 export type RangeState = {
     rowRange: string[];
     colRange: string[];
@@ -527,6 +527,6 @@ export type RangeState = {
 export type Sorter = {
     columnKey: string;
     field: string;
-    order: "ascend" | "descend";
+    order: 'ascend' | 'descend';
 };
 export {};

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

@@ -1,7 +1,7 @@
-import type { Dispatch, SetStateAction } from "react";
+import type { Dispatch, SetStateAction } from 'react';
 import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
 import type { SubmitHandler } from "react-hook-form";
-import type { ExpandedState } from "@tanstack/react-table";
+import type { ExpandedState } from '@tanstack/react-table';
 export type IPositionCell = {
     rowId: string;
     colId: string;
@@ -33,7 +33,6 @@ export interface IContext<T> {
         innerHeight: number;
         innerWidth: number;
     };
-    isFullScreen?: boolean;
     control?: any;
     errors?: any;
     handleSubmit?: any;
@@ -79,5 +78,5 @@ export type ContextCellChange = {
     indexCol: number;
     newState?: any;
     prevState?: any;
-    type: "enter" | "blur" | "outClick";
+    type: 'enter' | 'blur' | 'outClick';
 };

package/es/table-component/useContext.js

@@ -1,9 +1,9 @@
-import { createContext } from "react";
+import { createContext } from 'react';
 export const TableContext = /*#__PURE__*/createContext({
-  prefix: "ui-rc",
-  id: "",
+  prefix: 'ui-rc',
+  id: '',
   isDataTree: false,
-  rowKey: "rowId",
+  rowKey: 'rowId',
   dataSource: [],
   originData: [],
   expanded: {},

package/lib/grid-component/hooks/constant.js

@@ -220,16 +220,16 @@ const optionFontSize = exports.optionFontSize = [{
   label: '48'
 }];
 
-/**
- * Sort order for BaseTable
+/**
+ * Sort order for BaseTable
  */
 const SortOrder = {
-  /**
-   * Sort data in ascending order
+  /**
+   * Sort data in ascending order
    */
   ascend: 'Ascending',
-  /**
-   * Sort data in descending order
+  /**
+   * Sort data in descending order
    */
   descend: 'Descending'
 };

package/lib/grid-component/hooks/useColumns.d.ts

@@ -15,7 +15,5 @@ interface UseColumnsConfig<RecordType> {
     rowKey?: any;
     onMouseHover?: any;
 }
-declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [
-    any
-];
+declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [any];
 export default useColumns;

package/lib/grid-component/hooks/utils.d.ts

@@ -53,7 +53,7 @@ export declare const getTemplate: (template: any, column?: ColumnTable) => React
 export declare const totalFixedWidth: <T>(columns: ColumnsTable<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => number;
 export declare const isObjEmpty: (obj: any) => boolean;
 export declare const getColumnsVisible: <T>(columns: ColumnsTable<T>, index: number) => ColumnTable<T>[];
-export declare const updateData: <Record = AnyObject>(initData: Record[], rows: Record[], key: keyof Record) => Record[];
+export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], rows: Record_1[], key: keyof Record_1) => Record_1[];
 export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
 export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
 export declare function findAllChildrenKeys<RecordType>(data: readonly RecordType[], getRowKey: GetRowKey<RecordType>, childrenColumnName: string): Key[];