@arco-design/mobile-react 2.36.1 → 2.36.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/carousel/index.js +8 -7
  5. package/cjs/form/form-item.d.ts +33 -2
  6. package/cjs/form/form-item.js +142 -121
  7. package/cjs/form/index.js +3 -1
  8. package/cjs/form/linked-container.d.ts +1 -1
  9. package/cjs/form/linked-container.js +4 -0
  10. package/cjs/form/style/css/index.css +4 -1
  11. package/cjs/form/style/index.less +6 -1
  12. package/cjs/form/type.d.ts +24 -1
  13. package/cjs/form/type.js +10 -2
  14. package/cjs/form/useForm.d.ts +2 -17
  15. package/cjs/form/useForm.js +98 -17
  16. package/cjs/form/utils.d.ts +2 -0
  17. package/cjs/form/utils.js +42 -2
  18. package/cjs/input/index.js +1 -1
  19. package/cjs/radio/group.js +1 -1
  20. package/cjs/radio/type.d.ts +2 -2
  21. package/dist/index.js +2993 -362
  22. package/dist/index.min.js +4 -4
  23. package/dist/style.css +4 -1
  24. package/dist/style.min.css +1 -1
  25. package/esm/carousel/index.js +8 -7
  26. package/esm/form/form-item.d.ts +33 -2
  27. package/esm/form/form-item.js +143 -122
  28. package/esm/form/index.js +3 -1
  29. package/esm/form/linked-container.d.ts +1 -1
  30. package/esm/form/linked-container.js +4 -0
  31. package/esm/form/style/css/index.css +4 -1
  32. package/esm/form/style/index.less +6 -1
  33. package/esm/form/type.d.ts +24 -1
  34. package/esm/form/type.js +8 -1
  35. package/esm/form/useForm.d.ts +2 -17
  36. package/esm/form/useForm.js +97 -17
  37. package/esm/form/utils.d.ts +2 -0
  38. package/esm/form/utils.js +31 -1
  39. package/esm/input/index.js +1 -1
  40. package/esm/radio/group.js +1 -1
  41. package/esm/radio/type.d.ts +2 -2
  42. package/esnext/carousel/index.js +7 -5
  43. package/esnext/form/form-item.d.ts +33 -2
  44. package/esnext/form/form-item.js +85 -71
  45. package/esnext/form/index.js +2 -1
  46. package/esnext/form/linked-container.d.ts +1 -1
  47. package/esnext/form/linked-container.js +3 -0
  48. package/esnext/form/style/css/index.css +4 -1
  49. package/esnext/form/style/index.less +6 -1
  50. package/esnext/form/type.d.ts +24 -1
  51. package/esnext/form/type.js +7 -0
  52. package/esnext/form/useForm.d.ts +2 -17
  53. package/esnext/form/useForm.js +72 -13
  54. package/esnext/form/utils.d.ts +2 -0
  55. package/esnext/form/utils.js +26 -0
  56. package/esnext/input/index.js +1 -1
  57. package/esnext/radio/group.js +3 -1
  58. package/esnext/radio/type.d.ts +2 -2
  59. package/package.json +3 -3
  60. package/umd/carousel/index.js +8 -7
  61. package/umd/form/form-item.d.ts +33 -2
  62. package/umd/form/form-item.js +142 -121
  63. package/umd/form/index.js +3 -1
  64. package/umd/form/linked-container.d.ts +1 -1
  65. package/umd/form/linked-container.js +4 -0
  66. package/umd/form/style/css/index.css +4 -1
  67. package/umd/form/style/index.less +6 -1
  68. package/umd/form/type.d.ts +24 -1
  69. package/umd/form/type.js +9 -1
  70. package/umd/form/useForm.d.ts +2 -17
  71. package/umd/form/useForm.js +98 -21
  72. package/umd/form/utils.d.ts +2 -0
  73. package/umd/form/utils.js +40 -5
  74. package/umd/input/index.js +1 -1
  75. package/umd/radio/group.js +1 -1
  76. package/umd/radio/type.d.ts +2 -2
