@arco-design/mobile-react 2.28.0 → 2.28.2

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.28.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.28.1...@arco-design/mobile-react@2.28.2) (2023-08-07)
+
+
+### Bug Fixes
+
+* `Form` bind this in form-item ([#148](https://github.com/arco-design/arco-design-mobile/issues/148)) ([5616d53](https://github.com/arco-design/arco-design-mobile/commit/5616d537b921b009df61addccf966c5e9363a0cb))
+* `PickerView` flicker issue with picker off and on when momentum scrolling is not over ([#143](https://github.com/arco-design/arco-design-mobile/issues/143)) ([e91557f](https://github.com/arco-design/arco-design-mobile/commit/e91557fc1545dd6179329dc342de4967301a7d73))
+* `Tabs` use boundingRect instead of offset when calc tabs wrap size ([#146](https://github.com/arco-design/arco-design-mobile/issues/146)) ([7ece3a9](https://github.com/arco-design/arco-design-mobile/commit/7ece3a9eb76abb010aa88678af47c15a0bd319dc))
+
+
+
+
+
+## [2.28.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.28.0...@arco-design/mobile-react@2.28.1) (2023-08-02)
+
+
+### Bug Fixes
+
+* `Avatar` make the prop "src" optional ([f99bbc8](https://github.com/arco-design/arco-design-mobile/commit/f99bbc812223ae6c8960b1d712040f1b221efb72))
+* add [@types](https://github.com/types) to peerDependencies ([42f3d5a](https://github.com/arco-design/arco-design-mobile/commit/42f3d5ab19144702d7c371c6cbd1aa031a690abe))
+
+
+
+
+
 # [2.28.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.27.5...@arco-design/mobile-react@2.28.0) (2023-07-14)
 
 

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

package/cjs/_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/cjs/_helpers/hooks.js

@@ -9,7 +9,7 @@ exports.useListenResize = useListenResize;
 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;
@@ -59,6 +59,12 @@ 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);
+ * ```
  */
 
 
@@ -487,7 +493,7 @@ function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOverflow) {
   }, [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];
@@ -521,9 +527,7 @@ var useProgress = function useProgress(mountedTransition, percentage, duration,
     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/cjs/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/cjs/form/form-item.js

@@ -42,15 +42,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 _mobileUtils.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 = (0, _utils.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;
@@ -68,10 +149,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;
@@ -84,6 +165,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) {
@@ -111,108 +210,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 _mobileUtils.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 = (0, _utils.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,
@@ -287,7 +288,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/cjs/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/cjs/picker-view/components/picker-cell.js

@@ -68,6 +68,7 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var rowCount = Math.max(rows % 2 === 0 ? rows + 1 : rows, 3);
   var isTouchMoveRef = (0, _react.useRef)(false);
   var isTouchStopped = (0, _react.useRef)(false);
+  var unmountCallbackRef = (0, _react.useRef)();
   var timeRef = (0, _react.useRef)(null);
   var colStyle = (0, _react.useMemo)(function () {
     return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({
@@ -109,20 +110,24 @@ var PickerCell = /*#__PURE__*/(0, _react.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) {
@@ -320,6 +325,15 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _scrollToIndexWithChange(itemIndex, 200);
   }
 
+  (0, _react.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);
+    };
+  }, []);
   (0, _react.useEffect)(function () {
     if (wrapRef.current) {
       wrapRef.current.addEventListener('touchstart', _handleColumnTouchStart);

package/cjs/tabs/index.js

@@ -427,9 +427,15 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   function updateLayout() {
+    var _domRef$current, _domRef$current2;
+
+    var _getOffset = (0, _mobileUtils.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();
   }