@arco-design/mobile-react 2.30.2 → 2.30.3

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.30.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.2...@arco-design/mobile-react@2.30.3) (2023-11-24)
+
+
+### Bug Fixes
+
+* `ImagePreview` support shrinking animation before closed ([#195](https://github.com/arco-design/arco-design-mobile/issues/195)) ([7420bd5](https://github.com/arco-design/arco-design-mobile/commit/7420bd533a6e22a38a6fbd64407918580f64e095))
+* support rtl for `Slider` & `Popover` ([#200](https://github.com/arco-design/arco-design-mobile/issues/200)) ([1756c8a](https://github.com/arco-design/arco-design-mobile/commit/1756c8a875f5e6fb3f8bdee7222d69c32a142ec3))
+
+
+
+
+
 ## [2.30.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.1...@arco-design/mobile-react@2.30.2) (2023-11-09)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.30.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.30.2/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.30.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.30.2/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/form/type.d.ts

@@ -99,7 +99,7 @@ export interface IFormDataMethods {
      * 注册表单项
      * @en Register field
      */
-    registerField: (name: string, self: ReactNode) => () => void;
+    registerField: (name: string, self: any) => () => void;
 }
 export declare enum ValidateStatus {
     Init = "init",
@@ -130,7 +130,7 @@ export interface InternalHooks {
      * 注册表单项
      * @en Register field
      */
-    registerField: (name: string, self: ReactNode) => () => void;
+    registerField: (name: string, self: any) => () => void;
     setInitialValues: (values: FieldItem) => void;
     setCallbacks: (callbacks: Callbacks) => void;
 }

package/cjs/image-preview/index.d.ts

@@ -18,6 +18,12 @@ export interface PreviewImageProps {
      * @en Transition image url
      */
     fallbackSrc?: string;
+    /**
+     * 过渡图到原图放大动效完成后，移除过渡图的延迟时间(ms)，一般当原图过大时有调整需求
+     * @en After the transition image to the original image enlargement effect is completed, the delay time (ms) before the transition image is removed
+     * @default 30
+     */
+    transitionEndDelay?: number;
     /**
      * 缩略图填充方式（backgroundPosition），默认top center
      * @en Thumbnail fill mode (backgroundPosition), default value is top center

package/cjs/image-preview/index.js

@@ -179,7 +179,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       transformersRef.current = []; // 移除过渡图片
       // @en Remove transition image
 
-      removeChild(document.querySelector('.image-preview-fake-trans-image'));
+      removeChild(transImageRef.current);
       setTransImageInfo(null);
       setPlaceholders({});
       var mounted = isInitialMount.current;
@@ -222,7 +222,9 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   function removeChild(child) {
     try {
-      child && document.body.removeChild(child);
+      var _domRef$current, _domRef$current$query, _domRef$current$query2;
+
+      child && ((_domRef$current = domRef.current) == null ? void 0 : (_domRef$current$query = _domRef$current.querySelectorAll('.carousel-item')) == null ? void 0 : (_domRef$current$query2 = _domRef$current$query[innerIndexRef.current]) == null ? void 0 : _domRef$current$query2.removeChild(child));
     } catch (e) {}
   } // 监听滑动到上下边缘后还在往外滑动的操作，则关闭弹窗
   // @en Monitor the operation of sliding out after sliding to the upper and lower edges, then close the popup
@@ -641,7 +643,41 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }
 
-  var handleClick = (0, _helpers.useSingleAndDoubleClick)(handleImageClick, handleImageDoubleClick);
+  var handleClick = (0, _helpers.useSingleAndDoubleClick)(handleImageClick, handleImageDoubleClick); // 当使用 getThumbBounds 时，关闭图片预览有缩小效果
+  // @en When using getThumbBounds, closing the image preview has a shrinking effect
+
+  function animateBeforeClose() {
+    var _imagesRef$current$in2;
+
+    var index = innerIndexRef.current;
+    var imageDom = (_imagesRef$current$in2 = imagesRef.current[index]) == null ? void 0 : _imagesRef$current$in2.image;
+    var thumbBounds = getThumbBounds == null ? void 0 : getThumbBounds(index);
+
+    if (!imageDom || !thumbBounds || !thumbBounds.width || !thumbBounds.height) {
+      return;
+    } // 小图超过一半在视野外时，不展示缩小效果
+    // @en When more than half of the thumbnail is outside the field of view, the zoom effect will not be displayed
+
+
+    if (thumbBounds.top < -1 * thumbBounds.height / 2 || thumbBounds.top > windowHeight - thumbBounds.height / 2 || thumbBounds.left < -1 * thumbBounds.width / 2 || thumbBounds.left > windowWidth - thumbBounds.width / 2) {
+      return;
+    }
+
+    var imageDomRect = imageDom.getBoundingClientRect();
+
+    if (!imageDomRect.width || !imageDomRect.height) {
+      return;
+    }
+
+    imageDom.classList.add('closing-animation');
+    setImageBounds(imageDom, imageDomRect, imageDomRect);
+    imageDom.style.objectPosition = images[index].thumbPosition || 'top center';
+    (0, _mobileUtils.nextTick)(function () {
+      imageDom.style.transitionDuration = displayDuration + "ms";
+      imageDom.style.webkitTransitionDuration = displayDuration + "ms";
+      setImageBounds(imageDom, thumbBounds, imageDomRect);
+    });
+  }
 
   function goClose(e) {
     if (closingRef.current) {
@@ -649,6 +685,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
 
     closingRef.current = true;
+    animateBeforeClose();
     close(e);
   }
   /**
@@ -671,7 +708,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
 
   function setDisplayAnimation(index) {
-    var _imagesStatusRef$curr4;
+    var _imagesStatusRef$curr4, _domRef$current2, _domRef$current2$quer, _domRef$current2$quer2;
 
     var firstLoaded = (_imagesStatusRef$curr4 = imagesStatusRef.current[index]) == null ? void 0 : _imagesStatusRef$curr4.firstLoaded;
     var fallbackSrc = replaceFallbackWhenLoaded && firstLoaded ? images[index].src : images[index].fallbackSrc; // 用户设置了getThumbBounds和images的fallbackSrc属性才有放大过渡效果
@@ -702,7 +739,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     transImage.style.opacity = '0';
     transImage.style.transitionDuration = displayDuration + "ms";
     transImage.style.webkitTransitionDuration = displayDuration + "ms";
-    document.body.appendChild(transImage); // 拿到放大之后的位置rect，没拿到就取消小图放大效果
+    (_domRef$current2 = domRef.current) == null ? void 0 : (_domRef$current2$quer = _domRef$current2.querySelectorAll('.carousel-item')) == null ? void 0 : (_domRef$current2$quer2 = _domRef$current2$quer[index]) == null ? void 0 : _domRef$current2$quer2.prepend(transImage); // 拿到放大之后的位置rect，没拿到就取消小图放大效果
     // @en Get the zoomed-in position rect, and cancel the zoom-in effect if not getting it
 
     getNewImageBounds(index, fallbackSrc, transImage, function (rect) {
@@ -724,9 +761,10 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
             return (0, _extends5.default)({}, holders, (_extends3 = {}, _extends3[index] = true, _extends3));
           });
         }, Math.max(0, displayDuration - 80));
+        var transitionEndDelay = images[index].transitionEndDelay || 30;
         setTimeout(function () {
           resetAnimation(index);
-        }, displayDuration + 30);
+        }, displayDuration + transitionEndDelay);
       });
     });
   }
@@ -886,18 +924,14 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }) : null;
   }
 
-  function renderLoadingArea(index) {
-    // loadingArea提出来，放到过渡图上层
-    // @en The loadingArea is extracted and placed on the upper layer of the transition image
-    return index === openIndex ? /*#__PURE__*/_react.default.createElement(_portal.default, {
-      getContainer: getContainer
-    }, /*#__PURE__*/_react.default.createElement("div", {
+  function renderLoadingArea() {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: "image-preview-loading-area"
     }, loadingArea || /*#__PURE__*/_react.default.createElement(_loading.default, {
       type: "circle",
       className: "loading-icon",
       radius: 7
-    }))) : loadingArea;
+    }));
   }
 
   return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref3) {
@@ -945,7 +979,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           imagesRef.current[index] = r;
         },
         showLoading: showLoading,
-        loadingArea: renderLoadingArea(index),
+        loadingArea: renderLoadingArea(),
         errorArea: errorArea,
         showError: showError,
         retryTime: retryTime,

package/cjs/image-preview/style/css/index.css

@@ -575,6 +575,7 @@
   height: 100%;
   opacity: 0;
 }
+.arco-image-preview .image-container img.closing-animation,
 .image-preview-fake-trans-image {
   position: fixed;
   left: 0;
@@ -584,7 +585,7 @@
   transition:  all cubic-bezier(0.34, 0.69, 0.1, 1) ;
   will-change: transform;
   pointer-events: none;
-  z-index: 1001;
+  height: auto !important;
 }
 .image-preview-loading-area {
   position: fixed;

package/cjs/image-preview/style/index.less

@@ -77,6 +77,7 @@
     opacity: 0;
 }
 
+.@{prefix}-image-preview .image-container img.closing-animation,
 .image-preview-fake-trans-image {
     position: fixed;
     left: 0;
@@ -85,7 +86,7 @@
     .use-var(transition, image-preview-thumb-transition);
     will-change: transform;
     pointer-events: none;
-    z-index: @full-screen-z-index + 1;
+    height: auto !important;
 }
 
 .image-preview-loading-area {

package/cjs/popover/style/css/index.css

@@ -549,6 +549,10 @@
   font-size: 0.4rem;
   line-height: 1;
 }
+[dir="rtl"] .arco-popover-menu-icon {
+  margin-right: initial;
+  margin-left: 0.16rem;
+}
 .arco-popover-menu-icon > * {
   float: left;
 }
@@ -634,7 +638,6 @@
   width: -webkit-max-content;
   width: max-content;
   z-index: 1010;
-  right: 0;
   background-color: transparent;
   visibility: hidden;
   will-change: transform;
@@ -716,11 +719,15 @@
   padding:  0 0.2rem 0 0.22rem ;
 }
 .arco-popover-inner .text-suffix {
-  padding:  0 0.24rem 0 0 ;
+  padding-right:  0.24rem ;
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
           flex: 0 0 auto;
 }
