@gmfe/react 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/react",
-  "version": "2.14.26",
+  "version": "2.14.30-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.14.30-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": "f7da14010d37550f0a19949fe4a5b3d65301545a"
 }

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 '../../hoc/sticky_layout'
 
 // 暂时没什么用
 const Info = props => {
@@ -18,21 +19,27 @@ 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,157 @@
+/**
+ * @author: stanfer
+ * @description:
+ * @createDate: 2025/11/24 10:05
+ * @Version: 1.0
+ * @last modify time:
+ **/
+import React, { useRef, useEffect } from 'react'
+
+function stickyLayout(Component) {
+  const StickyLayout = ({ sticky, ...rest }) => {
+    if (!sticky) { // 不传的话直接返回上个组件
+      return <Component {...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%';
+            // 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.defaultProps = {
+    // sticky: {
+    //   offsetHeight: 0,
+    // },
+    sticky: false
+  }
+
+  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,
@@ -233,5 +234,6 @@ export {
   Selection,
   TreeV2,
   RecommendInput,
-  PicturePreview
+  PicturePreview,
+  StickyLayout
 }