@arco-design/mobile-react 2.35.0 → 2.35.2

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.35.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.35.1...@arco-design/mobile-react@2.35.2) (2025-03-17)
+
+
+### Bug Fixes
+
+* `PullRefresh` fix severe lagging in Android device ([#316](https://github.com/arco-design/arco-design-mobile/issues/316)) ([2b14461](https://github.com/arco-design/arco-design-mobile/commit/2b14461f787c42035e06c7a76b50955f22cadde2))
+
+
+
+
+
+## [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.1/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.35.1/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.1/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.35.1/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/pull-refresh/android-pull-refresh.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _mobileUtils = require("@arco-design/mobile-utils");
 
+var _es6Promise = require("es6-promise");
+
 var _loading = _interopRequireDefault(require("../loading"));
 
 var _contextProvider = require("../context-provider");
@@ -122,8 +124,8 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, ms ? {
       transition: "all " + ms / 1000 + "s"
     } : {}));
-    setTimeout(function () {
-      callback == null ? void 0 : callback();
+    callback && setTimeout(function () {
+      callback();
     }, ms);
   };
 
@@ -150,11 +152,6 @@ var PullRefresh = /*#__PURE__*/(0, _react.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;
@@ -173,7 +170,7 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [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/cjs/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/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,17 +1321,42 @@
      * 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 || {});
         }
@@ -26114,8 +26166,8 @@
         }, ms ? {
           transition: "all " + ms / 1000 + "s"
         } : {}));
-        setTimeout(function () {
-          callback === null || callback === void 0 ? void 0 : callback();
+        callback && setTimeout(function () {
+          callback();
         }, ms);
       };
 
@@ -26144,11 +26196,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 _b = e.touches[0],
             pageX = _b.pageX,
             pageY = _b.pageY;
@@ -26165,7 +26212,7 @@
       }, [disabled, ifShouldHandle]);
 
       var refresh = function refresh() {
-        return new Promise(function (resolve) {
+        return new es6Promise.Promise(function (resolve) {
           setStatus(PullRefreshStatus.Loading);
           nextTick(function () {
             scroll(tipsHeight, 300);