@arco-design/mobile-react 2.36.0 → 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 (84) hide show
  1. package/CHANGELOG.md +24 -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/ellipsis/components/js-ellipsis.js +3 -1
  6. package/cjs/form/form-item.d.ts +33 -2
  7. package/cjs/form/form-item.js +142 -121
  8. package/cjs/form/index.js +3 -1
  9. package/cjs/form/linked-container.d.ts +1 -1
  10. package/cjs/form/linked-container.js +4 -0
  11. package/cjs/form/style/css/index.css +4 -1
  12. package/cjs/form/style/index.less +6 -1
  13. package/cjs/form/type.d.ts +24 -1
  14. package/cjs/form/type.js +10 -2
  15. package/cjs/form/useForm.d.ts +2 -17
  16. package/cjs/form/useForm.js +98 -17
  17. package/cjs/form/utils.d.ts +2 -0
  18. package/cjs/form/utils.js +42 -2
  19. package/cjs/input/index.js +1 -1
  20. package/cjs/popover/hooks/usePosition.js +26 -8
  21. package/cjs/radio/group.js +1 -1
  22. package/cjs/radio/type.d.ts +2 -2
  23. package/dist/index.js +3021 -370
  24. package/dist/index.min.js +4 -4
  25. package/dist/style.css +4 -1
  26. package/dist/style.min.css +1 -1
  27. package/esm/carousel/index.js +8 -7
  28. package/esm/ellipsis/components/js-ellipsis.js +3 -1
  29. package/esm/form/form-item.d.ts +33 -2
  30. package/esm/form/form-item.js +143 -122
  31. package/esm/form/index.js +3 -1
  32. package/esm/form/linked-container.d.ts +1 -1
  33. package/esm/form/linked-container.js +4 -0
  34. package/esm/form/style/css/index.css +4 -1
  35. package/esm/form/style/index.less +6 -1
  36. package/esm/form/type.d.ts +24 -1
  37. package/esm/form/type.js +8 -1
  38. package/esm/form/useForm.d.ts +2 -17
  39. package/esm/form/useForm.js +97 -17
  40. package/esm/form/utils.d.ts +2 -0
  41. package/esm/form/utils.js +31 -1
  42. package/esm/input/index.js +1 -1
  43. package/esm/popover/hooks/usePosition.js +26 -8
  44. package/esm/radio/group.js +1 -1
  45. package/esm/radio/type.d.ts +2 -2
  46. package/esnext/carousel/index.js +7 -5
  47. package/esnext/ellipsis/components/js-ellipsis.js +2 -0
  48. package/esnext/form/form-item.d.ts +33 -2
  49. package/esnext/form/form-item.js +85 -71
  50. package/esnext/form/index.js +2 -1
  51. package/esnext/form/linked-container.d.ts +1 -1
  52. package/esnext/form/linked-container.js +3 -0
  53. package/esnext/form/style/css/index.css +4 -1
  54. package/esnext/form/style/index.less +6 -1
  55. package/esnext/form/type.d.ts +24 -1
  56. package/esnext/form/type.js +7 -0
  57. package/esnext/form/useForm.d.ts +2 -17
  58. package/esnext/form/useForm.js +72 -13
  59. package/esnext/form/utils.d.ts +2 -0
  60. package/esnext/form/utils.js +26 -0
  61. package/esnext/input/index.js +1 -1
  62. package/esnext/popover/hooks/usePosition.js +32 -12
  63. package/esnext/radio/group.js +3 -1
  64. package/esnext/radio/type.d.ts +2 -2
  65. package/package.json +3 -3
  66. package/umd/carousel/index.js +8 -7
  67. package/umd/ellipsis/components/js-ellipsis.js +3 -1
  68. package/umd/form/form-item.d.ts +33 -2
  69. package/umd/form/form-item.js +142 -121
  70. package/umd/form/index.js +3 -1
  71. package/umd/form/linked-container.d.ts +1 -1
  72. package/umd/form/linked-container.js +4 -0
  73. package/umd/form/style/css/index.css +4 -1
  74. package/umd/form/style/index.less +6 -1
  75. package/umd/form/type.d.ts +24 -1
  76. package/umd/form/type.js +9 -1
  77. package/umd/form/useForm.d.ts +2 -17
  78. package/umd/form/useForm.js +98 -21
  79. package/umd/form/utils.d.ts +2 -0
  80. package/umd/form/utils.js +40 -5
  81. package/umd/input/index.js +1 -1
  82. package/umd/popover/hooks/usePosition.js +26 -8
  83. package/umd/radio/group.js +1 -1
  84. package/umd/radio/type.d.ts +2 -2
