@gmfe/table-x 2.14.26 → 2.14.30-alpha.0

package/LICENSE

@@ -0,0 +1,16 @@
+ISC License
+
+Copyright (c) 2020-present, gmfe contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gmfe/table-x",
-  "version": "2.14.26",
+  "version": "2.14.30-alpha.0",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gmfe#readme",
@@ -27,8 +27,9 @@
   },
   "dependencies": {
     "@gm-common/tool": "^1.0.0",
-    "@gmfe/locales": "^2.14.26",
-    "@gmfe/react": "^2.14.26",
+    "@gmfe/business": "^2.14.30-alpha.0",
+    "@gmfe/locales": "^2.14.30-alpha.0",
+    "@gmfe/react": "^2.14.30-alpha.0",
     "classnames": "^2.2.5",
     "lodash": "^4.17.14",
     "prop-types": "^15.7.2",
@@ -36,5 +37,5 @@
     "react-window": "^1.8.5",
     "sortablejs": "^1.10.1"
   },
-  "gitHead": "2fc65546df80d52dcfb37c2c35b615dbade5daa9"
+  "gitHead": "f7da14010d37550f0a19949fe4a5b3d65301545a"
 }

package/src/base/index.js

@@ -6,6 +6,7 @@ import classNames from 'classnames'
 import _ from 'lodash'
 import THead from './thead'
 import Tr from './tr'
+import { StickyLayout } from '@gmfe/react'
 
 // 给定初始值，交由getColumnStyle控制。width逻辑保持跟react-table（v6）的用法一致。
 const defaultColumn = __DEFAULT_COLUMN
@@ -139,4 +140,4 @@ TableX.defaultProps = {
   isTrHighlight: () => false
 }
 
-export default TableX
+export default StickyLayout(TableX)

package/src/base/thead.js

@@ -4,7 +4,7 @@ import Th from './th'
 
 const THead = ({ headerGroups, totalWidth }) => {
   return (
-    <thead className='gm-table-x-thead'>
+    <thead className='gm-table-x-thead common-sticky-header'>
       {headerGroups.map((headerGroup, i) => (
         <tr key={i} className='gm-table-x-tr'>
           {headerGroup.headers.map((column, i) => (

package/src/hoc/sticky_layout.js

@@ -0,0 +1,149 @@
+/**
+ * @author: stanfer
+ * @description:
+ * @createDate: 2025/11/24 11:05
+ * @Version: 1.0
+ * @last modify time:
+ **/
+import React, { useRef, useEffect } from 'react'
+
+function stickyLayout(Component) {
+  const StickyLayout = ({ ...rest }) => {
+    const currentStickyRef = useRef(null);
+    const topSentinelRef = useRef(null);
+    const bottomSentinelRef = useRef(null);
+    // 统一管理
+    const observerRef = useRef(null);
+
+    useEffect(() => {
+      if (!currentStickyRef.current) return;
+
+      const options = {
+        root: null, // 相对于浏览器视口
+        rootMargin: '0px',
+        threshold: 0, // 只要有一个像素进入/离开视口就触发
+      };
+
+      observerRef.current = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          const target = entry.target;
+
+          if (target === topSentinelRef.current) {
+            if (entry.isIntersecting) {
+              console.log('=======> 顶部进入');
+              let heightSum = 0, tableRoot;
+              const fullTab = document.querySelectorAll('.gm-framework-full-tabs')
+              const commonStickyHeader = document.querySelectorAll('.common-sticky-header')
+              const rtTable = document.querySelectorAll('.rt-table')
+              const rtTheadHeader = document.querySelectorAll('.rt-thead')
+              rtTheadHeader.forEach((el) => {
+                el.style.position = 'sticky';
+                el.style.top = 0;
+                el.style.zIndex = 10;
+                heightSum += el.offsetHeight + 10; // 元素本身高 + 上下 10 padding
+              })
+
+              commonStickyHeader.forEach((item, idx) => {
+                if (fullTab.length) {
+                  currentStickyRef.current.style.zIndex = 101;
+                }
+                // console.log(item.className);
+                if (item.className.includes('gm-box-table-header')) {
+                  heightSum += item.offsetHeight + 10; // 元素本身高 + 上下 10 padding
+                  // console.log(idx, item.getBoundingClientRect(), 'gm-box-table-header: ', item.getBoundingClientRect().height + 20);
+                }
+                if (item.className.includes('gm-table-x-thead')) {
+                  heightSum += item.offsetHeight + 8; // 元素本身高 + 上下 8 padding
+                  tableRoot = item.parentElement.parentElement;
+                  // console.log(idx, item.getBoundingClientRect(), 'gm-table-x-thead: ', item.getBoundingClientRect().height + 16);
+                }
+              })
+
+              if (rtTable.length) {
+                rtTable.forEach((el) => {
+                  if (fullTab.length) {
+                    el.style.maxHeight = `calc(100vh - ${heightSum + (fullTab.length * 40) + 50}px)`; // +50 顶部导航栏
+                    return;
+                  }
+                  el.style.maxHeight = `calc(100vh - ${heightSum + 50}px)`; // +50 顶部导航栏
+                })
+              }
+              if (tableRoot) {
+                if (fullTab.length) {
+                  tableRoot.style.maxHeight = `calc(100vh - ${heightSum + (fullTab.length * 40) + 50}px)`; // +50 顶部导航栏
+                  return;
+                }
+                tableRoot.style.maxHeight = `calc(100vh - ${heightSum + 50}px)`; // +50 顶部导航栏
+              }
+              // currentStickyRef.current.style.maxHeight = 'unset';
+              console.log('currentStickyRef 实例:', currentStickyRef.current.style);
+              return
+            }
+            currentStickyRef.current.style.maxHeight = '50%'; // TODO: 这块需要之后要走外部参数
+            console.log('顶部离开 <========');
+            return;
+          }
+          if (target === bottomSentinelRef.current) {
+            if (entry.isIntersecting) {
+              console.log('=======> 底部进入');
+              return;
+            }
+            console.log('底部离开 <========');
+          }
+        });
+      }, options);
+
+      if (topSentinelRef.current) {
+        observerRef.current.observe(topSentinelRef.current);
+      }
+      if (bottomSentinelRef.current) {
+        observerRef.current.observe(bottomSentinelRef.current);
+      }
+
+      return () => {
+        if (observerRef.current) {
+          observerRef.current.disconnect();
+        }
+      };
+    }, [])
+
+    return (
+      <div ref={currentStickyRef} className='common-sticky-layout'>
+        <div
+          ref={topSentinelRef}
+          sentinel="topSentinel"
+          style={{
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '1px', // 尽量小，不占空间
+            pointerEvents: 'none', // 防止它拦截任何鼠标事件
+            backgroundColor: 'transparent', // 完全透明
+          }}
+        />
+        <Component {...rest} />
+        <div
+          ref={bottomSentinelRef}
+          sentinel="bottomSentinel"
+          style={{
+            position: 'absolute',
+            bottom: '0',
+            left: '0',
+            width: '100%',
+            height: '1px',
+            pointerEvents: 'none',
+            backgroundColor: 'transparent',
+          }}
+        />
+      </div>
+    )
+  }
+
+  StickyLayout.propTypes = StickyLayout.propTypes;
+  StickyLayout.defaultProps = StickyLayout.defaultProps;
+
+  return StickyLayout
+}
+
+export default stickyLayout