@arco-design/mobile-react 2.30.4 → 2.30.5

package/umd/pagination/style/css/index.css

@@ -527,6 +527,10 @@
           justify-content: flex-end;
   margin-right:  0.48rem ;
 }
+[dir="rtl"] .arco-pagination-prev-field.flex-center {
+  margin-right: initial;
+  margin-left:  0.48rem ;
+}
 .arco-pagination-next-field {
   -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
@@ -538,6 +542,10 @@
           justify-content: flex-start;
   margin-left:  0.48rem ;
 }
+[dir="rtl"] .arco-pagination-next-field.flex-center {
+  margin-left: initial;
+  margin-right:  0.48rem ;
+}
 .arco-pagination-field {
   cursor: pointer;
   text-align: center;
@@ -572,10 +580,18 @@
   -webkit-align-items: center;
           align-items: center;
 }
+[dir="rtl"] .arco-pagination-field .btn-icon {
+  -webkit-transform: scaleX(-1);
+          transform: scaleX(-1);
+}
 .arco-pagination-field .btn-icon.next {
   -webkit-transform: rotateY(180deg);
           transform: rotateY(180deg);
 }
+[dir="rtl"] .arco-pagination-field .btn-icon.next {
+  -webkit-transform: none;
+          transform: none;
+}
 .arco-pagination-field.button {
   padding:  0.12rem 0.32rem ;
   border-radius:  0.04rem ;
@@ -592,13 +608,12 @@
 }
 .arco-pagination-field.button .btn-icon + .btn-text,
 .arco-pagination-field.button .btn-text + .btn-icon {
-  margin-left:  0.16rem ;
-}
-.arco-pagination-field.button .btn-icon:first-child {
-  margin-left:  -0.06rem ;
+  margin-left:  0.22rem ;
 }
-.arco-pagination-field.button .btn-icon:last-child {
-  margin-right:  -0.06rem ;
+[dir="rtl"] .arco-pagination-field.button .btn-icon + .btn-text,
+[dir="rtl"] .arco-pagination-field.button .btn-text + .btn-icon {
+  margin-left: initial;
+  margin-right:  0.22rem ;
 }
 .arco-pagination.android .arco-pagination-field.button .btn-text {
   padding-top: 0.04rem;

package/umd/pagination/style/index.less

@@ -16,14 +16,14 @@
         justify-content: flex-start;
         &.flex-center {
             justify-content: flex-end;
-            .use-var(margin-right, pagination-center-field-gutter);
+            .use-var-with-rtl(margin-right, pagination-center-field-gutter);
         }
     }
     &-next-field {
         justify-content: flex-end;
         &.flex-center {
             justify-content: flex-start;
-            .use-var(margin-left, pagination-center-field-gutter);
+            .use-var-with-rtl(margin-left, pagination-center-field-gutter);
         }
     }
 
@@ -41,8 +41,14 @@
         .btn-icon {
             display: inline-flex;
             align-items: center;
+            [dir="rtl"] & {
+                transform: scaleX(-1);
+            }
             &.next {
                 transform: rotateY(180deg);
+                [dir="rtl"] & {
+                    transform: none;
+                }
             }
         }
     }
@@ -61,13 +67,7 @@
         }
         .btn-icon + .btn-text,
         .btn-text + .btn-icon {
-            .use-var(margin-left, pagination-field-btn-icon-text-gutter);
-        }
-        .btn-icon:first-child {
-            .use-var(margin-left, pagination-field-btn-icon-side-margin);
-        }
-        .btn-icon:last-child {
-            .use-var(margin-right, pagination-field-btn-icon-side-margin);
+            .use-var-with-rtl(margin-left, pagination-field-btn-icon-text-gutter);
         }
     }
     &.android &-field.button {

package/umd/picker/style/css/index.css

@@ -536,10 +536,18 @@
   left: 0;
   color:  #165DFF ;
 }