package/cjs/form/type.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
 
3
3
  exports.__esModule = true;
4
- exports.ValidateStatus = exports.FormInternalComponentType = void 0;
4
+ exports.ValueChangeType = exports.ValidateStatus = exports.FormInternalComponentType = void 0;
5
5
  // 注意:自动识别form关联组件的依据,请勿轻易改变代码结构
6
6
  // Notice: Automatically identify the basis of the associated component of the form, DO NOT change the code structure.
7
7
  var FormInternalComponentType;
@@ -32,4 +32,12 @@ exports.ValidateStatus = ValidateStatus;
32
32
  ValidateStatus["Warning"] = "warning";
33
33
  ValidateStatus["Validating"] = "validating";
34
34
  ValidateStatus["Success"] = "success";
35
- })(ValidateStatus || (exports.ValidateStatus = ValidateStatus = {}));
35
+ })(ValidateStatus || (exports.ValidateStatus = ValidateStatus = {}));
36
+
37
+ var ValueChangeType;
38
+ exports.ValueChangeType = ValueChangeType;
39
+
40
+ (function (ValueChangeType) {
41
+ ValueChangeType[ValueChangeType["Update"] = 0] = "Update";
42
+ ValueChangeType[ValueChangeType["Reset"] = 1] = "Reset";
43
+ })(ValueChangeType || (exports.ValueChangeType = ValueChangeType = {}));
@@ -1,18 +1,3 @@
1
- import { IFormInstance } from './type';
2
- export declare const defaultFormDataMethods: {
3
- getFieldValue: (name: any) => any;
4
- getFieldsValue: (_names: any) => {};
5
- getFieldError: (_name: any) => never[];
6
- setFieldValue: (_name: any, _value: any) => boolean;
7
- setFieldsValue: (_values: any) => boolean;
8
- registerField: (_name: any, _self: any) => () => void;
9
- resetFields: any;
10
- validateFields: any;
11
- submit: any;
12
- getInternalHooks: () => {
13
- registerField: any;
14
- setInitialValues: any;
15
- setCallbacks: any;
16
- };
17
- };
1
+ import { IFormInstance, InternalFormInstance } from './type';
2
+ export declare const defaultFormDataMethods: InternalFormInstance;
18
3
  export default function useForm(form?: IFormInstance): IFormInstance[];
@@ -12,6 +12,10 @@ var _react = require("react");
12
12
 
13
13
  var _es6Promise = require("es6-promise");
14
14
 
15
+ var _type = require("./type");
16
+
17
+ var _utils = require("./utils");
18
+
15
19
  /* eslint-disable no-console */
16
20
  var defaultFunc = function defaultFunc() {};
17
21
 
@@ -41,7 +45,11 @@ var defaultFormDataMethods = {
41
45
  return {
42
46
  registerField: defaultFunc,
43
47
  setInitialValues: defaultFunc,
44
- setCallbacks: defaultFunc
48
+ setCallbacks: defaultFunc,
49
+ getInitialValue: defaultFunc,
50
+ setInitialValue: defaultFunc,
51
+ innerSetFieldsValue: defaultFunc,
52
+ innerSetFieldValue: defaultFunc
45
53
  };
46
54
  }
47
55
  }; // 在field的静态的状态下设置
