@arco-design/mobile-react 2.36.0 → 2.36.2

package/cjs/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/cjs/form/type.js

@@ -1,7 +1,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;
@@ -32,4 +32,12 @@ exports.ValidateStatus = ValidateStatus;
   ValidateStatus["Warning"] = "warning";
   ValidateStatus["Validating"] = "validating";
   ValidateStatus["Success"] = "success";
-})(ValidateStatus || (exports.ValidateStatus = ValidateStatus = {}));
+})(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/cjs/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[];

package/cjs/form/useForm.js

@@ -12,6 +12,10 @@ var _react = require("react");
 
 var _es6Promise = require("es6-promise");
 
+var _type = require("./type");
+
+var _utils = require("./utils");
+
 /* eslint-disable no-console */
 var defaultFunc = function defaultFunc() {};
 
@@ -41,7 +45,11 @@ var defaultFormDataMethods = {
     return {
       registerField: defaultFunc,
       setInitialValues: defaultFunc,
-      setCallbacks: defaultFunc
+      setCallbacks: defaultFunc,
+      getInitialValue: defaultFunc,
+      setInitialValue: defaultFunc,
+      innerSetFieldsValue: defaultFunc,
+      innerSetFieldValue: defaultFunc
     };
   }
 }; // 在field的静态的状态下设置
