es-grid-template 1.7.1 → 1.7.21

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

@@ -2,6 +2,7 @@
 interface GridProps {
     $heightTable?: number;
     $heightScroll?: number;
+    $isFullScreen?: boolean;
 }
 export declare const GridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GridProps>> & string;
 export {};

package/es/grid-component/GridStyle.js

@@ -2,4 +2,4 @@ import styled from "styled-components";
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})(["height:", ";padding:12px;.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}.ui-rc-table-body{&:has(.ui-rc-table-placeholder){height:", ";}table{height:100%;.ui-rc-table-placeholder{vertical-align:top;}}}.ui-rc-table-placeholder{}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll - 1}px` : undefined);
+})(["height:", ";padding-top:", ";.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}.ui-rc-table-body{&:has(.ui-rc-table-placeholder){height:", ";}table{height:100%;.ui-rc-table-placeholder{vertical-align:top;}}}.ui-rc-table-placeholder{}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$isFullScreen ? `20px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll - 1}px` : undefined);

package/es/grid-component/InternalTable.js

@@ -1,12 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { createContext, Fragment, useCallback, useContext, useState } from 'react';
-// import {Resizable} from "react-resizable";
 import 'react-resizable/css/styles.css';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { addRowIdArray, booleanOperator, convertFilters, convertFlatColumn, filterDataByColumns4, findItemByKey, findItemPath, flattenArray, getAllRowKey, getFormat, getTypeFilter, groupArrayByColumns, numberOperator, removeColumns, removeInvisibleColumns, stringOperator, translateOption, unFlattenData, updateArrayByKey, updateColumnsByGroup,
 // updateData,
 updateOrInsert } from "./hooks";
-import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
@@ -41,6 +39,7 @@ import { Resizable } from "react-resizable";
 import { faker } from "@faker-js/faker";
 import InfiniteTable from "./table/InfiniteTable";
 import useMergedState from "rc-util/es/hooks/useMergedState";
+import Modal from 'antd/es/modal/Modal';
 dayjs.extend(customParseFormat);
 const MySwal = withReactContent(Swal);
 const ASCEND = 'ascend';
@@ -188,7 +187,6 @@ const InternalTable = props => {
     onSorter,
     ...rest
   } = props;
-  const handle = useFullScreenHandle();
   const id = React.useMemo(() => {
     return tableId ?? faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -220,6 +218,10 @@ const InternalTable = props => {
     };
   }, []);
   const [scrollHeight, setHeight] = useState(0);
+  const [scrollHeight1, setHeight1] = useState(0);
+
+  // const [isModalOpen, setIsModalOpen] = useState(false)
+
   const local = lang && lang === 'en' ? en : vi;
   const dateRangeLocale = lang && lang === 'en' ? enDr : viDr;
   const buddhistLocale = {
@@ -263,7 +265,7 @@ const InternalTable = props => {
 
   const [columns, setColumns] = React.useState([]);
   React.useEffect(() => {
-    const totalHeight = isFullScreen ? windowSize.innerHeight - 24 : propsHeight;
+    const totalHeight = propsHeight;
     if (totalHeight) {
       const table = document.querySelector(`#${id}`);
       const title = table?.querySelector(`.ui-rc-table-title`);
@@ -275,7 +277,22 @@ const InternalTable = props => {
       const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
       setHeight(hhh > 0 ? hhh : 0);
     }
-  }, [id, propsHeight, columns, editAble, isFullScreen]);
+  }, [id, propsHeight, columns, editAble]);
+  React.useEffect(() => {
+    // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
+    const totalHeight = windowSize.innerHeight - 60;
+    if (totalHeight && isFullScreen) {
+      const table = document.querySelector(`#${id}`);
+      const title = table?.querySelector(`.ui-rc-table-title`);
+      const header = table?.querySelector(`.ui-rc-table-header`);
+      const paginationE = table?.querySelector(`.ui-rc-pagination`);
+      const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
+      const summaryE = table?.querySelector(`.ui-rc-table-summary`);
+      const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
+      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
+      setHeight1(hhh > 0 ? hhh : 0);
+    }
+  }, [id, isFullScreen, windowSize.innerHeight]);
   const tableRef = React.useRef(null);
   React.useEffect(() => {
     setColumns(propsColumns);
@@ -891,15 +908,18 @@ const InternalTable = props => {
   const handleChange = (paging, filters, sorter) => {
     onSorter?.(sorter);
   };
-  const fullScreenChange = state => {
-    setIsFullScreen(state);
+
+  // const fullScreenChange = (state: boolean) => {
+
+  //   setIsFullScreen(state)
+
+  // }
+
+  const handleFullScreen = () => {
+    setIsFullScreen(!isFullScreen);
   };
   const TableComponent = infiniteScroll ? InfiniteTable : groupAble ? Group : editAble ? GridEdit : Grid;
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FullScreen, {
-    handle: handle,
-    onChange: fullScreenChange,
-    className: "rc-fullscreen"
-  }, /*#__PURE__*/React.createElement(DndContext, {
+  return /*#__PURE__*/React.createElement(Fragment, null, true && /*#__PURE__*/React.createElement(DndContext, {
     sensors: sensors,
     modifiers: [restrictToHorizontalAxis],
     onDragEnd: onDragEnd,
@@ -948,9 +968,10 @@ const InternalTable = props => {
     } : {
       y: scrollHeight - (summary ? 1 : 1)
     } // scroll height auto, không quá  600
-    ,
 
-    height: isFullScreen ? windowSize.innerHeight - 24 : propsHeight,
+    // height={isFullScreen ? windowSize.innerHeight - 100 : propsHeight}
+    ,
+    height: propsHeight,
     scrollHeight: scrollHeight,
     components: {
       header: {
@@ -970,7 +991,116 @@ const InternalTable = props => {
     mergedFilterKeys: mergedFilterKeys,
     wrapSettings: wrapSettings,
     onChange: handleChange,
-    handleFullScreen: handle,
+    handleFullScreen: handleFullScreen,
+    isFullScreen: isFullScreen
+
+    // onChange={(paging, filters, sorter) => {
+    //   handleChange(sorter)
+    // }}
+  })))), /*#__PURE__*/React.createElement(DragOverlay, {
+    style: {
+      minWidth: 100,
+      width: columns[columns.findIndex(i => i.field === dragIndex.active)]?.width
+    }
+  }, /*#__PURE__*/React.createElement("th", {
+    style: {
+      backgroundColor: '#f0f0f0',
+      padding: 6,
+      borderRadius: 6,
+      fontWeight: 500
+    }
+  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/React.createElement(Modal, {
+    open: isFullScreen,
+    footer: null,
+    centered: true,
+    closable: true,
+    width: '100%',
+    style: {
+      maxWidth: '100%',
+      height: '100%'
+    },
+    onClose: () => setIsFullScreen(false),
+    onCancel: () => setIsFullScreen(false)
+
+    // destroyOnClose
+    ,
+    styles: {
+      content: {
+        height: '100vh',
+        borderRadius: 0
+      },
+      wrapper: {
+        zIndex: 1060
+      }
+    }
+  }, /*#__PURE__*/React.createElement(DndContext, {
+    sensors: sensors,
+    modifiers: [restrictToHorizontalAxis],
+    onDragEnd: onDragEnd,
+    onDragOver: onDragOver,
+    collisionDetection: closestCenter
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    items: columns.map(i => i.field),
+    strategy: horizontalListSortingStrategy
+  }, /*#__PURE__*/React.createElement(DragIndexContext.Provider, {
+    value: dragIndex
+  }, /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
+    t: t,
+    id: faker.string.alpha(20),
+    locale: locale,
+    tableRef: tableRef
+    // dataSource={mergedData}
+    ,
+    originData: mergedData
+    // dataSource={filterStates && filterStates.length ? filterData : mergedData}
+    ,
+    dataSource: filterDataByColumns4(mergedData, filterStates, mergedFilterKeys),
+    format: format,
+    columns: mergedColumns,
+    showSorterTooltip: {
+      target: 'sorter-icon'
+    },
+    triggerChangeColumns: triggerChangeColumns,
+    triggerChangeData: triggerChangeData,
+    triggerGroupColumns: triggerGroupColumns,
+    rowKey: rowKey,
+    getRowKey: getRowKey,
+    triggerPaste: triggerPaste,
+    clickHeaderToSort: clickHeaderToSort,
+    groupSetting: groupSetting,
+    groupAble: groupAble,
+    groupColumns: groupColumns,
+    commandClick: triggerCommandClick,
+    summary: summary,
+    pagination: pagination,
+    scroll: scrollHeight1 - (summary ? 1 : 1) < 0 ? {
+      y: 500
+    } : {
+      y: scrollHeight1 - (summary ? 1 : 1)
+    } // scroll height auto, không quá  600
+    ,
+
+    height: windowSize.innerHeight - 35,
+    scrollHeight: scrollHeight1,
+    components: {
+      header: {
+        cell: ResizableTitle
+      },
+      body: {
+        cell: TableBodyCell
+      }
+    },
+    setTooltipContent: setTooltipContent,
+    onFilter: val => {
+      handleOnFilter(val);
+      // triggerFilter?.(convertFilters(val))
+      // onFilter?.(convertFilters(val))
+    },
+    setMergedFilterKeys: setMergedFilterKeys,
+    mergedFilterKeys: mergedFilterKeys,
+    wrapSettings: wrapSettings,
+    onChange: handleChange,
+    handleFullScreen: handleFullScreen,
     isFullScreen: isFullScreen
 
     // onChange={(paging, filters, sorter) => {

package/es/grid-component/TableGrid.js

@@ -384,16 +384,16 @@ const TableGrid = props => {
       , {
         items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
         mode: 'scroll'
-      })), fullScreen && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+      })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
         fontSize: 16,
-        onClick: handleFullScreen.exit,
+        onClick: () => handleFullScreen?.(),
         "data-tooltip-id": "tooltip-icon",
-        "data-tooltip-content": t ? t('Full Screen') : 'Full screen'
+        "data-tooltip-content": t ? t('Minimized') : 'Minimized'
       }) : /*#__PURE__*/React.createElement(Maximize, {
         fontSize: 16,
-        onClick: handleFullScreen.enter,
+        onClick: () => handleFullScreen?.(),
         "data-tooltip-id": "tooltip-icon",
-        "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+        "data-tooltip-content": t ? t('Full screen') : 'Full screen'
       })), /*#__PURE__*/React.createElement("div", {
         style: {
           display: 'flex',

package/es/grid-component/table/Grid.js

@@ -13,11 +13,13 @@ const Grid = props => {
     height,
     scrollHeight,
     rowHoverable,
+    isFullScreen,
     ...rest
   } = props;
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -37,6 +39,7 @@ const Grid = props => {
       }
     }
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
+    isFullScreen: isFullScreen,
     id: id
     // style={{...style, minHeight: height}}
     ,

package/es/grid-component/table/GridEdit.js

@@ -255,6 +255,7 @@ const GridEdit = props => {
     mergedFilterKeys,
     setMergedFilterKeys,
     wrapSettings,
+    isFullScreen,
     ...rest
   } = props;
   const ref = useRef(null);
@@ -2552,6 +2553,7 @@ const GridEdit = props => {
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -2673,7 +2675,8 @@ const GridEdit = props => {
       if (rowsSelected && rowsSelected.current.size > 0) {
         addClassCellIndexSelected(rowsSelected.current, id);
       }
-    }
+    },
+    isFullScreen: isFullScreen
   })))))), /*#__PURE__*/React.createElement(Toaster, {
     position: toast,
     toastOptions: {

package/es/grid-component/table/Group.js

@@ -24,6 +24,7 @@ const Group = props => {
     groupColumns,
     triggerGroupColumns,
     onExpandClick,
+    isFullScreen,
     ...rest
   } = props;
   const {
@@ -107,6 +108,7 @@ const Group = props => {
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -170,7 +172,8 @@ const Group = props => {
       ...expandable
     },
     groupToolbar: groupToolbar,
-    groupColumns: groupColumns
+    groupColumns: groupColumns,
+    isFullScreen: isFullScreen
   }))));
 };
 export default Group;

package/es/grid-component/table/InfiniteTable.js

@@ -26,6 +26,7 @@ const InfiniteTable = props => {
     rowHoverable,
     pagination,
     dataSource,
+    isFullScreen,
     ...rest
   } = props;
   const {
@@ -68,6 +69,7 @@ const InfiniteTable = props => {
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -92,7 +94,8 @@ const InfiniteTable = props => {
     pagination: false,
     virtual: true,
     onScroll: handleScroll,
-    loading: loading
+    loading: loading,
+    isFullScreen: isFullScreen
   })))));
 };
 export default InfiniteTable;

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

