@arco-design/mobile-react 2.35.0 → 2.35.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.35.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.35.0...@arco-design/mobile-react@2.35.1) (2025-02-26)
+
+
+### Bug Fixes
+
+* `Sticky` caculate with border style & offsetParent in absolute mode ([#314](https://github.com/arco-design/arco-design-mobile/issues/314)) ([1eff5fe](https://github.com/arco-design/arco-design-mobile/commit/1eff5fee0a010bbf236094a7d361f54f0e0bcb2a))
+
+
+
+
+
 # [2.35.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.34.0...@arco-design/mobile-react@2.35.0) (2025-01-09)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.34.0/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.34.0/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.35.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.35.0/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.34.0/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.34.0/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.35.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.35.0/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/popup-swiper/index.d.ts

@@ -26,7 +26,7 @@ export interface PopupSwiperProps extends PopupProps {
      * @default direction 属性指定的方向性
      * @default_en The value of direction property
      */
-    allowSwipeDirections: DirectionType[];
+    allowSwipeDirections?: DirectionType[];
     /**
      * 固定弹窗退出方向，默认跟随手势滑动方向
      * @en Fixed the exit direction of the pop-up window, and the default sliding direction follows the gesture

package/cjs/sticky/index.js

@@ -92,9 +92,14 @@ var Sticky = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var _getScrollContainerRe = (0, _mobileUtils.getScrollContainerRect)(scrollContainerRef.current),
         containerRect = _getScrollContainerRe.containerRect;
 
-    var containerTop = containerRect.top,
-        containerBottom = containerRect.bottom,
+    var rectTop = containerRect.top,
+        rectBottom = containerRect.bottom,
         containerHeight = containerRect.height;
+    var scrollStyle = (0, _mobileUtils.safeGetComputedStyle)(scrollContainerRef.current);
+    var borderTop = needTop ? (0, _mobileUtils.convertCssPropertyToNumber)(scrollStyle, 'borderTopWidth') : 0;
+    var borderBottom = needBottom ? (0, _mobileUtils.convertCssPropertyToNumber)(scrollStyle, 'borderBottomWidth') : 0;
+    var containerTop = rectTop + borderTop;
+    var containerBottom = rectBottom - borderBottom;
     var disFromTop = Math.round(placeholderClientRect.top - containerTop);
     var disFromBottom = Math.round(placeholderClientRect.top + calculatedHeight - containerBottom);
     var topFollowDifference = followBottom - followOffset - calculatedHeight - topOffset - containerTop;
@@ -103,8 +108,32 @@ var Sticky = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var isTopSticky = needTop ? disFromTop <= topOffset && followBottom > containerTop + followOffset : false;
     var isBottomSticky = needBottom ? disFromBottom >= -bottomOffset && followTop < containerBottom - followOffset : false;
     var newStickyState = isTopSticky || isBottomSticky;
-    var cssTop = (stickyStyle === 'absolute' ? 0 : containerTop) + topOffset;
-    var cssBottom = (stickyStyle === 'absolute' ? 0 : window.innerHeight - containerBottom) + bottomOffset;
+    var stickyTop = containerTop;
+    var stickyBottom = window.innerHeight - containerBottom;
+    var stickyLeft = placeholderClientRect.left;
+
+    if (stickyStyle === 'absolute') {
+      var offsetParent = contentRef.current.offsetParent;
+
+      if (offsetParent) {
+        var _getScrollContainerRe2 = (0, _mobileUtils.getScrollContainerRect)(offsetParent),
+            parentRect = _getScrollContainerRe2.containerRect;
+
+        var parentStyle = (0, _mobileUtils.safeGetComputedStyle)(offsetParent);
+        var parentBorderTop = needTop ? (0, _mobileUtils.convertCssPropertyToNumber)(parentStyle, 'borderTopWidth') : 0;
+        var parentBorderBottom = needBottom ? (0, _mobileUtils.convertCssPropertyToNumber)(parentStyle, 'borderBottomWidth') : 0;
+        var parentBorderLeft = (0, _mobileUtils.convertCssPropertyToNumber)(parentStyle, 'borderLeftWidth');
+        stickyTop = containerTop - parentRect.top - parentBorderTop;
+        stickyBottom = parentRect.bottom - containerBottom - parentBorderBottom;
+        stickyLeft = placeholderClientRect.left - parentRect.left - parentBorderLeft;
+      } else {
+        stickyTop = 0;
+        stickyBottom = 0;
+      }
+    }
+
+    var cssTop = stickyTop + topOffset;
+    var cssBottom = stickyBottom + bottomOffset;
     var stickyCssStyle = {};
 
     if (newStickyState) {
@@ -118,7 +147,7 @@ var Sticky = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       } : {}, isBottomSticky ? {
         bottom: bottomFollowDifference > 0 ? cssBottom : cssBottom + bottomFollowDifference
       } : {}, {
-        left: placeholderClientRect.left,
+        left: stickyLeft,
         width: placeholderClientRect.width
       }, userSetStickyCssStyle || {});
     }

package/dist/index.js

@@ -1299,7 +1299,7 @@
      */
 
     function convertCssDuration(ele, property) {
-      var timeout = window.getComputedStyle(ele)[property];
+      var timeout = safeGetComputedStyle(ele)[property];
 
       if (/ms$/.test(timeout)) {
         return Number(timeout.replace('ms', '')) || 0;
@@ -1321,16 +1321,41 @@
      * import { safeGetComputedStyle } from '@arco-design/mobile-utils';
      *
      * const element = document.querySelector("p");
-     * const compStyle =safeGetComputedStyle(element);
+     * const compStyle = safeGetComputedStyle(element);
      * ```
      */
 
     function safeGetComputedStyle(element) {
+      var defaultValue = {};
+
       try {
-        return window.getComputedStyle(element);
+        return element ? window.getComputedStyle(element) : defaultValue;
       } catch (e) {
-        return {};
+        return defaultValue;
+      }
+    }
+    /**
+     * 获取指定元素的样式属性数字值
+     * @desc {en} Get the CSS style of the specified element and format it to number
+     * @param computedStyle 要获取的样式属性对象
+     * @param element {en} the computed style
+     * @example
+     * ```
+     * import { safeGetComputedStyle, convertCssPropertyToNumber } from '@arco-design/mobile-utils';
+     *
+     * const computedStyle = safeGetComputedStyle(element);
+     * const compStyle = convertCssPropertyToNumber(computedStyle, 'fontSize');
+     * ```
+     */
+
+    function convertCssPropertyToNumber(computedStyle, property) {
+      var value = computedStyle[property];
+
+      if (/px$/.test(value)) {
+        return Number(value.replace('px', '')) || 0;
       }
+
+      return 0;
     }
 
     /* eslint-disable no-redeclare */
@@ -6898,9 +6923,14 @@
         var calculatedHeight = contentClientRect.height;
         contentCalculateHeightRef.current = contentClientRect.height;
         var containerRect = getScrollContainerRect(scrollContainerRef.current).containerRect;
-        var containerTop = containerRect.top,
-            containerBottom = containerRect.bottom,
+        var rectTop = containerRect.top,
+            rectBottom = containerRect.bottom,
             containerHeight = containerRect.height;
+        var scrollStyle = safeGetComputedStyle(scrollContainerRef.current);
+        var borderTop = needTop ? convertCssPropertyToNumber(scrollStyle, 'borderTopWidth') : 0;
+        var borderBottom = needBottom ? convertCssPropertyToNumber(scrollStyle, 'borderBottomWidth') : 0;
+        var containerTop = rectTop + borderTop;
+        var containerBottom = rectBottom - borderBottom;
         var disFromTop = Math.round(placeholderClientRect.top - containerTop);
         var disFromBottom = Math.round(placeholderClientRect.top + calculatedHeight - containerBottom);
         var topFollowDifference = followBottom - followOffset - calculatedHeight - topOffset - containerTop;
@@ -6909,8 +6939,30 @@
         var isTopSticky = needTop ? disFromTop <= topOffset && followBottom > containerTop + followOffset : false;
         var isBottomSticky = needBottom ? disFromBottom >= -bottomOffset && followTop < containerBottom - followOffset : false;
         var newStickyState = isTopSticky || isBottomSticky;
-        var cssTop = (stickyStyle === 'absolute' ? 0 : containerTop) + topOffset;
-        var cssBottom = (stickyStyle === 'absolute' ? 0 : window.innerHeight - containerBottom) + bottomOffset;
+        var stickyTop = containerTop;
+        var stickyBottom = window.innerHeight - containerBottom;
+        var stickyLeft = placeholderClientRect.left;
+
+        if (stickyStyle === 'absolute') {
+          var offsetParent = contentRef.current.offsetParent;
+
+          if (offsetParent) {
+            var parentRect = getScrollContainerRect(offsetParent).containerRect;
+            var parentStyle = safeGetComputedStyle(offsetParent);
+            var parentBorderTop = needTop ? convertCssPropertyToNumber(parentStyle, 'borderTopWidth') : 0;
+            var parentBorderBottom = needBottom ? convertCssPropertyToNumber(parentStyle, 'borderBottomWidth') : 0;
+            var parentBorderLeft = convertCssPropertyToNumber(parentStyle, 'borderLeftWidth');
+            stickyTop = containerTop - parentRect.top - parentBorderTop;
+            stickyBottom = parentRect.bottom - containerBottom - parentBorderBottom;
+            stickyLeft = placeholderClientRect.left - parentRect.left - parentBorderLeft;
+          } else {
+            stickyTop = 0;
+            stickyBottom = 0;
+          }
+        }
+
+        var cssTop = stickyTop + topOffset;
+        var cssBottom = stickyBottom + bottomOffset;
         var stickyCssStyle = {};
 
         if (newStickyState) {
@@ -6924,7 +6976,7 @@
           } : {}), isBottomSticky ? {
             bottom: bottomFollowDifference > 0 ? cssBottom : cssBottom + bottomFollowDifference
           } : {}), {
-            left: placeholderClientRect.left,
+            left: stickyLeft,
             width: placeholderClientRect.width
           }), userSetStickyCssStyle || {});
         }