+[dir="rtl"] .arco-popover-inner .text-suffix {
+  padding-right: initial;
+  padding-left:  0.24rem ;
+}
 .arco-popover-inner .popover-arrow {
   position: absolute;
   -webkit-transform: rotate(45deg);

package/cjs/popover/style/css/menu.css

@@ -549,6 +549,10 @@
   font-size: 0.4rem;
   line-height: 1;
 }
+[dir="rtl"] .arco-popover-menu-icon {
+  margin-right: initial;
+  margin-left: 0.16rem;
+}
 .arco-popover-menu-icon > * {
   float: left;
 }

package/cjs/popover/style/index.less

@@ -29,7 +29,6 @@
     position: absolute;
     width: max-content;
     z-index: @full-screen-z-index + 10;
-    right: 0;
     background-color: transparent;
     visibility: hidden;
     will-change: transform;
@@ -104,7 +103,7 @@
     }
 
     .text-suffix {
-        .use-var(padding, popover-text-suffix-padding);
+        .use-var-with-rtl(padding-right, popover-text-suffix-edge);
         flex: 0 0 auto;
     }
 

package/cjs/popover/style/menu.less

@@ -32,7 +32,7 @@
         }
     }
     &-icon {
-        .rem(margin-right, 8);
+        .rem-with-rtl(margin-right, 8);
         .rem(font-size, 20);
         line-height: 1;
         & > * {

package/cjs/slider/hooks/useSliderEvents.js

@@ -7,6 +7,8 @@ var _react = require("react");
 
 var _ = require(".");
 
+var _contextProvider = require("../../context-provider");
+
 var IsTouchingStatus;
 
 (function (IsTouchingStatus) {
@@ -22,13 +24,16 @@ var useSliderEvents = function useSliderEvents(_ref) {
       setValueGroup = _ref.setValueGroup,
       setCommonIsTouching = _ref.setCommonIsTouching;
 
-  var _useContext = (0, _react.useContext)(_.SliderContext),
-      disabled = _useContext.disabled,
-      step = _useContext.step,
-      min = _useContext.min,
-      max = _useContext.max,
-      type = _useContext.type,
-      draggableTrackOnly = _useContext.draggableTrackOnly;
+  var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+      useRtl = _useContext.useRtl;
+
+  var _useContext2 = (0, _react.useContext)(_.SliderContext),
+      disabled = _useContext2.disabled,
+      step = _useContext2.step,
+      min = _useContext2.min,
+      max = _useContext2.max,
+      type = _useContext2.type,
+      draggableTrackOnly = _useContext2.draggableTrackOnly;
 
   var _useState = (0, _react.useState)(IsTouchingStatus.Idle),
       isTouching = _useState[0],
@@ -54,7 +59,8 @@ var useSliderEvents = function useSliderEvents(_ref) {
         length = _linePositionRef$curr.length,
         start = _linePositionRef$curr.start;
     if (length === 0) return 0;
-    var newWidth = isHorizontal ? touchPosition - start : length - touchPosition + start;
+    var rtlRatio = useRtl ? -1 : 1;
+    var newWidth = isHorizontal ? (touchPosition - start) * rtlRatio : length - touchPosition + start;
 
     if (newWidth < 0) {
       newWidth = 0;

package/cjs/slider/hooks/useSliderStyle.js

@@ -7,17 +7,22 @@ var _react = require("react");
 
 var _ = require(".");
 
+var _contextProvider = require("../../context-provider");
+
 var useSliderStyle = function useSliderStyle(_ref) {
   var getLinePosition = _ref.getLinePosition,
       commonIsTouching = _ref.commonIsTouching,
       valueGroup = _ref.valueGroup;
 
-  var _useContext = (0, _react.useContext)(_.SliderContext),
-      size = _useContext.size,
-      useAnimation = _useContext.useAnimation,
-      min = _useContext.min,
-      max = _useContext.max,
-      type = _useContext.type;
+  var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+      useRtl = _useContext.useRtl;
+
+  var _useContext2 = (0, _react.useContext)(_.SliderContext),
+      size = _useContext2.size,
+      useAnimation = _useContext2.useAnimation,
+      min = _useContext2.min,
+      max = _useContext2.max,
+      type = _useContext2.type;
 
   var isHorizontal = /^horizontal/g.test(type);
   var heightStyle = (0, _react.useMemo)(function () {
@@ -51,7 +56,8 @@ var useSliderStyle = function useSliderStyle(_ref) {
       length = (larger - min) / (max - min) * length - start;
     }
 
-    return _ref3 = {}, _ref3[isHorizontal ? 'left' : 'bottom'] = start + "px", _ref3[isHorizontal ? 'width' : 'height'] = Math.abs(length) + "px", _ref3;
+    var leftStyle = useRtl ? 'right' : 'left';
+    return _ref3 = {}, _ref3[isHorizontal ? leftStyle : 'bottom'] = start + "px", _ref3[isHorizontal ? 'width' : 'height'] = Math.abs(length) + "px", _ref3;
   }, [valueGroup, getLinePosition, min, max, isHorizontal]);
   return {
     heightStyle: heightStyle,

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

@@ -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);