shineout 3.8.0-beta.14 → 3.8.0-beta.16

package/cjs/index.js

@@ -522,5 +522,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.8.0-beta.14'
+  version: '3.8.0-beta.16'
 };

package/dist/shineout.js

@@ -12234,7 +12234,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.8.0-beta.14');
+/* harmony default export */ var version = ('3.8.0-beta.16');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -22299,7 +22299,7 @@ function appendNormalizeStyle(styleString, id) {
   document.head.insertBefore(style, document.head.firstChild);
 }
 function appendJssInsertionPoint() {
-  var insertionPoint = document.createElement('noscript');
+  var insertionPoint = document.createElement('style');
   insertionPoint.id = jssInsertionPointId;
   document.head.insertBefore(insertionPoint, document.head.firstChild);
   react_jss_esm_defaultJss.setup({
@@ -61403,6 +61403,16 @@ var sticky_cssSupport = cssSupport,
 var supportSticky = sticky_cssSupport('position', 'sticky');
 var defaultZIndex = 900;
 var events = ['scroll', 'pageshow', 'load', 'resize'];
+function getStaticTop(el) {
+  var stopper = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
+  var top = 0;
+  var currentEl = el;
+  while (currentEl && currentEl !== stopper) {
+    top += currentEl.offsetTop;
+    currentEl = currentEl.offsetParent;
+  }
+  return top;
+}
 var Sticky = function Sticky(props) {
   if (props.target) {
     sticky_devUseWarning.deprecated('target', 'scrollContainer', 'Sticky');
@@ -61413,7 +61423,7 @@ var Sticky = function Sticky(props) {
   // 是否使用css sticky
   var css = (props.css || props.target) && supportSticky;
   var forceUpdate = useRender();
-  var elementRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var fixedStickyElRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
       target: null,
       div: null,
@@ -61422,43 +61432,7 @@ var Sticky = function Sticky(props) {
       parentObserver: null,
       fixedObserver: null,
       stoped: false,
-      stopStickyFn: function stopStickyFn(e) {
-        var target = e.target;
-        if (!target || typeof target.scrollTop !== 'number') return;
-        var stopStickyPoint = -1;
-        if (typeof props.stickyBoundary === 'number') {
-          stopStickyPoint = props.stickyBoundary;
-        } else if (typeof props.stickyBoundary === 'function') {
-          var stopStickyElement = props.stickyBoundary();
-          if (!stopStickyElement) return;
-          var stopStickyRect = stopStickyElement.getBoundingClientRect();
-          var targetRect = elementRef.current.getBoundingClientRect();
-          stopStickyPoint = stopStickyRect.bottom - targetRect.bottom;
-        }
-        if (stopStickyPoint < 0) return;
-        if (target.scrollTop > stopStickyPoint) {
-          if (context.stoped) return;
-          context.stoped = true;
-
-          // 把 div 移动到 target 内部，使用 absolute 定位跟随滚动
-          if (context.div && context.target) {
-            context.target.insertBefore(context.div, context.target.firstChild);
-            var paddingLeft = Number(window.getComputedStyle(context.target).paddingLeft.replace('px', '')) || 0;
-            var borderLeftWidth = Number(window.getComputedStyle(context.target).borderLeftWidth.replace('px', '')) || 0;
-            var left = paddingLeft + borderLeftWidth;
-            context.div.style.transform = "translate(-".concat(left, "px, ").concat(stopStickyPoint, "px)");
-          }
-        } else {
-          if (!context.stoped) return;
-          context.stoped = false;
-
-          // 恢复正常吸附模式：把 div 移动到 target 外部
-          if (context.div && context.target && context.target.parentNode) {
-            context.target.parentNode.insertBefore(context.div, context.target);
-          }
-          context.div.style.transform = 'none';
-        }
-      }
+      originPosition: null
     }),
     context = _useRef.current;
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
@@ -61473,6 +61447,78 @@ var Sticky = function Sticky(props) {
     _useState6 = slicedToArray_default()(_useState5, 2),
     parentVisible = _useState6[0],
     setParentVisible = _useState6[1];
+  var elementRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var onStickyBoundaryChange = usePersistFn(function (e) {
+    var target = e.target;
+    var isDocument = !context.target || context.target === document.documentElement;
+    var scrollTop = isDocument ? window.scrollY : target.scrollTop;
+    if (!target || typeof scrollTop !== 'number') return;
+    var stopStickyPoint = -1;
+    var baseTop = 0;
+    var absoluteTop = 0;
+    var absoluteLeft = 0;
+    var stopStickyElement = null;
+    if (typeof props.stickyBoundary === 'number') {
+      stopStickyPoint = props.stickyBoundary;
+    } else if (typeof props.stickyBoundary === 'function') {
+      stopStickyElement = props.stickyBoundary();
+      if (!stopStickyElement) return;
+      var stopStickyRect = stopStickyElement.getBoundingClientRect();
+      var targetRect = elementRef.current.getBoundingClientRect();
+      if (context.target === document.documentElement || !context.target) {
+        baseTop = getStaticTop(elementRef.current) - (props.top || 0);
+        absoluteTop = stopStickyRect.bottom - targetRect.bottom;
+        absoluteLeft = stopStickyRect.left - targetRect.left;
+      }
+      stopStickyPoint = stopStickyRect.bottom - targetRect.bottom + baseTop;
+    }
+    if (stopStickyPoint < 0) return;
+    if (scrollTop > stopStickyPoint) {
+      if (context.stoped) return;
+      context.stoped = true;
+
+      // 把 div 移动到 target 内部，使用 absolute 定位跟随滚动
+      if (context.div && context.target) {
+        context.target.insertBefore(context.div, context.target.firstChild);
+        var paddingLeft = Number(window.getComputedStyle(context.target).paddingLeft.replace('px', '')) || 0;
+        var borderLeftWidth = Number(window.getComputedStyle(context.target).borderLeftWidth.replace('px', '')) || 0;
+        var left = paddingLeft + borderLeftWidth;
+        context.div.style.transform = "translate(-".concat(left, "px, ").concat(stopStickyPoint, "px)");
+      } else {
+        if (stopStickyElement) {
+          if (!fixedStickyElRef.current) return;
+          // 存储原始位置到 context 中
+          if (!context.originPosition) {
+            var originStyle = window.getComputedStyle(fixedStickyElRef.current);
+            context.originPosition = {
+              top: originStyle.top,
+              left: originStyle.left
+            };
+          }
+
+          // 直接操作DOM的原因是：不闪烁且性能更好
+          stopStickyElement.style.transform = "translateZ(0)";
+          fixedStickyElRef.current.style.top = "".concat(absoluteTop, "px");
+          fixedStickyElRef.current.style.left = "".concat(absoluteLeft, "px");
+        }
+        // 暂不支持 props.stickyBoundary 为 number 的fixed定位情况
+      }
+    } else {
+      if (!context.stoped) return;
+      context.stoped = false;
+
+      // 恢复正常吸附模式：把 div 移动到 target 外部
+      if (context.div && context.target && context.target.parentNode) {
+        context.target.parentNode.insertBefore(context.div, context.target);
+        context.div.style.transform = 'none';
+      } else if (stopStickyElement && fixedStickyElRef.current && context.originPosition) {
+        stopStickyElement.style.transform = "none";
+        fixedStickyElRef.current.style.top = context.originPosition.top;
+        fixedStickyElRef.current.style.left = context.originPosition.left;
+        context.originPosition = null; // 清理状态
+      }
+    }
+  });
   var getTarget = function getTarget() {
     var scrollContainer = props.scrollContainer;
     if (typeof scrollContainer === 'string') {
@@ -61651,10 +61697,6 @@ var Sticky = function Sticky(props) {
       context.targetObserver.disconnect();
       context.targetObserver = null;
     }
-    if (props.stickyBoundary) {
-      var _context$target;
-      (_context$target = context.target) === null || _context$target === void 0 || _context$target.removeEventListener('scroll', context.stopStickyFn);
-    }
   };
   var createObserver = function createObserver() {
     if (!context.div) {
@@ -61679,9 +61721,6 @@ var Sticky = function Sticky(props) {
         }
       }
       cancelFixedObserver();
-      if (props.stickyBoundary) {
-        context.target.addEventListener('scroll', context.stopStickyFn);
-      }
       if (window.IntersectionObserver) {
         var observer = new IntersectionObserver(handleTargetPosition, {
           root: context.target,
@@ -61721,6 +61760,10 @@ var Sticky = function Sticky(props) {
       context.div.remove();
       context.div = null;
     }
+    if (props.stickyBoundary) {
+      var _context$target;
+      (_context$target = context.target) === null || _context$target === void 0 || _context$target.removeEventListener('scroll', onStickyBoundaryChange);
+    }
   };
   var createFixedEvents = function createFixedEvents() {
     createFixedObserver();
@@ -61733,6 +61776,10 @@ var Sticky = function Sticky(props) {
     events.forEach(function (event) {
       window.removeEventListener(event, handleFixedPosition);
     });
+    if (props.stickyBoundary) {
+      var _context$target2;
+      (_context$target2 = context.target) === null || _context$target2 === void 0 || _context$target2.removeEventListener('scroll', onStickyBoundaryChange);
+    }
   };
   var handleElementRef = function handleElementRef(el) {
     if (el) {
@@ -61760,7 +61807,15 @@ var Sticky = function Sticky(props) {
       context.target = target;
       forceUpdate();
     }
-    if (context.target) {
+    if (props.stickyBoundary) {
+      if (!context.target || context.target === document.documentElement) {
+        window.addEventListener('scroll', onStickyBoundaryChange);
+      } else {
+        var _context$target3;
+        (_context$target3 = context.target) === null || _context$target3 === void 0 || _context$target3.addEventListener('scroll', onStickyBoundaryChange);
+      }
+    }
+    if (context.target && context.target !== document.documentElement) {
       createTargetEvents();
       return cancelTargetEvents;
     } else {
@@ -61781,7 +61836,6 @@ var Sticky = function Sticky(props) {
     if (props.onChange) {
       props.onChange(show);
     }
-    ;
   }, [show]);
 
   // 纯css方法 直接使用css
@@ -61806,6 +61860,7 @@ var Sticky = function Sticky(props) {
     style: objectSpread2_default()(objectSpread2_default()({
       zIndex: defaultZIndex
     }, style), elementSize),
+    ref: fixedStickyElRef,
     children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: props.className,
       style: props.style,
@@ -72036,7 +72091,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.8.0-beta.14'
+  version: '3.8.0-beta.16'
 });
 }();
 /******/ 	return __webpack_exports__;