@gmfe/react 2.15.7-alpha.0 → 2.15.8-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gmfe/react",
-  "version": "2.15.7-alpha.0",
+  "version": "2.15.8-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.15.7-alpha.0",
+    "@gmfe/locales": "^2.15.8-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": "e98dd13465799615b2fc286cbb88b9314ab1909e"
+  "gitHead": "7fa7c0fcf7f3c5097ad61af3b78a30af65ad386e"
 }

package/src/component/box/box.js

@@ -26,10 +26,7 @@ const BoxHeader = StickyLayout(props => {
   return (
     <Flex
       {...headerProps}
-      className={classNames(
-        'gm-box-table-header common-sticky-header',
-        headerClassName
-      )}
+      className={classNames('gm-box-table-header', headerClassName)}
       alignCenter
     >
       <Flex>{info}</Flex>

package/src/component/box/box_panel.js

@@ -13,6 +13,7 @@ const BoxPanel = ({
   right,
   summary,
   className,
+  headerProps = {},
   children,
   ...rest
 }) => {
@@ -26,7 +27,15 @@ const BoxPanel = ({
 
   return (
     <div {...rest} className={classNames('gm-box gm-box-panel', className)}>
-      <Flex flex justifyBetween alignCenter className='gm-box-panel-header'>
+      <Flex
+        flex
+        justifyBetween
+        alignCenter
+        className={classNames(
+          'gm-box-panel-header',
+          headerProps.className || ''
+        )}
+      >
         <Flex alignCenter>
           {hasCollapse && (
             <a
@@ -85,6 +94,7 @@ BoxPanel.propTypes = {
   summary: PropTypes.oneOfType([PropTypes.array, PropTypes.element]),
   right: PropTypes.element,
   className: PropTypes.string,
+  headerProps: PropTypes.object,
   style: PropTypes.object
 }
 

package/src/component/box/box_table.js

@@ -2,7 +2,6 @@ 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 => {
@@ -19,32 +18,21 @@ Info.propTypes = {
   style: PropTypes.object
 }
 
-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
+  const { info, action, headerProps = {}, children, className, ...rest } = props
+  const { className: headerClassName } = headerProps
 
   return (
     <div {...rest} className={classNames('gm-box gm-box-table', className)}>
-      <BoxHeader {...props} />
+      <Flex
+        {...headerProps}
+        className={classNames('gm-box-table-header', headerClassName)}
+        alignCenter
+      >
+        <Flex>{info}</Flex>
+        <Flex flex />
+        <Flex>{action}</Flex>
+      </Flex>
       <div>{children}</div>
     </div>
   )

package/src/hoc/sticky_layout.js

@@ -141,82 +141,111 @@ const handleTopSentinelLeave = currentStickyRef => {
   }
 }
 
-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' }),
-      []
-    )
+/**
+ * 粘性布局包装器组件
+ * 负责管理哨兵元素和 IntersectionObserver
+ */
+const StickyWrapper = ({
+  children,
+  onTopSentinelEnter,
+  onTopSentinelLeave
+}) => {
+  const wrapperRef = useRef(null)
+  const topSentinelRef = useRef(null)
+  const bottomSentinelRef = useRef(null)
+  const observerRef = useRef(null)
 
-    useEffect(() => {
-      if (!sticky || !currentStickyRef.current) return undefined
+  // 哨兵元素样式
+  const topSentinelStyle = useMemo(() => ({ ...SENTINEL_STYLE, top: '0' }), [])
+  const bottomSentinelStyle = useMemo(
+    () => ({ ...SENTINEL_STYLE, bottom: '0' }),
+    []
+  )
 
-      if (typeof window.IntersectionObserver === 'undefined') {
-        return undefined
-      }
+  useEffect(() => {
+    if (!wrapperRef.current) {
+      return
+    }
+
+    if (typeof window.IntersectionObserver === 'undefined') {
+      return
+    }
 
-      observerRef.current = new window.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) {
-              handleTopSentinelEnter(currentStickyRef)
-            } else {
-              handleTopSentinelLeave(currentStickyRef)
+        if (target === topSentinelRef.current) {
+          if (entry.isIntersecting) {
+            if (onTopSentinelEnter) {
+              onTopSentinelEnter(wrapperRef)
+            }
+          } else {
+            if (onTopSentinelLeave) {
+              onTopSentinelLeave(wrapperRef)
             }
           }
-        })
-      }, OBSERVER_OPTIONS)
+        }
+      })
+    }, OBSERVER_OPTIONS)
 
-      // 观察哨兵元素
-      if (topSentinelRef.current) {
-        observerRef.current.observe(topSentinelRef.current)
-      }
-      if (bottomSentinelRef.current) {
-        observerRef.current.observe(bottomSentinelRef.current)
-      }
+    // 观察哨兵元素
+    if (topSentinelRef.current) {
+      observerRef.current.observe(topSentinelRef.current)
+    }
+    if (bottomSentinelRef.current) {
+      observerRef.current.observe(bottomSentinelRef.current)
+    }
 
-      return () => {
-        if (observerRef.current) {
-          observerRef.current.disconnect()
-        }
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect()
       }
-    }, [sticky])
+    }
+  }, [onTopSentinelEnter, onTopSentinelLeave])
 
+  return (
+    <div ref={wrapperRef} className='common-sticky-layout'>
+      <div
+        ref={topSentinelRef}
+        data-sentinel='topSentinel'
+        style={topSentinelStyle}
+      />
+      {children}
+      <div
+        ref={bottomSentinelRef}
+        data-sentinel='bottomSentinel'
+        style={bottomSentinelStyle}
+      />
+    </div>
+  )
+}
+
+StickyWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+  onTopSentinelEnter: PropTypes.func,
+  onTopSentinelLeave: PropTypes.func
+}
+
+function StickyLayout(Component) {
+  const _StickyLayout = ({ sticky, ...rest }) => {
+    // 如果不需要粘性布局，直接返回原组件
     if (!sticky) {
       return <Component {...rest} />
     }
 
     return (
-      <div ref={currentStickyRef} className='common-sticky-layout'>
-        <div
-          ref={topSentinelRef}
-          data-sentinel='topSentinel'
-          style={topSentinelStyle}
-        />
+      <StickyWrapper
+        onTopSentinelEnter={handleTopSentinelEnter}
+        onTopSentinelLeave={handleTopSentinelLeave}
+      >
         <Component {...rest} />
-        <div
-          ref={bottomSentinelRef}
-          data-sentinel='bottomSentinel'
-          style={bottomSentinelStyle}
-        />
-      </div>
+      </StickyWrapper>
     )
   }
 
   _StickyLayout.defaultProps = {
-    sticky: true
+    sticky: false
   }
 
   _StickyLayout.propTypes = {