@arco-design/mobile-react 2.27.5 → 2.28.1

package/umd/_helpers/hooks.js

@@ -25,6 +25,7 @@
   _exports.useProgress = void 0;
   _exports.useRefMountedState = useRefMountedState;
   _exports.useRefState = useRefState;
+  _exports.useSameRefState = useSameRefState;
   _exports.useSingleAndDoubleClick = useSingleAndDoubleClick;
   _exports.useSwiperInnerScroll = useSwiperInnerScroll;
   _exports.useSystem = useSystem;
@@ -90,11 +91,26 @@
     return result;
   }
 
-  function useRefState(initialValue) {
+  function useSameRefState(initialValue) {
     var _useState2 = (0, _react.useState)(initialValue),
         state = _useState2[0],
         setState = _useState2[1];
 
+    var stateRef = (0, _react.useRef)(state);
+
+    var setStateProxy = function setStateProxy(data) {
+      stateRef.current = data;
+      setState(data);
+    };
+
+    return [state, stateRef, setStateProxy];
+  }
+
+  function useRefState(initialValue) {
+    var _useState3 = (0, _react.useState)(initialValue),
+        state = _useState3[0],
+        setState = _useState3[1];
+
     var stateRef = (0, _react.useRef)(state);
     (0, _react.useEffect)(function () {
       stateRef.current = state;
@@ -130,8 +146,8 @@
   }
 
   function useForceUpdate() {
-    var _useState3 = (0, _react.useState)(0),
-        setTick = _useState3[1];
+    var _useState4 = (0, _react.useState)(0),
+        setTick = _useState4[1];
 
     var update = (0, _react.useCallback)(function () {
       setTick(function (tick) {
@@ -153,11 +169,11 @@
     var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
         currentSystem = _useContext.system;
 
-    var _useState4 = (0, _react.useState)(function () {
+    var _useState5 = (0, _react.useState)(function () {
       return currentSystem || (0, _mobileUtils.getSystem)();
     }),
-        system = _useState4[0],
-        setSystem = _useState4[1];
+        system = _useState5[0],
+        setSystem = _useState5[1];
 
     (0, _react.useEffect)(function () {
       setSystem(currentSystem || (0, _mobileUtils.getSystem)());
@@ -166,13 +182,13 @@
   }
 
   function useWindowSize(listenResize) {
-    var _useState5 = (0, _react.useState)(0),
-        windowWidth = _useState5[0],
-        setWindowWidth = _useState5[1];
-
     var _useState6 = (0, _react.useState)(0),
-        windowHeight = _useState6[0],
-        setWindowHeight = _useState6[1];
+        windowWidth = _useState6[0],
+        setWindowWidth = _useState6[1];
+
+    var _useState7 = (0, _react.useState)(0),
+        windowHeight = _useState7[0],
+        setWindowHeight = _useState7[1];
 
     function setSize() {
       setWindowWidth(window.innerWidth);
@@ -479,17 +495,17 @@
   }
 
   var useProgress = function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
-    var _useState7 = (0, _react.useState)(0),
-        currentPercentage = _useState7[0],
-        setCurrentPercentage = _useState7[1];
+    var _useState8 = (0, _react.useState)(0),
+        currentPercentage = _useState8[0],
+        setCurrentPercentage = _useState8[1];
 
-    var _useState8 = (0, _react.useState)(false),
-        transitionControl = _useState8[0],
-        setTransitionControl = _useState8[1];
+    var _useState9 = (0, _react.useState)(false),
+        transitionControl = _useState9[0],
+        setTransitionControl = _useState9[1];
 
-    var _useState9 = (0, _react.useState)(0),
-        count = _useState9[0],
-        setCount = _useState9[1];
+    var _useState10 = (0, _react.useState)(0),
+        count = _useState10[0],
+        setCount = _useState10[1];
 
     var latestPercentage = (0, _react.useRef)(percentage);
     (0, _react.useEffect)(function () {
@@ -521,9 +537,9 @@
       delay = 200;
     }
 
-    var _useState10 = (0, _react.useState)(0),
-        clickTimes = _useState10[0],
-        setClickTimes = _useState10[1];
+    var _useState11 = (0, _react.useState)(0),
+        clickTimes = _useState11[0],
+        setClickTimes = _useState11[1];
 
     var eventRef = (0, _react.useRef)();
     (0, _react.useEffect)(function () {
@@ -547,9 +563,9 @@
   var arcoSvgKeyCount = 0;
 
   function useGenSvgKey(userSetSvgKey) {
-    var _useState11 = (0, _react.useState)(''),
-        innerSvgKey = _useState11[0],
-        setInnerSvgKey = _useState11[1];
+    var _useState12 = (0, _react.useState)(''),
+        innerSvgKey = _useState12[0],
+        setInnerSvgKey = _useState12[1];
 
     var svgKey = userSetSvgKey || innerSvgKey;
     (0, _react.useEffect)(function () {

package/umd/avatar/type.d.ts

@@ -18,7 +18,7 @@ export interface AvatarProps<T extends ImageProps = ImageProps> extends BaseProp
      * 图片头像的资源地址
      * @en resource of avatar picture
      */
-    src: string;
+    src?: string;
     /**
      * 图片头像组件参数，透传给Image组件
      * @en Image avatar component props, transparently passed to the Image component

package/umd/badge/style/css/index.css

@@ -89,7 +89,19 @@
   margin-left:  -8PX ;
   margin-top:  -8PX ;
 }
+[dir="rtl"] .arco-badge-absolute {
+  left: initial;
+  right: 100%;
+}
+[dir="rtl"] .arco-badge-absolute {
+  margin-left: initial;
+  margin-right:  -8PX ;
+}
 .arco-badge-absolute.arco-badge-dot {
   margin-left:  -4PX ;
   margin-top:  -4PX ;
 }
+[dir="rtl"] .arco-badge-absolute.arco-badge-dot {
+  margin-left: initial;
+  margin-right:  -4PX ;
+}

package/umd/badge/style/index.less

@@ -60,13 +60,13 @@
     &-absolute {
         position: absolute;
         top: 0;
-        left: 100%;
-        .use-var(margin-left, badge-text-deviation);
+        .set-prop-with-rtl(left, 100%);
+        .use-var-with-rtl(margin-left, badge-text-deviation);
         .use-var(margin-top, badge-text-deviation);
     }
 
     &-absolute&-dot {
-        .use-var(margin-left, badge-dot-deviation);
+        .use-var-with-rtl(margin-left, badge-dot-deviation);
         .use-var(margin-top, badge-dot-deviation);
     }
 }

package/umd/button/style/css/index.css

@@ -210,6 +210,10 @@
 .arco-button-text-has-icon {
   margin-left:  0.08rem ;
 }
+[dir="rtl"] .arco-button-text-has-icon {
+  margin-left: initial;
+  margin-right:  0.08rem ;
+}
 .arco-button-loading-icon {
   display: inline-block;
   vertical-align: middle;

package/umd/button/style/index.less

@@ -84,7 +84,7 @@
         vertical-align: middle;
     }
     &-text-has-icon {
-        .use-var(margin-left, button-icon-text-gutter);
+        .use-var-with-rtl(margin-left, button-icon-text-gutter);
     }
 
     &-loading-icon {

package/umd/cell/style/css/index.css

@@ -164,6 +164,9 @@
   -webkit-box-orient: vertical;
   white-space: normal;
 }
+[dir="rtl"] .arco-cell .cell-content .cell-text {
+  text-align: left;
+}
 .arco-cell .cell-label-icon {
   margin-right:  0.24rem ;
   font-size: 0;
@@ -181,6 +184,10 @@
   margin-left:  0.16rem ;
   font-size: 0;
 }
+[dir="rtl"] .arco-cell .cell-arrow-icon {
+  -webkit-transform: scale(-1);
+          transform: scale(-1);
+}
 [dir="rtl"] .arco-cell .cell-arrow-icon {
   margin-left: initial;
   margin-right:  0.16rem ;

package/umd/cell/style/index.less

@@ -54,7 +54,7 @@
 
         .cell-text {
             width: 100%;
-            text-align: right;
+            .set-value-with-rtl(text-align, right);
             .use-var(font-size, cell-content-font-size);
             .text-overflow(2);
         }
@@ -71,6 +71,9 @@
     }
 
     .cell-arrow-icon {
+        [dir="rtl"] & {
+            transform: scale(-1);
+        }
         .use-var-with-rtl(margin-left, cell-arrow-gutter);
         font-size: 0;
         .@{prefix}-icon {

package/umd/checkbox/style/css/index.css

@@ -32,6 +32,10 @@
 .arco-checkbox .checkbox-icon + .checkbox-text {
   margin-left:  0.16rem ;
 }
+[dir="rtl"] .arco-checkbox .checkbox-icon + .checkbox-text {
+  margin-left: initial;
+  margin-right:  0.16rem ;
+}
 .arco-checkbox.disabled .checkbox-text {
   opacity:  0.5 ;
 }
@@ -47,7 +51,16 @@
 .arco-checkbox-group .arco-checkbox:not(:last-child) {
   margin-right:  0.48rem ;
 }
+[dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child) {
+  margin-right: initial;
+  margin-left:  0.48rem ;
+}
 .arco-checkbox-group .arco-checkbox:not(:last-child).block,
 .arco-checkbox-group .arco-checkbox:not(:last-child).justify {
   margin-right: 0;
 }
+[dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child).block,
+[dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child).justify {
+  margin-right: initial;
+  margin-left: 0;
+}

package/umd/checkbox/style/index.less

@@ -29,7 +29,7 @@
     }
 
     .checkbox-icon + .checkbox-text {
-        .use-var(margin-left, checkbox-icon-margin-right);
+        .use-var-with-rtl(margin-left, checkbox-icon-margin-right);
     }
 
     &.disabled .checkbox-text {
@@ -48,11 +48,11 @@
 
 .@{prefix}-checkbox-group {
     .@{prefix}-checkbox:not(:last-child) {
-        .use-var(margin-right, checkbox-group-gutter);
+        .use-var-with-rtl(margin-right, checkbox-group-gutter);
 
         &.block,
         &.justify {
-            margin-right: 0;
+            .set-prop-with-rtl(margin-right, 0);
         }
     }
 }

package/umd/collapse/collapse.js

@@ -66,7 +66,13 @@
 
     var CollapseContext = _utils.allContexts[groupKey] || {};
     var groupContext = (0, _react.useContext)(CollapseContext) || {};
-    var opened = (0, _react.useMemo)(function () {
+
+    var _useSameRefState = (0, _helpers.useSameRefState)(false),
+        opened = _useSameRefState[0],
+        openedRef = _useSameRefState[1],
+        setOpened = _useSameRefState[2];
+
+    (0, _react.useEffect)(function () {
       var show = false; // 优先级： group > children
       // @en Priority: group > children
 
@@ -80,7 +86,7 @@
         show = itemActive;
       }
 
-      return show;
+      setOpened(show);
     }, [value, active, itemActive, groupContext.isGroup, groupContext.value]);
 
     var getContentHeight = function getContentHeight() {
@@ -98,8 +104,8 @@
       contentWrapRef.current.style.height = newHeight;
       var transTimeout = (0, _mobileUtils.convertCssDuration)(contentWrapRef.current, 'transitionDuration');
       setTimeout(function () {
-        return contentWrapRef.current && (contentWrapRef.current.style.height = opened ? 'auto' : '0px');
-      }, opened ? transTimeout : 20);
+        return contentWrapRef.current && (contentWrapRef.current.style.height = openedRef.current ? 'auto' : '0px');
+      }, openedRef.current ? transTimeout : 20);
     };
 
     var toggleOpened = function toggleOpened() {
@@ -122,10 +128,10 @@
       }
 
       var height = getContentHeight();
-      contentWrapRef.current.style.height = opened ? contentHeightRef.current + "px" : '0px';
+      contentWrapRef.current.style.height = openedRef.current ? contentHeightRef.current + "px" : '0px';
       (0, _mobileUtils.nextTick)(function () {
         contentHeightRef.current = height;
-        resetHeight(opened ? height + "px" : '0px');
+        resetHeight(openedRef.current ? height + "px" : '0px');
       });
     };
 

package/umd/form/style/css/index.css

@@ -27,6 +27,10 @@
   padding-right:  0.32rem ;
   width:  1.92rem ;
 }
+[dir="rtl"] .arco-form-label-item {
+  padding-right: initial;
+  padding-left:  0.32rem ;
+}
 .arco-form-label-item-required-asterisk {
   position: absolute;
   left: -0.6em;
@@ -35,6 +39,10 @@
   line-height:  1.08rem ;
   color:  #f53f3f ;
 }
+[dir="rtl"] .arco-form-label-item-required-asterisk {
+  left: initial;
+  right: -0.6em;
+}
 .disabled .arco-form-label-item {
   color:  #c9cdd4 ;
 }
@@ -68,6 +76,10 @@
 .arco-form-item-message svg {
   margin-right: 0.08rem;
 }
+[dir="rtl"] .arco-form-item-message svg {
+  margin-right: initial;
+  margin-left: 0.08rem;
+}
 .arco-form-item-error-message {
   color:  #f53f3f ;
 }
@@ -80,6 +92,10 @@
 .arco-form-item.arco-form-item-vertical .arco-input-wrap {
   padding-left: 0;
 }
+[dir="rtl"] .arco-form-item.arco-form-item-vertical .arco-input-wrap {
+  padding-left: initial;
+  padding-right: 0;
+}
 .arco-form-item.arco-form-item-vertical .arco-form-label-item {
   width: auto;
   margin-top: 16px;

package/umd/form/style/index.less

@@ -20,12 +20,12 @@
         .use-var(font-size, form-item-label-item-font-size);
         .use-var(line-height, form-item-label-item-line-height);
         .use-var(color, form-item-label-item-color);
-        .use-var(padding-right, form-item-label-item-gutter);
+        .use-var-with-rtl(padding-right, form-item-label-item-gutter);
         .use-var(width, form-item-label-item-width);
 
         &-required-asterisk {
             position: absolute;
-            left: -0.6em;
+            .set-prop-with-rtl(left, -0.6em);
             top: 0;
 
             .use-var(font-size, form-item-label-item-font-size);
@@ -60,7 +60,7 @@
         }
 
         svg {
-            .rem(margin-right, 4);
+            .rem-with-rtl(margin-right, 4);
         }
         margin-bottom: 16px;
     }
@@ -75,7 +75,7 @@
     &-item.@{prefix}-form-item-vertical {
         display: block;
         .arco-input-wrap {
-            padding-left: 0;
+            .set-prop-with-rtl(padding-left, 0);
         }
         .@{prefix}-form-label-item {
             width: auto;

package/umd/image-preview/index.js

@@ -794,7 +794,8 @@
       return /*#__PURE__*/_react.default.createElement(_carousel.default, (0, _extends5.default)({
         autoPlay: false,
         loop: loop,
-        lazyloadCount: lazyloadCount
+        lazyloadCount: lazyloadCount,
+        stopPropagation: false
       }, carouselProps), (allImages || []).map(function (image, index) {
         var innerNode = /*#__PURE__*/_react.default.createElement("div", {
           key: index,

package/umd/radio/style/css/index.css

@@ -32,6 +32,10 @@
 .arco-radio .radio-icon + .radio-text {
   margin-left:  0.16rem ;
 }
+[dir="rtl"] .arco-radio .radio-icon + .radio-text {
+  margin-left: initial;
+  margin-right:  0.16rem ;
+}
 .arco-radio.disabled .radio-text {
   opacity:  0.5 ;
 }
@@ -47,3 +51,7 @@
 .arco-radio-group .arco-radio:not(:last-child, .block) {
   margin-right:  0.48rem ;
 }
+[dir="rtl"] .arco-radio-group .arco-radio:not(:last-child, .block) {
+  margin-right: initial;
+  margin-left:  0.48rem ;
+}

package/umd/radio/style/index.less

@@ -29,7 +29,7 @@
     }
 
     .radio-icon + .radio-text {
-        .use-var(margin-left, checkbox-icon-margin-right);
+        .use-var-with-rtl(margin-left, checkbox-icon-margin-right);
     }
 
     &.disabled .radio-text {
@@ -48,6 +48,6 @@
 
 .@{prefix}-radio-group {
     .@{prefix}-radio:not(:last-child, .block) {
-        .use-var(margin-right, checkbox-group-gutter);
+        .use-var-with-rtl(margin-right, checkbox-group-gutter);
     }
 }

package/umd/rate/index.js

@@ -154,7 +154,8 @@
     }
 
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref2) {
-      var prefixCls = _ref2.prefixCls;
+      var prefixCls = _ref2.prefixCls,
+          useRtl = _ref2.useRtl;
       return /*#__PURE__*/_react.default.createElement("div", {
         role: "slider",
         "aria-valuemin": 0,
@@ -170,6 +171,7 @@
         // 对内的index从1开始，方便计算
         // @en The index of the pair starts from 1, which is convenient for calculation
         var index = i + 1;
+        var halfIndex = allowHalf ? index - 0.5 : index;
         var status = getIconStatus(index);
         return /*#__PURE__*/_react.default.createElement("div", {
           key: index,
@@ -180,12 +182,12 @@
         }, renderRateIcon(prefixCls + "-rate", status, index), /*#__PURE__*/_react.default.createElement("div", {
           className: prefixCls + "-rate-icon-click-half left",
           onClick: function onClick() {
-            return handleStarIndexChange(allowHalf ? index - 0.5 : index);
+            return handleStarIndexChange(useRtl ? index : halfIndex);
           }
         }), /*#__PURE__*/_react.default.createElement("div", {
           className: prefixCls + "-rate-icon-click-half right",
           onClick: function onClick() {
-            return handleStarIndexChange(index);
+            return handleStarIndexChange(useRtl ? halfIndex : index);
           }
         }));
       }));

package/umd/rate/style/css/index.css

@@ -40,6 +40,10 @@
   position: absolute;
   z-index: 1;
 }
+[dir="rtl"] .arco-rate-icon.half-active {
+  -webkit-transform: scaleX(-1);
+          transform: scaleX(-1);
+}
 .arco-rate-icon-click-half {
   width: 50%;
   height: 100%;

package/umd/rate/style/index.less

@@ -38,6 +38,10 @@
         &.half-active {
             position: absolute;
             z-index: 1;
+
+            [dir="rtl"] & {
+                transform: scaleX(-1);
+            }
         }
     }
 

package/umd/sticky/index.d.ts

@@ -10,6 +10,11 @@ export interface StickyRef {
      * @en In the local scrolling mode, if there is nested scrolling outside the container, this method can be actively called to make the sticky element actively update the fixed position
      */
     recalculatePosition: () => void;
+    /**
+     * 手动更新占位模块的高度
+     * @en Manually update the height of the placeholder
+     */
+    updatePlaceholderLayout: () => void;
 }
 export interface StickyEventPayload {
     /**

package/umd/sticky/index.js

@@ -161,6 +161,22 @@
       });
       framePendingRef.current = true;
     }, [containerEventHandler]);
+    var updatePlaceholderLayoutInner = (0, _react.useCallback)(function () {
+      if (placeholderRef.current) {
+        var contentHeight = contentCalculateHeightRef.current; // 当元素吸顶时，默认有一个占位的元素占住该元素的位置，避免布局产生抖动
+        // @en When an element is sticky to the top, a placeholder element occupies the element's position by default to avoid jitter in the layout
+
+        placeholderRef.current.style.height = (isStickyRef.current ? contentHeight : 0) + "px";
+      }
+    }, []);
+    var updatePlaceholderLayout = (0, _react.useCallback)(function () {
+      if (contentRef.current) {
+        var contentClientRect = contentRef.current.getBoundingClientRect();
+        contentCalculateHeightRef.current = contentClientRect.height;
+      }
+
+      updatePlaceholderLayoutInner();
+    }, []);
     (0, _react.useEffect)(function () {
       var containerEle = (0, _mobileUtils.getActualContainer)(getContainer);
       containerRef.current = containerEle || document.body;
@@ -183,18 +199,15 @@
       };
     }, [getContainer, getScrollContainer, recalculatePosition]);
     (0, _react.useEffect)(function () {
-      if (placeholderRef.current) {
-        // 当元素吸顶时，默认有一个占位的元素占住该元素的位置，避免布局产生抖动
-        // @en When an element is sticky to the top, a placeholder element occupies the element's position by default to avoid jitter in the layout
-        placeholderRef.current.style.height = (isStickyRef.current ? contentCalculateHeightRef.current : 0) + "px";
-      }
+      updatePlaceholderLayoutInner();
     }, [isSticky, wasSticky]);
     (0, _react.useImperativeHandle)(ref, function () {
       return {
         dom: contentRef.current,
-        recalculatePosition: recalculatePosition
+        recalculatePosition: recalculatePosition,
+        updatePlaceholderLayout: updatePlaceholderLayout
       };
-    }, [recalculatePosition]);
+    }, [recalculatePosition, updatePlaceholderLayout]);
     var computedStyle = (0, _react.useMemo)(function () {
       return (0, _extends2.default)({}, style || {}, stickyStateStyle);
     }, [stickyStateStyle, style]);

package/umd/switch/index.js

@@ -22,6 +22,9 @@
   function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
   var Switch = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        useRtl = _useContext.useRtl;
+
     var system = (0, _helpers.useSystem)();
     var className = props.className,
         style = props.style,
@@ -89,13 +92,15 @@
 
       var touchEndX = e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientX : 0;
       var distance = touchEndX - touchStartX;
+      var swipeRight = useRtl ? distance < 0 : distance > 0;
+      var swipeLeft = useRtl ? distance > 0 : distance < 0;
       var newChecked = false; // 右滑打开
       // @en Swipe right to open
 
-      if (distance > 0) {
+      if (swipeRight) {
         newChecked = true; // 左滑关闭
         // @en Swipe left to close
-      } else if (distance < 0) {
+      } else if (swipeLeft) {
         newChecked = false; // 点击时取反
         // @en Invert on clicking
       } else {