@@ -684,12 +684,6 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
684
684
 
685
685
  stopPropagation && e.stopPropagation();
686
686
 
687
- if (bouncingRef.current) {
688
- bouncingRef.current = false;
689
- jumpTo(index, false);
690
- return;
691
- }
692
-
693
687
  if (!touchStartedRef.current) {
694
688
  return;
695
689
  }
@@ -701,7 +695,14 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
701
695
  return;
702
696
  }
703
697
 
704
- touchMovedRef.current = false;
698
+ touchMovedRef.current = false; // bugfix: 回弹判断逻辑需在touchMovedRef标识重置逻辑之后,否则会在触发回弹后导致标识无法重置引起滑动判断问题
699
+ // @en bugfix: The logic for the bounce judgment needs to be after the touchMovedRef reset logic, otherwise it will cause the problem of slide judgment after the bounce is triggered.
700
+
701
+ if (bouncingRef.current) {
702
+ bouncingRef.current = false;
703
+ jumpTo(index, false);
704
+ return;
705
+ }
705
706
 
706
707
  if (posAdjustingRef.current || touchStoppedRef.current) {
707
708
  return;
@@ -68,9 +68,11 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
68
68
  currentText += temp;
69
69
  l = m;
70
70
  }
71
- } // Remove the exclude char at the end of the content.
71
+ } // Remove the last character if it is orphaned high-surrogate characters (indicative of incomplete emoji).
72
72
 
73
73
 
74
+ currentText = currentText.replace(/[\uD800-\uDBFF]+$/, ''); // Remove the exclude char at the end of the content.
75
+
74
76
  while (endExcludes && endExcludes.includes(currentText[currentText.length - 1])) {
75
77
  currentText = currentText.slice(0, -1);
76
78
  } // Callback after reflow.
@@ -1,4 +1,35 @@
1
- import React from 'react';
2
- import { FormItemProps, FormItemRef } from './type';
1
+ import React, { PureComponent, ReactNode } from 'react';
2
+ import { Promise } from 'es6-promise';
3
+ import { FormItemContext } from './form-item-context';
4
+ import { IFieldError, FieldValue, IFormItemInnerProps, FormItemProps, ValidateStatus, FormItemRef, ValueChangeType, IFormItemContext } from './type';
5
+ interface IFormItemInnerState {
6
+ validateStatus: ValidateStatus;
7
+ errors?: ReactNode[];
8
+ _touched: boolean;
9
+ }
10
+ declare class FormItemInner extends PureComponent<IFormItemInnerProps, IFormItemInnerState> {
11
+ context: React.ContextType<typeof FormItemContext>;
12
+ destroyField: () => void;
13
+ private _errors;
14
+ private _touched;
15
+ constructor(props: IFormItemInnerProps, context: IFormItemContext);
16
+ componentDidMount(): void;
17
+ componentWillUnmount(): void;
18
+ onValueChange: (curValue: FieldValue, preValue: any, info?: {
19
+ changeType: ValueChangeType;
20
+ } | undefined) => void;
21
+ getInitialValue: () => any;
22
+ getFieldError: () => React.ReactNode[];
23
+ isFieldTouched: () => boolean;
24
+ getAllRuleValidateTriggers: () => string[];
25
+ validateField: (validateTrigger?: string | undefined) => Promise<IFieldError>;
26
+ setFieldData: (value: FieldValue) => void;
27
+ innerTriggerFunctionWithValueFirst: (value: any, ...args: any[]) => void;
28
+ innerOnInputFunction: (_: any, value: any, ...args: any[]) => void;
29
+ innerClearFunction: (...args: any[]) => void;
30
+ renderChildren(): React.FunctionComponentElement<any>;
31
+ render(): React.FunctionComponentElement<any>;
32
+ }
33
+ export { FormItemInner };
3
34
  declare const _default: React.ForwardRefExoticComponent<FormItemProps & React.RefAttributes<FormItemRef>>;
