@arco-design/mobile-react 2.30.7 → 2.30.9

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.30.9](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.8...@arco-design/mobile-react@2.30.9) (2024-02-27)
+
+
+### Bug Fixes
+
+* export type from `Skeleton` ([#233](https://github.com/arco-design/arco-design-mobile/issues/233)) ([7514ed9](https://github.com/arco-design/arco-design-mobile/commit/7514ed9baceccaf8f46c90b046bfe06594a66a59))
+* warning for repeatedly calling createRoot in react18 of masking related components ([#231](https://github.com/arco-design/arco-design-mobile/issues/231)) ([6879ad7](https://github.com/arco-design/arco-design-mobile/commit/6879ad7f6225128b87bbf82aad34ba5836d4ac18))
+
+
+
+
+
+## [2.30.8](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.7...@arco-design/mobile-react@2.30.8) (2024-01-31)
+
+
+### Bug Fixes
+
+*  `SwipeLoad` supports RTL ([#225](https://github.com/arco-design/arco-design-mobile/issues/225)) ([e39d09e](https://github.com/arco-design/arco-design-mobile/commit/e39d09e69c72c6e3ca65addabd1d90d96ac91eb1))
+* `Ellipsis` optimize line height caculation ([#227](https://github.com/arco-design/arco-design-mobile/issues/227)) ([c791a8e](https://github.com/arco-design/arco-design-mobile/commit/c791a8e36309ce4887297fe711348f427e12954d))
+* `Ellipsis` use ellipsisValueRef to reduce reflow ([#226](https://github.com/arco-design/arco-design-mobile/issues/226)) ([cbb761f](https://github.com/arco-design/arco-design-mobile/commit/cbb761fd05788e3cf191c94fd5870474e990cfa1))
+* `Tabs` trigger "onChange" before distance is set to 0 ([#223](https://github.com/arco-design/arco-design-mobile/issues/223)) ([0f91c5b](https://github.com/arco-design/arco-design-mobile/commit/0f91c5b8e77d1b4688b47d3fd68e231ad964b214))
+
+
+
+
+
 ## [2.30.7](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.6...@arco-design/mobile-react@2.30.7) (2023-12-27)
 
 

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.6/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.30.6/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.8/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.30.8/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.6/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.30.6/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.8/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.30.8/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/_helpers/render.d.ts

@@ -1,12 +1,17 @@
 import { FunctionComponent } from 'react';
 import { RootType } from './react-dom';
 import { GlobalContextParams } from '../context-provider';
+export declare const renderRootCache: Record<string, RootType | undefined>;
 export declare class ReactDOMRender {
     root: RootType | undefined;
     app: FunctionComponent;
     container: Element | DocumentFragment;
     context: GlobalContextParams | undefined;
-    constructor(app: FunctionComponent, container: Element | DocumentFragment, context?: GlobalContextParams);
+    rootCacheId: string | undefined;
+    constructor(app: FunctionComponent, container: Element | DocumentFragment, context?: GlobalContextParams, rootCacheId?: string, // root id in cache
+    root?: RootType);
     render: (props: any) => void;
+    setRootCache: () => void;
+    clearRootCache: () => void;
     unmount: () => void;
 }

package/cjs/_helpers/render.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.ReactDOMRender = void 0;
+exports.renderRootCache = exports.ReactDOMRender = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -11,13 +11,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactDom = require("./react-dom");
 
-var ReactDOMRender = function ReactDOMRender(app, container, context) {
+var renderRootCache = {};
+exports.renderRootCache = renderRootCache;
+
+var ReactDOMRender = function ReactDOMRender(app, container, context, rootCacheId, // root id in cache
+root // use root in cache
+) {
   var _this = this;
 
   this.root = void 0;
   this.app = void 0;
   this.container = void 0;
   this.context = void 0;
+  this.rootCacheId = void 0;
 
   this.render = function (props) {
     var CustomApp = _this.app;
@@ -32,16 +38,32 @@ var ReactDOMRender = function ReactDOMRender(app, container, context) {
     }
   };
 
+  this.setRootCache = function () {
+    if (_this.rootCacheId) {
+      renderRootCache[_this.rootCacheId] = _this.root;
+    }
+  };
+
+  this.clearRootCache = function () {
+    if (_this.rootCacheId) {
+      delete renderRootCache[_this.rootCacheId];
+    }
+  };
+
   this.unmount = function () {
     var _this$root;
 
     (_this$root = _this.root) == null ? void 0 : _this$root._unmount();
     _this.root = undefined;
+
+    _this.clearRootCache();
   };
 
   this.app = app;
   this.container = container;
   this.context = context;
+  this.rootCacheId = rootCacheId;
+  this.root = root;
 };
 
 exports.ReactDOMRender = ReactDOMRender;

package/cjs/ellipsis/components/js-ellipsis.js

@@ -11,6 +11,8 @@ var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-po
 
 var _dom = require("../utils/dom");
 
+var _helpers = require("../../_helpers");
+
 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; }
@@ -34,10 +36,11 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var domRef = (0, _react.useRef)(null);
   var textRef = (0, _react.useRef)(null);
   var ellipsisRef = (0, _react.useRef)(null);
+  var ellipsisValueRef = (0, _helpers.useLatestRef)(ellipsis);
   var lineHeightRef = (0, _react.useRef)(0);
   var setCurLineHeight = (0, _react.useCallback)(function () {
     if (domRef.current) {
-      lineHeightRef.current = (0, _dom.getLineHeight)(domRef.current);
+      lineHeightRef.current = Math.round((0, _dom.getLineHeight)(domRef.current));
     }
   }, []);
   (0, _react.useEffect)(function () {
@@ -163,7 +166,7 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       textRef.current.innerText = text;
     }
 
-    if (!ellipsis) {
+    if (!ellipsisValueRef.current) {
       return;
     }
 

package/cjs/image/style/index.less

@@ -1,11 +1,11 @@
-@import "../../../style/mixin.less";
+@import '../../../style/mixin.less';
 
 .@{prefix}-image {
     display: inline-block;
     position: relative;
 
     &.preview {
-        transition: all .3s ease-in-out;
+        transition: all 0.3s ease-in-out;
 
         .image-container,
         .image-loading-container .image-loading,
@@ -109,7 +109,6 @@
     }
 
     .image-error-container {
-
         .image-retry-load {
             position: absolute;
             top: 0;
@@ -127,7 +126,6 @@
     }
 
     .image-loading-container {
-
         .image-loading {
             position: absolute;
             top: 0;

package/cjs/image-preview/methods.js

@@ -13,9 +13,7 @@ var _render = require("../_helpers/render");
 
 function open(Component) {
   return function (config, context) {
-    var baseProps = (0, _extends2.default)({
-      unmountOnExit: true
-    }, config || {}, {
+    var baseProps = (0, _extends2.default)({}, config || {}, {
       close: function close() {}
     }); // 不同的key用不同的容器挂载
     // @en Different keys are mounted in different containers
@@ -51,10 +49,7 @@ function open(Component) {
 
     dynamicProps.onClose = function () {
       baseProps.onClose && baseProps.onClose();
-
-      if (baseProps.unmountOnExit) {
-        (0, _mobileUtils.removeElement)(div);
-      }
+      (0, _mobileUtils.removeElement)(div);
     };
 
     dynamicProps.openIndex = -1;

package/cjs/masking/methods.js

@@ -28,14 +28,14 @@ function getOpenMethod(Component, containerId, normalize) {
     }); // 不同的key用不同的容器挂载
 
     var id = "_" + (containerId || 'ARCO_MASKING') + "_DIV_" + (config.key || '') + "_";
-
-    var _appendElementById = (0, _mobileUtils.appendElementById)(id, baseProps.getContainer),
-        div = _appendElementById.child;
-
+    var existedDiv = baseProps.unmountOnExit ? null : document.getElementById(id);
+    var div = existedDiv || (0, _mobileUtils.appendElementById)(id, baseProps.getContainer).child;
     var leaving = false;
 
-    var _ReactDOMRender = new _render.ReactDOMRender(Component, div, context),
-        render = _ReactDOMRender.render;
+    var _ReactDOMRender = new _render.ReactDOMRender(Component, div, context, id, existedDiv ? _render.renderRootCache[id] : undefined),
+        render = _ReactDOMRender.render,
+        unmount = _ReactDOMRender.unmount,
+        setRootCache = _ReactDOMRender.setRootCache;
 
     var dynamicProps = (0, _extends2.default)({}, baseProps, {
       getContainer: function getContainer() {
@@ -60,11 +60,17 @@ function getOpenMethod(Component, containerId, normalize) {
       baseProps.onClose && baseProps.onClose(scene);
 
       if (baseProps.unmountOnExit) {
+        unmount();
         (0, _mobileUtils.removeElement)(div);
       }
     };
 
     render(dynamicProps);
+
+    if (!baseProps.unmountOnExit) {
+      setRootCache();
+    }
+
     (0, _mobileUtils.nextTick)(function () {
       if (leaving) return;
       dynamicProps.visible = true;

package/cjs/skeleton/type.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { BaseProps, SimpleBaseProps } from '../_helpers';
+export type { BaseProps, SimpleBaseProps };
 export interface SkeletonProps extends SimpleBaseProps {
     /**
      * 是否显示标题占位图

package/cjs/swipe-load/index.js

@@ -78,7 +78,8 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
       _useContext$locale = _useContext.locale,
-      locale = _useContext$locale === void 0 ? _mobileUtils.defaultLocale : _useContext$locale;
+      locale = _useContext$locale === void 0 ? _mobileUtils.defaultLocale : _useContext$locale,
+      useRtl = _useContext.useRtl;
 
   var _useState = (0, _react.useState)(disabled),
       disableState = _useState[0],
@@ -160,16 +161,20 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       // 判断元素是否属于滚动元素 先置为1 之后变成0表示非滚动容器
       // @en Determine whether the element belongs to a scrolling element. Set it to 1 and then change to 0 to indicate a non-scrolling container
       if (!scrollContainer.scrollLeft) {
-        scrollContainer.scrollLeft = 1;
+        scrollContainer.scrollLeft = useRtl ? -1 : 1;
       }
 
       endX = e.touches[0].clientX || 0;
       var diff = endX - startX;
       offsetRef.current = diff;
-      var labelDiff = (0, _mobileUtils.fingerDisToLabelDis)(Math.abs(diff), damping); // 滑动到最左侧，处理回弹效果
+      var labelDiff = (0, _mobileUtils.fingerDisToLabelDis)(Math.abs(diff), damping); // 判断是否是滚动到列表开始方向，ltr模式下是向左滚动，rtl模式下是向右滚动
+
+      var isScrollToLeft = useRtl ? diff < 0 : diff > 0; // 判断是否是滚动到列表结束方向，ltr模式下是向右滚动，rtl模式下是向左滚动
+
+      var isScrollToRight = useRtl ? diff > 0 : diff < 0; // 滑动到最左侧，处理回弹效果
       // @en Swipe to the far left to handle the rebound effect
 
-      if (diff > 0 && scrollContainer.scrollLeft <= 1 && bounceWhenBumpBoundary) {
+      if (isScrollToLeft && Math.abs(scrollContainer.scrollLeft) <= 1 && bounceWhenBumpBoundary) {
         e.stopPropagation();
         e.cancelBubble && e.preventDefault();
         bouncingRef.current = true;
@@ -187,14 +192,14 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       // @en Swipe left to the end and the 'more' label is loaded. Judging by scrollLeft, the scroll container reaches the edge and the non-scroll container does not judge
 
 
-      if (diff < 0 && (scrollContainer.scrollLeft + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1 || !scrollContainer.scrollLeft) && !ifToRightRef.current) {
+      if (isScrollToRight && (Math.abs(scrollContainer.scrollLeft) + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1 || !scrollContainer.scrollLeft) && !ifToRightRef.current) {
         showLoadMoreRef.current = true;
         loadingCurrent.style.display = 'flex';
       } // 继续滑动露出标签
       // @en Continue swiping to reveal labels
 
 
-      if (showLoadMoreRef.current && diff < 0) {
+      if (showLoadMoreRef.current && isScrollToRight) {
         // 此时禁止list原生滚动
         // @en Disable list native scrolling at this time
         e.stopPropagation();
@@ -214,22 +219,22 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
         (0, _helpers.setStyleWithVendor)(loadingCurrent, {
           transition: 'none',
-          transform: "translateX(-" + labelRightMargin + "px) translateZ(0)"
+          transform: useRtl ? "translateX(" + labelRightMargin + "px) translateZ(0)" : "translateX(-" + labelRightMargin + "px) translateZ(0)"
         });
         (0, _helpers.setStyleWithVendor)(scrollContainer, {
           transition: 'none',
-          transform: "translateX(-" + listRightMargin + "px) translateZ(0)"
+          transform: useRtl ? "translateX(" + listRightMargin + "px) translateZ(0)" : "translateX(-" + listRightMargin + "px) translateZ(0)"
         });
       }
 
-      if (diff > 0 && scrollContainer.scrollLeft + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
+      if (isScrollToLeft && Math.abs(scrollContainer.scrollLeft) + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
         showLoadMoreRef.current = false;
         loadingCurrent.style.display = 'none';
       } // 针对ios惯性滚动处理
       // @en Handling inertial scrolling for ios
 
 
-      if (diff < 0 && scrollContainer.scrollLeft + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
+      if (isScrollToRight && Math.abs(scrollContainer.scrollLeft) + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
         ifToRightRef.current = false;
       } else {
         ifToRightRef.current = true;
@@ -274,7 +279,7 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       // @em Swipe left,  labels are all displayed
 
 
-      if (labelDiff >= minConfirmOffset && (scrollContainer.scrollLeft + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1 || !scrollContainer.scrollLeft) && showLoadMoreRef.current) {
+      if (labelDiff >= minConfirmOffset && (Math.abs(scrollContainer.scrollLeft) + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1 || !scrollContainer.scrollLeft) && showLoadMoreRef.current) {
         onConfirm(); // 安卓机型返回动画优化
         // @en Return animation optimization on Android
 
@@ -302,6 +307,8 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     };
   });
   return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+    var _ref2, _ref3;
+
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls + "-swipe-load " + className,
@@ -312,19 +319,17 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, children), renderLabel ? /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-custom-loading-area"),
       ref: loadingRef,
-      style: {
-        position: 'absolute',
-        right: initPos + "px"
-      }
+      style: (_ref2 = {
+        position: 'absolute'
+      }, _ref2[useRtl ? 'left' : 'right'] = initPos + "px", _ref2)
     }, renderLabel.length ? renderLabel(labelOffsetState) : renderLabel()) : /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-loading-area"),
       ref: loadingRef,
-      style: {
+      style: (_ref3 = {
         width: circleSize + "px",
         height: circleSize + "px",
-        position: 'absolute',
-        right: "-" + circleSize + "px"
-      }
+        position: 'absolute'
+      }, _ref3[useRtl ? 'left' : 'right'] = "-" + circleSize + "px", _ref3)
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-loading-label"),
       ref: loadingLabelRef

package/cjs/swipe-load/style/css/index.css

@@ -519,6 +519,10 @@
   color:  #1d2129 ;
   font-size:  0.24rem ;
 }
+[dir="rtl"] .arco-swipe-load .arco-loading-area .arco-loading-label {
+  margin-left: initial;
+  margin-right:  0.4rem ;
+}
 /***************************************************
  *                                                 *
  *               Arco Theme Style                  *

package/cjs/swipe-load/style/index.less

@@ -20,7 +20,7 @@
         .use-var(border-radius, swipe-load-label-border-radius);
 
         .@{prefix}-loading-label {
-            .use-var(margin-left, swipe-load-label-text-margin-left);
+            .use-var-with-rtl(margin-left, swipe-load-label-text-margin-left);
             .use-var(width, swipe-load-label-text-width);
             .use-var(color, swipe-load-label-text-color);
             .use-var(font-size, swipe-load-label-text-font-size);

package/cjs/tabs/index.js

@@ -466,11 +466,12 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     changeFromRef.current = changeFrom || '';
     setCellTrans(true);
     setInnerIndex(newIndex);
-    setDistance(0);
 
     if (newIndex !== activeIndexRef.current) {
       onChange && onChange(tabs[newIndex], newIndex, changeFrom);
     }
+
+    setDistance(0);
   }
 
   return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {