@gmfe/react 2.14.26 → 2.15.4-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/react",
-  "version": "2.14.26",
+  "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.26",
+    "@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": "2fc65546df80d52dcfb37c2c35b615dbade5daa9"
+  "gitHead": "2c13925c3699572748de29cf0256ca1431c30f01"
 }

package/src/component/box/box_table.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import Flex from '../flex'
+import { StickyLayout } from '@gmfe/react'
 
 // 暂时没什么用
 const Info = props => {
@@ -18,21 +19,32 @@ Info.propTypes = {
   style: PropTypes.object
 }
 
-const BoxTable = props => {
-  const { info, action, children, className, headerProps = {}, ...rest } = 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>
+  )
+})
+
+const BoxTable = props => {
+  const { children, className, ...rest } = props
+
   return (
     <div {...rest} className={classNames('gm-box gm-box-table', className)}>
-      <Flex
-        {...headerProps}
-        className={classNames('gm-box-table-header', headerClassName)}
-        alignCenter
-      >
-        <Flex>{info}</Flex>
-        <Flex flex />
-        <Flex>{action}</Flex>
-      </Flex>
+      <BoxHeader {...props} />
       <div>{children}</div>
     </div>
   )

package/src/hoc/sticky_layout.js

@@ -0,0 +1,229 @@
+/**
+ * @author: stanfer
+ * @description: 粘性布局高阶组件，用于实现表格等组件的粘性头部效果
+ * @createDate: 2025/11/24 10:05
+ * @Version: 1.0
+ **/
+import React, { useRef, useEffect, useMemo } from 'react'
+import PropTypes from 'prop-types'
+
+// 常量配置
+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
+      }
+    }
+
+    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 (!sticky || !currentStickyRef.current) return undefined
+
+      if (typeof window.IntersectionObserver === 'undefined') {
+        return undefined
+      }
+
+      observerRef.current = new window.IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          const target = entry.target
+
+          if (target === topSentinelRef.current) {
+            if (entry.isIntersecting) {
+              handleTopSentinelEnter(currentStickyRef)
+            } else {
+              handleTopSentinelLeave(currentStickyRef)
+            }
+          }
+        })
+      }, OBSERVER_OPTIONS)
+
+      // 观察哨兵元素
+      if (topSentinelRef.current) {
+        observerRef.current.observe(topSentinelRef.current)
+      }
+      if (bottomSentinelRef.current) {
+        observerRef.current.observe(bottomSentinelRef.current)
+      }
+
+      return () => {
+        if (observerRef.current) {
+          observerRef.current.disconnect()
+        }
+      }
+    }, [sticky])
+
+    if (!sticky) {
+      return <Component {...rest} />
+    }
+
+    return (
+      <div ref={currentStickyRef} className='common-sticky-layout'>
+        <div
+          ref={topSentinelRef}
+          data-sentinel='topSentinel'
+          style={topSentinelStyle}
+        />
+        <Component {...rest} />
+        <div
+          ref={bottomSentinelRef}
+          data-sentinel='bottomSentinel'
+          style={bottomSentinelStyle}
+        />
+      </div>
+    )
+  }
+
+  StickyLayout.defaultProps = {
+    sticky: false
+  }
+
+  StickyLayout.propTypes = {
+    sticky: PropTypes.oneOfType([PropTypes.bool, PropTypes.object])
+  }
+
+  return StickyLayout
+}
+
+export default StickyLayout

package/src/index.js

@@ -103,6 +103,7 @@ import Selection from './component/selection'
 import TreeV2 from './component/tree_v2'
 import RecommendInput from './component/recommend_input'
 import PicturePreview from './component/picture_preview'
+import StickyLayout from './hoc/sticky_layout'
 
 Object.assign(Sheet, {
   SheetColumn,
@@ -132,8 +133,8 @@ Object.assign(Checkbox, {
 Object.assign(Select, {
   Option
 })
-
 export {
+  StickyLayout,
   // 库之间用
   EVENT_TYPE,
   PaginationBase,