4
35
  export default _default;
@@ -9,8 +9,8 @@ import { cls, Validator, ValidatorType } from '@arco-design/mobile-utils';
9
9
  import { Promise } from 'es6-promise';
10
10
  import { FormItemContext } from './form-item-context';
11
11
  import { GlobalContext } from '../context-provider';
12
- import { FormInternalComponentType } from './type';
13
- import { getErrorAndWarnings, isFieldRequired } from './utils';
12
+ import { FormInternalComponentType, ValueChangeType } from './type';
13
+ import { getDefaultValueForInterComponent, getErrorAndWarnings, isFieldRequired } from './utils';
14
14
  import { DefaultDatePickerLinkedContainer, DefaultPickerLinkedContainer } from './linked-container';
15
15
 
16
16
  var FormItemInner = /*#__PURE__*/function (_PureComponent) {
@@ -26,7 +26,7 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
26
26
  _this._errors = [];
27
27
  _this._touched = false;
28
28
 
29
- _this.onValueChange = function (curValue, preValue) {
29
+ _this.onValueChange = function (curValue, preValue, info) {
30
30
  _this._touched = true;
31
31
  var shouldUpdate = _this.props.shouldUpdate;
32
32
 
@@ -38,9 +38,34 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
38
38
  return;
39
39
  }
40
40
 
41
+ if ((info == null ? void 0 : info.changeType) === ValueChangeType.Reset) {
42
+ _this.props.onValidateStatusChange({
43
+ errors: [],
44
+ warnings: [],
45
+ errorTypes: []
46
+ });
47
+
48
+ _this._errors = [];
49
+ }
50
+
41
51
  _this.forceUpdate();
42
52
  };
43
53
 
54
+ _this.getInitialValue = function () {
55
+ var _children$type, _getInitialValue;
56
+
57
+ var _this$props = _this.props,
58
+ children = _this$props.children,
59
+ displayType = _this$props.displayType;
60
+
61
+ var _this$context$form$ge = _this.context.form.getInternalHooks(),
62
+ getInitialValue = _this$context$form$ge.getInitialValue;
63
+
64
+ var childrenType = displayType || ((_children$type = children.type) == null ? void 0 : _children$type.displayName); // get user-defined initialValue or if not defined
65
+
66
+ return (_getInitialValue = getInitialValue(_this.props.field)) != null ? _getInitialValue : getDefaultValueForInterComponent(childrenType);
67
+ };
68
+
44
69
  _this.getFieldError = function () {
45
70
  return _this._errors;
46
71
  };
@@ -49,21 +74,37 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
49
74
  return _this._touched;
50
75
  };
51
76
 
