@arco-design/mobile-react 2.28.0 → 2.28.2

package/umd/form/form-item.js

@@ -40,15 +40,96 @@
       _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;
@@ -66,10 +147,10 @@
 
         _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;
@@ -82,6 +163,24 @@
         }
       };
 
+      _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) {
@@ -109,108 +208,10 @@
       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,
@@ -285,7 +286,7 @@
           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/umd/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/umd/picker-view/components/picker-cell.js

@@ -75,6 +75,7 @@
     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)({
@@ -116,20 +117,24 @@
       }
 
       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) {
@@ -327,6 +332,15 @@
       _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/umd/tabs/index.js

@@ -427,9 +427,15 @@
     }
 
     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();
     }