@arco-design/mobile-react 2.35.0 → 2.35.1

package/esm/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/esm/sticky/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useRef, forwardRef, useImperativeHandle, useEffect, useMemo, useState, useCallback } from 'react';
-import { cls, execRAF, getActualContainer, getScrollContainerRect } from '@arco-design/mobile-utils';
+import { cls, execRAF, getActualContainer, getScrollContainerRect, safeGetComputedStyle, convertCssPropertyToNumber } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import { useRefState } from '../_helpers';
 import Portal from '../portal';
@@ -76,9 +76,14 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
     var _getScrollContainerRe = 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 = 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;
@@ -87,8 +92,32 @@ var Sticky = /*#__PURE__*/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 = getScrollContainerRect(offsetParent),
+            parentRect = _getScrollContainerRe2.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) {
@@ -102,7 +131,7 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
       } : {}, isBottomSticky ? {
         bottom: bottomFollowDifference > 0 ? cssBottom : cssBottom + bottomFollowDifference
       } : {}, {
-        left: placeholderClientRect.left,
+        left: stickyLeft,
         width: placeholderClientRect.width
       }, userSetStickyCssStyle || {});
     }

package/esnext/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/esnext/sticky/index.js

@@ -1,5 +1,5 @@
 import React, { useRef, forwardRef, useImperativeHandle, useEffect, useMemo, useState, useCallback, } from 'react';
-import { cls, execRAF, getActualContainer, getScrollContainerRect, } from '@arco-design/mobile-utils';
+import { cls, execRAF, getActualContainer, getScrollContainerRect, safeGetComputedStyle, convertCssPropertyToNumber, } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import { useRefState } from '../_helpers';
 import Portal from '../portal';
@@ -33,7 +33,16 @@ const Sticky = forwardRef((props, ref) => {
         const calculatedHeight = contentClientRect.height;
         contentCalculateHeightRef.current = contentClientRect.height;
         const { containerRect } = getScrollContainerRect(scrollContainerRef.current);
-        const { top: containerTop, bottom: containerBottom, height: containerHeight, } = containerRect;
+        const { top: rectTop, bottom: rectBottom, height: containerHeight } = containerRect;
+        const scrollStyle = safeGetComputedStyle(scrollContainerRef.current);
+        const borderTop = needTop
+            ? convertCssPropertyToNumber(scrollStyle, 'borderTopWidth')
+            : 0;
+        const borderBottom = needBottom
+            ? convertCssPropertyToNumber(scrollStyle, 'borderBottomWidth')
+            : 0;
+        const containerTop = rectTop + borderTop;
+        const containerBottom = rectBottom - borderBottom;
         const disFromTop = Math.round(placeholderClientRect.top - containerTop);
         const disFromBottom = Math.round(placeholderClientRect.top + calculatedHeight - containerBottom);
         const topFollowDifference = followBottom - followOffset - calculatedHeight - topOffset - containerTop;
@@ -46,9 +55,32 @@ const Sticky = forwardRef((props, ref) => {
             ? disFromBottom >= -bottomOffset && followTop < containerBottom - followOffset
             : false;
         const newStickyState = isTopSticky || isBottomSticky;
-        const cssTop = (stickyStyle === 'absolute' ? 0 : containerTop) + topOffset;
-        const cssBottom = (stickyStyle === 'absolute' ? 0 : window.innerHeight - containerBottom) +
-            bottomOffset;
+        let stickyTop = containerTop;
+        let stickyBottom = window.innerHeight - containerBottom;
+        let stickyLeft = placeholderClientRect.left;
+        if (stickyStyle === 'absolute') {
+            const offsetParent = contentRef.current.offsetParent;
+            if (offsetParent) {
+                const { containerRect: parentRect } = getScrollContainerRect(offsetParent);
+                const parentStyle = safeGetComputedStyle(offsetParent);
+                const parentBorderTop = needTop
+                    ? convertCssPropertyToNumber(parentStyle, 'borderTopWidth')
+                    : 0;
+                const parentBorderBottom = needBottom
+                    ? convertCssPropertyToNumber(parentStyle, 'borderBottomWidth')
+                    : 0;
+                const 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;
+            }
+        }
+        const cssTop = stickyTop + topOffset;
+        const cssBottom = stickyBottom + bottomOffset;
         let stickyCssStyle = {};
         if (newStickyState) {
             stickyCssStyle = {
@@ -68,7 +100,7 @@ const Sticky = forwardRef((props, ref) => {
                             : cssBottom + bottomFollowDifference,
                     }
                     : {}),
-                left: placeholderClientRect.left,
+                left: stickyLeft,
                 width: placeholderClientRect.width,
                 ...(userSetStickyCssStyle || {}),
             };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.35.0",
+    "version": "2.35.1",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.20.2",
+        "@arco-design/mobile-utils": "2.20.3",
         "@arco-design/transformable": "^1.0.0",
         "@babel/runtime": "^7",
         "lodash.throttle": "^4.1.1",
@@ -47,5 +47,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "efb0db8d0e3ecdd787266dce595b2990e80bbefa"
+    "gitHead": "f80cdb93f0ea56337715dc7218c997fafa5af0a9"
 }

package/umd/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/umd/sticky/index.js

@@ -96,9 +96,14 @@
       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;
@@ -107,8 +112,32 @@
       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) {
@@ -122,7 +151,7 @@
         } : {}, isBottomSticky ? {
           bottom: bottomFollowDifference > 0 ? cssBottom : cssBottom + bottomFollowDifference
         } : {}, {
-          left: placeholderClientRect.left,
+          left: stickyLeft,
           width: placeholderClientRect.width
         }, userSetStickyCssStyle || {});
       }