es-grid-template 1.7.38 → 1.7.39

package/lib/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/lib/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/lib/table-component/InternalTable.js

@@ -15,11 +15,11 @@ require("dayjs/locale/vi");
 require("./style.scss");
 var _faker = require("@faker-js/faker");
 var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var _Grid = _interopRequireDefault(require("./table/Grid"));
 var _utils = require("./hook/utils");
 var _useColumns = require("./hook/useColumns");
 var _convert = require("./hook/convert");
 var _antd = require("antd");
-var _Grid = _interopRequireDefault(require("./table/Grid"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import en from "rc-master-ui/es/date-picker/locale/en_US"
@@ -36,6 +36,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // import InfiniteTable from './table/InfiniteTable'
 // import GridEdit from './table/GridEdit'
+
 // import { Group } from 'becoxy-icons'
 
 // import { Tooltip } from 'react-tooltip'
@@ -58,7 +59,7 @@ const InternalTable = props => {
     t,
     columns: propsColumns,
     // columns,
-    // lang,
+    lang,
     locale,
     dataSource,
     editAble,
@@ -67,12 +68,6 @@ const InternalTable = props => {
     groupSetting,
     groupColumns,
     selectionSettings,
-    // infiniteScroll,
-    // wrapSettings,
-    // onFilter,
-    // expandable,
-    // contextMenuItems: propContextMenuItems,
-    // contextMenuHidden,
     // contextMenuClick,
     // contextMenuOpen,
     height,
@@ -81,8 +76,8 @@ const InternalTable = props => {
   const id = _react.default.useMemo(() => {
     return _faker.faker.string.alpha(20);
   }, []);
-  const rowKey = "rowId";
-  const prefix = "ui-rc";
+  const rowKey = 'rowId';
+  const prefix = 'ui-rc';
   const getWindowSize = () => {
     const {
       innerWidth,
@@ -98,37 +93,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.default.useState(null);
   const [sorterStates, setSorterStates] = _react.default.useState([]);
   const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
@@ -161,8 +130,8 @@ const InternalTable = props => {
   }, [dataSource]);
   const columnPinning = _react.default.useMemo(() => {
     return {
-      left: (0, _utils.getFixedFields)(columns, "left"),
-      right: (0, _utils.getFixedFields)(columns, "right")
+      left: (0, _utils.getFixedFields)(columns, 'left'),
+      right: (0, _utils.getFixedFields)(columns, 'right')
     };
   }, [columns]);
 
@@ -190,7 +159,7 @@ const InternalTable = props => {
     value: undefined
   });
   const triggerChangeColumns = (cols, keys, type) => {
-    if (type === "cellClick") {
+    if (type === 'cellClick') {
       setColumns(cols);
     } else {
       const aa = (0, _utils.flatColumns2)(columns).map(it => it.field);
@@ -198,81 +167,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.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
     t: t,
     id: id,
@@ -299,9 +193,7 @@ const InternalTable = props => {
     // onContextMenu={onContextMenu}
     // contextMenuItems={contextMenuItems}
     ,
-    editAble: isFullScreen ? false : editAble
-    // editAble={editAble}
-    ,
+    editAble: isFullScreen ? false : editAble,
     triggerChangeColumns: triggerChangeColumns,
     setExpanded: setExpanded,
     isFullScreen: isFullScreen,
@@ -316,27 +208,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.default.createElement("div", {
     style: {
       paddingTop: 40

package/lib/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/lib/table-component/TableContainer.js

@@ -29,6 +29,8 @@ var _reactVirtual = require("@tanstack/react-virtual");
 // import TableFooter from './footer/TableFooter'
 // import TableBody from './body/TableBody'
 
+// import ComponentSpinner from '../grid-component/LoadingSpinner'
+
 const TableContainer = props => {
   const {
     t,
@@ -109,7 +111,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();
@@ -146,49 +148,49 @@ const TableContainer = props => {
     className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/_react.default.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.default.createElement("div", {
     style: {
       flex: 1,
-      overflow: "hidden"
+      overflow: 'hidden'
     }
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== "Bottom"),
-    mode: "scroll"
+    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    mode: 'scroll'
   })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.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.default.createElement(_becoxyIcons.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.default.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.default.createElement(_pagination.default, (0, _extends2.default)({
+  }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
     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.default.createElement(_ColumnsChoose.ColumnsChoose, {
+    `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
     columnHidden: columnHidden,
     columns: columns,
     originColumns: propsColumns,
@@ -248,18 +250,18 @@ const TableContainer = props => {
   }, pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default
   // style={{padding: '0.75rem 1rem'}}
   , (0, _extends2.default)({}, 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) => `${(0, _reactNumericComponent.numericFormatter)((range[0] ?? 0).toString(), {
-      thousandSeparator: "."
+      thousandSeparator: '.'
     })}-${(0, _reactNumericComponent.numericFormatter)((range[1] ?? 0).toString(), {
-      thousandSeparator: "."
+      thousandSeparator: '.'
     })} / ${(0, _reactNumericComponent.numericFormatter)((totalItems ?? 0).toString(), {
-      thousandSeparator: "."
+      thousandSeparator: '.'
     })} items`,
     pageSizeOptions: [20, 50, 100, 1000, 10000],
     onChange: (page, pageSize1) => {

package/lib/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;