@gmfe/react 2.14.30-alpha.0 → 2.15.4-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gmfe/react",
-  "version": "2.14.30-alpha.0",
+  "version": "2.15.4-alpha.0",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gmfe#readme",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@gm-common/tool": "^1.0.0",
-    "@gmfe/locales": "^2.14.30-alpha.0",
+    "@gmfe/locales": "^2.15.4-alpha.0",
     "big.js": "^5.2.2",
     "classnames": "^2.2.5",
     "lodash": "^4.17.14",
@@ -35,5 +35,5 @@
     "prop-types": "^15.7.2",
     "react-window": "^1.8.5"
   },
-  "gitHead": "f7da14010d37550f0a19949fe4a5b3d65301545a"
+  "gitHead": "2c13925c3699572748de29cf0256ca1431c30f01"
 }

package/src/component/box/box_table.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import Flex from '../flex'
-import StickyLayout from '../../hoc/sticky_layout'
+import { StickyLayout } from '@gmfe/react'
 
 // 暂时没什么用
 const Info = props => {
@@ -19,20 +19,25 @@ Info.propTypes = {
   style: PropTypes.object
 }
 
-const BoxHeader = StickyLayout((props) => {
+const BoxHeader = StickyLayout(props => {
   const { info, action, headerProps = {} } = props
   const { className: headerClassName } = headerProps
 
-  return <Flex
-    {...headerProps}
-    className={classNames('gm-box-table-header common-sticky-header', headerClassName)}
-    alignCenter
-  >
-    <Flex>{info}</Flex>
-    <Flex flex />
-    <Flex>{action}</Flex>
-  </Flex>
-});
+  return (
+    <Flex
+      {...headerProps}
+      className={classNames(
+        'gm-box-table-header common-sticky-header',
+        headerClassName
+      )}
+      alignCenter
+    >
+      <Flex>{info}</Flex>
+      <Flex flex />
+      <Flex>{action}</Flex>
+    </Flex>
+  )
+})
 
 const BoxTable = props => {
   const { children, className, ...rest } = props

package/src/hoc/sticky_layout.js

@@ -1,157 +1,229 @@
 /**
  * @author: stanfer
- * @description:
+ * @description: 粘性布局高阶组件，用于实现表格等组件的粘性头部效果
  * @createDate: 2025/11/24 10:05
  * @Version: 1.0
- * @last modify time:
  **/
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useMemo } from 'react'
+import PropTypes from 'prop-types'
 
-function stickyLayout(Component) {
-  const StickyLayout = ({ sticky, ...rest }) => {
-    if (!sticky) { // 不传的话直接返回上个组件
-      return <Component {...rest} />
+// 常量配置
+const CONSTANTS = {
+  PADDING: {
+    RT_THEAD: 10,
+    BOX_TABLE_HEADER: 10,
+    TABLE_X_THEAD: 8
+  },
+  Z_INDEX: {
+    RT_THEAD: 10,
+    STICKY_LAYOUT: 101
+  },
+  HEIGHT: {
+    FULL_TAB: 40,
+    TOP_NAV: 50,
+    DEFAULT_MAX: '50%'
+  }
+}
+
+// IntersectionObserver 配置
+const OBSERVER_OPTIONS = {
+  root: null, // 相对于浏览器视口
+  rootMargin: '0px',
+  threshold: 0 // 只要有一个像素进入/离开视口就触发
+}
+
+// 哨兵元素样式
+const SENTINEL_STYLE = {
+  position: 'absolute',
+  left: '0',
+  width: '100%',
+  height: '1px',
+  pointerEvents: 'none',
+  backgroundColor: 'transparent'
+}
+
+/**
+ * 计算最大高度
+ * @param {number} heightSum - 高度总和
+ * @param {number} fullTabCount - 全屏标签页数量
+ * @returns {string} 计算后的最大高度值
+ */
+const calculateMaxHeight = (heightSum, fullTabCount = 0) => {
+  const extraHeight =
+    fullTabCount * CONSTANTS.HEIGHT.FULL_TAB + CONSTANTS.HEIGHT.TOP_NAV
+  return `calc(100vh - ${heightSum + extraHeight}px)`
+}
+
+/**
+ * 设置表格最大高度
+ * @param {NodeList|Element[]} elements - 需要设置的元素列表
+ * @param {number} heightSum - 高度总和
+ * @param {number} fullTabCount - 全屏标签页数量
+ */
+const setElementsMaxHeight = (elements, heightSum, fullTabCount) => {
+  const maxHeight = calculateMaxHeight(heightSum, fullTabCount)
+  elements.forEach(el => {
+    el.style.maxHeight = maxHeight
+  })
+}
+
+/**
+ * 计算粘性元素的总高度
+ * @returns {{heightSum: number, tableRoot: Element|null, fullTabCount: number}}
+ */
+const calculateStickyHeight = () => {
+  let heightSum = 0
+  let tableRoot = null
+
+  // 查询 DOM 元素
+  const fullTab = document.querySelectorAll('.gm-framework-full-tabs')
+  const commonStickyHeader = document.querySelectorAll('.common-sticky-header')
+  const rtTheadHeader = document.querySelectorAll('.rt-thead')
+
+  // 处理 rt-thead 元素
+  rtTheadHeader.forEach(el => {
+    el.style.position = 'sticky'
+    el.style.top = '0'
+    el.style.zIndex = CONSTANTS.Z_INDEX.RT_THEAD
+    heightSum += el.offsetHeight + CONSTANTS.PADDING.RT_THEAD
+  })
+
+  // 处理 common-sticky-header 元素
+  commonStickyHeader.forEach(item => {
+    if (fullTab.length) {
+      const currentSticky = document.querySelector('.common-sticky-layout')
+      if (currentSticky) {
+        currentSticky.style.zIndex = CONSTANTS.Z_INDEX.STICKY_LAYOUT
+      }
     }
 
-    const currentStickyRef = useRef(null);
-    const topSentinelRef = useRef(null);
-    const bottomSentinelRef = useRef(null);
-    // 统一管理
-    const observerRef = useRef(null);
+    if (item.className.includes('gm-box-table-header')) {
+      heightSum += item.offsetHeight + CONSTANTS.PADDING.BOX_TABLE_HEADER
+    }
+
+    if (item.className.includes('gm-table-x-thead')) {
+      heightSum += item.offsetHeight + CONSTANTS.PADDING.TABLE_X_THEAD
+      tableRoot = item.parentElement?.parentElement || null
+    }
+  })
+
+  return {
+    heightSum,
+    tableRoot,
+    fullTabCount: fullTab.length
+  }
+}
+
+/**
+ * 处理顶部哨兵进入视口
+ */
+const handleTopSentinelEnter = currentStickyRef => {
+  const { heightSum, tableRoot, fullTabCount } = calculateStickyHeight()
+
+  // 设置 rt-table 元素的最大高度
+  const rtTable = document.querySelectorAll('.rt-table')
+  if (rtTable.length) {
+    setElementsMaxHeight(rtTable, heightSum, fullTabCount)
+  }
+
+  // 设置 tableRoot 的最大高度
+  if (tableRoot) {
+    tableRoot.style.maxHeight = calculateMaxHeight(heightSum, fullTabCount)
+  }
+}
+
+/**
+ * 处理顶部哨兵离开视口
+ */
+const handleTopSentinelLeave = currentStickyRef => {
+  if (currentStickyRef.current) {
+    currentStickyRef.current.style.maxHeight = CONSTANTS.HEIGHT.DEFAULT_MAX
+  }
+}
+
+function StickyLayout(Component) {
+  const StickyLayout = ({ sticky, ...rest }) => {
+    const currentStickyRef = useRef(null)
+    const topSentinelRef = useRef(null)
+    const bottomSentinelRef = useRef(null)
+    const observerRef = useRef(null)
+
+    // 哨兵元素样式
+    const topSentinelStyle = useMemo(
+      () => ({ ...SENTINEL_STYLE, top: '0' }),
+      []
+    )
+    const bottomSentinelStyle = useMemo(
+      () => ({ ...SENTINEL_STYLE, bottom: '0' }),
+      []
+    )
 
     useEffect(() => {
-      if (!currentStickyRef.current) return;
+      if (!sticky || !currentStickyRef.current) return undefined
 
-      const options = {
-        root: null, // 相对于浏览器视口
-        rootMargin: '0px',
-        threshold: 0, // 只要有一个像素进入/离开视口就触发
-      };
+      if (typeof window.IntersectionObserver === 'undefined') {
+        return undefined
+      }
 
-      observerRef.current = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-          const target = entry.target;
+      observerRef.current = new window.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%';
-            // console.log('顶部离开 <========');
-            return;
-          }
-          if (target === bottomSentinelRef.current) {
-            if (entry.isIntersecting) {
-              // console.log('=======> 底部进入');
-              return;
+              handleTopSentinelEnter(currentStickyRef)
+            } else {
+              handleTopSentinelLeave(currentStickyRef)
             }
-            // console.log('底部离开 <========');
           }
-        });
-      }, options);
+        })
+      }, OBSERVER_OPTIONS)
 
