@arco-design/mobile-react 2.30.8 → 2.30.9

package/esm/_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/esm/_helpers/render.js

@@ -1,13 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { render as copyRender } from './react-dom';
-export var ReactDOMRender = function ReactDOMRender(app, container, context) {
+export var renderRootCache = {};
+export 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;
@@ -23,14 +27,30 @@ export 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;
 };

package/esm/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/esm/image-preview/methods.js

@@ -3,9 +3,7 @@ import { appendElementById, removeElement } from '@arco-design/mobile-utils';
 import { ReactDOMRender } from '../_helpers/render';
 export function open(Component) {
   return function (config, context) {
-    var baseProps = _extends({
-      unmountOnExit: true
-    }, config || {}, {
+    var baseProps = _extends({}, config || {}, {
       close: function close() {}
     }); // 不同的key用不同的容器挂载
     // @en Different keys are mounted in different containers
@@ -42,10 +40,7 @@ export function open(Component) {
 
     dynamicProps.onClose = function () {
       baseProps.onClose && baseProps.onClose();
-
-      if (baseProps.unmountOnExit) {
-        removeElement(div);
-      }
+      removeElement(div);
     };
 
     dynamicProps.openIndex = -1;

package/esm/masking/methods.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { appendElementById, removeElement, nextTick } from '@arco-design/mobile-utils';
-import { ReactDOMRender } from '../_helpers/render';
+import { ReactDOMRender, renderRootCache } from '../_helpers/render';
 export function getOpenMethod(Component, containerId, normalize) {
   if (normalize === void 0) {
     normalize = function normalize(config) {
@@ -18,14 +18,14 @@ export function getOpenMethod(Component, containerId, normalize) {
 
 
     var id = "_" + (containerId || 'ARCO_MASKING') + "_DIV_" + (config.key || '') + "_";
-
-    var _appendElementById = appendElementById(id, baseProps.getContainer),
-        div = _appendElementById.child;
-
+    var existedDiv = baseProps.unmountOnExit ? null : document.getElementById(id);
+    var div = existedDiv || appendElementById(id, baseProps.getContainer).child;
     var leaving = false;
 
-    var _ReactDOMRender = new ReactDOMRender(Component, div, context),
-        render = _ReactDOMRender.render;
+    var _ReactDOMRender = new ReactDOMRender(Component, div, context, id, existedDiv ? renderRootCache[id] : undefined),
+        render = _ReactDOMRender.render,
+        unmount = _ReactDOMRender.unmount,
+        setRootCache = _ReactDOMRender.setRootCache;
 
     var dynamicProps = _extends({}, baseProps, {
       getContainer: function getContainer() {
@@ -50,11 +50,17 @@ export function getOpenMethod(Component, containerId, normalize) {
       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;

package/esm/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/esm/skeleton/type.js

@@ -1,2 +1 @@
-import { BaseProps, SimpleBaseProps } from '../_helpers';
-export { BaseProps, SimpleBaseProps };
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.30.8",
+    "version": "2.30.9",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.17.8",
+        "@arco-design/mobile-utils": "2.17.9",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -49,5 +49,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "2838b15919944eb0a2122b01cb1a9e8e0e0af75a"
+    "gitHead": "6831c908713b02b4f7738c793ea4118e17f03458"
 }

package/umd/_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/umd/_helpers/render.js

@@ -16,17 +16,22 @@
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
   _exports.__esModule = true;
-  _exports.ReactDOMRender = void 0;
+  _exports.renderRootCache = _exports.ReactDOMRender = void 0;
   _extends2 = _interopRequireDefault(_extends2);
   _react = _interopRequireDefault(_react);
+  var renderRootCache = {};
+  _exports.renderRootCache = renderRootCache;
 
-  var ReactDOMRender = function ReactDOMRender(app, container, context) {
+  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;
@@ -41,16 +46,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 _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/umd/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/umd/image-preview/methods.js

@@ -21,9 +21,7 @@
 
   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
@@ -59,10 +57,7 @@
 
       dynamicProps.onClose = function () {
         baseProps.onClose && baseProps.onClose();
-
-        if (baseProps.unmountOnExit) {
-          (0, _mobileUtils.removeElement)(div);
-        }
+        (0, _mobileUtils.removeElement)(div);
       };
 
       dynamicProps.openIndex = -1;

package/umd/masking/methods.js

@@ -36,14 +36,14 @@
       }); // 不同的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() {
@@ -68,11 +68,17 @@
         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/umd/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/umd/skeleton/type.js

@@ -1,19 +1,17 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "../_helpers"], factory);
+    define(["exports"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("../_helpers"));
+    factory(exports);
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._helpers);
+    factory(mod.exports);
     global.type = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _helpers) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
   "use strict";
 
   _exports.__esModule = true;
-  _exports.BaseProps = _helpers.BaseProps;
-  _exports.SimpleBaseProps = _helpers.SimpleBaseProps;
 });