+[dir="rtl"] .arco-picker-header-btn.left {
+  left: initial;
+  right: 0;
+}
 .arco-picker-header-btn.right {
   right: 0;
   color:  #165DFF ;
 }
+[dir="rtl"] .arco-picker-header-btn.right {
+  right: initial;
+  left: 0;
+}
 /***************************************************
  *                                                 *
  *               Arco Theme Style                  *

package/umd/picker/style/index.less

@@ -33,12 +33,12 @@
             .use-var(padding, picker-button-padding);
 
             &.left {
-                left: 0;
+                .set-prop-with-rtl(left, 0);
                 .use-var(color, picker-left-btn-color);
             }
 
             &.right {
-                right: 0;
+                .set-prop-with-rtl(right, 0);
                 .use-var(color, picker-right-btn-color);
             }
         }

package/umd/progress/style/css/index.css

@@ -500,6 +500,10 @@
   left: 0;
   z-index: 1001;
 }
+[dir="rtl"] .arco-progress.progress-fixed {
+  left: initial;
+  right: 0;
+}
 .arco-progress .progress-wrapper {
   position: relative;
   width: 100%;
@@ -540,6 +544,10 @@
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
+[dir="rtl"] .arco-progress .progress-wrapper .progress-bar .wrapper {
+  right: initial;
+  left: 0;
+}
 .arco-progress .progress-wrapper .filleted {
   border-radius: 100PX;
 }
@@ -548,10 +556,22 @@
   margin-left:  0.16rem ;
   color:  #165DFF ;
 }
+[dir="rtl"] .arco-progress .progress-wrapper .text {
+  margin-left: initial;
+  margin-right:  0.16rem ;
+}
 .arco-progress .progress-wrapper .text-left {
   margin-left: 0;
   margin-right:  0.16rem ;
 }
+[dir="rtl"] .arco-progress .progress-wrapper .text-left {
+  margin-left: initial;
+  margin-right: 0;
+}
+[dir="rtl"] .arco-progress .progress-wrapper .text-left {
+  margin-right: initial;
+  margin-left:  0.16rem ;
+}
 .arco-progress .progress-wrapper .text-innerLeft {
   position: absolute;
   z-index: 1;

package/umd/progress/style/index.less

@@ -5,7 +5,7 @@
     &.progress-fixed {
         position: fixed;
         width: 100%;
-        left: 0;
+        .set-prop-with-rtl(left, 0);
         z-index: @full-screen-z-index + 1;;
     }
 
@@ -39,7 +39,7 @@
 
             .wrapper {
                 position: absolute;
-                right: 0;
+                .set-prop-with-rtl(right, 0);
                 top: 50%;
                 transform: translateY(-50%);
             }
@@ -51,13 +51,13 @@
 
         .text {
             .use-var(font-size, progress-text-font-size);
-            .use-var(margin-left, progress-text-gutter);
+            .use-var-with-rtl(margin-left, progress-text-gutter);
             .use-var(color, progress-primary-color);
         }
 
         .text-left {
-            margin-left: 0;
-            .use-var(margin-right, progress-text-gutter);
+            .set-prop-with-rtl(margin-left, 0);
+            .use-var-with-rtl(margin-right, progress-text-gutter);
         }
 
         .text-innerLeft {

package/umd/search-bar/style/css/index.css

@@ -538,9 +538,15 @@
 .arco-search-bar-input-left {
   text-align: left;
 }
+[dir="rtl"] .arco-search-bar-input-left {
+  text-align: right;
+}
 .arco-search-bar-input-right {
   text-align: right;
 }
+[dir="rtl"] .arco-search-bar-input-right {
+  text-align: left;
+}
 .arco-search-bar-input-center {
   text-align: center;
 }
@@ -570,11 +576,19 @@
 .arco-search-bar-prefix {
   margin-right:  0.18rem ;
 }
+[dir="rtl"] .arco-search-bar-prefix {
+  margin-right: initial;
+  margin-left:  0.18rem ;
+}
 .arco-search-bar-clear {
   color:  #c9cdd4 ;
   font-size:  16PX ;
   padding-left:  0.32rem ;
 }
+[dir="rtl"] .arco-search-bar-clear {
+  padding-left: initial;
+  padding-right:  0.32rem ;
+}
 .arco-search-bar-search-icon {
   color:  #86909c ;
   font-size:  0.32rem ;
@@ -584,6 +598,10 @@
   color:  #165DFF ;
   font-size:  0.3rem ;
 }
+[dir="rtl"] .arco-search-bar-cancel-btn {
+  margin-left: initial;
+  margin-right:  0.32rem ;
+}
 .arco-search-bar-association {
   position: absolute;
   left: 0;

package/umd/search-bar/style/index.less

@@ -34,10 +34,10 @@
         .use-var(height, search-bar-input-height);
         .use-var(caret-color, search-bar-input-caret-color);
         &-left {
-            text-align: left;
+            .set-value-with-rtl(text-align, left);
         }
         &-right {
-            text-align: right;
+            .set-value-with-rtl(text-align, right);
         }
         &-center {
             text-align: center;
@@ -62,13 +62,13 @@
     }
 
     &-prefix {
-        .use-var(margin-right, search-bar-prefix-margin-right);
+        .use-var-with-rtl(margin-right, search-bar-prefix-margin-right);
     }
 
     &-clear {
         .use-var(color, search-bar-clear-icon-color);
         .use-var(font-size, search-bar-clear-icon-font-size);
-        .use-var(padding-left, search-bar-clear-icon-padding-left);
+        .use-var-with-rtl(padding-left, search-bar-clear-icon-padding-left);
     }
 
     &-search-icon {
@@ -77,7 +77,7 @@
     }
 
     &-cancel-btn {
-        .use-var(margin-left, search-bar-cancel-btn-margin-left);
+        .use-var-with-rtl(margin-left, search-bar-cancel-btn-margin-left);
         .use-var(color, search-bar-cancel-btn-color);
         .use-var(font-size, search-bar-cancel-btn-font-size);
     }

package/umd/slider/hooks/index.d.ts

@@ -5,7 +5,7 @@ export declare type LinePosition = {
     length: number;
     start: number;
 };
-export declare const SliderContext: React.Context<Required<Pick<SliderProps, "max" | "disabled" | "style" | "size" | "step" | "type" | "className" | "onChange" | "onAfterChange" | "min" | "suffixLabel" | "prefixLabel" | "useRange" | "useAnimation" | "showTooltip" | "showMarks" | "useMarkOnly" | "draggableTrackOnly" | "formatTooltip" | "renderThumb">> & Pick<SliderProps, "value" | "defaultValue" | "marks">>;
+export declare const SliderContext: React.Context<Required<Pick<SliderProps, "max" | "disabled" | "style" | "size" | "step" | "type" | "className" | "onChange" | "onAfterChange" | "min" | "suffixLabel" | "prefixLabel" | "useRange" | "useAnimation" | "showTooltip" | "showMarks" | "useMarkOnly" | "draggableTrackOnly" | "formatTooltip" | "renderThumb">> & Pick<SliderProps, "value" | "defaultValue" | "marks" | "renderThumbPopover">>;
 export * from './useSliderIcon';
 export * from './useSliderInit';
 export * from './useSliderStyle';

package/umd/slider/index.d.ts

@@ -130,6 +130,16 @@ export interface SliderProps {
      * @en Custom slider
      */
     renderThumb?: (value: number) => ReactNode;