@@ -2,6 +2,7 @@
 interface GridProps {
     $heightTable?: number;
     $heightScroll?: number;
+    $isFullScreen?: boolean;
 }
 export declare const GridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GridProps>> & string;
 export {};

package/lib/grid-component/GridStyle.js

@@ -9,4 +9,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})(["height:", ";padding:12px;.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}.ui-rc-table-body{&:has(.ui-rc-table-placeholder){height:", ";}table{height:100%;.ui-rc-table-placeholder{vertical-align:top;}}}.ui-rc-table-placeholder{}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll - 1}px` : undefined);
+})(["height:", ";padding-top:", ";.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}.ui-rc-table-body{&:has(.ui-rc-table-placeholder){height:", ";}table{height:100%;.ui-rc-table-placeholder{vertical-align:top;}}}.ui-rc-table-placeholder{}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$isFullScreen ? `20px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll - 1}px` : undefined);

package/lib/grid-component/InternalTable.js

@@ -10,7 +10,6 @@ var _react = _interopRequireWildcard(require("react"));
 require("react-resizable/css/styles.css");
 var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
 var _hooks = require("./hooks");
-var _reactFullScreen = require("react-full-screen");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 require("dayjs/locale/es");
 require("dayjs/locale/vi");
@@ -39,10 +38,9 @@ var _reactResizable = require("react-resizable");
 var _faker = require("@faker-js/faker");
 var _InfiniteTable = _interopRequireDefault(require("./table/InfiniteTable"));
 var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var _Modal = _interopRequireDefault(require("antd/es/modal/Modal"));
 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 {Resizable} from "react-resizable";
-
 // import useColumns from "./hooks/useColumns";
 
 // import 'rc-master-ui/es/date-range-picker/styles/index.less'
@@ -197,7 +195,6 @@ const InternalTable = props => {
     onSorter,
     ...rest
   } = props;
-  const handle = (0, _reactFullScreen.useFullScreenHandle)();
   const id = _react.default.useMemo(() => {
     return tableId ?? _faker.faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -229,6 +226,10 @@ const InternalTable = props => {
     };
   }, []);
   const [scrollHeight, setHeight] = (0, _react.useState)(0);
+  const [scrollHeight1, setHeight1] = (0, _react.useState)(0);
+
+  // const [isModalOpen, setIsModalOpen] = useState(false)
+
   const local = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
   const dateRangeLocale = lang && lang === 'en' ? _en_US2.default : _vi_VN2.default;
   const buddhistLocale = {
@@ -272,7 +273,7 @@ const InternalTable = props => {
 
   const [columns, setColumns] = _react.default.useState([]);
   _react.default.useEffect(() => {
-    const totalHeight = isFullScreen ? windowSize.innerHeight - 24 : propsHeight;
+    const totalHeight = propsHeight;
     if (totalHeight) {
       const table = document.querySelector(`#${id}`);
       const title = table?.querySelector(`.ui-rc-table-title`);
@@ -284,7 +285,22 @@ const InternalTable = props => {
       const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
       setHeight(hhh > 0 ? hhh : 0);
     }
-  }, [id, propsHeight, columns, editAble, isFullScreen]);
+  }, [id, propsHeight, columns, editAble]);
+  _react.default.useEffect(() => {
+    // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
+    const totalHeight = windowSize.innerHeight - 60;
+    if (totalHeight && isFullScreen) {
+      const table = document.querySelector(`#${id}`);
+      const title = table?.querySelector(`.ui-rc-table-title`);
+      const header = table?.querySelector(`.ui-rc-table-header`);
+      const paginationE = table?.querySelector(`.ui-rc-pagination`);
+      const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
+      const summaryE = table?.querySelector(`.ui-rc-table-summary`);
+      const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
+      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
+      setHeight1(hhh > 0 ? hhh : 0);
+    }
+  }, [id, isFullScreen, windowSize.innerHeight]);
   const tableRef = _react.default.useRef(null);
   _react.default.useEffect(() => {
     setColumns(propsColumns);
@@ -900,15 +916,18 @@ const InternalTable = props => {
   const handleChange = (paging, filters, sorter) => {
     onSorter?.(sorter);
   };
-  const fullScreenChange = state => {
-    setIsFullScreen(state);
+
+  // const fullScreenChange = (state: boolean) => {
+
+  //   setIsFullScreen(state)
+
+  // }
+
+  const handleFullScreen = () => {
+    setIsFullScreen(!isFullScreen);
   };
   const TableComponent = infiniteScroll ? _InfiniteTable.default : groupAble ? _Group.default : editAble ? _GridEdit.default : _Grid.default;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactFullScreen.FullScreen, {
-    handle: handle,
-    onChange: fullScreenChange,
-    className: "rc-fullscreen"
-  }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, true && /*#__PURE__*/_react.default.createElement(_core.DndContext, {
     sensors: sensors,
     modifiers: [_modifiers.restrictToHorizontalAxis],
     onDragEnd: onDragEnd,
@@ -957,9 +976,10 @@ const InternalTable = props => {
     } : {
       y: scrollHeight - (summary ? 1 : 1)
     } // scroll height auto, không quá  600
-    ,
 
-    height: isFullScreen ? windowSize.innerHeight - 24 : propsHeight,
+    // height={isFullScreen ? windowSize.innerHeight - 100 : propsHeight}
+    ,
+    height: propsHeight,
     scrollHeight: scrollHeight,
     components: {
       header: {
@@ -979,7 +999,116 @@ const InternalTable = props => {
     mergedFilterKeys: mergedFilterKeys,
     wrapSettings: wrapSettings,
     onChange: handleChange,
-    handleFullScreen: handle,
+    handleFullScreen: handleFullScreen,
+    isFullScreen: isFullScreen
+
+    // onChange={(paging, filters, sorter) => {
+    //   handleChange(sorter)
+    // }}
+  })))), /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
+    style: {
+      minWidth: 100,
+      width: columns[columns.findIndex(i => i.field === dragIndex.active)]?.width
+    }
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    style: {
+      backgroundColor: '#f0f0f0',
+      padding: 6,
+      borderRadius: 6,
+      fontWeight: 500
+    }
+  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/_react.default.createElement(_Modal.default, {
+    open: isFullScreen,
+    footer: null,
+    centered: true,
+    closable: true,
+    width: '100%',
+    style: {
+      maxWidth: '100%',
+      height: '100%'
+    },
+    onClose: () => setIsFullScreen(false),
+    onCancel: () => setIsFullScreen(false)
+
+    // destroyOnClose
+    ,
+    styles: {
+      content: {
+        height: '100vh',
+        borderRadius: 0
+      },
+      wrapper: {
+        zIndex: 1060
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    sensors: sensors,
+    modifiers: [_modifiers.restrictToHorizontalAxis],
+    onDragEnd: onDragEnd,
+    onDragOver: onDragOver,
+    collisionDetection: _core.closestCenter
+  }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
+    items: columns.map(i => i.field),
+    strategy: _sortable.horizontalListSortingStrategy
+  }, /*#__PURE__*/_react.default.createElement(DragIndexContext.Provider, {
+    value: dragIndex
+  }, /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
+    t: t,
+    id: _faker.faker.string.alpha(20),
+    locale: locale,
+    tableRef: tableRef
+    // dataSource={mergedData}
+    ,
+    originData: mergedData
+    // dataSource={filterStates && filterStates.length ? filterData : mergedData}
+    ,
+    dataSource: (0, _hooks.filterDataByColumns4)(mergedData, filterStates, mergedFilterKeys),
+    format: format,
+    columns: mergedColumns,
+    showSorterTooltip: {
+      target: 'sorter-icon'
+    },
+    triggerChangeColumns: triggerChangeColumns,
+    triggerChangeData: triggerChangeData,
+    triggerGroupColumns: triggerGroupColumns,
+    rowKey: rowKey,
+    getRowKey: getRowKey,
+    triggerPaste: triggerPaste,
+    clickHeaderToSort: clickHeaderToSort,
+    groupSetting: groupSetting,
+    groupAble: groupAble,
+    groupColumns: groupColumns,
+    commandClick: triggerCommandClick,
+    summary: summary,
+    pagination: pagination,
+    scroll: scrollHeight1 - (summary ? 1 : 1) < 0 ? {
+      y: 500
+    } : {
+      y: scrollHeight1 - (summary ? 1 : 1)
+    } // scroll height auto, không quá  600
+    ,
+
+    height: windowSize.innerHeight - 35,
+    scrollHeight: scrollHeight1,
+    components: {
+      header: {
+        cell: ResizableTitle
+      },
+      body: {
+        cell: TableBodyCell
+      }
+    },
+    setTooltipContent: setTooltipContent,
+    onFilter: val => {
+      handleOnFilter(val);
+      // triggerFilter?.(convertFilters(val))
+      // onFilter?.(convertFilters(val))
+    },
+    setMergedFilterKeys: setMergedFilterKeys,
+    mergedFilterKeys: mergedFilterKeys,
+    wrapSettings: wrapSettings,
+    onChange: handleChange,
+    handleFullScreen: handleFullScreen,
     isFullScreen: isFullScreen
 
     // onChange={(paging, filters, sorter) => {

package/lib/grid-component/TableGrid.js

@@ -384,16 +384,16 @@ const TableGrid = props => {
       , {
         items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
         mode: 'scroll'
-      })), fullScreen && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+      })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
         fontSize: 16,
-        onClick: handleFullScreen.exit,
+        onClick: () => handleFullScreen?.(),
         "data-tooltip-id": "tooltip-icon",
-        "data-tooltip-content": t ? t('Full Screen') : 'Full screen'
+        "data-tooltip-content": t ? t('Minimized') : 'Minimized'
       }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
         fontSize: 16,
-        onClick: handleFullScreen.enter,
+        onClick: () => handleFullScreen?.(),
         "data-tooltip-id": "tooltip-icon",
-        "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+        "data-tooltip-content": t ? t('Full screen') : 'Full screen'
       })), /*#__PURE__*/_react.default.createElement("div", {
         style: {
           display: 'flex',

package/lib/grid-component/table/Grid.js

@@ -22,11 +22,13 @@ const Grid = props => {
     height,
     scrollHeight,
     rowHoverable,
+    isFullScreen,
     ...rest
   } = props;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -46,6 +48,7 @@ const Grid = props => {
       }
     }
   }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
+    isFullScreen: isFullScreen,
     id: id
     // style={{...style, minHeight: height}}
     ,

package/lib/grid-component/table/GridEdit.js

@@ -252,6 +252,7 @@ const GridEdit = props => {
     mergedFilterKeys,
     setMergedFilterKeys,
     wrapSettings,
+    isFullScreen,
     ...rest
   } = props;
   const ref = (0, _react.useRef)(null);
@@ -2549,6 +2550,7 @@ const GridEdit = props => {
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -2670,7 +2672,8 @@ const GridEdit = props => {
       if (rowsSelected && rowsSelected.current.size > 0) {
         (0, _hooks.addClassCellIndexSelected)(rowsSelected.current, id);
       }
-    }
+    },
+    isFullScreen: isFullScreen
   })))))), /*#__PURE__*/_react.default.createElement(_reactHotToast.Toaster, {
     position: toast,
     toastOptions: {

package/lib/grid-component/table/Group.js

@@ -33,6 +33,7 @@ const Group = props => {
     groupColumns,
     triggerGroupColumns,
     onExpandClick,
+    isFullScreen,
     ...rest
   } = props;
   const {
@@ -116,6 +117,7 @@ const Group = props => {
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -179,7 +181,8 @@ const Group = props => {
       ...expandable
     },
     groupToolbar: groupToolbar,
-    groupColumns: groupColumns
+    groupColumns: groupColumns,
+    isFullScreen: isFullScreen
   }))));
 };
 var _default = exports.default = Group;

package/lib/grid-component/table/InfiniteTable.js

@@ -34,6 +34,7 @@ const InfiniteTable = props => {
     rowHoverable,
     pagination,
     dataSource,
+    isFullScreen,
     ...rest
   } = props;
   const {
@@ -76,6 +77,7 @@ const InfiniteTable = props => {
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -100,7 +102,8 @@ const InfiniteTable = props => {
     pagination: false,
     virtual: true,
     onScroll: handleScroll,
-    loading: loading
+    loading: loading,
+    isFullScreen: isFullScreen
   })))));
 };
 var _default = exports.default = InfiniteTable;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.7.1",
+  "version": "1.7.21",
   "description": "es-grid-template",
   "keywords": [
     "react",