es-grid-template 1.8.61 → 1.8.62

package/es/grid-component/InternalTable.js

@@ -33,7 +33,7 @@ import classNames from "classnames";
 import HeaderContent from "./hooks/content/HeaderContent";
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from "becoxy-icons";
 import { Select } from "rc-master-ui";
-import { Button, Space } from "antd";
+import { Button, Space, Modal } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { closestCenter, DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
@@ -42,7 +42,6 @@ import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable
 import { Resizable } from "react-resizable";
 import { faker } from "@faker-js/faker";
 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';
@@ -61,9 +60,7 @@ const dragActiveStyle = (dragState, id) => {
       backgroundColor: '#c0c0c0',
       opacity: 0.3
     };
-  }
-  // dragover dashed style
-  else if (over && id === over && active !== over) {
+  } else if (over && id === over && active !== over) {
     style = direction === 'right' ? {
       borderRight: '1px dashed gray'
     } : {
@@ -88,6 +85,7 @@ const ResizableTitle = props => {
 
   const style = {
     ...props.style,
+    borderBottom: '1px solid #e0e0e0',
     // cursor: 'move',
     // ...(isDragging ? { position: 'relative', zIndex: 9999, userSelect: 'none' } : {}),
     ...dragActiveStyle(dragState, props.id)
@@ -158,12 +156,11 @@ const InternalTable = props => {
     lang,
     locale,
     dataSource,
-    allowResizing,
     dataSourceFilter: propDataSourceFilter,
     // onFilterClick,
     // onFilter,
     editAble,
-    rowKey: propRowKey,
+    // rowKey: propRowKey,
     format,
     onDataChange,
     sortMultiple,
@@ -171,7 +168,7 @@ const InternalTable = props => {
     // @ts-ignore
     onCellPaste,
     clickHeaderToSort = true,
-    components,
+    // components,
     onChooseColumns,
     groupAble,
     groupSetting,
@@ -181,16 +178,17 @@ const InternalTable = props => {
     pagination,
     height: propsHeight,
     summary,
-    infiniteScroll,
+    // infiniteScroll,
     wrapSettings,
     onFilter,
     onSorter,
-    defaultSorter,
+    // defaultSorter,
     toolbarItems,
     allowSortering,
     allowFiltering,
     ...rest
   } = props;
+  const theadRef = React.useRef(null);
   const id = React.useMemo(() => {
     return tableId ?? faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -265,15 +263,14 @@ const InternalTable = props => {
     if (totalHeight) {
       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);
+      const tableScrollRight = table?.querySelector(`.ui-rc-table-ping-right`);
+      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (theadRef ? theadRef.current.clientHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? 40 : 0) - (tableScrollRight ? 10 : 0);
       setHeight(hhh > 0 ? hhh : 0);
     }
-  }, [id, propsHeight, columns, editAble]);
+  }, [id, propsHeight, summary, theadRef, columns]);
   React.useEffect(() => {
     // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
     const totalHeight = windowSize.innerHeight - 60;
@@ -559,7 +556,7 @@ const InternalTable = props => {
           }) : column.tooltipDescription : column.template && typeof column.template !== 'function' ? column.template : data[column.field ?? ''];
           return {
             id: `${column.field}`,
-            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
+            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? 3 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
             // 'z-index': data?.children && column.field === firstNonGroupColumn?.field ? 11 : undefined,
             ...transformedColumn?.onCell?.(data, index),
             className: classNames(transformedColumn?.onCell?.(data, index).className ?? '', {
@@ -930,6 +927,14 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
+  const CustomThead = theadProps => {
+    const {
+      children
+    } = theadProps;
+    return /*#__PURE__*/React.createElement("thead", {
+      ref: theadRef
+    }, children);
+  };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
     sensors: sensors,
     modifiers: [restrictToHorizontalAxis],
@@ -981,9 +986,9 @@ const InternalTable = props => {
     toolbarItems: toolbarItems,
     components: {
       header: {
-        cell: ResizableTitle
+        cell: ResizableTitle,
+        wrapper: CustomThead
       }
-      // body: { cell: TableBodyCell }
     },
     onFilter: val => {
       handleOnFilter(val);

package/lib/grid-component/InternalTable.js

@@ -36,7 +36,6 @@ var _sortable = require("@dnd-kit/sortable");
 var _reactResizable = require("react-resizable");
 var _faker = require("@faker-js/faker");
 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 GridEdit from "./table/GridEdit"
@@ -69,9 +68,7 @@ const dragActiveStyle = (dragState, id) => {
       backgroundColor: '#c0c0c0',
       opacity: 0.3
     };
-  }
-  // dragover dashed style
-  else if (over && id === over && active !== over) {
+  } else if (over && id === over && active !== over) {
     style = direction === 'right' ? {
       borderRight: '1px dashed gray'
     } : {
@@ -96,6 +93,7 @@ const ResizableTitle = props => {
 
   const style = {
     ...props.style,
+    borderBottom: '1px solid #e0e0e0',
     // cursor: 'move',
     // ...(isDragging ? { position: 'relative', zIndex: 9999, userSelect: 'none' } : {}),
     ...dragActiveStyle(dragState, props.id)
@@ -166,12 +164,11 @@ const InternalTable = props => {
     lang,
     locale,
     dataSource,
-    allowResizing,
     dataSourceFilter: propDataSourceFilter,
     // onFilterClick,
     // onFilter,
     editAble,
-    rowKey: propRowKey,
+    // rowKey: propRowKey,
     format,
     onDataChange,
     sortMultiple,
@@ -179,7 +176,7 @@ const InternalTable = props => {
     // @ts-ignore
     onCellPaste,
     clickHeaderToSort = true,
-    components,
+    // components,
     onChooseColumns,
     groupAble,
     groupSetting,
@@ -189,16 +186,17 @@ const InternalTable = props => {
     pagination,
     height: propsHeight,
     summary,
-    infiniteScroll,
+    // infiniteScroll,
     wrapSettings,
     onFilter,
     onSorter,
-    defaultSorter,
+    // defaultSorter,
     toolbarItems,
     allowSortering,
     allowFiltering,
     ...rest
   } = props;
+  const theadRef = _react.default.useRef(null);
   const id = _react.default.useMemo(() => {
     return tableId ?? _faker.faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -273,15 +271,14 @@ const InternalTable = props => {
     if (totalHeight) {
       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);
+      const tableScrollRight = table?.querySelector(`.ui-rc-table-ping-right`);
+      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (theadRef ? theadRef.current.clientHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? 40 : 0) - (tableScrollRight ? 10 : 0);
       setHeight(hhh > 0 ? hhh : 0);
     }
-  }, [id, propsHeight, columns, editAble]);
+  }, [id, propsHeight, summary, theadRef, columns]);
   _react.default.useEffect(() => {
     // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
     const totalHeight = windowSize.innerHeight - 60;
@@ -567,7 +564,7 @@ const InternalTable = props => {
           }) : column.tooltipDescription : column.template && typeof column.template !== 'function' ? column.template : data[column.field ?? ''];
           return {
             id: `${column.field}`,
-            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
+            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? 3 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
             // 'z-index': data?.children && column.field === firstNonGroupColumn?.field ? 11 : undefined,
             ...transformedColumn?.onCell?.(data, index),
             className: (0, _classnames.default)(transformedColumn?.onCell?.(data, index).className ?? '', {
@@ -938,6 +935,14 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
+  const CustomThead = theadProps => {
+    const {
+      children
+    } = theadProps;
+    return /*#__PURE__*/_react.default.createElement("thead", {
+      ref: theadRef
+    }, children);
+  };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
     sensors: sensors,
     modifiers: [_modifiers.restrictToHorizontalAxis],
@@ -989,9 +994,9 @@ const InternalTable = props => {
     toolbarItems: toolbarItems,
     components: {
       header: {
-        cell: ResizableTitle
+        cell: ResizableTitle,
+        wrapper: CustomThead
       }
-      // body: { cell: TableBodyCell }
     },
     onFilter: val => {
       handleOnFilter(val);
@@ -1014,7 +1019,7 @@ const InternalTable = props => {
       borderRadius: 6,
       fontWeight: 500
     }
-  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/_react.default.createElement(_Modal.default, {
+  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     open: isFullScreen,
     footer: null,
     centered: true,

package/package.json

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