@arco-design/mobile-react 2.30.8 → 2.30.10

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.30.10](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.9...@arco-design/mobile-react@2.30.10) (2024-03-04)
+
+
+### Bug Fixes
+
+* `Carousel` reset transforms when loop status changes ([#243](https://github.com/arco-design/arco-design-mobile/issues/243)) ([3983669](https://github.com/arco-design/arco-design-mobile/commit/398366920556ea4eb91ee87035f62443ad8db1d1))
+* `Picker` onOk method adds new parameters ([#237](https://github.com/arco-design/arco-design-mobile/issues/237)) ([ef2e800](https://github.com/arco-design/arco-design-mobile/commit/ef2e8001c390174a12ca8b815e96c71436420e94))
+* `Tabs` tab-cell support "updateLayout" method ([#234](https://github.com/arco-design/arco-design-mobile/issues/234)) ([1f17383](https://github.com/arco-design/arco-design-mobile/commit/1f17383592be7917a3f8392025ada60c788738f4))
+
+
+
+
+
+## [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.9/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.30.9/dist/index.min.js"></script>
 ```
 
 ## Full import
@@ -134,6 +134,74 @@ import { Button as ArcoButton } from '@arco-design/mobile-react';
 import { IconAsk, IconBack } from '@arco-design/mobile-react/esm/icon';
 ```
 
+
+## Partial import（Vite）
+
+It is recommended to use `vite-plugin-importer` to import（**<a href="https://www.npmjs.com/package/vite-plugin-importer" target="_blank">Click here</a>** to know more from this plugin）：
+
+```
+npm install vite-plugin-importer -D
+```
+
+### Import components on demand
+
+**vite.config.ts** ：
+
+```js
+import usePluginImport from 'vite-plugin-importer'
+
+export default defineConfig({
+    plugins: [
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react",
+            libraryDirectory: "esm",
+            style: (path) => `${path}/style`,
+        })
+    ]
+})
+```
+
+### Import icons on demand
+
+**vite.config.ts** ：
+
+```js
+import usePluginImport from 'vite-plugin-importer'
+
+export default defineConfig({
+    plugins: [
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react/esm/icon",
+            libraryDirectory: "",
+            camel2DashComponentName: false,
+        })
+    ]
+})
+```
+
+If both component and Icon need to be imported on demand, you just declare all and do not need any change.
+
+**vite.config.ts** ：
+
+```js
+import usePluginImport from 'vite-plugin-importer'
+
+export default defineConfig({
+    plugins: [
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react",
+            libraryDirectory: "esm",
+            style: (path) => `${path}/style`,
+        }),
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react/esm/icon",
+            libraryDirectory: "",
+            camel2DashComponentName: false,
+        })
+    ]
+})
+```
+
 ## Partial import (manual)
 
 If you don't use babel-plugin-import, you need to import js and css files manually. The following example has the same effect as the import statement above:

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.9/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.30.9/dist/index.min.js"></script>
 ```
 
 ## 引入全部
@@ -134,6 +134,73 @@ import { Button as ArcoButton } from '@arco-design/mobile-react';
 import { IconAsk, IconBack } from '@arco-design/mobile-react/esm/icon';
 ```
 
+## 部分引入（Vite）
+
+如果是 Vite 构建工具的话，则推荐使用 `vite-plugin-importer` 引入（该插件具体使用 **<a href="https://www.npmjs.com/package/vite-plugin-importer" target="_blank">戳这里</a>** ）：
+
+```
+npm install vite-plugin-importer -D
+```
+
+### 组件按需引入
+
+**vite.config.ts** 中配置：
+
+```js
+import usePluginImport from 'vite-plugin-importer'
+
+export default defineConfig({
+    plugins: [
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react",
+            libraryDirectory: "esm",
+            style: (path) => `${path}/style`,
+        })
+    ]
+})
+```
+
+### Icon 按需引入
+
+**vite.config.ts** 中配置：
+
+```js
+import usePluginImport from 'vite-plugin-importer'
+
+export default defineConfig({
+    plugins: [
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react/esm/icon",
+            libraryDirectory: "",
+            camel2DashComponentName: false,
+        })
+    ]
+})
+```
+
+如果同时存在 组件 和 Icon 的按需引入方式，不需要做改动，可以同时声明
+
+**vite.config.ts** 中配置：
+
+```js
+import usePluginImport from 'vite-plugin-importer'
+
+export default defineConfig({
+    plugins: [
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react",
+            libraryDirectory: "esm",
+            style: (path) => `${path}/style`,
+        }),
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react/esm/icon",
+            libraryDirectory: "",
+            camel2DashComponentName: false,
+        })
+    ]
+})
+```
+
 ## 部分引入（手动）
 
 如果不使用babel-plugin-import，则需要手动引入js和css文件。下方例子效果等同于上方引入语句：

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/carousel/index.js

@@ -655,6 +655,9 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   function getFakeChild() {
     if (noLoop) {
+      // 循环状态从有到无时，重置 transforms
+      // @en reset transforms when loop status changes to false
+      setTransforms([]);
       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/picker/index.js

@@ -129,12 +129,13 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     (_pickerViewRef$curren6 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren6.scrollToCurrentIndex();
     (0, _mobileUtils.nextTick)(function () {
-      var _pickerViewRef$curren7;
+      var _pickerViewRef$curren7, _pickerViewRef$curren8;
 
       var val = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnValues()) || scrollValueRef.current || [];
+      var selectedData = ((_pickerViewRef$curren8 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren8.getAllColumnData()) || [];
 
       if (onOk) {
-        onOk(val);
+        onOk(val, selectedData);
       }
 
       if (onChange) {

package/cjs/picker/type.d.ts

@@ -81,7 +81,7 @@ export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'chi
      * 点击选中时执行的回调
      * @en Callback when clicking on Ok
      */
-    onOk?: (value: ValueType[]) => void;
+    onOk?: (value: ValueType[], data: PickerData[]) => void;
     /**
      * 点击取消时执行的回调
      * @en Callback when clicking to cancel

package/cjs/picker-view/components/cascader.d.ts

@@ -19,6 +19,7 @@ export interface CascaderRef {
     getCellMovingStatus: () => PickerCellMovingStatus[];
     scrollToCurrentIndex: () => void;
     getAllCellsValue: () => ValueType[];
+    getAllCellsData: () => PickerData[];
 }
 declare const Cascader: React.ForwardRefExoticComponent<CascaderProps & React.RefAttributes<CascaderRef>>;
 export default Cascader;

package/cjs/picker-view/components/cascader.js

@@ -37,7 +37,8 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return {
       getCellMovingStatus: getCellMovingStatus,
       scrollToCurrentIndex: scrollToCurrentIndex,
-      getAllCellsValue: getAllCellsValue
+      getAllCellsValue: getAllCellsValue,
+      getAllCellsData: getAllCellsData
     };
   });
 
@@ -59,6 +60,12 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   }
 
+  function getAllCellsData() {
+    return pickerCellsRef.current.map(function (cell) {
+      return cell.getCurrentCellData();
+    });
+  }
+
   function _onValueChange(value, index, newData) {
     var children = (0, _mobileUtils.arrayTreeFilter)(data, function (item, level) {
       return level <= index && item.value === value[level];

package/cjs/picker-view/components/picker-cell.d.ts

@@ -22,6 +22,7 @@ export interface PickerCellRef {
     movingStatus: PickerCellMovingStatus;
     scrollToCurrentIndex: () => void;
     getCurrentCellValue: () => ValueType;
+    getCurrentCellData: () => PickerData;
 }
 declare const PickerCell: React.ForwardRefExoticComponent<PickerCellProps & React.RefAttributes<PickerCellRef>>;
 export default PickerCell;

package/cjs/picker-view/components/picker-cell.js

@@ -304,6 +304,10 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return (_data$currentIndex = data[currentIndex]) == null ? void 0 : _data$currentIndex.value;
   }
 
+  function getCurrentCellData() {
+    return data[currentIndex];
+  }
+
   function _clearTimer() {
     timeRef.current && clearTimeout(timeRef.current);
     timeRef.current = null;
@@ -369,7 +373,8 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return {
       movingStatus: movingStatusRef.current,
       scrollToCurrentIndex: scrollToCurrentIndex,
-      getCurrentCellValue: getCurrentCellValue
+      getCurrentCellValue: getCurrentCellValue,
+      getCurrentCellData: getCurrentCellData
     };
   });
   return !hideEmptyCols || data && data.length ? /*#__PURE__*/_react.default.createElement("div", {

package/cjs/picker-view/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import MultiPicker from '../picker-view/components/multi-picker';
 import PickerCell from '../picker-view/components/picker-cell';
 import Cascader from '../picker-view/components/cascader';
-import { PickerViewProps, ValueType, PickerCellMovingStatus } from './type';
+import { PickerViewProps, ValueType, PickerData, PickerCellMovingStatus } from './type';
 export * from './type';
 export { MultiPicker, PickerCell, Cascader };
 export interface PickerViewRef {
@@ -41,6 +41,11 @@ export interface PickerViewRef {
      * @en Jump directly to the current most recent line (will break scrolling when called)
      */
     scrollToCurrentIndex: () => void;
+    /**
+     * 获取所有列的 data
+     * @en Get all column data
+     */
+    getAllColumnData: () => PickerData[];
 }
 declare const _default: React.ForwardRefExoticComponent<PickerViewProps & React.RefAttributes<PickerViewRef>> & {
     displayName?: string | undefined;

package/cjs/picker-view/index.js

@@ -45,6 +45,14 @@ 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 isArray = function isArray(dt) {
+  return dt ? Array.isArray(dt[0]) : false;
+};
+
+var isStrOrNum = function isStrOrNum(dt) {
+  return typeof dt[0][0] === 'string' || typeof dt[0][0] === 'number';
+};
+
 var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$className = props.className,
       className = _props$className === void 0 ? '' : _props$className,
@@ -94,14 +102,6 @@ var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var innerData = (0, _react.useMemo)(function () {
     var newData;
 
-    var isArray = function isArray(dt) {
-      return dt ? Array.isArray(dt[0]) : false;
-    };
-
-    var isStrOrNum = function isStrOrNum(dt) {
-      return typeof dt[0][0] === 'string' || typeof dt[0][0] === 'number';
-    };
-
     if (isArray(data)) {
       if (isStrOrNum(data)) {
         newData = data.map(function (item) {
@@ -135,6 +135,17 @@ var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   };
 
+  var getAllColumnData = function getAllColumnData() {
+    var _cascaderRef$current2;
+
+    var curValues = cascade ? ((_cascaderRef$current2 = cascaderRef.current) == null ? void 0 : _cascaderRef$current2.getAllCellsData()) || [] : pickerCellsRef.current.map(function (cell) {
+      return cell.getCurrentCellData();
+    });
+    return curValues.filter(function (v) {
+      return v !== undefined;
+    });
+  };
+
   function getColumnValue(index) {
     if (index === void 0) {
       index = 0;
@@ -144,18 +155,18 @@ var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   function getCellMovingStatus() {
-    var _cascaderRef$current2;
+    var _cascaderRef$current3;
 
-    return cascade ? ((_cascaderRef$current2 = cascaderRef.current) == null ? void 0 : _cascaderRef$current2.getCellMovingStatus()) || [] : pickerCellsRef.current.map(function (cell) {
+    return cascade ? ((_cascaderRef$current3 = cascaderRef.current) == null ? void 0 : _cascaderRef$current3.getCellMovingStatus()) || [] : pickerCellsRef.current.map(function (cell) {
       return cell.movingStatus;
     });
   }
 
   function scrollToCurrentIndex() {
     if (cascade) {
-      var _cascaderRef$current3;
+      var _cascaderRef$current4;
 
-      (_cascaderRef$current3 = cascaderRef.current) == null ? void 0 : _cascaderRef$current3.scrollToCurrentIndex();
+      (_cascaderRef$current4 = cascaderRef.current) == null ? void 0 : _cascaderRef$current4.scrollToCurrentIndex();
       return;
     }
 
@@ -172,7 +183,8 @@ var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       getColumnValue: getColumnValue,
       updateLayout: updateLayout,
       resetValue: resetValue,
-      scrollToCurrentIndex: scrollToCurrentIndex
+      scrollToCurrentIndex: scrollToCurrentIndex,
+      getAllColumnData: getAllColumnData
     };
   });
 

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;