es-grid-template 1.7.38 → 1.7.39

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

@@ -1,5 +1,6 @@
-import * as React from 'react';
-import type { ContextInfo, ContextMenuItem } from './type';
+import * as React from "react";
+import type { ContextInfo } from "./type";
+import type { ContextMenuItem } from "./type";
 export declare const findItemByKey: (array: any[], key: string, value: any) => any;
 type Props<RecordType> = {
     rowData: RecordType | null;

package/es/table-component/ContextMenu.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import * as React from "react";
 // import type { MenuProps } from "antd";
-import { Dropdown, Menu } from 'antd';
+import { Dropdown, Menu } from "antd";
 export const findItemByKey = (array, key, value) => {
   for (let i = 0; i < array.length; i++) {
     const item = array[i];

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

@@ -1,9 +1,9 @@
-import React from "react";
-import "react-resizable/css/styles.css";
-import "dayjs/locale/es";
-import "dayjs/locale/vi";
-import "./style.scss";
-import type { TableProps } from "./type";
+import React from 'react';
+import 'react-resizable/css/styles.css';
+import 'dayjs/locale/es';
+import 'dayjs/locale/vi';
+import './style.scss';
+import type { TableProps } from './type';
 export declare const SELECTION_COLUMN: {};
 declare const InternalTable: <RecordType extends object>(props: TableProps<RecordType>) => React.JSX.Element;
 export default InternalTable;

package/es/table-component/InternalTable.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import customParseFormat from "dayjs/plugin/customParseFormat";
-import React, { Fragment, useState } from "react";
-import "react-resizable/css/styles.css";
-import dayjs from "dayjs";
-import "dayjs/locale/es";
-import "dayjs/locale/vi";
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import React, { Fragment, useState } from 'react';
+import 'react-resizable/css/styles.css';
+import dayjs from 'dayjs';
+import 'dayjs/locale/es';
+import 'dayjs/locale/vi';
 
 // import en from "rc-master-ui/es/date-picker/locale/en_US"
 // import vi from "rc-master-ui/es/date-picker/locale/vi_VN"
@@ -20,10 +20,11 @@ import "./style.scss";
 // import withReactContent from "sweetalert2-react-content"
 // import { Tooltip } from "react-tooltip"
 
-import { faker } from "@faker-js/faker";
+import { faker } from '@faker-js/faker';
 import useMergedState from "rc-util/es/hooks/useMergedState";
 // import InfiniteTable from './table/InfiniteTable'
 // import GridEdit from './table/GridEdit'
+import Grid from "./table/Grid";
 // import { Group } from 'becoxy-icons'
 
 // import { Tooltip } from 'react-tooltip'
@@ -36,9 +37,7 @@ getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayB
 // import GridEdit from './table/GridEdit'
 import { convertToTanStackColumns } from "./hook/useColumns";
 import { convertColumns } from "./hook/convert";
-import { Modal } from "antd";
-import Grid from "./table/Grid";
-
+import { Modal } from 'antd';
 // import { columns111 } from '../test-2/columns'
 
 dayjs.extend(customParseFormat);
@@ -54,7 +53,7 @@ const InternalTable = props => {
     t,
     columns: propsColumns,
     // columns,
-    // lang,
+    lang,
     locale,
     dataSource,
     editAble,
@@ -63,12 +62,6 @@ const InternalTable = props => {
     groupSetting,
     groupColumns,
     selectionSettings,
-    // infiniteScroll,
-    // wrapSettings,
-    // onFilter,
-    // expandable,
-    // contextMenuItems: propContextMenuItems,
-    // contextMenuHidden,
     // contextMenuClick,
     // contextMenuOpen,
     height,
@@ -77,8 +70,8 @@ const InternalTable = props => {
   const id = React.useMemo(() => {
     return faker.string.alpha(20);
   }, []);
-  const rowKey = "rowId";
-  const prefix = "ui-rc";
+  const rowKey = 'rowId';
+  const prefix = 'ui-rc';
   const getWindowSize = () => {
     const {
       innerWidth,
@@ -94,37 +87,11 @@ const InternalTable = props => {
     const handleWindowResize = () => {
       setWindowSize(getWindowSize());
     };
-    window.addEventListener("resize", handleWindowResize);
+    window.addEventListener('resize', handleWindowResize);
     return () => {
-      window.removeEventListener("resize", handleWindowResize);
+      window.removeEventListener('resize', handleWindowResize);
     };
   }, []);
-
-  // const local = lang && lang === 'en' ? en : vi
-  // const dateRangeLocale = lang && lang === 'en' ? enDr : viDr
-
-  // const buddhistLocale: PickerLocale = {
-  //   ...local,
-  //   lang: {
-  //     ...local.lang
-  //   }
-  // }
-
-  // const menuRef = React.useRef<any>(null)
-  // const viewportWidth = windowSize.innerWidth
-  // const viewportHeight = windowSize.innerHeight
-
-  // const [menuVisible, setMenuVisible] = React.useState(false)
-  // const [selectedRowData, setSelectedRowData] = React.useState<RecordType | null>(null)
-  // const [position, setPosition] = React.useState<{
-  //   x: number | undefined
-  //   y: number | undefined
-  //   viewportWidth: number
-  //   viewportHeight: number
-  // }>({ x: 0, y: 0, viewportWidth, viewportHeight })
-
-  // const [tooltipContent, setTooltipContent] = useState<any>('')
-
   const [filterStates, setFilterState] = React.useState(null);
   const [sorterStates, setSorterStates] = React.useState([]);
   const [isFullScreen, setIsFullScreen] = React.useState(false);
@@ -157,8 +124,8 @@ const InternalTable = props => {
   }, [dataSource]);
   const columnPinning = React.useMemo(() => {
     return {
-      left: getFixedFields(columns, "left"),
-      right: getFixedFields(columns, "right")
+      left: getFixedFields(columns, 'left'),
+      right: getFixedFields(columns, 'right')
     };
   }, [columns]);
 
@@ -186,7 +153,7 @@ const InternalTable = props => {
     value: undefined
   });
   const triggerChangeColumns = (cols, keys, type) => {
-    if (type === "cellClick") {
+    if (type === 'cellClick') {
       setColumns(cols);
     } else {
       const aa = flatColumns2(columns).map(it => it.field);
@@ -194,81 +161,6 @@ const InternalTable = props => {
       setColumnsHiddenKeys(rsss);
     }
   };
-
-  // const contextMenuItems = React.useMemo(() => {
-  //   if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
-  //     const hiddenItems = contextMenuHidden({
-  //       rowInfo: {
-  //         rowData: selectedRowData
-  //       }
-  //     })
-
-  //     return propContextMenuItems.filter(item => !(hiddenItems as string[]).includes(item?.key as string))
-  //   }
-
-  //   if (contextMenuHidden && typeof contextMenuHidden !== 'function' && propContextMenuItems) {
-  //     return propContextMenuItems.filter(item => !(contextMenuHidden as string[]).includes(item?.key as string))
-  //   }
-
-  //   return propContextMenuItems
-  // }, [propContextMenuItems, contextMenuHidden, selectedRowData])
-
-  // const onContextMenu = (data: RecordType) => (event: any) => {
-  //   event.preventDefault() // Ngăn chặn menu mặc định của trình duyệt
-
-  //   setSelectedRowData(data)
-
-  //   contextMenuOpen?.({
-  //     rowInfo: {
-  //       rowData: data
-  //     },
-  //     event
-  //   })
-
-  //   setMenuVisible(true)
-
-  //   // Đợi DOM cập nhật và lấy kích thước menu
-  //   setTimeout(() => {
-  //     const menuElement = menuRef.current // Lấy menu từ DOM
-  //     const menuWidth = menuElement?.offsetWidth || 200 // Mặc định 200px nếu chưa render
-  //     const menuHeight = menuElement?.offsetHeight // Mặc định 450px nếu chưa render
-
-  //     // Điều chỉnh vị trí menu
-  //     let x = event.clientX
-  //     let y = event.clientY
-
-  //     if (x + menuWidth > viewportWidth) {
-  //       x = x - menuWidth - 10 // Cách cạnh phải 10px
-  //     }
-
-  //     if (y + menuHeight > viewportHeight) {
-  //       if (y < menuHeight) {
-  //         y = 10
-  //       } else {
-  //         y = y - 10 - menuHeight // Cách cạnh dưới 10px
-  //       }
-  //     }
-
-  //     setPosition(prevState => ({ ...prevState, x, y }))
-  //   }, 100)
-
-  //   if (!menuVisible) {
-  //     document.addEventListener(`click`, function onClickOutside(e) {
-  //       const element: any = e.target
-  //       const menuContainer = document.querySelector('.popup-context-menu')
-
-  //       const isInsideContainer = element.closest('.popup-context-menu') && menuContainer
-
-  //       if (isInsideContainer) {
-  //         return
-  //       }
-  //       setMenuVisible(false)
-  //       setPosition(prevState => ({ ...prevState, x: undefined, y: undefined }))
-  //       document.removeEventListener(`click`, onClickOutside)
-  //     })
-  //   }
-  // }
-
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
     t: t,
     id: id,
@@ -295,9 +187,7 @@ const InternalTable = props => {
     // onContextMenu={onContextMenu}
     // contextMenuItems={contextMenuItems}
     ,
-    editAble: isFullScreen ? false : editAble
-    // editAble={editAble}
-    ,
+    editAble: isFullScreen ? false : editAble,
     triggerChangeColumns: triggerChangeColumns,
     setExpanded: setExpanded,
     isFullScreen: isFullScreen,
@@ -312,27 +202,28 @@ const InternalTable = props => {
     footer: null,
     centered: true,
     closable: true,
-    width: "100%",
+    width: '100%',
     style: {
-      maxWidth: "100%",
-      height: "100%"
+      maxWidth: '100%',
+      height: '100%'
     }
     // onClose={() => setIsFullScreen(false)}
     ,
     onCancel: () => setIsFullScreen(false)
+
     // destroyOnClose
     ,
     styles: {
       content: {
-        height: "100vh",
+        height: '100vh',
         borderRadius: 0,
-        padding: "15px 10px"
+        padding: '15px 10px'
       },
       wrapper: {
         zIndex: 1050
       }
     },
-    destroyOnHidden: true
+    destroyOnClose: true
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       paddingTop: 40

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

@@ -1,8 +1,8 @@
-import type { Dispatch, SetStateAction } from "react";
-import React from "react";
-import type { ColumnDef, Table } from "@tanstack/react-table";
-import type { ColumnsTable, TableProps } from "./type";
-type TableContainerProps<T> = Omit<TableProps<T>, "columns"> & {
+import type { Dispatch, SetStateAction } from 'react';
+import React from 'react';
+import type { ColumnDef, Table } from '@tanstack/react-table';
+import type { ColumnsTable, TableProps } from './type';
+type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     table: Table<T>;
     prefix: string;
     id: string;

package/es/table-component/TableContainer.js

@@ -1,25 +1,26 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 // import type { Dispatch, SetStateAction } from "react";
 
-import React from "react";
+import React from 'react';
 // import TableHead from './header/TableHead'
 // import { sumSize } from './hook/utils'
 
 // import { useVirtualizer } from '@tanstack/react-virtual'
 
-import classNames from "classnames";
+import classNames from 'classnames';
 // import TableBody from './body/TableBody'
 import { TableContext } from "./useContext";
-import Pagination from "rc-master-ui/es/pagination";
-import { Toolbar } from "rc-master-ui";
-import { Maximize, Minimize } from "becoxy-icons";
+import Pagination from 'rc-master-ui/es/pagination';
+import { Toolbar } from 'rc-master-ui';
+import { Maximize, Minimize } from 'becoxy-icons';
 import { ColumnsChoose } from "./ColumnsChoose";
 // import TableFooter from './footer/TableFooter'
 // import TableBody from './body/TableBody'
-import { numericFormatter } from "react-numeric-component";
+import { numericFormatter } from 'react-numeric-component';
+// import ComponentSpinner from '../grid-component/LoadingSpinner'
 import TableWrapper from "./table/TableWrapper";
 import { sumSize } from "./hook/utils";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { useVirtualizer } from '@tanstack/react-virtual';
 const TableContainer = props => {
   const {
     t,
@@ -100,7 +101,7 @@ const TableContainer = props => {
     //   return element?.getBoundingClientRect().width;
     // },
 
-    measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? element => element?.getBoundingClientRect().height : undefined,
+    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
     overscan: 1 //how many columns to render on each side off screen each way (adjust this for performance)
   });
   const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -137,49 +138,49 @@ const TableContainer = props => {
     className: classNames(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      gap: ".75rem"
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
     }
   }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
-      overflow: "hidden"
+      overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== "Bottom"),
-    mode: "scroll"
+    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    mode: 'scroll'
   })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);
     },
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-content": t ? t("Minimized") : "Minimized"
+    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
   }) : /*#__PURE__*/React.createElement(Maximize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);
     },
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-content": t ? t("Full screen") : "Full screen"
+    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
   })), /*#__PURE__*/React.createElement("div", {
     style: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      gap: ".75rem"
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
     }
-  }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === "topRight" && /*#__PURE__*/React.createElement(Pagination, _extends({
+  }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/React.createElement(Pagination, _extends({
     showSizeChanger: true,
     responsive: true,
-    size: "small",
-    rootClassName: "top-pagination",
+    size: 'small',
+    rootClassName: 'top-pagination',
     showTotal: (totalItems, range) =>
     // @ts-ignore
-    `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? "items") : "items"}`
-  }, pagination)), typeof actionTemplate === "function" ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+    `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
     columnHidden: columnHidden,
     columns: columns,
     originColumns: propsColumns,
@@ -239,18 +240,18 @@ const TableContainer = props => {
   }, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination
   // style={{padding: '0.75rem 1rem'}}
   , _extends({}, pagination, {
-    rootClassName: "pagination-template",
+    rootClassName: 'pagination-template',
     showSizeChanger: true,
     responsive: true,
-    size: "small",
+    size: 'small',
     total: pagination.total,
     pageSize: pagination.onChange ? pagination.pageSize : table.getState().pagination.pageSize,
     showTotal: (totalItems, range) => `${numericFormatter((range[0] ?? 0).toString(), {
-      thousandSeparator: "."
+      thousandSeparator: '.'
     })}-${numericFormatter((range[1] ?? 0).toString(), {
-      thousandSeparator: "."
+      thousandSeparator: '.'
     })} / ${numericFormatter((totalItems ?? 0).toString(), {
-      thousandSeparator: "."
+      thousandSeparator: '.'
     })} items`,
     pageSizeOptions: [20, 50, 100, 1000, 10000],
     onChange: (page, pageSize1) => {

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

@@ -2,7 +2,7 @@ import type { Dispatch, SetStateAction } from "react";
 import React from "react";
 import type { ColumnDef, Table } from "@tanstack/react-table";
 import type { ColumnsTable, TableProps } from "./type";
-type TableContainerProps<T> = Omit<TableProps<T>, "columns"> & {
+type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     table: Table<T>;
     prefix: string;
     id: string;