@arco-design/mobile-react 2.30.4 → 2.30.6

package/cjs/pagination/arrow.js

@@ -9,10 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 
 function Arrow() {
   return /*#__PURE__*/_react.default.createElement("svg", {
-    width: "8",
+    width: "2",
     height: "14",
-    viewBox: "0 0 8 14",
-    fill: "none"
+    viewBox: "3 0 2 14",
+    fill: "none",
+    style: {
+      overflow: 'visible'
+    }
   }, /*#__PURE__*/_react.default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/radio/style/css/index.css

@@ -502,6 +502,9 @@
   -webkit-align-items: center;
           align-items: center;
 }
+.arco-radio:focus {
+  outline: none;
+}
 .arco-radio .radio-icon {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

package/cjs/radio/style/index.less

@@ -4,6 +4,11 @@
     display: inline-flex;
     align-items: center;
 
+    // iOS low-end machine style compatibility issues
+    &:focus {
+        outline: none;
+    }
+
     .radio-icon {
         display: inline-flex;
         align-items: center;

package/cjs/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/cjs/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/cjs/show-monitor/index.d.ts

@@ -97,6 +97,11 @@ export interface ShowMonitorRef {
      * @en Ignore the state of the element before and after, manually check whether the element is in the viewport, trigger the onVisibleChange callback function
      */
     checkVisible: () => boolean;
+    /**
+     * 重置元素初始可见态为false，并重新对元素可见度发起检测，优先级低于disabled（通常用在对ShowMonitor内部元素变化时发起的重新监听）
+     * @en Reset the initial visible state of the element to false, and re-detect the visibility of the element, the priority is lower than 'disabled'(Usually used to re-listen when elements inside ShowMonitor change)
+     */
+    flushVisibleStatus: () => void;
 }
 /**
  * 通过滚动事件监测 children 是否进入视口或离开视口。

package/cjs/show-monitor/index.js

@@ -202,6 +202,7 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
 
     curVisible !== preVisible && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
+    component.isVisible = curVisible;
     var key = wrapperKey.current;
     /**
      * 监听一次后加入 pendingList 队列，随后被 listeners 过滤掉

package/cjs/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/cjs/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/cjs/slider/index.js

@@ -169,6 +169,7 @@ var Slider = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
       key: idx
     }, (0, _extends2.default)({
       value: Array.isArray(valueGroup) ? valueGroup[idx] : valueGroup,
+      idx: idx,
       min: min,
       max: max,
       isTouching: commonIsTouching === idx

package/cjs/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/cjs/slider/thumb.js

@@ -1,12 +1,8 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _popover = require("./popover");
@@ -19,11 +15,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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,
@@ -32,7 +30,8 @@ var Thumb = function Thumb(_ref) {
   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 () {
@@ -43,21 +42,21 @@ var Thumb = function Thumb(_ref) {
     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;