@arco-design/mobile-react 2.34.0 → 2.35.1

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 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)
+
+
+### Bug Fixes
+
+* add new less variable `[@prefix-mobile](https://github.com/prefix-mobile)` ([#310](https://github.com/arco-design/arco-design-mobile/issues/310)) ([c8b539c](https://github.com/arco-design/arco-design-mobile/commit/c8b539cf7c5a064f1334de6d87a7c00d22c8f453))
+* change protocol from http to https ([#304](https://github.com/arco-design/arco-design-mobile/issues/304)) ([0c42f9b](https://github.com/arco-design/arco-design-mobile/commit/0c42f9becf74e2dcbd02d774b426e113ea2b260c))
+* fix `Context-Provider` demo url ([#306](https://github.com/arco-design/arco-design-mobile/issues/306)) ([4a5c0f8](https://github.com/arco-design/arco-design-mobile/commit/4a5c0f86de85f5eddb2b0b6816db2a9ea38cde40))
+* keep empty value in renderLinkedContainer of `DatePicker` ([#309](https://github.com/arco-design/arco-design-mobile/issues/309)) ([0f07a93](https://github.com/arco-design/arco-design-mobile/commit/0f07a931de93b22dfe17aa5eda878b51cc943913))
+
+
+### Features
+
+* add dynamic theme demo ([#305](https://github.com/arco-design/arco-design-mobile/issues/305)) ([f27ccc6](https://github.com/arco-design/arco-design-mobile/commit/f27ccc6910a700a064be22926c2321b3afac4694))
+
+
+
+
+
 # [2.34.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.33.0...@arco-design/mobile-react@2.34.0) (2024-11-21)
 
 

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.33.0/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.33.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.33.0/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.33.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/date-picker/index.js

@@ -345,7 +345,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onOk: _handlePickerConfirm,
       touchToStop: touchToStop,
       renderLinkedContainer: renderLinkedContainer ? function () {
-        return renderLinkedContainer(currentTs, keyOptions);
+        return renderLinkedContainer((0, _mobileUtils.isEmptyValue)(props.currentTs) ? undefined : currentTs, keyOptions);
       } : undefined
     }));
   });

package/cjs/date-picker/type.d.ts

@@ -110,5 +110,5 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * 将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器
      * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
      */
-    renderLinkedContainer?: (currentTs: number, itemTypes: ItemType[]) => ReactNode;
+    renderLinkedContainer?: (currentTs: number | undefined, itemTypes: ItemType[]) => ReactNode;
 }

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 || {});
         }
@@ -13964,7 +14016,7 @@
           onOk: _handlePickerConfirm,
           touchToStop: touchToStop,
           renderLinkedContainer: renderLinkedContainer ? function () {
-            return renderLinkedContainer(currentTs, keyOptions);
+            return renderLinkedContainer(isEmptyValue(props.currentTs) ? undefined : currentTs, keyOptions);
           } : undefined
         }));
       });