+    /**
+     * 自定义滑块的Popover，优先级高于formatTooltip。value表示当前滑动进度，visible表示气泡的可见性，index表示当前滑块索引，thumbEl表示当前滑块元素。
+     * @en Custom slider popover，priority is higher than formatTooltip. value - current sliding progress, visible - visibility of the bubble, index - current slider index, thumbEl - current slider element.
+     */
+    renderThumbPopover?: (config: {
+        value: number;
+        visible: boolean;
+        index: number;
+        thumbEl: React.ReactNode;
+    }) => ReactNode;
 }
 export interface SliderRef {
     /**

package/umd/slider/index.js

@@ -172,6 +172,7 @@
         key: idx
       }, (0, _extends2.default)({
         value: Array.isArray(valueGroup) ? valueGroup[idx] : valueGroup,
+        idx: idx,
         min: min,
         max: max,
         isTouching: commonIsTouching === idx

package/umd/slider/thumb.d.ts

@@ -1,8 +1,9 @@
-import React, { CSSProperties } from 'react';
-declare const Thumb: ({ className, value, style, isTouching, }: {
-    className?: string | undefined;
+import { CSSProperties } from 'react';
+declare function Thumb({ className, value, style, isTouching, idx, }: {
+    className?: string;
     value: number;
     isTouching: boolean;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
+    style?: CSSProperties;
+    idx: number;
+}): JSX.Element;
 export default Thumb;

package/umd/slider/thumb.js

@@ -1,34 +1,33 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "react", "./popover", "./hooks", "../context-provider"], factory);
+    define(["exports", "react", "./popover", "./hooks", "../context-provider"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("./popover"), require("./hooks"), require("../context-provider"));
+    factory(exports, require("react"), require("./popover"), require("./hooks"), require("../context-provider"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.react, global.popover, global.hooks, global.contextProvider);
+    factory(mod.exports, global.react, global.popover, global.hooks, global.contextProvider);
     global.thumb = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _popover, _hooks, _contextProvider) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _popover, _hooks, _contextProvider) {
   "use strict";
 
-  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
   _exports.__esModule = true;
   _exports.default = void 0;
-  _extends2 = _interopRequireDefault(_extends2);
   _react = _interopRequireWildcard(_react);
 
   function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
   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 Thumb = function Thumb(_ref) {
-    var className = _ref.className,
+  function Thumb(_ref) {
+    var _ref$className = _ref.className,
+        className = _ref$className === void 0 ? '' : _ref$className,
         value = _ref.value,
         style = _ref.style,
-        isTouching = _ref.isTouching;
+        isTouching = _ref.isTouching,
+        idx = _ref.idx;
 
     var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
         _useContext$prefixCls = _useContext.prefixCls,
@@ -37,7 +36,8 @@
     var _useContext2 = (0, _react.useContext)(_hooks.SliderContext),
         showTooltip = _useContext2.showTooltip,
         renderThumb = _useContext2.renderThumb,
-        formatTooltip = _useContext2.formatTooltip;
+        formatTooltip = _useContext2.formatTooltip,
+        renderThumbPopover = _useContext2.renderThumbPopover;
 
     var isHidden = showTooltip === 'never';
     var renderValue = (0, _react.useMemo)(function () {
@@ -48,21 +48,21 @@
       if (showTooltip === 'always') return true;
       return isTouching;
     }, [showTooltip, isTouching]);
-
-    var renderWrapper = function renderWrapper(el) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: prefixCls + "-slider-thumb-wrapper " + className,
-        style: (0, _extends2.default)({}, style)
-      }, el);
-    };
-
     var thumbEl = typeof renderThumb === 'function' ? renderThumb(value) : renderThumb;
-    if (isHidden) return renderWrapper(thumbEl);
-    return renderWrapper( /*#__PURE__*/_react.default.createElement(_popover.Popover, {
+    var popoverEl = typeof renderThumbPopover === 'function' ? renderThumbPopover({
+      value: value,
+      visible: isTooltipVisible,
+      thumbEl: thumbEl,
+      index: idx
+    }) : /*#__PURE__*/_react.default.createElement(_popover.Popover, {
       visible: isTooltipVisible,
       content: renderValue
-    }, thumbEl));
-  };
+    }, thumbEl);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-slider-thumb-wrapper " + className,
+      style: style
+    }, isHidden ? thumbEl : popoverEl);
+  }
 
   var _default = Thumb;
   _exports.default = _default;