@arco-design/mobile-react 2.36.0 → 2.36.2

package/umd/form/form-item.js

@@ -16,7 +16,7 @@
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
   _exports.__esModule = true;
-  _exports.default = void 0;
+  _exports.default = _exports.FormItemInner = void 0;
   _extends2 = _interopRequireDefault(_extends2);
   _objectWithoutPropertiesLoose2 = _interopRequireDefault(_objectWithoutPropertiesLoose2);
   _inheritsLoose2 = _interopRequireDefault(_inheritsLoose2);
@@ -40,7 +40,7 @@
       _this._errors = [];
       _this._touched = false;
 
-      _this.onValueChange = function (curValue, preValue) {
+      _this.onValueChange = function (curValue, preValue, info) {
         _this._touched = true;
         var shouldUpdate = _this.props.shouldUpdate;
 
@@ -52,9 +52,34 @@
           return;
         }
 
+        if ((info == null ? void 0 : info.changeType) === _type.ValueChangeType.Reset) {
+          _this.props.onValidateStatusChange({
+            errors: [],
+            warnings: [],
+            errorTypes: []
+          });
+
+          _this._errors = [];
+        }
+
         _this.forceUpdate();
       };
 
+      _this.getInitialValue = function () {
+        var _children$type, _getInitialValue;
+
+        var _this$props = _this.props,
+            children = _this$props.children,
+            displayType = _this$props.displayType;
+
+        var _this$context$form$ge = _this.context.form.getInternalHooks(),
+            getInitialValue = _this$context$form$ge.getInitialValue;
+
+        var childrenType = displayType || ((_children$type = children.type) == null ? void 0 : _children$type.displayName); // get user-defined initialValue or if not defined
+
+        return (_getInitialValue = getInitialValue(_this.props.field)) != null ? _getInitialValue : (0, _utils.getDefaultValueForInterComponent)(childrenType);
+      };
+
       _this.getFieldError = function () {
         return _this._errors;
       };
@@ -63,21 +88,37 @@
         return _this._touched;
       };
 
