@arco-design/mobile-react 2.35.0 → 2.35.2

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/pull-refresh/android-pull-refresh.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useRef, forwardRef, useCallback, useMemo, useContext, useEffect, useImperativeHandle } from 'react';
 import { cls, nextTick, defaultLocale } from '@arco-design/mobile-utils';
+import { Promise } from 'es6-promise';
 import Loading from '../loading';
 import { GlobalContext } from '../context-provider';
 import { PullRefreshStatus } from './model';
@@ -104,8 +105,8 @@ export var PullRefresh = /*#__PURE__*/forwardRef(function (props, ref) {
     }, ms ? {
       transition: "all " + ms / 1000 + "s"
     } : {}));
-    setTimeout(function () {
-      callback == null ? void 0 : callback();
+    callback && setTimeout(function () {
+      callback();
     }, ms);
   };
 
@@ -132,11 +133,6 @@ export var PullRefresh = /*#__PURE__*/forwardRef(function (props, ref) {
     if (disabled || touchRef.current || loadingRef.current || !domRef.current) return;
     if (!ifShouldHandle()) return;
     setTouching(true);
-
-    if (domRef.current.scrollTop === 0) {
-      domRef.current.scrollTop = 1;
-    }
-
     var _e$touches$ = e.touches[0],
         pageX = _e$touches$.pageX,
         pageY = _e$touches$.pageY;

package/esm/pull-refresh/model.d.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties, ReactNode } from 'react';
+import { Promise } from 'es6-promise';
 export interface PullRefreshRef {
     /**
      * 最外层元素 DOM

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/pull-refresh/android-pull-refresh.js

@@ -1,5 +1,6 @@
 import React, { useRef, forwardRef, useCallback, useMemo, useContext, useEffect, useImperativeHandle, } from 'react';
 import { cls, nextTick, defaultLocale } from '@arco-design/mobile-utils';
+import { Promise } from 'es6-promise';
 import Loading from '../loading';
 import { GlobalContext } from '../context-provider';
 import { PullRefreshStatus } from './model';
@@ -49,9 +50,10 @@ export const PullRefresh = forwardRef((props, ref) => {
                 transform: translateY ? `translateY(${translateY}px) translateZ(0)` : '',
                 ...(ms ? { transition: `all ${ms / 1000}s` } : {}),
             });
-        setTimeout(() => {
-            callback?.();
-        }, ms);
+        callback &&
+            setTimeout(() => {
+                callback();
+            }, ms);
     };
     const reset = (callback = () => { }) => {
         scroll(0, 300, () => {
@@ -70,9 +72,6 @@ export const PullRefresh = forwardRef((props, ref) => {
         if (!ifShouldHandle())
             return;
         setTouching(true);
-        if (domRef.current.scrollTop === 0) {
-            domRef.current.scrollTop = 1;
-        }
         const { pageX, pageY } = e.touches[0];
         if (pageX && pageY) {
             touchRef.current = { start: domRef.current?.scrollTop, x: pageX, y: pageY };

package/esnext/pull-refresh/model.d.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties, ReactNode } from 'react';
+import { Promise } from 'es6-promise';
 export interface PullRefreshRef {
     /**
      * 最外层元素 DOM

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.2",
     "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.4",
         "@arco-design/transformable": "^1.0.0",
         "@babel/runtime": "^7",
         "lodash.throttle": "^4.1.1",
@@ -47,5 +47,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "efb0db8d0e3ecdd787266dce595b2990e80bbefa"
+    "gitHead": "a60bba95c16b19816c23b4e59b4db57d16137589"
 }

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/pull-refresh/android-pull-refresh.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../loading", "../context-provider", "./model", "./hooks", "../_helpers"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "es6-promise", "../loading", "../context-provider", "./model", "./hooks", "../_helpers"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../loading"), require("../context-provider"), require("./model"), require("./hooks"), require("../_helpers"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("es6-promise"), require("../loading"), require("../context-provider"), require("./model"), require("./hooks"), require("../_helpers"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.loading, global.contextProvider, global.model, global.hooks, global._helpers);
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.es6Promise, global.loading, global.contextProvider, global.model, global.hooks, global._helpers);
     global.androidPullRefresh = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _loading, _contextProvider, _model, _hooks, _helpers) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _es6Promise, _loading, _contextProvider, _model, _hooks, _helpers) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -122,8 +122,8 @@
       }, ms ? {
         transition: "all " + ms / 1000 + "s"
       } : {}));
-      setTimeout(function () {
-        callback == null ? void 0 : callback();
+      callback && setTimeout(function () {
+        callback();
       }, ms);
     };
 
@@ -150,11 +150,6 @@
       if (disabled || touchRef.current || loadingRef.current || !domRef.current) return;
       if (!ifShouldHandle()) return;
       setTouching(true);
-
-      if (domRef.current.scrollTop === 0) {
-        domRef.current.scrollTop = 1;
-      }
-
       var _e$touches$ = e.touches[0],
           pageX = _e$touches$.pageX,
           pageY = _e$touches$.pageY;
@@ -173,7 +168,7 @@
     }, [disabled, ifShouldHandle]);
 
     var refresh = function refresh() {
-      return new Promise(function (resolve) {
+      return new _es6Promise.Promise(function (resolve) {
         setStatus(_model.PullRefreshStatus.Loading);
         (0, _mobileUtils.nextTick)(function () {
           scroll(tipsHeight, 300);

package/umd/pull-refresh/model.d.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties, ReactNode } from 'react';
+import { Promise } from 'es6-promise';
 export interface PullRefreshRef {
     /**
      * 最外层元素 DOM

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 || {});
       }