@arco-design/mobile-react 2.28.0 → 2.28.2

package/esm/_helpers/hooks.d.ts

@@ -13,6 +13,12 @@ export declare function useListenResize(resizeHandler: () => void, deps?: any[],
  * @desc {en} Tips: Use in scenarios where asynchronous processing is not completed after unmount. It is not recommended to replace useState without brains
  * @param initialState 初始状态
  * @param initialState {en} Initial State
+ * @example
+ * ```
+ * import { useMountedState } from '@arco-design/mobile-react/esm/_helpers/hooks';
+ *
+ * const [scrollValue, setScrollValue] = useMountedState(value);
+ * ```
  */
 export declare function useMountedState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>];
 export declare function useSameRefState<T>(initialValue: T): [T, React.MutableRefObject<T>, (data: T) => void];
@@ -37,7 +43,7 @@ export declare function useAddListener(dom: HTMLDivElement | null, event: string
     capture: boolean;
 }): void;
 export declare function usePreventBodyScroll(visible: boolean, preventBodyScroll: boolean, initialBodyOverflow?: string): void;
-export declare const useProgress: (mountedTransition: boolean, percentage: number, duration: number, mountedBezier: BezierType, step: number) => [number, boolean];
+export declare function useProgress(mountedTransition: boolean, percentage: number, duration: number, mountedBezier: BezierType, step: number): [number, boolean];
 export declare function useSingleAndDoubleClick(onClick: (e: React.MouseEvent) => void, onDoubleClick: (e: React.MouseEvent) => void, delay?: number): (e: React.MouseEvent) => void;
 export declare function useGenSvgKey(userSetSvgKey: string): {
     svgKey: string;

package/esm/_helpers/hooks.js

@@ -35,6 +35,12 @@ export function useListenResize(resizeHandler, deps, needListen) {
  * @desc {en} Tips: Use in scenarios where asynchronous processing is not completed after unmount. It is not recommended to replace useState without brains
  * @param initialState 初始状态
  * @param initialState {en} Initial State
+ * @example
+ * ```
+ * import { useMountedState } from '@arco-design/mobile-react/esm/_helpers/hooks';
+ *
+ * const [scrollValue, setScrollValue] = useMountedState(value);
+ * ```
  */
 
 export function useMountedState(initialState) {
@@ -449,7 +455,7 @@ export function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOver
     };
   }, [visible]);
 }
-export var useProgress = function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
+export function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
   var _useState8 = useState(0),
       currentPercentage = _useState8[0],
       setCurrentPercentage = _useState8[1];
@@ -483,7 +489,7 @@ export var useProgress = function useProgress(mountedTransition, percentage, dur
     percentage === 100 ? setCurrentPercentage(100) : setCurrentPercentage(count * step);
   }, [count, percentage, step]);
   return [currentPercentage, transitionControl];
