shineout 3.8.0-beta.13 → 3.8.0-beta.14

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.14'
 };

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.14');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -61403,23 +61403,6 @@ 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;
-// };
-
 var Sticky = function Sticky(props) {
   if (props.target) {
     sticky_devUseWarning.deprecated('target', 'scrollContainer', 'Sticky');
@@ -61430,13 +61413,52 @@ 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 _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,
+      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';
+        }
+      }
     }),
     context = _useRef.current;
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
@@ -61451,7 +61473,6 @@ 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 getTarget = function getTarget() {
     var scrollContainer = props.scrollContainer;
     if (typeof scrollContainer === 'string') {
@@ -61630,6 +61651,10 @@ 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) {
@@ -61654,6 +61679,9 @@ 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,
@@ -72008,7 +72036,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.8.0-beta.13'
+  version: '3.8.0-beta.14'
 });
 }();
 /******/ 	return __webpack_exports__;