@sheinx/base 3.8.0-beta.13 → 3.8.0-beta.14

package/cjs/sticky/sticky.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["sticky.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,eAAO,MAAM,aAAa,MAAM,CAAC;AAmBjC,QAAA,MAAM,MAAM,UAAW,WAAW,4CAqYjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["sticky.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,eAAO,MAAM,aAAa,MAAM,CAAC;AAGjC,QAAA,MAAM,MAAM,UAAW,WAAW,4CAwbjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/cjs/sticky/sticky.js

@@ -27,23 +27,6 @@ var cssSupport = _hooks.util.cssSupport,
 var supportSticky = cssSupport('position', 'sticky');
 var defaultZIndex = exports.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) {
     devUseWarning.deprecated('target', 'scrollContainer', 'Sticky');
@@ -54,13 +37,52 @@ var Sticky = function Sticky(props) {
   // 是否使用css sticky
   var css = (props.css || props.target) && supportSticky;
   var forceUpdate = (0, _hooks.useRender)();
+  var elementRef = (0, _react.useRef)(null);
   var _useRef = (0, _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, _react.useState)({}),
@@ -75,7 +97,6 @@ var Sticky = function Sticky(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     parentVisible = _useState6[0],
     setParentVisible = _useState6[1];
-  var elementRef = (0, _react.useRef)(null);
   var getTarget = function getTarget() {
     var scrollContainer = props.scrollContainer;
     if (typeof scrollContainer === 'string') {
@@ -254,6 +275,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) {
@@ -278,6 +303,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,

package/cjs/sticky/sticky.type.d.ts

@@ -27,6 +27,12 @@ export interface StickyProps extends Pick<CommonType, 'className' | 'style'> {
      * @cn 自定义附着的目标。可以传入 HTMLElement 或者 css selector，target 必须为 Sticky 组件的祖先节点
      */
     scrollContainer?: string | HTMLElement | Element | null;
+    /**
+     * @en Stop sticky at bottom of scrollContainer or when the sticky element scrolls to the specified position or the bottom of the specified element
+     * @cn sticky元素滚动到指定位置或与指定元素底部重合时，取消sticky
+     * @version 3.8.0
+     */
+    stickyBoundary?: number | (() => HTMLElement | Element | null);
     /**
      * @cn sticky 父级元素, 当父元素离开视窗时，sticky 将失效
      * @en sticky parent, when the parent element leaves the viewport, the sticky will be invalid

package/cjs/sticky/sticky.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky.type.d.ts","sourceRoot":"","sources":["sticky.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC1E,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IAEF;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;IAExD;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
+{"version":3,"file":"sticky.type.d.ts","sourceRoot":"","sources":["sticky.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC1E,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IAEF;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;IAExD;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC,CAAC;IAE/D;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/esm/sticky/sticky.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["sticky.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,eAAO,MAAM,aAAa,MAAM,CAAC;AAmBjC,QAAA,MAAM,MAAM,UAAW,WAAW,4CAqYjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["sticky.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,eAAO,MAAM,aAAa,MAAM,CAAC;AAGjC,QAAA,MAAM,MAAM,UAAW,WAAW,4CAwbjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/sticky/sticky.js

@@ -21,23 +21,6 @@ var cssSupport = util.cssSupport,
 var supportSticky = cssSupport('position', 'sticky');
 export 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) {
     devUseWarning.deprecated('target', 'scrollContainer', 'Sticky');
@@ -48,13 +31,52 @@ var Sticky = function Sticky(props) {
   // 是否使用css sticky
   var css = (props.css || props.target) && supportSticky;
   var forceUpdate = useRender();
+  var elementRef = useRef(null);
   var _useRef = 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 = useState({}),
@@ -69,7 +91,6 @@ var Sticky = function Sticky(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     parentVisible = _useState6[0],
     setParentVisible = _useState6[1];
-  var elementRef = useRef(null);
   var getTarget = function getTarget() {
     var scrollContainer = props.scrollContainer;
     if (typeof scrollContainer === 'string') {
@@ -248,6 +269,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) {
@@ -272,6 +297,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,

package/esm/sticky/sticky.type.d.ts

@@ -27,6 +27,12 @@ export interface StickyProps extends Pick<CommonType, 'className' | 'style'> {
      * @cn 自定义附着的目标。可以传入 HTMLElement 或者 css selector，target 必须为 Sticky 组件的祖先节点
      */
     scrollContainer?: string | HTMLElement | Element | null;
+    /**
+     * @en Stop sticky at bottom of scrollContainer or when the sticky element scrolls to the specified position or the bottom of the specified element
+     * @cn sticky元素滚动到指定位置或与指定元素底部重合时，取消sticky
+     * @version 3.8.0
+     */
+    stickyBoundary?: number | (() => HTMLElement | Element | null);
     /**
      * @cn sticky 父级元素, 当父元素离开视窗时，sticky 将失效
      * @en sticky parent, when the parent element leaves the viewport, the sticky will be invalid

package/esm/sticky/sticky.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky.type.d.ts","sourceRoot":"","sources":["sticky.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC1E,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IAEF;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;IAExD;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
+{"version":3,"file":"sticky.type.d.ts","sourceRoot":"","sources":["sticky.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC1E,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IAEF;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;IAExD;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC,CAAC;IAE/D;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sheinx/base",
-  "version": "3.8.0-beta.13",
+  "version": "3.8.0-beta.14",
   "description": "",
   "keywords": [],
   "license": "MIT",
@@ -10,7 +10,7 @@
   "module": "./esm/index.js",
   "typings": "./cjs/index.d.ts",
   "dependencies": {
-    "@sheinx/hooks": "3.8.0-beta.13",
+    "@sheinx/hooks": "3.8.0-beta.14",
     "immer": "^10.0.0",
     "classnames": "^2.0.0",
     "@shined/reactive": "^0.1.3-alpha.0"