@@ -56,42 +64,82 @@ var FormData = function FormData() {
56
64
  this._initialValues = {};
57
65
  this._callbacks = {};
58
66
 
59
- this.setFieldsValue = function (values) {
67
+ this.commonSetFieldsValue = function (values, changeType) {
60
68
  var oldValues = Object.keys(values).reduce(function (acc, key) {
61
69
  var _extends2;
62
70
 
63
71
  return (0, _extends6.default)({}, acc, (_extends2 = {}, _extends2[key] = _this.getFieldValue(key), _extends2));
64
72
  }, {});
65
73
  _this._formData = (0, _extends6.default)({}, _this._formData, values);
74
+
75
+ _this.notifyField(values, oldValues, changeType);
76
+ };
77
+
78
+ this.setFieldsValue = function (values) {
79
+ _this.commonSetFieldsValue(values);
80
+
66
81
  var onValuesChange = _this._callbacks.onValuesChange;
67
- onValuesChange && onValuesChange(values, _this._formData);
82
+ onValuesChange == null ? void 0 : onValuesChange(values, _this._formData);
83
+ return true;
84
+ };
68
85
 
69
- _this.notifyField(values, oldValues);
86
+ this.innerSetFieldsValue = function (values, changeType) {
87
+ _this.commonSetFieldsValue(values, changeType);
70
88
 
89
+ var _this$_callbacks = _this._callbacks,
90
+ onValuesChange = _this$_callbacks.onValuesChange,
91
+ onChange = _this$_callbacks.onChange;
92
+ onValuesChange == null ? void 0 : onValuesChange(values, _this._formData);
93
+ onChange == null ? void 0 : onChange(values, _this._formData);
71
94
  return true;
72
95
  };
73
96
 
74
- this.setFieldValue = function (name, value) {
75
- var _oldValues, _extends3, _onValuesChange, _this$notifyField;
97
+ this.commonSetFieldValue = function (name, value, changeType) {
98
+ var _oldValues, _extends3, _this$notifyField;
76
99
 
77
100
  var oldValues = (_oldValues = {}, _oldValues[name] = _this.getFieldValue(name), _oldValues);
78
101
  _this._formData = (0, _extends6.default)({}, _this._formData, (_extends3 = {}, _extends3[name] = value, _extends3));
102
+
103
+ _this.notifyField((_this$notifyField = {}, _this$notifyField[name] = value, _this$notifyField), oldValues, changeType);
104
+ };
105
+
106
+ this.setFieldValue = function (name, value) {
107
+ var _onValuesChange;
108
+
109
+ _this.commonSetFieldValue(name, value);
110
+
79
111
  var onValuesChange = _this._callbacks.onValuesChange;
80
- onValuesChange && onValuesChange((_onValuesChange = {}, _onValuesChange[name] = value, _onValuesChange), _this._formData);
112
+ onValuesChange && onValuesChange((_onValuesChange = {}, _onValuesChange[name] = value, _onValuesChange), _this.getFieldsValue());
113
+ return true;
114
+ };
81
115
 
82
- _this.notifyField((_this$notifyField = {}, _this$notifyField[name] = value, _this$notifyField), oldValues);
116
+ this.innerSetFieldValue = function (name, value, changeType) {
117
+ var _onValuesChange2, _onChange;
83
118
 
119
+ _this.commonSetFieldValue(name, value, changeType);
120
+
121
+ var _this$_callbacks2 = _this._callbacks,
122
+ onValuesChange = _this$_callbacks2.onValuesChange,
123
+ onChange = _this$_callbacks2.onChange;
124
+ onValuesChange && onValuesChange((_onValuesChange2 = {}, _onValuesChange2[name] = value, _onValuesChange2), _this._formData);
125
+ onChange && onChange((_onChange = {}, _onChange[name] = value, _onChange), _this._formData);
84
126
  return true;
85
127
  };
86
128
 
87
- this.notifyField = function (values, oldValues) {
129
+ this.notifyField = function (values, oldValues, changeType) {
130
+ if (changeType === void 0) {
131
+ changeType = _type.ValueChangeType.Update;
132
+ }
133
+
88
134
  Object.keys(values).map(function (fieldName) {
89
135
  var _this$_fieldsList;
90
136
 
91
137
  var fieldObj = ((_this$_fieldsList = _this._fieldsList) == null ? void 0 : _this$_fieldsList[fieldName]) || null;
92
138
 
93
139
  if (fieldObj) {
94
- fieldObj.onValueChange(values[fieldName], oldValues[fieldName]);
140
+ fieldObj.onValueChange(values[fieldName], oldValues[fieldName], {
141
+ changeType: changeType
142
+ });
95
143
  }
96
144
  });
97
145
  };
@@ -103,13 +151,13 @@ var FormData = function FormData() {
103
151
  });
104
152
  }
105
153
 
106
- return _this._formData;
154
+ return (0, _utils.deepClone)(_this._formData);
107
155
  };
108
156
 
109
157
  this.getFieldValue = function (name) {
110
158
  var _this$_formData;
111
159
 
112
- return (_this$_formData = _this._formData) == null ? void 0 : _this$_formData[name];
160
+ return (0, _utils.deepClone)((_this$_formData = _this._formData) == null ? void 0 : _this$_formData[name]);
113
161
  };
114
162
 
115
163
  this.getFieldError = function (name) {
@@ -172,13 +220,42 @@ var FormData = function FormData() {
172
220
  };
173
221
 
174
222
  this.setInitialValues = function (initVal) {
175
- _this._initialValues = (0, _extends6.default)({}, initVal || {});
223
+ _this._initialValues = (0, _utils.deepClone)(initVal || {});
176
224
 
177
225
  _this.setFieldsValue(initVal);
178
226
  };
179
227
 
228
+ this.setInitialValue = function (fieldName, value) {
229
+ if (!fieldName) {
230
+ return;
231
+ }
232
+
233
+ _this._initialValues[fieldName] = value;
234
+
235
+ _this.setFieldValue(fieldName, value);
236
+ };
237
+
238
+ this.getInitialValue = function (fieldName) {
239
+ return _this._initialValues[fieldName];
240
+ };
241
+
180
242
  this.resetFields = function () {
181
- _this.setFieldsValue(_this._initialValues);
243
+ var oldValues = (0, _extends6.default)({}, _this._formData);
244
+ var initialValues = {};
245
+ Object.keys(_this._formData).forEach(function (fieldName) {
246
+ var _this$_fieldsList5;
247
+
248
+ var fieldObj = ((_this$_fieldsList5 = _this._fieldsList) == null ? void 0 : _this$_fieldsList5[fieldName]) || null;
249
+
250
+ if (fieldObj) {
251
+ initialValues[fieldName] = fieldObj.getInitialValue();
252
+ }
253
+ });
254
+ var onValuesChange = _this._callbacks.onValuesChange;
255
+ onValuesChange && onValuesChange(initialValues, _this._formData);
256
+ _this._formData = initialValues;
257
+
258
+ _this.notifyField(initialValues, oldValues, _type.ValueChangeType.Reset);
182
259
  };
183
260
 
184
261
  this.validateFields = function () {
@@ -210,7 +287,7 @@ var FormData = function FormData() {
210
287
  this.submit = function () {
211
288
  _this.validateFields().then(function (result) {
212
289
  var onSubmit = _this._callbacks.onSubmit;
213
- onSubmit == null ? void 0 : onSubmit(_this._formData, result);
290
+ onSubmit == null ? void 0 : onSubmit(_this.getFieldsValue(), result);
214
291
  }).catch(function (e) {
215
292
  var onSubmitFailed = _this._callbacks.onSubmitFailed;
216
293
 
@@ -218,7 +295,7 @@ var FormData = function FormData() {
218
295
  return;
219
296
  }
220
297
 
221
- onSubmitFailed(_this._formData, e);
298
+ onSubmitFailed(_this.getFieldsValue(), e);
222
299
  });
223
300
  };
224
301
 
@@ -247,7 +324,11 @@ var FormData = function FormData() {
247
324
  return {
248
325
  registerField: _this.registerField,
249
326
  setInitialValues: _this.setInitialValues,
250
- setCallbacks: _this.setCallbacks
327
+ setCallbacks: _this.setCallbacks,
328
+ getInitialValue: _this.getInitialValue,
329
+ setInitialValue: _this.setInitialValue,
330
+ innerSetFieldsValue: _this.innerSetFieldsValue,
331
+ innerSetFieldValue: _this.innerSetFieldValue
251
332
  };
252
333
  };
253
334
  };
@@ -5,3 +5,5 @@ export declare const getErrorAndWarnings: (result: ValidatorError[]) => {
5
5
  errors: string[];
6
6
  errorTypes: string[];
7
7
  };
8
+ export declare const getDefaultValueForInterComponent: (componentType: string) => 0 | never[] | null | undefined;
9
+ export declare function deepClone(value: any): any;
package/cjs/form/utils.js CHANGED
@@ -1,7 +1,16 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
3
5
  exports.__esModule = true;
4
- exports.isFieldRequired = exports.getErrorAndWarnings = void 0;
6
+ exports.deepClone = deepClone;
7
+ exports.isFieldRequired = exports.getErrorAndWarnings = exports.getDefaultValueForInterComponent = void 0;
8
+
9
+ var _mobileUtils = require("@arco-design/mobile-utils");
10
+
11
+ var _cloneDeepWith = _interopRequireDefault(require("lodash/cloneDeepWith"));
12
+
13
+ var _type = require("./type");
5
14
 
6
15
  var isFieldRequired = function isFieldRequired(rules) {
7
16
  if (rules === void 0) {
@@ -44,4 +53,35 @@ var getErrorAndWarnings = function getErrorAndWarnings(result) {
44
53
  };
45
54
  };
46
55
 
47
- exports.getErrorAndWarnings = getErrorAndWarnings;
56
+ exports.getErrorAndWarnings = getErrorAndWarnings;
57
+
58
+ var getDefaultValueForInterComponent = function getDefaultValueForInterComponent(componentType) {
59
+ switch (componentType) {
60
+ case _type.FormInternalComponentType.Input:
61
+ case _type.FormInternalComponentType.Textarea:
62
+ return undefined;
63
+
64
+ case _type.FormInternalComponentType.CheckboxGroup:
65
+ return [];
66
+
67
+ case _type.FormInternalComponentType.RadioGroup:
68
+ return null;
69
+
70
+ case _type.FormInternalComponentType.Slider:
71
+ case _type.FormInternalComponentType.Rate:
72
+ return 0;
73
+
74
+ default:
75
+ return undefined;
76
+ }
77
+ };
78
+
79
+ exports.getDefaultValueForInterComponent = getDefaultValueForInterComponent;
80
+
81
+ function deepClone(value) {
82
+ return (0, _cloneDeepWith.default)(value, function (val) {
83
+ if (!(0, _mobileUtils.isObject)(val) && !(0, _mobileUtils.isArray)(val)) {
84
+ return val;
85
+ }
86
+ });
87
+ }
@@ -60,7 +60,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
60
60
  function renderInput(_ref) {
61
61
  var prefixCls = _ref.prefixCls;
62
62
  var prefix = prefixCls + "-input";
63
- return renderWrapper(prefix, type, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, nativeProps, {
63
+ return renderWrapper(prefix, type + " single-line", /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, nativeProps, {
64
64
  id: id,
65
65
  name: name,
66
66
  maxLength: maxLength,
@@ -90,7 +90,7 @@ function componentGenerator(Comp) {
90
90
  layout: layout,
91
91
  disabled: disabled,
92
92
  icons: icons,
93
- value: groupValue === void 0 ? [] : [groupValue],
93
+ value: groupValue === void 0 || groupValue === null ? [] : [groupValue],
94
94
  onChange: handleChange
95
95
  }
96
96
  }, children, !children && options && options.map(function (option) {
@@ -8,10 +8,10 @@ export interface RadioGroupProps<T extends ValueType = ValueType, P extends Radi
8
8
  */
9
9
  options?: P[];
10
10
  /**
11
- * 受控模式,选中的选项
11
+ * 受控模式,选中的选项,传null表示取消选中
12
12
  * @en Checked option, controlled mode
13
13
  */
14
- value?: T;
14
+ value?: T | null;
15
15
  /**
16
16
  * 默认选中项
17
17
  * @en Default checked value