+      // 观察哨兵元素
       if (topSentinelRef.current) {
-        observerRef.current.observe(topSentinelRef.current);
+        observerRef.current.observe(topSentinelRef.current)
       }
       if (bottomSentinelRef.current) {
-        observerRef.current.observe(bottomSentinelRef.current);
+        observerRef.current.observe(bottomSentinelRef.current)
       }
 
       return () => {
         if (observerRef.current) {
-          observerRef.current.disconnect();
+          observerRef.current.disconnect()
         }
-      };
-    }, [])
+      }
+    }, [sticky])
+
+    if (!sticky) {
+      return <Component {...rest} />
+    }
 
     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',
-          }}
+          data-sentinel='topSentinel'
+          style={topSentinelStyle}
         />
         <Component {...rest} />
         <div
           ref={bottomSentinelRef}
-          sentinel="bottomSentinel"
-          style={{
-            position: 'absolute',
-            bottom: '0',
-            left: '0',
-            width: '100%',
-            height: '1px',
-            pointerEvents: 'none',
-            backgroundColor: 'transparent',
-          }}
+          data-sentinel='bottomSentinel'
+          style={bottomSentinelStyle}
         />
       </div>
     )
   }
 
   StickyLayout.defaultProps = {
-    // sticky: {
-    //   offsetHeight: 0,
-    // },
     sticky: false
   }
 
+  StickyLayout.propTypes = {
+    sticky: PropTypes.oneOfType([PropTypes.bool, PropTypes.object])
+  }
+
   return StickyLayout
 }
 
-export default stickyLayout
+export default StickyLayout

package/src/index.js

@@ -133,8 +133,8 @@ Object.assign(Checkbox, {
 Object.assign(Select, {
   Option
 })
-
 export {
+  StickyLayout,
   // 库之间用
   EVENT_TYPE,
   PaginationBase,
@@ -234,6 +234,5 @@ export {
   Selection,
   TreeV2,
   RecommendInput,
-  PicturePreview,
-  StickyLayout
+  PicturePreview
 }