shineout 3.8.0-beta.13 → 3.8.0-beta.15

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.13'
+  version: '3.8.0-beta.15'
 };

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.13');
+/* harmony default export */ var version = ('3.8.0-beta.15');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -61403,23 +61403,16 @@ var sticky_cssSupport = cssSupport,
 var supportSticky = sticky_cssSupport('position', 'sticky');
 var defaultZIndex = 900;
 var events = ['scroll', 'pageshow', 'load', 'resize'];
-
-// const getFirstScrollParent = (el: HTMLElement) => {
-//   let parent = el.parentNode as HTMLElement;
-//   while (parent) {
-//     if (parent === document.body || parent === document.documentElement) {
-//       parent = document.body;
-//       break;
-//     }
-//     const { overflowY } = window.getComputedStyle(parent);
-//     if (overflowY === 'scroll' || overflowY === 'auto') {
-//       break;
-//     }
-//     parent = parent.parentNode as HTMLElement;
-//   }
-//   return parent;
-// };
-
+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');
@@ -61430,13 +61423,16 @@ var Sticky = function Sticky(props) {
   // 是否使用css sticky
   var css = (props.css || props.target) && supportSticky;
   var forceUpdate = useRender();
+  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,
       position: '',
       targetObserver: null,
       parentObserver: null,
-      fixedObserver: null
+      fixedObserver: null,
+      stoped: false,
+      originPosition: null
     }),
     context = _useRef.current;
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
@@ -61452,6 +61448,77 @@ var Sticky = function Sticky(props) {
     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') {
@@ -61693,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();
@@ -61705,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) {
@@ -61732,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 {
@@ -61753,7 +61836,6 @@ var Sticky = function Sticky(props) {
     if (props.onChange) {
       props.onChange(show);
     }
-    ;
   }, [show]);
 
   // 纯css方法 直接使用css
@@ -61778,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,
@@ -72008,7 +72091,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.8.0-beta.13'
+  version: '3.8.0-beta.15'
 });
 }();
 /******/ 	return __webpack_exports__;