52
- _this.validateField = function () {
77
+ _this.getAllRuleValidateTriggers = function () {
78
+ var _this$props$rules;
79
+
80
+ return ((_this$props$rules = _this.props.rules) == null ? void 0 : _this$props$rules.map(function (rule) {
81
+ return rule.validateTrigger;
82
+ }).flat().filter(function (v) {
83
+ return !!v;
84
+ })) || [];
85
+ };
86
+
87
+ _this.validateField = function (validateTrigger) {
53
88
  var validateMessages = _this.context.validateMessages;
54
89
  var getFieldValue = _this.context.form.getFieldValue;
55
- var _this$props = _this.props,
56
- field = _this$props.field,
57
- rules = _this$props.rules,
58
- onValidateStatusChange = _this$props.onValidateStatusChange;
59
- var value = getFieldValue(field);
60
-
61
- if (rules != null && rules.length && field) {
90
+ var _this$props2 = _this.props,
91
+ field = _this$props2.field,
92
+ rules = _this$props2.rules,
93
+ onValidateStatusChange = _this$props2.onValidateStatusChange;
94
+ var value = getFieldValue(field); // rules: if validateTrigger is not defined, all rules will be validated
95
+ // if validateTrigger is defined, only rules with validateTrigger or without rule.validateTrigger will be validated
96
+
97
+ var curRules = validateTrigger ? rules == null ? void 0 : rules.filter(function (rule) {
98
+ var triggerList = [].concat(rule.validateTrigger || validateTrigger);
99
+ return triggerList.includes(validateTrigger);
100
+ }) : rules;
101
+
102
+ if (curRules != null && curRules.length && field) {
62
103
  var _Validator;
63
104
 
64
105
  var fieldDom = _this.props.getFormItemRef();
65
106
 
66
- var fieldValidator = new Validator((_Validator = {}, _Validator[field] = rules, _Validator), {
107
+ var fieldValidator = new Validator((_Validator = {}, _Validator[field] = curRules, _Validator), {
67
108
  validateMessages: validateMessages
68
109
  });
69
110
  return new Promise(function (resolve) {
@@ -102,82 +143,79 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
102
143
  };
103
144
 
104
145
  _this.setFieldData = function (value) {
105
- var field = _this.props.field;
106
- var setFieldValue = _this.context.form.setFieldValue;
107
- setFieldValue(field, value);
146
+ var _this$props3 = _this.props,
147
+ field = _this$props3.field,
148
+ _this$props3$trigger = _this$props3.trigger,
149
+ trigger = _this$props3$trigger === void 0 ? 'onChange' : _this$props3$trigger;
150
+
151
+ var _this$context$form$ge2 = _this.context.form.getInternalHooks(),
152
+ innerSetFieldValue = _this$context$form$ge2.innerSetFieldValue;
108
153
 
109
- _this.validateField();
154
+ innerSetFieldValue(field, value);
155
+
156
+ _this.validateField(trigger);
110
157
  };
111
158
 
112
- _this.innerTriggerFunction = function (_, value) {
159
+ _this.innerTriggerFunctionWithValueFirst = function (value) {
113
160
  var _children$props;
114
161
 
115
162
  _this.setFieldData(value);
116
163
 
117
- var _this$props2 = _this.props,
118
- children = _this$props2.children,
119
- _this$props2$trigger = _this$props2.trigger,
120
- trigger = _this$props2$trigger === void 0 ? 'onChange' : _this$props2$trigger;
164
+ var _this$props4 = _this.props,
165
+ children = _this$props4.children,
166
+ _this$props4$trigger = _this$props4.trigger,
167
+ trigger = _this$props4$trigger === void 0 ? 'onChange' : _this$props4$trigger;
121
168
 
122
169
  if (trigger && (_children$props = children.props) != null && _children$props[trigger]) {
123
170
  var _children$props2;
124
171
 
125
- for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
126
- args[_key - 2] = arguments[_key];
172
+ for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
173
+ args[_key - 1] = arguments[_key];
127
174
  }
128
175
 
129
- (_children$props2 = children.props) == null ? void 0 : _children$props2[trigger].apply(_children$props2, [_, value].concat(args));
176
+ (_children$props2 = children.props) == null ? void 0 : _children$props2[trigger].apply(_children$props2, [value].concat(args));
130
177
  }
131
178
  };
132
179
 
133
- _this.innerTriggerFunctionWithValueFirst = function (value) {
180
+ _this.innerOnInputFunction = function (_, value) {
134
181
  var _children$props3;
135
182
 
136
183
  _this.setFieldData(value);
137
184
 
138
- var _this$props3 = _this.props,
139
- children = _this$props3.children,
140
- _this$props3$trigger = _this$props3.trigger,
141
- trigger = _this$props3$trigger === void 0 ? 'onChange' : _this$props3$trigger;
142
-
143
- if (trigger && (_children$props3 = children.props) != null && _children$props3[trigger]) {
144
- var _children$props4;
145
-
146
- for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
147
- args[_key2 - 1] = arguments[_key2];
148
- }
185
+ var children = _this.props.children;
149
186
 
150
- (_children$props4 = children.props) == null ? void 0 : _children$props4[trigger].apply(_children$props4, [value].concat(args));
187
+ for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
188
+ args[_key2 - 2] = arguments[_key2];
151
189
  }
190
+
191
+ (_children$props3 = children.props) == null ? void 0 : _children$props3.onInput == null ? void 0 : _children$props3.onInput.apply(_children$props3, [_, value].concat(args));
152
192
  };
153
193
 
154
194
  _this.innerClearFunction = function () {
155
- var _children$props5;
195
+ var _children$props4;
156
196
 
157
197
  var children = _this.props.children;
158
198
 
159
199
  _this.setFieldData('');
160
200
 
161
- if ((_children$props5 = children.props) != null && _children$props5.onClear) {
162
- var _children$props6;
201
+ if ((_children$props4 = children.props) != null && _children$props4.onClear) {
202
+ var _children$props5;
163
203
 
164
204
  for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
165
205
  args[_key3] = arguments[_key3];
166
206
  }
167
207
 
168
- (_children$props6 = children.props) == null ? void 0 : _children$props6.onClear.apply(_children$props6, args);
208
+ (_children$props5 = children.props) == null ? void 0 : _children$props5.onClear.apply(_children$props5, args);
169
209
  }
170
210
  };
171
211
 
172
212
  _this.destroyField = function () {};
173
213
 
174
214
  if (props != null && props.initialValue && props.field) {
175
- var _setInitialValues;
176
-
177
215
  var _context$form$getInte = context.form.getInternalHooks(),
178
- setInitialValues = _context$form$getInte.setInitialValues;
216
+ setInitialValue = _context$form$getInte.setInitialValue;
179
217
 
180
- setInitialValues((_setInitialValues = {}, _setInitialValues[props.field] = props.initialValue, _setInitialValues));
218
+ setInitialValue(props.field, props.initialValue);
181
219
  }
182
220
 
183
221
  return _this;
@@ -186,8 +224,8 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
186
224
  var _proto = FormItemInner.prototype;
187
225
 
188
226
  _proto.componentDidMount = function componentDidMount() {
189
- var _this$context$form$ge = this.context.form.getInternalHooks(),
190
- registerField = _this$context$form$ge.registerField;
227
+ var _this$context$form$ge3 = this.context.form.getInternalHooks(),
228
+ registerField = _this$context$form$ge3.registerField;
191
229
 
192
230
  this.destroyField = registerField(this.props.field, this);
193
231
  };
@@ -197,108 +235,90 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
197
235
  };
198
236
 
199
237
  _proto.renderChildren = function renderChildren() {
200
- var _props,
201
- _children$type,
238
+ var _this2 = this,
239
+ _children$type2,
202
240
  _children$props7,
203
- _children$props8,
204
- _this2 = this;
205
-
206
- var _this$props4 = this.props,
207
- children = _this$props4.children,
208
- field = _this$props4.field,
209
- _this$props4$trigger = _this$props4.trigger,
210
- trigger = _this$props4$trigger === void 0 ? 'onChange' : _this$props4$trigger,
211
- _this$props4$triggerP = _this$props4.triggerPropsField,
212
- triggerPropsField = _this$props4$triggerP === void 0 ? 'value' : _this$props4$triggerP,
213
- displayType = _this$props4.displayType;
241
+ _children$props8;
242
+
243
+ var _this$props5 = this.props,
244
+ children = _this$props5.children,
245
+ field = _this$props5.field,
246
+ _this$props5$trigger = _this$props5.trigger,
247
+ trigger = _this$props5$trigger === void 0 ? 'onChange' : _this$props5$trigger,
248
+ _this$props5$triggerP = _this$props5.triggerPropsField,
249
+ triggerPropsField = _this$props5$triggerP === void 0 ? 'value' : _this$props5$triggerP,
250
+ displayType = _this$props5.displayType,
251
+ disabled = _this$props5.disabled;
214
252
  var getFieldValue = this.context.form.getFieldValue;
215
- var props = (_props = {}, _props[triggerPropsField] = getFieldValue(field), _props.disabled = this.props.disabled, _props);
216
- var childrenType = displayType || ((_children$type = children.type) == null ? void 0 : _children$type.displayName);
253
+ var childrenProps = {
254
+ disabled: disabled
255
+ }; // inject validateTriggers of rules
256
+
257
+ this.getAllRuleValidateTriggers().forEach(function (triggerName) {
258
+ childrenProps[triggerName] = function (e) {
259
+ var _children$props6, _children$props6$trig;
260
+
261
+ _this2.validateField(triggerName);
262
+
263
+ 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);
264
+ };
265
+ });
266
+ var childrenType = displayType || ((_children$type2 = children.type) == null ? void 0 : _children$type2.displayName);
217
267
 
218
268
  switch (childrenType) {
219
269
  case FormInternalComponentType.Input:
220
270
  case FormInternalComponentType.Textarea:
221
- props = {
222
- value: getFieldValue(field) || '',
223
- onInput: this.innerTriggerFunction,
224
- onClear: this.innerClearFunction,
225
- disabled: this.props.disabled
226
- };
227
- break;
228
-
229
- case FormInternalComponentType.Checkbox:
230
- case FormInternalComponentType.Radio:
231
- case FormInternalComponentType.Slider:
232
- case FormInternalComponentType.RadioGroup:
233
- case FormInternalComponentType.CheckboxGroup:
234
- props = {
235
- value: getFieldValue(field),
236
- onChange: this.innerTriggerFunctionWithValueFirst,
237
- disabled: this.props.disabled
238
- };
271
+ childrenProps.value = getFieldValue(field) || '';
272
+ childrenProps.onInput = this.innerOnInputFunction;
273
+ childrenProps.onClear = this.innerClearFunction;
239
274
  break;
240
275
 
241
276
  case FormInternalComponentType.DatePicker:
242
- props = {
243
- currentTs: getFieldValue(field),
244
- onChange: this.innerTriggerFunctionWithValueFirst,
245
- disabled: this.props.disabled,
246
- renderLinkedContainer: ((_children$props7 = children.props) == null ? void 0 : _children$props7.renderLinkedContainer) || function (ts, types) {
247
- return /*#__PURE__*/React.createElement(DefaultDatePickerLinkedContainer, {
248
- ts: ts,
249
- types: types
250
- });
251
- }
277
+ childrenProps.currentTs = getFieldValue(field);
278
+ childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
279
+
280
+ childrenProps.renderLinkedContainer = ((_children$props7 = children.props) == null ? void 0 : _children$props7.renderLinkedContainer) || function (ts, types) {
281
+ return /*#__PURE__*/React.createElement(DefaultDatePickerLinkedContainer, {
282
+ ts: ts,
283
+ types: types
284
+ });
252
285
  };
286
+
253
287
  break;
254
288
 
255
289
  case FormInternalComponentType.Picker:
256
- props = {
257
- value: getFieldValue(field),
258
- onChange: this.innerTriggerFunctionWithValueFirst,
259
- disabled: this.props.disabled,
260
- renderLinkedContainer: ((_children$props8 = children.props) == null ? void 0 : _children$props8.renderLinkedContainer) || function (val) {
261
- return /*#__PURE__*/React.createElement(DefaultPickerLinkedContainer, {
262
- value: val
263
- });
264
- }
290
+ childrenProps.value = getFieldValue(field) || '';
291
+ childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
292
+
293
+ childrenProps.renderLinkedContainer = ((_children$props8 = children.props) == null ? void 0 : _children$props8.renderLinkedContainer) || function (val) {
294
+ return /*#__PURE__*/React.createElement(DefaultPickerLinkedContainer, {
295
+ value: val
296
+ });
265
297
  };
298
+
266
299
  break;
267
300
 
268
301
  case FormInternalComponentType.Switch:
269
- props = {
270
- checked: Boolean(getFieldValue(field)),
271
- onChange: this.innerTriggerFunctionWithValueFirst,
272
- disabled: this.props.disabled
273
- };
302
+ childrenProps.checked = Boolean(getFieldValue(field));
303
+ childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
274
304
  break;
275
305
 
276
306
  case FormInternalComponentType.ImagePicker:
277
- props = {
278
- images: getFieldValue(field),
279
- onChange: this.innerTriggerFunctionWithValueFirst,
280
- disabled: this.props.disabled
281
- };
307
+ childrenProps.images = getFieldValue(field);
308
+ childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
282
309
  break;
283
310
 
284
311
  default:
285
- var originTrigger = children.props[trigger]; // inject the validated result
286
-
287
- props.error = this._errors;
312
+ if (triggerPropsField) {
313
+ childrenProps[triggerPropsField] = getFieldValue(field);
314
+ } // inject the validated result
288
315
 
289
- props[trigger] = function (newValue) {
290
- _this2.setFieldData(newValue);
291
-
292
- for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
293
- args[_key4 - 1] = arguments[_key4];
294
- }
295
-
296
- originTrigger && originTrigger.apply(void 0, [newValue].concat(args));
297
- };
298
316
 
317
+ childrenProps.error = this._errors;
318
+ childrenProps[trigger] = this.innerTriggerFunctionWithValueFirst;
299
319
  }
300
320
 
301
- return /*#__PURE__*/React.cloneElement(children, props);
321
+ return /*#__PURE__*/React.cloneElement(children, childrenProps);
302
322
  };
303
323
 
304
324
  _proto.render = function render() {
@@ -309,6 +329,7 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
309
329
  }(PureComponent);
310
330
 
311
331
  FormItemInner.contextType = FormItemContext;
332
+ export { FormItemInner };
312
333
  export default /*#__PURE__*/forwardRef(function (props, ref) {
313
334
  var _cls;
314
335
 
package/esm/form/index.js CHANGED
@@ -17,6 +17,7 @@ var Form = /*#__PURE__*/forwardRef(function (props, ref) {
17
17
  formInstance = props.form,
18
18
  children = props.children,
19
19
  onValuesChange = props.onValuesChange,
20
+ onChange = props.onChange,
20
21
  onSubmit = props.onSubmit,
21
22
  onSubmitFailed = props.onSubmitFailed,
22
23
  disabled = props.disabled;
@@ -33,7 +34,8 @@ var Form = /*#__PURE__*/forwardRef(function (props, ref) {
33
34
  setCallbacks({
34
35
  onValuesChange: onValuesChange,
35
36
  onSubmit: onSubmit,
36
- onSubmitFailed: onSubmitFailed
37
+ onSubmitFailed: onSubmitFailed,
38
+ onChange: onChange
37
39
  });
38
40
 
39
41
  if (!initRef.current) {
@@ -3,6 +3,6 @@ export declare function DefaultPickerLinkedContainer({ value }: {
3
3
  value: (string | number)[];
4
4
  }): JSX.Element;
5
5
  export declare function DefaultDatePickerLinkedContainer({ ts, types, }: {
6
- ts: number | [number, number];
6
+ ts?: number | [number, number];
7
7
  types: string[];
8
8
  }): JSX.Element;
@@ -27,6 +27,10 @@ export function DefaultDatePickerLinkedContainer(_ref2) {
27
27
 
28
28
  var className = prefixCls + "-form-picker-link-container";
29
29
  var dateTimeStr = useMemo(function () {
30
+ if (ts === undefined) {
31
+ return '';
32
+ }
33
+
30
34
  if (typeof ts === 'number') {
31
35
  return formatDateTimeStr(ts, types);
32
36
  }
@@ -567,6 +567,9 @@
567
567
  .arco-form-item-control .arco-input {
568
568
  padding: 0;
569
569
  }
570
+ .arco-form-item-control .arco-input-wrap.textarea {
571
+ padding: 0;
572
+ }
570
573
  .arco-form-item-control-wrapper {
571
574
  width: 100%;
572
575
  -webkit-box-flex: 1;
@@ -574,7 +577,7 @@
574
577
  flex: 1;
575
578
  position: relative;
576
579
  }
577
- .arco-form-item-control-wrapper .arco-input-wrap {
580
+ .arco-form-item-control-wrapper .arco-input-wrap.single-line {
578
581
  height: 0.44rem ;
579
582
  }
580
583
  .arco-form-item-message {
@@ -42,11 +42,16 @@
42
42
  .@{prefix}-input-wrap, .@{prefix}-input {
43
43
  padding: 0;
44
44
  }
45
+
46
+ .@{prefix}-input-wrap.textarea {
47
+ padding: 0;
48
+ }
49
+
45
50
  &-wrapper {
46
51
  width: 100%;
47
52
  flex: 1;
48
53
  position: relative;
49
- .@{prefix}-input-wrap {
54
+ .@{prefix}-input-wrap.single-line {
50
55
  .use-var(height, input-text-line-height);
51
56
  }
52
57
  }
@@ -2,7 +2,7 @@ import { IRules } from '@arco-design/mobile-utils';
2
2
  import { ReactNode } from 'react';
3
3
  import { Promise } from 'es6-promise';
4
4
  export declare type FieldValue = any;
5
- export declare type FieldItem = Record<string, any>;
5
+ export declare type FieldItem = Record<string, FieldValue>;
6
6
  export declare type ILayout = 'horizontal' | 'vertical' | 'inline';
7
7
  export declare enum FormInternalComponentType {
8
8
  Input = "Input",
@@ -52,6 +52,11 @@ export interface FormProps {
52
52
  * @en Callback when the form item value changes
53
53
  */
54
54
  onValuesChange?: Callbacks['onValuesChange'];
55
+ /**
56
+ * 表单项数据变化时的回调(仅用户操作表单时触发)
57
+ * @en Callback when the form item value changes (Only trigger when user operate form)
58
+ */
59
+ onChange?: Callbacks['onChange'];
55
60
  /**
56
61
  * 表单项数据变化时的回调
57
62
  * @en Callback when the form is submitted
@@ -115,6 +120,11 @@ export interface Callbacks {
115
120
  * @en Callback when the form item value changes
116
121
  */
117
122
  onValuesChange?: (changedValues: FieldValue, values: FieldValue) => void;
123
+ /**
124
+ * 表单项数据变化时的回调(仅用户操作表单时触发)
125
+ * @en Callback when the form item value changes (Only trigger when user operate form)
126
+ */
127
+ onChange?: (changedValues: FieldValue, values: FieldValue) => void;
118
128
  /**
119
129
  * 表单项数据变化时的回调
120
130
  * @en Callback when the form is submitted
@@ -134,6 +144,10 @@ export interface InternalHooks {
134
144
  registerField: (name: string, self: any) => () => void;
135
145
  setInitialValues: (values: FieldItem) => void;
136
146
  setCallbacks: (callbacks: Callbacks) => void;
147
+ getInitialValue: (fieldName: string) => FieldValue;
148
+ setInitialValue: (fieldName: string, values: FieldItem) => void;
149
+ innerSetFieldsValue: (values: FieldItem) => boolean;
150
+ innerSetFieldValue: (name: string, value: FieldValue) => boolean;
137
151
  }
138
152
  export interface IFormInstance {
139
153
  /**
@@ -183,6 +197,11 @@ export declare type InternalFormInstance = IFormInstance & {
183
197
  * @en Get internal methods
184
198
  */
185
199
  getInternalHooks: () => InternalHooks;
200
+ /**
201
+ * 注册表单组件
202
+ * @en Register Form Item component
203
+ */
204
+ registerField: (name: string, self: any) => () => void;
186
205
  };
187
206
  export interface FormRef {
188
207
  /**
@@ -371,3 +390,7 @@ export interface IFormItemInnerProps {
371
390
  */
372
391
  displayType?: FormInternalComponentType;
373
392
  }
393
+ export declare enum ValueChangeType {
394
+ Update = 0,
395
+ Reset = 1
396
+ }
package/esm/form/type.js CHANGED
@@ -26,4 +26,11 @@ export var ValidateStatus;
26
26
  ValidateStatus["Warning"] = "warning";
27
27
  ValidateStatus["Validating"] = "validating";
28
28
  ValidateStatus["Success"] = "success";
29
- })(ValidateStatus || (ValidateStatus = {}));
29
+ })(ValidateStatus || (ValidateStatus = {}));
30
+
31
+ export var ValueChangeType;
32
+
33
+ (function (ValueChangeType) {
34
+ ValueChangeType[ValueChangeType["Update"] = 0] = "Update";
35
+ ValueChangeType[ValueChangeType["Reset"] = 1] = "Reset";
36
+ })(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[];