-      _this.validateField = function () {
+      _this.getAllRuleValidateTriggers = function () {
+        var _this$props$rules;
+
+        return ((_this$props$rules = _this.props.rules) == null ? void 0 : _this$props$rules.map(function (rule) {
+          return rule.validateTrigger;
+        }).flat().filter(function (v) {
+          return !!v;
+        })) || [];
+      };
+
+      _this.validateField = function (validateTrigger) {
         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 _this$props2 = _this.props,
+            field = _this$props2.field,
+            rules = _this$props2.rules,
+            onValidateStatusChange = _this$props2.onValidateStatusChange;
+        var value = getFieldValue(field); // rules: if validateTrigger is not defined, all rules will be validated
+        // if validateTrigger is defined, only rules  with validateTrigger  or  without rule.validateTrigger  will be validated
+
+        var curRules = validateTrigger ? rules == null ? void 0 : rules.filter(function (rule) {
+          var triggerList = [].concat(rule.validateTrigger || validateTrigger);
+          return triggerList.includes(validateTrigger);
+        }) : rules;
+
+        if (curRules != null && curRules.length && field) {
           var _Validator;
 
           var fieldDom = _this.props.getFormItemRef();
 
-          var fieldValidator = new _mobileUtils.Validator((_Validator = {}, _Validator[field] = rules, _Validator), {
+          var fieldValidator = new _mobileUtils.Validator((_Validator = {}, _Validator[field] = curRules, _Validator), {
             validateMessages: validateMessages
           });
           return new _es6Promise.Promise(function (resolve) {
@@ -116,82 +157,79 @@
       };
 
       _this.setFieldData = function (value) {
-        var field = _this.props.field;
-        var setFieldValue = _this.context.form.setFieldValue;
-        setFieldValue(field, value);
+        var _this$props3 = _this.props,
+            field = _this$props3.field,
+            _this$props3$trigger = _this$props3.trigger,
+            trigger = _this$props3$trigger === void 0 ? 'onChange' : _this$props3$trigger;
+
+        var _this$context$form$ge2 = _this.context.form.getInternalHooks(),
+            innerSetFieldValue = _this$context$form$ge2.innerSetFieldValue;
 
-        _this.validateField();
+        innerSetFieldValue(field, value);
+
+        _this.validateField(trigger);
       };
 
-      _this.innerTriggerFunction = function (_, value) {
+      _this.innerTriggerFunctionWithValueFirst = function (value) {
         var _children$props;
 
         _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$props4 = _this.props,
+            children = _this$props4.children,
+            _this$props4$trigger = _this$props4.trigger,
+            trigger = _this$props4$trigger === void 0 ? 'onChange' : _this$props4$trigger;
 
         if (trigger && (_children$props = children.props) != null && _children$props[trigger]) {
           var _children$props2;
 
-          for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-            args[_key - 2] = arguments[_key];
+          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+            args[_key - 1] = arguments[_key];
           }
 
-          (_children$props2 = children.props) == null ? void 0 : _children$props2[trigger].apply(_children$props2, [_, value].concat(args));
+          (_children$props2 = children.props) == null ? void 0 : _children$props2[trigger].apply(_children$props2, [value].concat(args));
         }
       };
 
-      _this.innerTriggerFunctionWithValueFirst = function (value) {
+      _this.innerOnInputFunction = function (_, value) {
         var _children$props3;
 
         _this.setFieldData(value);
 
-        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;
-
-          for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-            args[_key2 - 1] = arguments[_key2];
-          }
+        var children = _this.props.children;
 
-          (_children$props4 = children.props) == null ? void 0 : _children$props4[trigger].apply(_children$props4, [value].concat(args));
+        for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+          args[_key2 - 2] = arguments[_key2];
         }
+
+        (_children$props3 = children.props) == null ? void 0 : _children$props3.onInput == null ? void 0 : _children$props3.onInput.apply(_children$props3, [_, value].concat(args));
       };
 
       _this.innerClearFunction = function () {
-        var _children$props5;
+        var _children$props4;
 
         var children = _this.props.children;
 
         _this.setFieldData('');
 
-        if ((_children$props5 = children.props) != null && _children$props5.onClear) {
-          var _children$props6;
+        if ((_children$props4 = children.props) != null && _children$props4.onClear) {
+          var _children$props5;
 
           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);
+          (_children$props5 = children.props) == null ? void 0 : _children$props5.onClear.apply(_children$props5, args);
         }
       };
 
       _this.destroyField = function () {};
 
       if (props != null && props.initialValue && props.field) {
-        var _setInitialValues;
-
         var _context$form$getInte = context.form.getInternalHooks(),
-            setInitialValues = _context$form$getInte.setInitialValues;
+            setInitialValue = _context$form$getInte.setInitialValue;
 
-        setInitialValues((_setInitialValues = {}, _setInitialValues[props.field] = props.initialValue, _setInitialValues));
+        setInitialValue(props.field, props.initialValue);
       }
 
       return _this;
@@ -200,8 +238,8 @@
     var _proto = FormItemInner.prototype;
 
     _proto.componentDidMount = function componentDidMount() {
-      var _this$context$form$ge = this.context.form.getInternalHooks(),
-          registerField = _this$context$form$ge.registerField;
+      var _this$context$form$ge3 = this.context.form.getInternalHooks(),
+          registerField = _this$context$form$ge3.registerField;
 
       this.destroyField = registerField(this.props.field, this);
     };
@@ -211,108 +249,90 @@
     };
 
     _proto.renderChildren = function renderChildren() {
-      var _props,
-          _children$type,
+      var _this2 = this,
+          _children$type2,
           _children$props7,
-          _children$props8,
-          _this2 = this;
-
-      var _this$props4 = this.props,
-          children = _this$props4.children,
-          field = _this$props4.field,
-          _this$props4$trigger = _this$props4.trigger,
-          trigger = _this$props4$trigger === void 0 ? 'onChange' : _this$props4$trigger,
-          _this$props4$triggerP = _this$props4.triggerPropsField,
-          triggerPropsField = _this$props4$triggerP === void 0 ? 'value' : _this$props4$triggerP,
-          displayType = _this$props4.displayType;
+          _children$props8;
+
+      var _this$props5 = this.props,
+          children = _this$props5.children,
+          field = _this$props5.field,
+          _this$props5$trigger = _this$props5.trigger,
+          trigger = _this$props5$trigger === void 0 ? 'onChange' : _this$props5$trigger,
+          _this$props5$triggerP = _this$props5.triggerPropsField,
+          triggerPropsField = _this$props5$triggerP === void 0 ? 'value' : _this$props5$triggerP,
+          displayType = _this$props5.displayType,
+          disabled = _this$props5.disabled;
       var getFieldValue = this.context.form.getFieldValue;
-      var props = (_props = {}, _props[triggerPropsField] = getFieldValue(field), _props.disabled = this.props.disabled, _props);
-      var childrenType = displayType || ((_children$type = children.type) == null ? void 0 : _children$type.displayName);
+      var childrenProps = {
+        disabled: disabled
+      }; // inject validateTriggers of rules
+
+      this.getAllRuleValidateTriggers().forEach(function (triggerName) {
+        childrenProps[triggerName] = function (e) {
+          var _children$props6, _children$props6$trig;
+
+          _this2.validateField(triggerName);
+
+          children == null ? void 0 : (_children$props6 = children.props) == null ? void 0 : (_children$props6$trig = _children$props6[triggerName]) == null ? void 0 : _children$props6$trig.call(_children$props6, e);
+        };
+      });
+      var childrenType = displayType || ((_children$type2 = children.type) == null ? void 0 : _children$type2.displayName);
 
       switch (childrenType) {
         case _type.FormInternalComponentType.Input:
         case _type.FormInternalComponentType.Textarea:
-          props = {
-            value: getFieldValue(field) || '',
-            onInput: this.innerTriggerFunction,
-            onClear: this.innerClearFunction,
-            disabled: this.props.disabled
-          };
-          break;
-
-        case _type.FormInternalComponentType.Checkbox:
-        case _type.FormInternalComponentType.Radio:
-        case _type.FormInternalComponentType.Slider:
-        case _type.FormInternalComponentType.RadioGroup:
-        case _type.FormInternalComponentType.CheckboxGroup:
-          props = {
-            value: getFieldValue(field),
-            onChange: this.innerTriggerFunctionWithValueFirst,
-            disabled: this.props.disabled
-          };
+          childrenProps.value = getFieldValue(field) || '';
+          childrenProps.onInput = this.innerOnInputFunction;
+          childrenProps.onClear = this.innerClearFunction;
           break;
 
         case _type.FormInternalComponentType.DatePicker:
-          props = {
-            currentTs: getFieldValue(field),
-            onChange: this.innerTriggerFunctionWithValueFirst,
-            disabled: this.props.disabled,
-            renderLinkedContainer: ((_children$props7 = children.props) == null ? void 0 : _children$props7.renderLinkedContainer) || function (ts, types) {
-              return /*#__PURE__*/_react.default.createElement(_linkedContainer.DefaultDatePickerLinkedContainer, {
-                ts: ts,
-                types: types
-              });
-            }
+          childrenProps.currentTs = getFieldValue(field);
+          childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
+
+          childrenProps.renderLinkedContainer = ((_children$props7 = children.props) == null ? void 0 : _children$props7.renderLinkedContainer) || function (ts, types) {
+            return /*#__PURE__*/_react.default.createElement(_linkedContainer.DefaultDatePickerLinkedContainer, {
+              ts: ts,
+              types: types
+            });
           };
+
           break;
 
         case _type.FormInternalComponentType.Picker:
-          props = {
-            value: getFieldValue(field),
-            onChange: this.innerTriggerFunctionWithValueFirst,
-            disabled: this.props.disabled,
-            renderLinkedContainer: ((_children$props8 = children.props) == null ? void 0 : _children$props8.renderLinkedContainer) || function (val) {
-              return /*#__PURE__*/_react.default.createElement(_linkedContainer.DefaultPickerLinkedContainer, {
-                value: val
-              });
-            }
+          childrenProps.value = getFieldValue(field) || '';
+          childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
+
+          childrenProps.renderLinkedContainer = ((_children$props8 = children.props) == null ? void 0 : _children$props8.renderLinkedContainer) || function (val) {
+            return /*#__PURE__*/_react.default.createElement(_linkedContainer.DefaultPickerLinkedContainer, {
+              value: val
+            });
           };
+
           break;
 
         case _type.FormInternalComponentType.Switch:
-          props = {
-            checked: Boolean(getFieldValue(field)),
-            onChange: this.innerTriggerFunctionWithValueFirst,
-            disabled: this.props.disabled
-          };
+          childrenProps.checked = Boolean(getFieldValue(field));
+          childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
           break;
 
         case _type.FormInternalComponentType.ImagePicker:
-          props = {
-            images: getFieldValue(field),
-            onChange: this.innerTriggerFunctionWithValueFirst,
-            disabled: this.props.disabled
-          };
+          childrenProps.images = getFieldValue(field);
+          childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
           break;
 
         default:
-          var originTrigger = children.props[trigger]; // inject the validated result
-
-          props.error = this._errors;
+          if (triggerPropsField) {
+            childrenProps[triggerPropsField] = getFieldValue(field);
+          } // inject the validated result
 
-          props[trigger] = function (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];
-            }
-
-            originTrigger && originTrigger.apply(void 0, [newValue].concat(args));
-          };
 
+          childrenProps.error = this._errors;
+          childrenProps[trigger] = this.innerTriggerFunctionWithValueFirst;
       }
 
-      return /*#__PURE__*/_react.default.cloneElement(children, props);
+      return /*#__PURE__*/_react.default.cloneElement(children, childrenProps);
     };
 
     _proto.render = function render() {
@@ -322,6 +342,7 @@
     return FormItemInner;
   }(_react.PureComponent);
 
+  _exports.FormItemInner = FormItemInner;
   FormItemInner.contextType = _formItemContext.FormItemContext;
 
   var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {

package/umd/form/index.js

@@ -46,6 +46,7 @@
         formInstance = props.form,
         children = props.children,
         onValuesChange = props.onValuesChange,
+        onChange = props.onChange,
         onSubmit = props.onSubmit,
         onSubmitFailed = props.onSubmitFailed,
         disabled = props.disabled;
@@ -62,7 +63,8 @@
     setCallbacks({
       onValuesChange: onValuesChange,
       onSubmit: onSubmit,
-      onSubmitFailed: onSubmitFailed
+      onSubmitFailed: onSubmitFailed,
+      onChange: onChange
     });
 
     if (!initRef.current) {

package/umd/form/linked-container.d.ts

@@ -3,6 +3,6 @@ export declare function DefaultPickerLinkedContainer({ value }: {
     value: (string | number)[];
 }): JSX.Element;
 export declare function DefaultDatePickerLinkedContainer({ ts, types, }: {
-    ts: number | [number, number];
+    ts?: number | [number, number];
     types: string[];
 }): JSX.Element;

package/umd/form/linked-container.js

@@ -50,6 +50,10 @@
 
     var className = prefixCls + "-form-picker-link-container";
     var dateTimeStr = (0, _react.useMemo)(function () {
+      if (ts === undefined) {
+        return '';
+      }
+
       if (typeof ts === 'number') {
         return formatDateTimeStr(ts, types);
       }

package/umd/form/style/css/index.css

@@ -567,6 +567,9 @@
 .arco-form-item-control .arco-input {
   padding: 0;
 }
+.arco-form-item-control .arco-input-wrap.textarea {
+  padding: 0;
+}
 .arco-form-item-control-wrapper {
   width: 100%;
   -webkit-box-flex: 1;
@@ -574,7 +577,7 @@
           flex: 1;
   position: relative;
 }
-.arco-form-item-control-wrapper .arco-input-wrap {
+.arco-form-item-control-wrapper .arco-input-wrap.single-line {
   height:  0.44rem ;
 }
 .arco-form-item-message {

package/umd/form/style/index.less

@@ -42,11 +42,16 @@
         .@{prefix}-input-wrap, .@{prefix}-input {
             padding: 0;
         }
+
+        .@{prefix}-input-wrap.textarea {
+            padding: 0;
+        }
+
         &-wrapper {
             width: 100%;
             flex: 1;
             position: relative;
-            .@{prefix}-input-wrap {
+            .@{prefix}-input-wrap.single-line {
                 .use-var(height, input-text-line-height);
             }
         }

package/umd/form/type.d.ts

@@ -2,7 +2,7 @@ import { IRules } from '@arco-design/mobile-utils';
 import { ReactNode } from 'react';
 import { Promise } from 'es6-promise';
 export declare type FieldValue = any;
-export declare type FieldItem = Record<string, any>;
+export declare type FieldItem = Record<string, FieldValue>;
 export declare type ILayout = 'horizontal' | 'vertical' | 'inline';
 export declare enum FormInternalComponentType {
     Input = "Input",
@@ -52,6 +52,11 @@ export interface FormProps {
      * @en Callback when the form item value changes
      */
     onValuesChange?: Callbacks['onValuesChange'];
+    /**
+     * 表单项数据变化时的回调（仅用户操作表单时触发）
+     * @en Callback when the form item value changes (Only trigger when user operate form)
+     */
+    onChange?: Callbacks['onChange'];
     /**
      * 表单项数据变化时的回调
      * @en Callback when the form is submitted
@@ -115,6 +120,11 @@ export interface Callbacks {
      * @en Callback when the form item value changes
      */
     onValuesChange?: (changedValues: FieldValue, values: FieldValue) => void;
+    /**
+     * 表单项数据变化时的回调（仅用户操作表单时触发）
+     * @en Callback when the form item value changes (Only trigger when user operate form)
+     */
+    onChange?: (changedValues: FieldValue, values: FieldValue) => void;
     /**
      * 表单项数据变化时的回调
      * @en Callback when the form is submitted
@@ -134,6 +144,10 @@ export interface InternalHooks {
     registerField: (name: string, self: any) => () => void;
     setInitialValues: (values: FieldItem) => void;
     setCallbacks: (callbacks: Callbacks) => void;
+    getInitialValue: (fieldName: string) => FieldValue;
+    setInitialValue: (fieldName: string, values: FieldItem) => void;
+    innerSetFieldsValue: (values: FieldItem) => boolean;
+    innerSetFieldValue: (name: string, value: FieldValue) => boolean;
 }
 export interface IFormInstance {
     /**
@@ -183,6 +197,11 @@ export declare type InternalFormInstance = IFormInstance & {
      * @en Get internal methods
      */
     getInternalHooks: () => InternalHooks;
+    /**
+     * 注册表单组件
+     * @en Register Form Item component
+     */
+    registerField: (name: string, self: any) => () => void;
 };
 export interface FormRef {
     /**
@@ -371,3 +390,7 @@ export interface IFormItemInnerProps {
      */
     displayType?: FormInternalComponentType;
 }
+export declare enum ValueChangeType {
+    Update = 0,
+    Reset = 1
+}

package/umd/form/type.js

@@ -14,7 +14,7 @@
   "use strict";
 
   _exports.__esModule = true;
-  _exports.ValidateStatus = _exports.FormInternalComponentType = void 0;
+  _exports.ValueChangeType = _exports.ValidateStatus = _exports.FormInternalComponentType = void 0;
   // 注意：自动识别form关联组件的依据，请勿轻易改变代码结构
   // Notice: Automatically identify the basis of the associated component of the form, DO NOT change the code structure.
   var FormInternalComponentType;
@@ -46,4 +46,12 @@
     ValidateStatus["Validating"] = "validating";
     ValidateStatus["Success"] = "success";
   })(ValidateStatus || (_exports.ValidateStatus = ValidateStatus = {}));
+
+  var ValueChangeType;
+  _exports.ValueChangeType = ValueChangeType;
+
+  (function (ValueChangeType) {
+    ValueChangeType[ValueChangeType["Update"] = 0] = "Update";
+    ValueChangeType[ValueChangeType["Reset"] = 1] = "Reset";
+  })(ValueChangeType || (_exports.ValueChangeType = ValueChangeType = {}));
 });

package/umd/form/useForm.d.ts

@@ -1,18 +1,3 @@
-import { IFormInstance } from './type';
-export declare const defaultFormDataMethods: {
-    getFieldValue: (name: any) => any;
-    getFieldsValue: (_names: any) => {};
-    getFieldError: (_name: any) => never[];
-    setFieldValue: (_name: any, _value: any) => boolean;
-    setFieldsValue: (_values: any) => boolean;
-    registerField: (_name: any, _self: any) => () => void;
-    resetFields: any;
-    validateFields: any;
-    submit: any;
-    getInternalHooks: () => {
-        registerField: any;
-        setInitialValues: any;
-        setCallbacks: any;
-    };
-};
+import { IFormInstance, InternalFormInstance } from './type';
+export declare const defaultFormDataMethods: InternalFormInstance;
 export default function useForm(form?: IFormInstance): IFormInstance[];