@arco-design/mobile-react 2.27.5 → 2.28.1

package/esm/_helpers/hooks.js

@@ -58,11 +58,25 @@ export function useMountedState(initialState) {
   var result = [state, setValidState];
   return result;
 }
-export function useRefState(initialValue) {
+export function useSameRefState(initialValue) {
   var _useState2 = useState(initialValue),
       state = _useState2[0],
       setState = _useState2[1];
 
+  var stateRef = useRef(state);
+
+  var setStateProxy = function setStateProxy(data) {
+    stateRef.current = data;
+    setState(data);
+  };
+
+  return [state, stateRef, setStateProxy];
+}
+export function useRefState(initialValue) {
+  var _useState3 = useState(initialValue),
+      state = _useState3[0],
+      setState = _useState3[1];
+
   var stateRef = useRef(state);
   useEffect(function () {
     stateRef.current = state;
@@ -95,8 +109,8 @@ export function useUpdateEffect(effect, dependencies) {
   }, dependencies);
 }
 export function useForceUpdate() {
-  var _useState3 = useState(0),
-      setTick = _useState3[1];
+  var _useState4 = useState(0),
+      setTick = _useState4[1];
 
   var update = useCallback(function () {
     setTick(function (tick) {
@@ -116,11 +130,11 @@ export function useSystem() {
   var _useContext = useContext(GlobalContext),
       currentSystem = _useContext.system;
 
-  var _useState4 = useState(function () {
+  var _useState5 = useState(function () {
     return currentSystem || getSystem();
   }),
-      system = _useState4[0],
-      setSystem = _useState4[1];
+      system = _useState5[0],
+      setSystem = _useState5[1];
 
   useEffect(function () {
     setSystem(currentSystem || getSystem());
@@ -128,13 +142,13 @@ export function useSystem() {
   return system;
 }
 export function useWindowSize(listenResize) {
-  var _useState5 = useState(0),
-      windowWidth = _useState5[0],
-      setWindowWidth = _useState5[1];
-
   var _useState6 = useState(0),
-      windowHeight = _useState6[0],
-      setWindowHeight = _useState6[1];
+      windowWidth = _useState6[0],
+      setWindowWidth = _useState6[1];
+
+  var _useState7 = useState(0),
+      windowHeight = _useState7[0],
+      setWindowHeight = _useState7[1];
 
   function setSize() {
     setWindowWidth(window.innerWidth);
@@ -436,17 +450,17 @@ export function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOver
   }, [visible]);
 }
 export var useProgress = function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
-  var _useState7 = useState(0),
-      currentPercentage = _useState7[0],
-      setCurrentPercentage = _useState7[1];
+  var _useState8 = useState(0),
+      currentPercentage = _useState8[0],
+      setCurrentPercentage = _useState8[1];
 
-  var _useState8 = useState(false),
-      transitionControl = _useState8[0],
-      setTransitionControl = _useState8[1];
+  var _useState9 = useState(false),
+      transitionControl = _useState9[0],
+      setTransitionControl = _useState9[1];
 
-  var _useState9 = useState(0),
-      count = _useState9[0],
-      setCount = _useState9[1];
+  var _useState10 = useState(0),
+      count = _useState10[0],
+      setCount = _useState10[1];
 
   var latestPercentage = useRef(percentage);
   useEffect(function () {
@@ -475,9 +489,9 @@ export function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
     delay = 200;
   }
 
-  var _useState10 = useState(0),
-      clickTimes = _useState10[0],
-      setClickTimes = _useState10[1];
+  var _useState11 = useState(0),
+      clickTimes = _useState11[0],
+      setClickTimes = _useState11[1];
 
   var eventRef = useRef();
   useEffect(function () {
@@ -499,9 +513,9 @@ export function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
 }
 var arcoSvgKeyCount = 0;
 export function useGenSvgKey(userSetSvgKey) {
-  var _useState11 = useState(''),
-      innerSvgKey = _useState11[0],
-      setInnerSvgKey = _useState11[1];
+  var _useState12 = useState(''),
+      innerSvgKey = _useState12[0],
+      setInnerSvgKey = _useState12[1];
 
   var svgKey = userSetSvgKey || innerSvgKey;
   useEffect(function () {

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

@@ -1,7 +1,7 @@
-import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useContext, useMemo } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useContext } from 'react';
 import { cls, convertCssDuration, nextTick } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
-import { useRefState, useUpdateEffect } from '../_helpers';
+import { useRefState, useSameRefState, useUpdateEffect } from '../_helpers';
 import IconArrowDown from '../icon/IconArrowDown';
 import { allContexts, CollapseKeyContext } from './utils';
 export var Collapse = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -46,7 +46,13 @@ export var Collapse = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var CollapseContext = allContexts[groupKey] || {};
   var groupContext = useContext(CollapseContext) || {};
-  var opened = useMemo(function () {
+
+  var _useSameRefState = useSameRefState(false),
+      opened = _useSameRefState[0],
+      openedRef = _useSameRefState[1],
+      setOpened = _useSameRefState[2];
+
+  useEffect(function () {
     var show = false; // 优先级： group > children
     // @en Priority: group > children
 
@@ -60,7 +66,7 @@ export var Collapse = /*#__PURE__*/forwardRef(function (props, ref) {
       show = itemActive;
     }
 
-    return show;
+    setOpened(show);
   }, [value, active, itemActive, groupContext.isGroup, groupContext.value]);
 
   var getContentHeight = function getContentHeight() {
@@ -78,8 +84,8 @@ export var Collapse = /*#__PURE__*/forwardRef(function (props, ref) {
     contentWrapRef.current.style.height = newHeight;
     var transTimeout = 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() {
@@ -102,10 +108,10 @@ export var Collapse = /*#__PURE__*/forwardRef(function (props, ref) {
     }
 
     var height = getContentHeight();
-    contentWrapRef.current.style.height = opened ? contentHeightRef.current + "px" : '0px';
+    contentWrapRef.current.style.height = openedRef.current ? contentHeightRef.current + "px" : '0px';
     nextTick(function () {
       contentHeightRef.current = height;
-      resetHeight(opened ? height + "px" : '0px');
+      resetHeight(openedRef.current ? height + "px" : '0px');
     });
   };
 

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

@@ -766,7 +766,8 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement(Carousel, _extends({
       autoPlay: false,
       loop: loop,
-      lazyloadCount: lazyloadCount
+      lazyloadCount: lazyloadCount,
+      stopPropagation: false
     }, carouselProps), (allImages || []).map(function (image, index) {
       var innerNode = /*#__PURE__*/React.createElement("div", {
         key: index,

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

@@ -133,7 +133,8 @@ var Rate = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref2) {
-    var prefixCls = _ref2.prefixCls;
+    var prefixCls = _ref2.prefixCls,
+        useRtl = _ref2.useRtl;
     return /*#__PURE__*/React.createElement("div", {
       role: "slider",
       "aria-valuemin": 0,
@@ -149,6 +150,7 @@ var Rate = /*#__PURE__*/forwardRef(function (props, ref) {
       // 对内的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.createElement("div", {
         key: index,
@@ -159,12 +161,12 @@ var Rate = /*#__PURE__*/forwardRef(function (props, ref) {
       }, renderRateIcon(prefixCls + "-rate", status, index), /*#__PURE__*/React.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.createElement("div", {
         className: prefixCls + "-rate-icon-click-half right",
         onClick: function onClick() {
-          return handleStarIndexChange(index);
+          return handleStarIndexChange(useRtl ? halfIndex : index);
         }
       }));
     }));

package/esm/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/esm/rate/style/index.less

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

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

@@ -141,6 +141,22 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
     });
     framePendingRef.current = true;
   }, [containerEventHandler]);
+  var updatePlaceholderLayoutInner = 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 = useCallback(function () {
+    if (contentRef.current) {
+      var contentClientRect = contentRef.current.getBoundingClientRect();
+      contentCalculateHeightRef.current = contentClientRect.height;
+    }
+
+    updatePlaceholderLayoutInner();
+  }, []);
   useEffect(function () {
     var containerEle = getActualContainer(getContainer);
     containerRef.current = containerEle || document.body;
@@ -163,18 +179,15 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
     };
   }, [getContainer, getScrollContainer, recalculatePosition]);
   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]);
   useImperativeHandle(ref, function () {
     return {
       dom: contentRef.current,
-      recalculatePosition: recalculatePosition
+      recalculatePosition: recalculatePosition,
+      updatePlaceholderLayout: updatePlaceholderLayout
     };
-  }, [recalculatePosition]);
+  }, [recalculatePosition, updatePlaceholderLayout]);
   var computedStyle = useMemo(function () {
     return _extends({}, style || {}, stickyStateStyle);
   }, [stickyStateStyle, style]);

package/esm/switch/index.js

@@ -1,8 +1,11 @@
-import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef, useContext } from 'react';
 import { cls, componentWrapper } from '@arco-design/mobile-utils';
-import { ContextLayout } from '../context-provider';
+import { ContextLayout, GlobalContext } from '../context-provider';
 import { useSystem } from '../_helpers';
 var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useContext = useContext(GlobalContext),
+      useRtl = _useContext.useRtl;
+
   var system = useSystem();
   var className = props.className,
       style = props.style,
@@ -70,13 +73,15 @@ var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
 
     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 {