-};
+}
 export function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
   if (delay === void 0) {
     delay = 200;

package/esm/avatar/type.d.ts

@@ -18,7 +18,7 @@ export interface AvatarProps<T extends ImageProps = ImageProps> extends BaseProp
      * 图片头像的资源地址
      * @en resource of avatar picture
      */
-    src: string;
+    src?: string;
     /**
      * 图片头像组件参数，透传给Image组件
      * @en Image avatar component props, transparently passed to the Image component

package/esm/form/form-item.js

@@ -24,15 +24,96 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
     _this._errors = [];
     _this._touched = false;
 
+    _this.onValueChange = function (preStore, curStore) {
+      _this._touched = true;
+      var shouldUpdate = _this.props.shouldUpdate;
+
+      if (typeof shouldUpdate === 'function') {
+        shouldUpdate({
+          preStore: preStore,
+          curStore: curStore
+        }) && _this.forceUpdate();
+        return;
+      }
+
+      _this.forceUpdate();
+    };
+
+    _this.getFieldError = function () {
+      return _this._errors;
+    };
+
+    _this.isFieldTouched = function () {
+      return _this._touched;
+    };
+
+    _this.validateField = function () {
+      var validateMessages = _this.context.validateMessages;
+      var getFieldValue = _this.context.form.getFieldValue;
+      var _this$props = _this.props,
+          field = _this$props.field,
+          rules = _this$props.rules,
+          onValidateStatusChange = _this$props.onValidateStatusChange;
+      var value = getFieldValue(field);
+
+      if (rules != null && rules.length && field) {
+        var _Validator;
+
+        var fieldDom = _this.props.getFormItemRef();
+
+        var fieldValidator = new Validator((_Validator = {}, _Validator[field] = rules, _Validator), {
+          validateMessages: validateMessages
+        });
+        return new Promise(function (resolve) {
+          var _fieldValidator$valid;
+
+          fieldValidator.validate((_fieldValidator$valid = {}, _fieldValidator$valid[field] = value, _fieldValidator$valid), function (errorsMap) {
+            var _getErrorAndWarnings = getErrorAndWarnings((errorsMap == null ? void 0 : errorsMap[field]) || []),
+                errors = _getErrorAndWarnings.errors,
+                warnings = _getErrorAndWarnings.warnings;
+
+            _this._errors = errors;
+            onValidateStatusChange({
+              errors: _this._errors,
+              warnings: warnings
+            });
+            return resolve({
+              errors: _this._errors,
+              warnings: warnings,
+              value: value,
+              field: field,
+              dom: fieldDom
+            });
+          });
+        });
+      }
+
+      return Promise.resolve({
+        errors: [],
+        warnings: [],
+        value: value,
+        field: field,
+        dom: null
+      });
+    };
+
+    _this.setFieldData = function (value) {
+      var field = _this.props.field;
+      var setFieldValue = _this.context.form.setFieldValue;
+      setFieldValue(field, value);
+
+      _this.validateField();
+    };
+
     _this.innerTriggerFunction = function (_, value) {
       var _children$props;
 
       _this.setFieldData(value);
 
-      var _this$props = _this.props,
-          children = _this$props.children,
-          _this$props$trigger = _this$props.trigger,
-          trigger = _this$props$trigger === void 0 ? 'onChange' : _this$props$trigger;
+      var _this$props2 = _this.props,
+          children = _this$props2.children,
+          _this$props2$trigger = _this$props2.trigger,
+          trigger = _this$props2$trigger === void 0 ? 'onChange' : _this$props2$trigger;
 
       if (trigger && (_children$props = children.props) != null && _children$props[trigger]) {
         var _children$props2;
@@ -50,10 +131,10 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
 
       _this.setFieldData(value);
 
-      var _this$props2 = _this.props,
-          children = _this$props2.children,
-          _this$props2$trigger = _this$props2.trigger,
-          trigger = _this$props2$trigger === void 0 ? 'onChange' : _this$props2$trigger;
+      var _this$props3 = _this.props,
+          children = _this$props3.children,
+          _this$props3$trigger = _this$props3.trigger,
+          trigger = _this$props3$trigger === void 0 ? 'onChange' : _this$props3$trigger;
 
       if (trigger && (_children$props3 = children.props) != null && _children$props3[trigger]) {
         var _children$props4;
@@ -66,6 +147,24 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
       }
     };
 
+    _this.innerClearFunction = function () {
+      var _children$props5;
+
+      var children = _this.props.children;
+
+      _this.setFieldData('');
+
+      if ((_children$props5 = children.props) != null && _children$props5.onClear) {
+        var _children$props6;
+
+        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          args[_key3] = arguments[_key3];
+        }
+
+        (_children$props6 = children.props) == null ? void 0 : _children$props6.onClear.apply(_children$props6, args);
+      }
+    };
+
     _this.destroyField = function () {};
 
     if (props != null && props.initialValue && props.field) {
@@ -93,108 +192,10 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
     this.destroyField();
   };
 
-  _proto.onValueChange = function onValueChange(preStore, curStore) {
-    this._touched = true;
-    var shouldUpdate = this.props.shouldUpdate;
-
-    if (typeof shouldUpdate === 'function') {
-      shouldUpdate({
-        preStore: preStore,
-        curStore: curStore
-      }) && this.forceUpdate();
-      return;
-    }
-
-    this.forceUpdate();
-  };
-
-  _proto.getFieldError = function getFieldError() {
-    return this._errors;
-  };
-
-  _proto.isFieldTouched = function isFieldTouched() {
-    return this._touched;
-  };
-
-  _proto.validateField = function validateField() {
-    var _this2 = this;
-
-    var validateMessages = this.context.validateMessages;
-    var getFieldValue = this.context.form.getFieldValue;
-    var _this$props3 = this.props,
-        field = _this$props3.field,
-        rules = _this$props3.rules,
-        onValidateStatusChange = _this$props3.onValidateStatusChange;
-    var value = getFieldValue(field);
-
-    if (rules != null && rules.length && field) {
-      var _Validator;
-
-      var fieldDom = this.props.getFormItemRef();
-      var fieldValidator = new Validator((_Validator = {}, _Validator[field] = rules, _Validator), {
-        validateMessages: validateMessages
-      });
-      return new Promise(function (resolve) {
-        var _fieldValidator$valid;
-
-        fieldValidator.validate((_fieldValidator$valid = {}, _fieldValidator$valid[field] = value, _fieldValidator$valid), function (errorsMap) {
-          var _getErrorAndWarnings = getErrorAndWarnings((errorsMap == null ? void 0 : errorsMap[field]) || []),
-              errors = _getErrorAndWarnings.errors,
-              warnings = _getErrorAndWarnings.warnings;
-
-          _this2._errors = errors;
-          onValidateStatusChange({
-            errors: _this2._errors,
-            warnings: warnings
-          });
-          return resolve({
-            errors: _this2._errors,
-            warnings: warnings,
-            value: value,
-            field: field,
-            dom: fieldDom
-          });
-        });
-      });
-    }
-
-    return Promise.resolve({
-      errors: [],
-      warnings: [],
-      value: value,
-      field: field,
-      dom: null
-    });
-  };
-
-  _proto.setFieldData = function setFieldData(value) {
-    var field = this.props.field;
-    var setFieldValue = this.context.form.setFieldValue;
-    setFieldValue(field, value);
-    this.validateField();
-  };
-
-  _proto.innerClearFunction = function innerClearFunction() {
-    var _children$props5;
-
-    var children = this.props.children;
-    this.setFieldData('');
-
-    if ((_children$props5 = children.props) != null && _children$props5.onClear) {
-      var _children$props6;
-
-      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        args[_key3] = arguments[_key3];
-      }
-
-      (_children$props6 = children.props) == null ? void 0 : _children$props6.onClear.apply(_children$props6, args);
-    }
-  };
-
   _proto.renderChildren = function renderChildren() {
     var _props,
         _children$type,
-        _this3 = this;
+        _this2 = this;
 
     var _this$props4 = this.props,
         children = _this$props4.children,
@@ -269,7 +270,7 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
         props.error = this._errors;
 
         props[trigger] = function (newValue) {
-          _this3.setFieldData(newValue);
+          _this2.setFieldData(newValue);
 
           for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
             args[_key4 - 1] = arguments[_key4];

package/esm/nav-bar/index.d.ts

@@ -32,13 +32,13 @@ export interface NavBarProps {
      */
     rightContent?: React.ReactNode;
     /**
-     * 自定义样式，背景和文字颜色可在此定义
+     * 自定义样式，最外层元素的背景文字颜色可在此定义
      * @en Custom stylesheet, background and text colors can be defined here
      */
     style?: React.CSSProperties;
     /**
-     * 自定义类名
-     * @en Custom classname
+     * 内层自定义类名
+     * @en Inner custom classname
      */
     className?: string;
     /**

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

@@ -53,6 +53,7 @@ var PickerCell = /*#__PURE__*/forwardRef(function (props, ref) {
   var rowCount = Math.max(rows % 2 === 0 ? rows + 1 : rows, 3);
   var isTouchMoveRef = useRef(false);
   var isTouchStopped = useRef(false);
+  var unmountCallbackRef = useRef();
   var timeRef = useRef(null);
   var colStyle = useMemo(function () {
     return getStyleWithVendor(_extends({
@@ -94,20 +95,24 @@ var PickerCell = /*#__PURE__*/forwardRef(function (props, ref) {
     }
 
     setTransitionDuration(transDuration ? transDuration + "ms" : '');
-    setTransformY(transY); // 处理连续滑动的情况：
-    // @en handle the case of continuous sliding:
-    // 如果上一次callback还未执行，先cancel掉上一次回调，只执行最近的一次回调
-    // @en If the last callback has not been executed, cancel the last callback first, and only execute the latest callback
+    setTransformY(transY); // 处理连续滑动的情况：如果上一次callback还未执行，先cancel掉上一次回调
+    // @en handle the case of continuous sliding: If the last callback has not been executed, cancel the last callback first
 
     if (latestCallbackTimer.current) {
       clearTimeout(latestCallbackTimer.current);
     }
 
-    latestCallbackTimer.current = window.setTimeout(function () {
+    var setNormalStatus = function setNormalStatus() {
+      // 如果timer顺利执行，则在unmount时不再重复执行
+      // @en If the timer is successfully executed, it will not be repeated when unmounting
+      unmountCallbackRef.current = undefined;
       movingStatusRef.current = 'normal';
       setTransitionDuration('');
       callback();
-    }, transDuration);
+    };
+
+    unmountCallbackRef.current = setNormalStatus;
+    latestCallbackTimer.current = window.setTimeout(setNormalStatus, transDuration);
   }
 
   function _scrollToIndex(itemIndex, transDuration, callback) {
@@ -305,6 +310,15 @@ var PickerCell = /*#__PURE__*/forwardRef(function (props, ref) {
     _scrollToIndexWithChange(itemIndex, 200);
   }
 
+  useEffect(function () {
+    return function () {
+      // 卸载组件时，如果timer中还有未执行的onchange操作，则立刻执行该操作并移除timer
+      // @en When unloading the component, if there is an unexecuted onchange operation in the timer, execute it immediately and remove the timer
+      var timerId = latestCallbackTimer.current;
+      unmountCallbackRef.current == null ? void 0 : unmountCallbackRef.current();
+      timerId && clearTimeout(timerId);
+    };
+  }, []);
   useEffect(function () {
     if (wrapRef.current) {
       wrapRef.current.addEventListener('touchstart', _handleColumnTouchStart);

package/esm/tabs/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useCallback, useContext } from 'react';
-import { cls, nextTick } from '@arco-design/mobile-utils';
+import { cls, nextTick, getOffset } from '@arco-design/mobile-utils';
 import { ContextLayout, GlobalContext } from '../context-provider';
 import TabCell from './tab-cell';
 import TabPane from './tab-pane';
@@ -401,9 +401,15 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   function updateLayout() {
+    var _domRef$current, _domRef$current2;
+
+    var _getOffset = getOffset(domRef.current),
+        width = _getOffset.width,
+        height = _getOffset.height;
+
     cellRef.current && cellRef.current.resetUnderlineStyle();
-    setWrapWidth(domRef.current ? domRef.current.offsetWidth : 0);
-    setWrapHeight(domRef.current ? domRef.current.offsetHeight : 0);
+    setWrapWidth(width || ((_domRef$current = domRef.current) == null ? void 0 : _domRef$current.offsetWidth) || 0);
+    setWrapHeight(height || ((_domRef$current2 = domRef.current) == null ? void 0 : _domRef$current2.offsetHeight) || 0);
     paneRef.current && paneRef.current.setCurrentHeight();
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.28.0",
+    "version": "2.28.2",
     "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.16.0",
+        "@arco-design/mobile-utils": "2.16.2",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -28,12 +28,26 @@
         "jest": "^25.3.0"
     },
     "peerDependencies": {
+        "@types/react": ">=16.9.0",
+        "@types/react-dom": ">=16.9.0",
+        "@types/react-transition-group": ">=4.3.0",
         "react": ">=16.9.0",
         "react-dom": ">=16.9.0",
         "react-transition-group": ">=4.3.0"
     },
+    "peerDependenciesMeta": {
+        "@types/react": {
+            "optional": true
+        },
+        "@types/react-dom": {
+            "optional": true
+        },
+        "@types/react-transition-group": {
+            "optional": true
+        }
+    },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "6809000ae9f4310979628d4bd43a728d34266899"
+    "gitHead": "f923a5d573d8af95e6b158614f8e7d8184afc481"
 }

package/umd/_helpers/hooks.d.ts

@@ -13,6 +13,12 @@ export declare function useListenResize(resizeHandler: () => void, deps?: any[],
  * @desc {en} Tips: Use in scenarios where asynchronous processing is not completed after unmount. It is not recommended to replace useState without brains
  * @param initialState 初始状态
  * @param initialState {en} Initial State
+ * @example
+ * ```
+ * import { useMountedState } from '@arco-design/mobile-react/esm/_helpers/hooks';
+ *
+ * const [scrollValue, setScrollValue] = useMountedState(value);
+ * ```
  */
 export declare function useMountedState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>];
 export declare function useSameRefState<T>(initialValue: T): [T, React.MutableRefObject<T>, (data: T) => void];
@@ -37,7 +43,7 @@ export declare function useAddListener(dom: HTMLDivElement | null, event: string
     capture: boolean;
 }): void;
 export declare function usePreventBodyScroll(visible: boolean, preventBodyScroll: boolean, initialBodyOverflow?: string): void;
-export declare const useProgress: (mountedTransition: boolean, percentage: number, duration: number, mountedBezier: BezierType, step: number) => [number, boolean];
+export declare function useProgress(mountedTransition: boolean, percentage: number, duration: number, mountedBezier: BezierType, step: number): [number, boolean];
 export declare function useSingleAndDoubleClick(onClick: (e: React.MouseEvent) => void, onDoubleClick: (e: React.MouseEvent) => void, delay?: number): (e: React.MouseEvent) => void;
 export declare function useGenSvgKey(userSetSvgKey: string): {
     svgKey: string;

package/umd/_helpers/hooks.js

@@ -22,7 +22,7 @@
   _exports.useMountedState = useMountedState;
   _exports.usePopupScroll = usePopupScroll;
   _exports.usePreventBodyScroll = usePreventBodyScroll;
-  _exports.useProgress = void 0;
+  _exports.useProgress = useProgress;
   _exports.useRefMountedState = useRefMountedState;
   _exports.useRefState = useRefState;
   _exports.useSameRefState = useSameRefState;
@@ -66,6 +66,12 @@
    * @desc {en} Tips: Use in scenarios where asynchronous processing is not completed after unmount. It is not recommended to replace useState without brains
    * @param initialState 初始状态
    * @param initialState {en} Initial State
+   * @example
+   * ```
+   * import { useMountedState } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * const [scrollValue, setScrollValue] = useMountedState(value);
+   * ```
    */
 
 
@@ -494,7 +500,7 @@
     }, [visible]);
   }
 
-  var useProgress = function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
+  function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
     var _useState8 = (0, _react.useState)(0),
         currentPercentage = _useState8[0],
         setCurrentPercentage = _useState8[1];
@@ -528,9 +534,7 @@
       percentage === 100 ? setCurrentPercentage(100) : setCurrentPercentage(count * step);
     }, [count, percentage, step]);
     return [currentPercentage, transitionControl];
-  };
-
-  _exports.useProgress = useProgress;
+  }
 
   function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
     if (delay === void 0) {

package/umd/avatar/type.d.ts

@@ -18,7 +18,7 @@ export interface AvatarProps<T extends ImageProps = ImageProps> extends BaseProp
      * 图片头像的资源地址
      * @en resource of avatar picture
      */
-    src: string;
+    src?: string;
     /**
      * 图片头像组件参数，透传给Image组件
      * @en Image avatar component props, transparently passed to the Image component