@arco-design/mobile-react 2.30.8 → 2.30.9

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.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)
 
 

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.7/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.30.7/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.7/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.30.7/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/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,6 +1,6 @@
 /// <reference types="react" />
 import { BaseProps, SimpleBaseProps } from '../_helpers';
-export { BaseProps, SimpleBaseProps };
+export type { BaseProps, SimpleBaseProps };
 export interface SkeletonProps extends SimpleBaseProps {
     /**
      * 是否显示标题占位图

package/cjs/skeleton/type.js

@@ -1,8 +1,3 @@
 "use strict";
 
-exports.__esModule = true;
-
-var _helpers = require("../_helpers");
-
-exports.BaseProps = _helpers.BaseProps;
-exports.SimpleBaseProps = _helpers.SimpleBaseProps;
+exports.__esModule = true;

package/dist/index.js

@@ -8556,10 +8556,13 @@
       });
     }
 
+    var renderRootCache = {};
+
     var ReactDOMRender =
     /** @class */
     function () {
-      function ReactDOMRender(app, container, context) {
+      function ReactDOMRender(app, container, context, rootCacheId, // root id in cache
+      root) {
         var _this = this;
 
         this.render = function (props) {
@@ -8576,16 +8579,32 @@
           }
         };
 
+        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 _a;
 
           (_a = _this.root) === null || _a === void 0 ? void 0 : _a._unmount();
           _this.root = undefined;
+
+          _this.clearRootCache();
         };
 
         this.app = app;
         this.container = container;
         this.context = context;
+        this.rootCacheId = rootCacheId;
+        this.root = root;
       }
 
       return ReactDOMRender;
@@ -8608,9 +8627,14 @@
 
 
         var id = "_" + (containerId || 'ARCO_MASKING') + "_DIV_" + (config.key || '') + "_";
-        var div = appendElementById(id, baseProps.getContainer).child;
+        var existedDiv = baseProps.unmountOnExit ? null : document.getElementById(id);
+        var div = existedDiv || appendElementById(id, baseProps.getContainer).child;
         var leaving = false;
-        var render = new ReactDOMRender(Component, div, context).render;
+
+        var _a = new ReactDOMRender(Component, div, context, id, existedDiv ? renderRootCache[id] : undefined),
+            render = _a.render,
+            unmount = _a.unmount,
+            setRootCache = _a.setRootCache;
 
         var dynamicProps = __assign$3(__assign$3({}, baseProps), {
           getContainer: function getContainer() {
@@ -8635,11 +8659,17 @@
           baseProps.onClose && baseProps.onClose(scene);
 
           if (baseProps.unmountOnExit) {
+            unmount();
             removeElement(div);
           }
         };
 
         render(dynamicProps);
+
+        if (!baseProps.unmountOnExit) {
+          setRootCache();
+        }
+
         nextTick(function () {
           if (leaving) return;
           dynamicProps.visible = true;
@@ -20680,9 +20710,7 @@
 
     function open$1(Component) {
       return function (config, context) {
-        var baseProps = __assign$3(__assign$3({
-          unmountOnExit: true
-        }, config || {}), {
+        var baseProps = __assign$3(__assign$3({}, config || {}), {
           close: function close() {}
         }); // 不同的key用不同的容器挂载
         // @en Different keys are mounted in different containers
@@ -20714,10 +20742,7 @@
 
         dynamicProps.onClose = function () {
           baseProps.onClose && baseProps.onClose();
-
-          if (baseProps.unmountOnExit) {
-            removeElement(div);
-          }
+          removeElement(div);
         };
 
         dynamicProps.openIndex = -1;