@@ -56,42 +64,82 @@ var FormData = function FormData() {
   this._initialValues = {};
   this._callbacks = {};
 
-  this.setFieldsValue = function (values) {
+  this.commonSetFieldsValue = function (values, changeType) {
     var oldValues = Object.keys(values).reduce(function (acc, key) {
       var _extends2;
 
       return (0, _extends6.default)({}, acc, (_extends2 = {}, _extends2[key] = _this.getFieldValue(key), _extends2));
     }, {});
     _this._formData = (0, _extends6.default)({}, _this._formData, values);
+
+    _this.notifyField(values, oldValues, changeType);
+  };
+
+  this.setFieldsValue = function (values) {
+    _this.commonSetFieldsValue(values);
+
     var onValuesChange = _this._callbacks.onValuesChange;
-    onValuesChange && onValuesChange(values, _this._formData);
+    onValuesChange == null ? void 0 : onValuesChange(values, _this._formData);
+    return true;
+  };
 
-    _this.notifyField(values, oldValues);
+  this.innerSetFieldsValue = function (values, changeType) {
+    _this.commonSetFieldsValue(values, changeType);
 
+    var _this$_callbacks = _this._callbacks,
+        onValuesChange = _this$_callbacks.onValuesChange,
+        onChange = _this$_callbacks.onChange;
+    onValuesChange == null ? void 0 : onValuesChange(values, _this._formData);
+    onChange == null ? void 0 : onChange(values, _this._formData);
     return true;
   };
 
-  this.setFieldValue = function (name, value) {
-    var _oldValues, _extends3, _onValuesChange, _this$notifyField;
+  this.commonSetFieldValue = function (name, value, changeType) {
+    var _oldValues, _extends3, _this$notifyField;
 
     var oldValues = (_oldValues = {}, _oldValues[name] = _this.getFieldValue(name), _oldValues);
     _this._formData = (0, _extends6.default)({}, _this._formData, (_extends3 = {}, _extends3[name] = value, _extends3));
+
+    _this.notifyField((_this$notifyField = {}, _this$notifyField[name] = value, _this$notifyField), oldValues, changeType);
+  };
+
+  this.setFieldValue = function (name, value) {
+    var _onValuesChange;
+
+    _this.commonSetFieldValue(name, value);
+
     var onValuesChange = _this._callbacks.onValuesChange;
-    onValuesChange && onValuesChange((_onValuesChange = {}, _onValuesChange[name] = value, _onValuesChange), _this._formData);
+    onValuesChange && onValuesChange((_onValuesChange = {}, _onValuesChange[name] = value, _onValuesChange), _this.getFieldsValue());
+    return true;
+  };
 
-    _this.notifyField((_this$notifyField = {}, _this$notifyField[name] = value, _this$notifyField), oldValues);
+  this.innerSetFieldValue = function (name, value, changeType) {
+    var _onValuesChange2, _onChange;
 
+    _this.commonSetFieldValue(name, value, changeType);
+
+    var _this$_callbacks2 = _this._callbacks,
+        onValuesChange = _this$_callbacks2.onValuesChange,
+        onChange = _this$_callbacks2.onChange;
+    onValuesChange && onValuesChange((_onValuesChange2 = {}, _onValuesChange2[name] = value, _onValuesChange2), _this._formData);
+    onChange && onChange((_onChange = {}, _onChange[name] = value, _onChange), _this._formData);
     return true;
   };
 
-  this.notifyField = function (values, oldValues) {
+  this.notifyField = function (values, oldValues, changeType) {
+    if (changeType === void 0) {
+      changeType = _type.ValueChangeType.Update;
+    }
+
     Object.keys(values).map(function (fieldName) {
       var _this$_fieldsList;
 
       var fieldObj = ((_this$_fieldsList = _this._fieldsList) == null ? void 0 : _this$_fieldsList[fieldName]) || null;
 
       if (fieldObj) {
-        fieldObj.onValueChange(values[fieldName], oldValues[fieldName]);
+        fieldObj.onValueChange(values[fieldName], oldValues[fieldName], {
+          changeType: changeType
+        });
       }
     });
   };
@@ -103,13 +151,13 @@ var FormData = function FormData() {
       });
     }
 
-    return _this._formData;
+    return (0, _utils.deepClone)(_this._formData);
   };
 
   this.getFieldValue = function (name) {
     var _this$_formData;
 
-    return (_this$_formData = _this._formData) == null ? void 0 : _this$_formData[name];
+    return (0, _utils.deepClone)((_this$_formData = _this._formData) == null ? void 0 : _this$_formData[name]);
   };
 
   this.getFieldError = function (name) {
@@ -172,13 +220,42 @@ var FormData = function FormData() {
   };
 
   this.setInitialValues = function (initVal) {
-    _this._initialValues = (0, _extends6.default)({}, initVal || {});
+    _this._initialValues = (0, _utils.deepClone)(initVal || {});
 
     _this.setFieldsValue(initVal);
   };
 
+  this.setInitialValue = function (fieldName, value) {
+    if (!fieldName) {
+      return;
+    }
+
+    _this._initialValues[fieldName] = value;
+
+    _this.setFieldValue(fieldName, value);
+  };
+
+  this.getInitialValue = function (fieldName) {
+    return _this._initialValues[fieldName];
+  };
+
   this.resetFields = function () {
-    _this.setFieldsValue(_this._initialValues);
+    var oldValues = (0, _extends6.default)({}, _this._formData);
+    var initialValues = {};
+    Object.keys(_this._formData).forEach(function (fieldName) {
+      var _this$_fieldsList5;
+
+      var fieldObj = ((_this$_fieldsList5 = _this._fieldsList) == null ? void 0 : _this$_fieldsList5[fieldName]) || null;
+
+      if (fieldObj) {
+        initialValues[fieldName] = fieldObj.getInitialValue();
+      }
+    });
+    var onValuesChange = _this._callbacks.onValuesChange;
+    onValuesChange && onValuesChange(initialValues, _this._formData);
+    _this._formData = initialValues;
+
+    _this.notifyField(initialValues, oldValues, _type.ValueChangeType.Reset);
   };
 
   this.validateFields = function () {
@@ -210,7 +287,7 @@ var FormData = function FormData() {
   this.submit = function () {
     _this.validateFields().then(function (result) {
       var onSubmit = _this._callbacks.onSubmit;
-      onSubmit == null ? void 0 : onSubmit(_this._formData, result);
+      onSubmit == null ? void 0 : onSubmit(_this.getFieldsValue(), result);
     }).catch(function (e) {
       var onSubmitFailed = _this._callbacks.onSubmitFailed;
 
@@ -218,7 +295,7 @@ var FormData = function FormData() {
         return;
       }
 
-      onSubmitFailed(_this._formData, e);
+      onSubmitFailed(_this.getFieldsValue(), e);
     });
   };
 
@@ -247,7 +324,11 @@ var FormData = function FormData() {
     return {
       registerField: _this.registerField,
       setInitialValues: _this.setInitialValues,
-      setCallbacks: _this.setCallbacks
+      setCallbacks: _this.setCallbacks,
+      getInitialValue: _this.getInitialValue,
+      setInitialValue: _this.setInitialValue,
+      innerSetFieldsValue: _this.innerSetFieldsValue,
+      innerSetFieldValue: _this.innerSetFieldValue
     };
   };
 };

package/cjs/form/utils.d.ts

@@ -5,3 +5,5 @@ export declare const getErrorAndWarnings: (result: ValidatorError[]) => {
     errors: string[];
     errorTypes: string[];
 };
+export declare const getDefaultValueForInterComponent: (componentType: string) => 0 | never[] | null | undefined;
+export declare function deepClone(value: any): any;

package/cjs/form/utils.js

@@ -1,7 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports.isFieldRequired = exports.getErrorAndWarnings = void 0;
+exports.deepClone = deepClone;
+exports.isFieldRequired = exports.getErrorAndWarnings = exports.getDefaultValueForInterComponent = void 0;
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _cloneDeepWith = _interopRequireDefault(require("lodash/cloneDeepWith"));
+
+var _type = require("./type");
 
 var isFieldRequired = function isFieldRequired(rules) {
   if (rules === void 0) {
@@ -44,4 +53,35 @@ var getErrorAndWarnings = function getErrorAndWarnings(result) {
   };
 };
 
-exports.getErrorAndWarnings = getErrorAndWarnings;
+exports.getErrorAndWarnings = getErrorAndWarnings;
+
+var getDefaultValueForInterComponent = function getDefaultValueForInterComponent(componentType) {
+  switch (componentType) {
+    case _type.FormInternalComponentType.Input:
+    case _type.FormInternalComponentType.Textarea:
+      return undefined;
+
+    case _type.FormInternalComponentType.CheckboxGroup:
+      return [];
+
+    case _type.FormInternalComponentType.RadioGroup:
+      return null;
+
+    case _type.FormInternalComponentType.Slider:
+    case _type.FormInternalComponentType.Rate:
+      return 0;
+
+    default:
+      return undefined;
+  }
+};
+
+exports.getDefaultValueForInterComponent = getDefaultValueForInterComponent;
+
+function deepClone(value) {
+  return (0, _cloneDeepWith.default)(value, function (val) {
+    if (!(0, _mobileUtils.isObject)(val) && !(0, _mobileUtils.isArray)(val)) {
+      return val;
+    }
+  });
+}

package/cjs/input/index.js

@@ -60,7 +60,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   function renderInput(_ref) {
     var prefixCls = _ref.prefixCls;
     var prefix = prefixCls + "-input";
-    return renderWrapper(prefix, type, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, nativeProps, {
+    return renderWrapper(prefix, type + " single-line", /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, nativeProps, {
       id: id,
       name: name,
       maxLength: maxLength,

package/cjs/popover/hooks/usePosition.js

@@ -235,20 +235,38 @@ var usePosition = function usePosition(props, popoverRef, childRef, wrapperRef)
 
 
     if (verticalAuto) {
-      var popoverTop = childRect.bottom - (newConfig.bottom && newConfig.height ? newConfig.bottom + newConfig.height : 0);
-      var popoverBottom = childRect.top + (newConfig.top && newConfig.height ? newConfig.top + newConfig.height : 0); // 顶部安全距离不够，调整到底部
-      // @en The top safety distance is not enough, adjust to the bottom
-
-      if (directionState.indexOf('top') !== -1 && popoverTop < topOffset) {
+      var setToBottom = function setToBottom() {
         newConfig.top = verticalOffset + childRect.height;
         newConfig.bottom = null;
         onAdjustDirection('bottom');
-      } else if (directionState.indexOf('bottom') !== -1 && popoverBottom + bottomOffset > window.innerHeight) {
-        // 底部安全距离不够，调整到顶部
-        // @en The bottom safety distance is not enough, adjust to the top
+      };
+
+      var setToTop = function setToTop() {
         newConfig.top = null;
         newConfig.bottom = verticalOffset + childRect.height;
         onAdjustDirection('top');
+      }; // 判断上下空间是否都不足以展示气泡内容
+      // @en Determine whether there is insufficient space both above and below to display content
+
+
+      var isPopoverTooTall = window.innerHeight - topOffset - bottomOffset < 2 * (newConfig.height || 0) + 2 * verticalOffset + childRect.height;
+
+      if (isPopoverTooTall) {
+        var spaceAbove = childRect.top;
+        var spaceBelow = window.innerHeight - childRect.bottom;
+        spaceAbove > spaceBelow ? setToTop() : setToBottom();
+      } else {
+        var popoverTop = childRect.bottom - (newConfig.bottom && newConfig.height ? newConfig.bottom + newConfig.height : 0);
+        var popoverBottom = childRect.top + (newConfig.top && newConfig.height ? newConfig.top + newConfig.height : 0); // 顶部安全距离不够，调整到底部
+        // @en The top safety distance is not enough, adjust to the bottom
+
+        if (directionState.indexOf('top') !== -1 && popoverTop < topOffset) {
+          setToBottom();
+        } else if ( // 底部安全距离不够，调整到顶部
+        // @en The bottom safety distance is not enough, adjust to the top
+        directionState.indexOf('bottom') !== -1 && popoverBottom + bottomOffset > window.innerHeight) {
+          setToTop();
+        }
       }
     } // 挂载在全局的气泡需要计算相对屏幕的位置
     // @en Bubble mounted in the global needs to calculate the position relative to the screen

package/cjs/radio/group.js

@@ -90,7 +90,7 @@ function componentGenerator(Comp) {
           layout: layout,
           disabled: disabled,
           icons: icons,
-          value: groupValue === void 0 ? [] : [groupValue],
+          value: groupValue === void 0 || groupValue === null ? [] : [groupValue],
           onChange: handleChange
         }
       }, children, !children && options && options.map(function (option) {

package/cjs/radio/type.d.ts

@@ -8,10 +8,10 @@ export interface RadioGroupProps<T extends ValueType = ValueType, P extends Radi
      */
     options?: P[];
     /**
-     * 受控模式，选中的选项
+     * 受控模式，选中的选项，传null表示取消选中
      * @en Checked option, controlled mode
      */
-    value?: T;
+    value?: T | null;
     /**
      * 默认选中项
      * @en Default checked value