es-grid-template 1.7.1 → 1.7.2

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,9 @@ const InternalTable = props => {
     };
   }, []);
   const [scrollHeight, setHeight] = 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 +264,8 @@ const InternalTable = props => {
 
   const [columns, setColumns] = React.useState([]);
   React.useEffect(() => {
-    const totalHeight = isFullScreen ? windowSize.innerHeight - 24 : propsHeight;
+    // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
+    const totalHeight = propsHeight;
     if (totalHeight) {
       const table = document.querySelector(`#${id}`);
       const title = table?.querySelector(`.ui-rc-table-title`);
@@ -275,7 +277,7 @@ 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, isFullScreen, windowSize.innerHeight]);
   const tableRef = React.useRef(null);
   React.useEffect(() => {
     setColumns(propsColumns);
@@ -891,15 +893,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 +953,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 +976,117 @@ 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
+      }
+    }
+  }, /*#__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={{ y: 300 - 41 - 7 }} // scroll height auto, không quá  600
+    // scroll={{ y: scrollHeight - (summary ? 0 : 7) }} // scroll height auto, không quá  600
+    ,
+
+    scroll: scrollHeight - (summary ? 1 : 1) < 0 ? {
+      y: 500
+    } : {
+      y: windowSize.innerHeight - 50 - (propsHeight ?? 0) + scrollHeight - (summary ? 1 : 1)
+    } // scroll height auto, không quá  600
+    ,
+
+    height: windowSize.innerHeight - 50,
+    scrollHeight: windowSize.innerHeight - (propsHeight ?? 0) + scrollHeight - 50,
+    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/hooks/useColumns.d.ts

@@ -15,5 +15,7 @@ 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/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,9 @@ const InternalTable = props => {
     };
   }, []);
   const [scrollHeight, setHeight] = (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 +272,8 @@ const InternalTable = props => {
 
   const [columns, setColumns] = _react.default.useState([]);
   _react.default.useEffect(() => {
-    const totalHeight = isFullScreen ? windowSize.innerHeight - 24 : propsHeight;
+    // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
+    const totalHeight = propsHeight;
     if (totalHeight) {
       const table = document.querySelector(`#${id}`);
       const title = table?.querySelector(`.ui-rc-table-title`);
@@ -284,7 +285,7 @@ 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, isFullScreen, windowSize.innerHeight]);
   const tableRef = _react.default.useRef(null);
   _react.default.useEffect(() => {
     setColumns(propsColumns);
@@ -900,15 +901,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 +961,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 +984,117 @@ 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
+      }
+    }
+  }, /*#__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={{ y: 300 - 41 - 7 }} // scroll height auto, không quá  600
+    // scroll={{ y: scrollHeight - (summary ? 0 : 7) }} // scroll height auto, không quá  600
+    ,
+
+    scroll: scrollHeight - (summary ? 1 : 1) < 0 ? {
+      y: 500
+    } : {
+      y: windowSize.innerHeight - 50 - (propsHeight ?? 0) + scrollHeight - (summary ? 1 : 1)
+    } // scroll height auto, không quá  600
+    ,
+
+    height: windowSize.innerHeight - 50,
+    scrollHeight: windowSize.innerHeight - (propsHeight ?? 0) + scrollHeight - 50,
+    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/package.json

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