@arco-design/mobile-react 2.30.2 → 2.30.4

package/cjs/slider/index.js

@@ -26,7 +26,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Slider = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
   var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
       _useContext$prefixCls = _useContext.prefixCls,
-      prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls;
+      prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls,
+      useRtl = _useContext.useRtl;
 
   var _useContext2 = (0, _react.useContext)(_hooks.SliderContext),
       className = _useContext2.className,
@@ -77,9 +78,10 @@ var Slider = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
         top = _ref.top,
         height = _ref.height;
 
+    var leftValue = useRtl ? left + width : left;
     return {
       length: isHorizontal ? width : height,
-      start: isHorizontal ? left : top
+      start: isHorizontal ? leftValue : top
     };
   }, [isHorizontal, firstRender]);
 

package/cjs/slider/marks.js

@@ -28,7 +28,8 @@ function Marks(_ref) {
 
   var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
       _useContext$prefixCls = _useContext.prefixCls,
-      prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls;
+      prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls,
+      useRtl = _useContext.useRtl;
 
   var _useContext2 = (0, _react.useContext)(_hooks.SliderContext),
       type = _useContext2.type,
@@ -40,7 +41,8 @@ function Marks(_ref) {
   var genMarkStyle = (0, _react.useCallback)(function (value) {
     var _ref2;
 
-    return _ref2 = {}, _ref2[isHorizontal ? 'left' : 'bottom'] = (value - min) / (max - min) * 100 + "%", _ref2;
+    var leftStyle = useRtl ? 'right' : 'left';
+    return _ref2 = {}, _ref2[isHorizontal ? leftStyle : 'bottom'] = (value - min) / (max - min) * 100 + "%", _ref2;
   }, [isHorizontal, min, max]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: prefixCls + "-slider-marks"

package/cjs/slider/style/css/index.css

@@ -4,7 +4,7 @@
  * @name_en General Mixin
  */
 /**
- * 根据base-font-size，设置单位尺寸为rem
+ * 根据 base-font-size，设置单位尺寸为 rem
  * @desc {en} set the unit size to rem based on base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -21,7 +21,7 @@
  * ```
  */
 /**
- * 根据base-font-size，设置常规模式和rtl模式下单位尺寸为rem
+ * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
  * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -38,8 +38,8 @@
  * ```
  */
 /**
- * 当less变量use-dark-mode=1时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则
- * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark when the less variable use-dark-mode=1.
+ * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
+ * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
  * @param @rules 对应的暗黑模式规则
  * @param @rules {en} Corresponding dark mode rules
  * @example
@@ -54,7 +54,7 @@
  * ```
  */
 /**
- * 为属性设置arco提供的token变量
+ * 为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute
  * @param @property css属性名
  * @param @property {en} css property
@@ -76,11 +76,11 @@
  * ```
  */
 /**
- * 在常规模式和rtl模式下为属性设置arco提供的token变量
+ * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
- * @param @variables token变量名
+ * @param @variables token 变量名
  * @param @variables {en} token variable name
  * @param @preValues
  * @param @preValues {en}
@@ -96,9 +96,9 @@
  * ```
  */
 /**
- * 0.5px的边框线
+ * 0.5px 的边框线
  * @desc {en} a border line of 0.5 pixels
- * @param @color 使用css变量为线设置颜色
+ * @param @color 使用 css 变量为线设置颜色
  * @param @color {en} set border-color by CSS variable
  * @param @direction 边框方向，默认为全部方向
  * @param @direction {en} border direction，default to all directions.
@@ -115,9 +115,9 @@
 /**
  * 字体加粗
  * @desc {en} font bold
- * @param @color 使用css变量设置加粗的字体颜色，默认继承文字当前颜色
+ * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
  * @param @color {en} set color by CSS variable
- * @param @stroke 字体粗细，默认0.3px
+ * @param @stroke 字体粗细，默认 0.3px
  * @param @stroke {en} font weight, default 0.3 pixel
  * @example
  * ```
@@ -130,17 +130,17 @@
  * ```
  */
 /**
- * 1px边框
+ * 1px 边框
  * @desc {en} 1 pixel border
  * @param @direction 边框方向
  * @param @direction {en} border direction
- * @param @borderColor 使用css变量设置边框颜色
+ * @param @borderColor 使用 css 变量设置边框颜色
  * @param @borderColor {en} set border-color by CSS variable
- * @param @borderRadius border-radius，默认为0
+ * @param @borderRadius border-radius，默认为 0
  * @param @borderRadius {en} border-radius, default value is 0
- * @param @borderWidth border-width，默认为1px
+ * @param @borderWidth border-width，默认为 1px
  * @param @borderWidth {en} border-width, default value is 1 pixel
- * @param @borderStyle border-style，默认为solid
+ * @param @borderStyle border-style，默认为 solid
  * @param @borderStyle {en} border-style, default value is solid
  * @example
  * ```
@@ -153,9 +153,9 @@
  * ```
  */
 /**
- * 元素右下0.5px边框
+ * 元素右下 0.5px 边框
  * @desc {en} 0.5px border on bottom right
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -167,9 +167,9 @@
  * ```
  */
 /**
- * 元素左上0.5px边框
+ * 元素左上 0.5px 边框
  * @desc {en} 0.5px border on top left
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -181,9 +181,9 @@
  * ```
  */
 /**
- * 设置Loading组件颜色
+ * 设置 Loading 组件颜色
  * @desc {en} set Loading component color
- * @param @color 使用css变量设置颜色
+ * @param @color 使用 css 变量设置颜色
  * @param @color {en} set color by CSS variable
  * @example
  * ```
@@ -197,9 +197,9 @@
 /**
  * 设置最小字号
  * @desc {en} set minimum font-size
- * @param @size 使用css变量设置最小字号
+ * @param @size 使用 css 变量设置最小字号
  * @param @size {en} set minimum font-size by CSS variable
- * @param @scale 设置最小字号下文字缩放比例，默认为0.9
+ * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
  * @param @scale {en} set minimum font-size down text scale，default value is 0.9
  * @example
  * ```
@@ -212,9 +212,9 @@
  * ```
  */
 /**
- * 设置content-box盒模型下元素宽度
+ * 设置 content-box 盒模型下元素宽度
  * @desc {en} set box width in content-box
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
  * @param @width 元素总宽度，包含内边距
  * @param @width element width, include padding
@@ -232,11 +232,11 @@
  * ```
  */
 /**
- * 设置Steps组件颜色
+ * 设置 Steps 组件颜色
  * @desc {en} set Steps component color
- * @param @color 使用css变量设置主颜色
+ * @param @color 使用 css 变量设置主颜色
  * @param @color {en} set main step color by CSS variable
- * @param @finish-color 使用css变量设置已完成步骤的颜色
+ * @param @finish-color 使用 css 变量设置已完成步骤的颜色
  * @param @finish-color {en} set finished step color by CSS variable
  * @example
  * ```
@@ -541,6 +541,10 @@
 .is-horizontal .arco-slider-label {
   margin-right:  0.24rem ;
 }
+[dir="rtl"] .is-horizontal .arco-slider-label {
+  margin-right: initial;
+  margin-left:  0.24rem ;
+}
 .is-vertical .arco-slider-label {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
@@ -552,6 +556,10 @@
   margin-right: 0;
   margin-left:  0.24rem ;
 }
+[dir="rtl"] .is-horizontal .arco-slider-wrapper + .arco-slider-label {
+  margin-left: initial;
+  margin-right:  0.24rem ;
+}
 .is-vertical .arco-slider-wrapper + .arco-slider-label {
   margin-bottom: 0;
   margin-top:  0.24rem ;
@@ -636,11 +644,27 @@
   -webkit-transform: translateX(50%);
           transform: translateX(50%);
 }
+[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-end {
+  right: initial;
+  left: 0;
+}
+[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-end {
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
 .is-horizontal .arco-slider-thumb-wrapper.is-start {
   left: 0;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
 }
+[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-start {
+  left: initial;
+  right: 0;
+}
+[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-start {
+  -webkit-transform: translateX(50%);
+          transform: translateX(50%);
+}
 .arco-slider-popover-wrapper .arco-slider-thumb {
   position: relative;
 }
@@ -739,6 +763,10 @@
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
 }
+[dir="rtl"] .arco-slider-marks-item {
+  -webkit-transform: translateX(50%);
+          transform: translateX(50%);
+}
 .arco-slider-marks-item.is-activated {
   background:  #165DFF ;
 }

package/cjs/slider/style/index.less

@@ -31,7 +31,7 @@
         .use-var(color, slider-text-color);
 
         .is-horizontal & {
-            .use-var(margin-right, slider-label-gutter);
+            .use-var-with-rtl(margin-right, slider-label-gutter);
         }
 
         .is-vertical & {
@@ -44,7 +44,7 @@
 
         .is-horizontal & {
             margin-right: 0;
-            .use-var(margin-left, slider-label-gutter);
+            .use-var-with-rtl(margin-left, slider-label-gutter);
         }
 
         .is-vertical & {
@@ -124,13 +124,19 @@
                 bottom: 0;
 
                 &.is-end {
-                    right: 0;
+                    .set-prop-with-rtl(right, 0);
                     transform: translateX(50%);
+                    [dir="rtl"] & {
+                        transform: translateX(-50%);
+                    }
                 }
 
                 &.is-start {
-                    left: 0;
+                    .set-prop-with-rtl(left, 0);
                     transform: translateX(-50%);
+                    [dir="rtl"] & {
+                        transform: translateX(50%);
+                    }
                 }
             }
         }
@@ -236,6 +242,9 @@
             .use-var(border-radius, slider-mark-border-radius);
             .use-var(background, slider-line-color);
             transform: translateX(-50%);
+            [dir="rtl"] & {
+                transform: translateX(50%);
+            }
 
             &.is-activated {
                 .use-var(background, slider-line-activated-color);
@@ -287,7 +296,7 @@
  *               Arco Theme Style                  *
  *                                                 *
  ***************************************************/
-    & when (@use-dark-mode = 1) {
+& when (@use-dark-mode = 1) {
     
   .process-bg-color-with-config,
   .process-custom-icon-bg-color-with-config {

package/cjs/stepper/style/css/index.css

@@ -4,7 +4,7 @@
  * @name_en General Mixin
  */
 /**
- * 根据base-font-size，设置单位尺寸为rem
+ * 根据 base-font-size，设置单位尺寸为 rem
  * @desc {en} set the unit size to rem based on base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -21,7 +21,7 @@
  * ```
  */
 /**
- * 根据base-font-size，设置常规模式和rtl模式下单位尺寸为rem
+ * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
  * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -38,8 +38,8 @@
  * ```
  */
 /**
- * 当less变量use-dark-mode=1时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则
- * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark when the less variable use-dark-mode=1.
+ * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
+ * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
  * @param @rules 对应的暗黑模式规则
  * @param @rules {en} Corresponding dark mode rules
  * @example
@@ -54,7 +54,7 @@
  * ```
  */
 /**
- * 为属性设置arco提供的token变量
+ * 为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute
  * @param @property css属性名
  * @param @property {en} css property
@@ -76,11 +76,11 @@
  * ```
  */
 /**
- * 在常规模式和rtl模式下为属性设置arco提供的token变量
+ * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
- * @param @variables token变量名
+ * @param @variables token 变量名
  * @param @variables {en} token variable name
  * @param @preValues
  * @param @preValues {en}
@@ -96,9 +96,9 @@
  * ```
  */
 /**
- * 0.5px的边框线
+ * 0.5px 的边框线
  * @desc {en} a border line of 0.5 pixels
- * @param @color 使用css变量为线设置颜色
+ * @param @color 使用 css 变量为线设置颜色
  * @param @color {en} set border-color by CSS variable
  * @param @direction 边框方向，默认为全部方向
  * @param @direction {en} border direction，default to all directions.
@@ -115,9 +115,9 @@
 /**
  * 字体加粗
  * @desc {en} font bold
- * @param @color 使用css变量设置加粗的字体颜色，默认继承文字当前颜色
+ * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
  * @param @color {en} set color by CSS variable
- * @param @stroke 字体粗细，默认0.3px
+ * @param @stroke 字体粗细，默认 0.3px
  * @param @stroke {en} font weight, default 0.3 pixel
  * @example
  * ```
@@ -130,17 +130,17 @@
  * ```
  */
 /**
- * 1px边框
+ * 1px 边框
  * @desc {en} 1 pixel border
  * @param @direction 边框方向
  * @param @direction {en} border direction
- * @param @borderColor 使用css变量设置边框颜色
+ * @param @borderColor 使用 css 变量设置边框颜色
  * @param @borderColor {en} set border-color by CSS variable
- * @param @borderRadius border-radius，默认为0
+ * @param @borderRadius border-radius，默认为 0
  * @param @borderRadius {en} border-radius, default value is 0
- * @param @borderWidth border-width，默认为1px
+ * @param @borderWidth border-width，默认为 1px
  * @param @borderWidth {en} border-width, default value is 1 pixel
- * @param @borderStyle border-style，默认为solid
+ * @param @borderStyle border-style，默认为 solid
  * @param @borderStyle {en} border-style, default value is solid
  * @example
  * ```
@@ -153,9 +153,9 @@
  * ```
  */
 /**
- * 元素右下0.5px边框
+ * 元素右下 0.5px 边框
  * @desc {en} 0.5px border on bottom right
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -167,9 +167,9 @@
  * ```
  */
 /**
- * 元素左上0.5px边框
+ * 元素左上 0.5px 边框
  * @desc {en} 0.5px border on top left
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -181,9 +181,9 @@
  * ```
  */
 /**
- * 设置Loading组件颜色
+ * 设置 Loading 组件颜色
  * @desc {en} set Loading component color
- * @param @color 使用css变量设置颜色
+ * @param @color 使用 css 变量设置颜色
  * @param @color {en} set color by CSS variable
  * @example
  * ```
@@ -197,9 +197,9 @@
 /**
  * 设置最小字号
  * @desc {en} set minimum font-size
- * @param @size 使用css变量设置最小字号
+ * @param @size 使用 css 变量设置最小字号
  * @param @size {en} set minimum font-size by CSS variable
- * @param @scale 设置最小字号下文字缩放比例，默认为0.9
+ * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
  * @param @scale {en} set minimum font-size down text scale，default value is 0.9
  * @example
  * ```
@@ -212,9 +212,9 @@
  * ```
  */
 /**
- * 设置content-box盒模型下元素宽度
+ * 设置 content-box 盒模型下元素宽度
  * @desc {en} set box width in content-box
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
  * @param @width 元素总宽度，包含内边距
  * @param @width element width, include padding
@@ -232,11 +232,11 @@
  * ```
  */
 /**
- * 设置Steps组件颜色
+ * 设置 Steps 组件颜色
  * @desc {en} set Steps component color
- * @param @color 使用css变量设置主颜色
+ * @param @color 使用 css 变量设置主颜色
  * @param @color {en} set main step color by CSS variable
- * @param @finish-color 使用css变量设置已完成步骤的颜色
+ * @param @finish-color 使用 css 变量设置已完成步骤的颜色
  * @param @finish-color {en} set finished step color by CSS variable
  * @example
  * ```

package/cjs/stepper/style/index.less

@@ -89,7 +89,7 @@
  *               Arco Theme Style                  *
  *                                                 *
  ***************************************************/
-    & when (@use-dark-mode = 1) {
+& when (@use-dark-mode = 1) {
     
   .process-bg-color-with-config,
   .process-custom-icon-bg-color-with-config {

package/cjs/steps/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StepsProps, StepsRef } from './type';
 export * from './type';
-export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "current" | "align" | "iconType"> & {
+export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "align" | "iconType" | "current"> & {
     index?: number | undefined;
     changeIndex: (newIndex: number) => void;
 }>;