@arco-design/mobile-react 2.36.1 → 2.37.0

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 (233) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/_helpers/hooks.d.ts +1 -1
  5. package/cjs/_helpers/hooks.js +1 -1
  6. package/cjs/_helpers/react-dom.d.ts +5 -5
  7. package/cjs/_helpers/react-dom.js +49 -32
  8. package/cjs/_helpers/render.js +6 -3
  9. package/cjs/action-sheet/index.d.ts +3 -2
  10. package/cjs/action-sheet/index.js +2 -2
  11. package/cjs/carousel/index.js +8 -7
  12. package/cjs/checkbox/checkbox.d.ts +1 -1
  13. package/cjs/checkbox/group.d.ts +1 -1
  14. package/cjs/checkbox/hooks/useMergeProps.d.ts +1 -1
  15. package/cjs/checkbox/index.d.ts +2 -2
  16. package/cjs/context-provider/index.d.ts +8 -2
  17. package/cjs/count-down/hooks.js +2 -2
  18. package/cjs/dialog/index.d.ts +8 -3
  19. package/cjs/dialog/methods.d.ts +6 -2
  20. package/cjs/dropdown-menu/helper.d.ts +2 -2
  21. package/cjs/ellipsis/components/native-ellipsis.d.ts +2 -3
  22. package/cjs/ellipsis/components/native-ellipsis.js +1 -2
  23. package/cjs/form/form-item.d.ts +33 -2
  24. package/cjs/form/form-item.js +142 -121
  25. package/cjs/form/index.js +3 -1
  26. package/cjs/form/linked-container.d.ts +1 -1
  27. package/cjs/form/linked-container.js +4 -0
  28. package/cjs/form/style/css/index.css +4 -1
  29. package/cjs/form/style/index.less +6 -1
  30. package/cjs/form/type.d.ts +29 -6
  31. package/cjs/form/type.js +10 -2
  32. package/cjs/form/useForm.d.ts +2 -17
  33. package/cjs/form/useForm.js +98 -17
  34. package/cjs/form/utils.d.ts +2 -0
  35. package/cjs/form/utils.js +42 -2
  36. package/cjs/image-preview/index.d.ts +2 -2
  37. package/cjs/index-bar/group.js +3 -1
  38. package/cjs/index-bar/index.d.ts +2 -2
  39. package/cjs/index-bar/utils.d.ts +1 -1
  40. package/cjs/input/index.js +1 -1
  41. package/cjs/masking/index.d.ts +2 -2
  42. package/cjs/notify/index.d.ts +8 -8
  43. package/cjs/notify/index.js +2 -2
  44. package/cjs/picker-view/components/cascader.js +3 -1
  45. package/cjs/picker-view/components/picker-cell.js +1 -1
  46. package/cjs/picker-view/index.js +3 -1
  47. package/cjs/popup/index.d.ts +2 -2
  48. package/cjs/popup-swiper/index.d.ts +2 -2
  49. package/cjs/pull-refresh/hooks.d.ts +2 -2
  50. package/cjs/radio/group.d.ts +1 -1
  51. package/cjs/radio/group.js +1 -1
  52. package/cjs/radio/index.d.ts +2 -2
  53. package/cjs/radio/radio.d.ts +1 -1
  54. package/cjs/radio/type.d.ts +2 -2
  55. package/cjs/skeleton/elements.js +9 -3
  56. package/cjs/slider/hooks/index.d.ts +1 -1
  57. package/cjs/slider/hooks/useSliderEvents.d.ts +1 -1
  58. package/cjs/stepper/hooks/useValue.d.ts +2 -1
  59. package/cjs/steps/index.d.ts +1 -1
  60. package/cjs/tabs/type.d.ts +2 -2
  61. package/cjs/toast/index.d.ts +12 -12
  62. package/cjs/toast/index.js +1 -1
  63. package/dist/index.js +3070 -411
  64. package/dist/index.min.js +4 -4
  65. package/dist/style.css +4 -1
  66. package/dist/style.min.css +1 -1
  67. package/esm/_helpers/hooks.d.ts +1 -1
  68. package/esm/_helpers/hooks.js +1 -1
  69. package/esm/_helpers/react-dom.d.ts +5 -5
  70. package/esm/_helpers/react-dom.js +49 -30
  71. package/esm/_helpers/render.js +6 -3
  72. package/esm/action-sheet/index.d.ts +3 -2
  73. package/esm/action-sheet/index.js +2 -2
  74. package/esm/carousel/index.js +8 -7
  75. package/esm/checkbox/checkbox.d.ts +1 -1
  76. package/esm/checkbox/group.d.ts +1 -1
  77. package/esm/checkbox/hooks/useMergeProps.d.ts +1 -1
  78. package/esm/checkbox/index.d.ts +2 -2
  79. package/esm/context-provider/index.d.ts +8 -2
  80. package/esm/count-down/hooks.js +2 -2
  81. package/esm/dialog/index.d.ts +8 -3
  82. package/esm/dialog/methods.d.ts +6 -2
  83. package/esm/dropdown-menu/helper.d.ts +2 -2
  84. package/esm/ellipsis/components/native-ellipsis.d.ts +2 -3
  85. package/esm/ellipsis/components/native-ellipsis.js +1 -1
  86. package/esm/form/form-item.d.ts +33 -2
  87. package/esm/form/form-item.js +143 -122
  88. package/esm/form/index.js +3 -1
  89. package/esm/form/linked-container.d.ts +1 -1
  90. package/esm/form/linked-container.js +4 -0
  91. package/esm/form/style/css/index.css +4 -1
  92. package/esm/form/style/index.less +6 -1
  93. package/esm/form/type.d.ts +29 -6
  94. package/esm/form/type.js +8 -1
  95. package/esm/form/useForm.d.ts +2 -17
  96. package/esm/form/useForm.js +97 -17
  97. package/esm/form/utils.d.ts +2 -0
  98. package/esm/form/utils.js +31 -1
  99. package/esm/image-preview/index.d.ts +2 -2
  100. package/esm/index-bar/group.js +3 -1
  101. package/esm/index-bar/index.d.ts +2 -2
  102. package/esm/index-bar/utils.d.ts +1 -1
  103. package/esm/input/index.js +1 -1
  104. package/esm/masking/index.d.ts +2 -2
  105. package/esm/notify/index.d.ts +8 -8
  106. package/esm/notify/index.js +2 -2
  107. package/esm/picker-view/components/cascader.js +3 -1
  108. package/esm/picker-view/components/picker-cell.js +1 -1
  109. package/esm/picker-view/index.js +3 -1
  110. package/esm/popup/index.d.ts +2 -2
  111. package/esm/popup-swiper/index.d.ts +2 -2
  112. package/esm/pull-refresh/hooks.d.ts +2 -2
  113. package/esm/radio/group.d.ts +1 -1
  114. package/esm/radio/group.js +1 -1
  115. package/esm/radio/index.d.ts +2 -2
  116. package/esm/radio/radio.d.ts +1 -1
  117. package/esm/radio/type.d.ts +2 -2
  118. package/esm/skeleton/elements.js +9 -3
  119. package/esm/slider/hooks/index.d.ts +1 -1
  120. package/esm/slider/hooks/useSliderEvents.d.ts +1 -1
  121. package/esm/stepper/hooks/useValue.d.ts +2 -1
  122. package/esm/steps/index.d.ts +1 -1
  123. package/esm/tabs/type.d.ts +2 -2
  124. package/esm/toast/index.d.ts +12 -12
  125. package/esm/toast/index.js +1 -1
  126. package/esnext/_helpers/hooks.js +1 -1
  127. package/esnext/_helpers/react-dom.d.ts +5 -5
  128. package/esnext/_helpers/react-dom.js +47 -28
  129. package/esnext/_helpers/render.js +3 -2
  130. package/esnext/action-sheet/index.d.ts +3 -2
  131. package/esnext/action-sheet/index.js +1 -1
  132. package/esnext/carousel/index.js +7 -5
  133. package/esnext/context-provider/index.d.ts +8 -2
  134. package/esnext/context-provider/index.js +1 -1
  135. package/esnext/count-down/hooks.js +2 -2
  136. package/esnext/dialog/index.d.ts +8 -3
  137. package/esnext/dialog/methods.d.ts +6 -2
  138. package/esnext/dropdown-menu/helper.d.ts +1 -1
  139. package/esnext/ellipsis/components/native-ellipsis.d.ts +2 -3
  140. package/esnext/ellipsis/components/native-ellipsis.js +1 -1
  141. package/esnext/form/form-item.d.ts +33 -2
  142. package/esnext/form/form-item.js +85 -71
  143. package/esnext/form/index.js +2 -1
  144. package/esnext/form/linked-container.d.ts +1 -1
  145. package/esnext/form/linked-container.js +3 -0
  146. package/esnext/form/style/css/index.css +4 -1
  147. package/esnext/form/style/index.less +6 -1
  148. package/esnext/form/type.d.ts +29 -6
  149. package/esnext/form/type.js +7 -0
  150. package/esnext/form/useForm.d.ts +2 -17
  151. package/esnext/form/useForm.js +72 -13
  152. package/esnext/form/utils.d.ts +2 -0
  153. package/esnext/form/utils.js +26 -0
  154. package/esnext/image-preview/index.d.ts +2 -2
  155. package/esnext/index-bar/group.js +5 -1
  156. package/esnext/index-bar/index.d.ts +2 -2
  157. package/esnext/input/index.js +1 -1
  158. package/esnext/masking/index.d.ts +2 -2
  159. package/esnext/notify/index.d.ts +8 -8
  160. package/esnext/notify/index.js +2 -2
  161. package/esnext/picker-view/components/cascader.js +5 -1
  162. package/esnext/picker-view/components/picker-cell.js +1 -1
  163. package/esnext/picker-view/index.js +5 -1
  164. package/esnext/popup/index.d.ts +2 -2
  165. package/esnext/popup-swiper/index.d.ts +2 -2
  166. package/esnext/pull-refresh/hooks.d.ts +2 -2
  167. package/esnext/radio/group.js +3 -1
  168. package/esnext/radio/type.d.ts +2 -2
  169. package/esnext/skeleton/elements.js +15 -3
  170. package/esnext/slider/hooks/useSliderEvents.d.ts +1 -1
  171. package/esnext/tabs/type.d.ts +2 -2
  172. package/esnext/toast/index.d.ts +12 -12
  173. package/esnext/toast/index.js +1 -1
  174. package/package.json +3 -3
  175. package/umd/_helpers/hooks.d.ts +1 -1
  176. package/umd/_helpers/hooks.js +1 -1
  177. package/umd/_helpers/react-dom.d.ts +5 -5
  178. package/umd/_helpers/react-dom.js +53 -35
  179. package/umd/_helpers/render.js +6 -3
  180. package/umd/action-sheet/index.d.ts +3 -2
  181. package/umd/action-sheet/index.js +2 -2
  182. package/umd/carousel/index.js +8 -7
  183. package/umd/checkbox/checkbox.d.ts +1 -1
  184. package/umd/checkbox/group.d.ts +1 -1
  185. package/umd/checkbox/hooks/useMergeProps.d.ts +1 -1
  186. package/umd/checkbox/index.d.ts +2 -2
  187. package/umd/context-provider/index.d.ts +8 -2
  188. package/umd/count-down/hooks.js +2 -2
  189. package/umd/dialog/index.d.ts +8 -3
  190. package/umd/dialog/methods.d.ts +6 -2
  191. package/umd/dropdown-menu/helper.d.ts +2 -2
  192. package/umd/ellipsis/components/native-ellipsis.d.ts +2 -3
  193. package/umd/ellipsis/components/native-ellipsis.js +1 -2
  194. package/umd/form/form-item.d.ts +33 -2
  195. package/umd/form/form-item.js +142 -121
  196. package/umd/form/index.js +3 -1
  197. package/umd/form/linked-container.d.ts +1 -1
  198. package/umd/form/linked-container.js +4 -0
  199. package/umd/form/style/css/index.css +4 -1
  200. package/umd/form/style/index.less +6 -1
  201. package/umd/form/type.d.ts +29 -6
  202. package/umd/form/type.js +9 -1
  203. package/umd/form/useForm.d.ts +2 -17
  204. package/umd/form/useForm.js +98 -21
  205. package/umd/form/utils.d.ts +2 -0
  206. package/umd/form/utils.js +40 -5
  207. package/umd/image-preview/index.d.ts +2 -2
  208. package/umd/index-bar/group.js +3 -1
  209. package/umd/index-bar/index.d.ts +2 -2
  210. package/umd/index-bar/utils.d.ts +1 -1
  211. package/umd/input/index.js +1 -1
  212. package/umd/masking/index.d.ts +2 -2
  213. package/umd/notify/index.d.ts +8 -8
  214. package/umd/notify/index.js +2 -2
  215. package/umd/picker-view/components/cascader.js +3 -1
  216. package/umd/picker-view/components/picker-cell.js +1 -1
  217. package/umd/picker-view/index.js +3 -1
  218. package/umd/popup/index.d.ts +2 -2
  219. package/umd/popup-swiper/index.d.ts +2 -2
  220. package/umd/pull-refresh/hooks.d.ts +2 -2
  221. package/umd/radio/group.d.ts +1 -1
  222. package/umd/radio/group.js +1 -1
  223. package/umd/radio/index.d.ts +2 -2
  224. package/umd/radio/radio.d.ts +1 -1
  225. package/umd/radio/type.d.ts +2 -2
  226. package/umd/skeleton/elements.js +9 -3
  227. package/umd/slider/hooks/index.d.ts +1 -1
  228. package/umd/slider/hooks/useSliderEvents.d.ts +1 -1
  229. package/umd/stepper/hooks/useValue.d.ts +2 -1
  230. package/umd/steps/index.d.ts +1 -1
  231. package/umd/tabs/type.d.ts +2 -2
  232. package/umd/toast/index.d.ts +12 -12
  233. package/umd/toast/index.js +1 -1
@@ -3,7 +3,7 @@
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
5
  exports.__esModule = true;
6
- exports.default = void 0;
6
+ exports.default = exports.FormItemInner = void 0;
7
7
 
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
9
 
@@ -46,7 +46,7 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
46
46
  _this._errors = [];
47
47
  _this._touched = false;
48
48
 
49
- _this.onValueChange = function (curValue, preValue) {
49
+ _this.onValueChange = function (curValue, preValue, info) {
50
50
  _this._touched = true;
51
51
  var shouldUpdate = _this.props.shouldUpdate;
52
52
 
@@ -58,9 +58,34 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
58
58
  return;
59
59
  }
60
60
 
61
+ if ((info == null ? void 0 : info.changeType) === _type.ValueChangeType.Reset) {
62
+ _this.props.onValidateStatusChange({
63
+ errors: [],
64
+ warnings: [],
65
+ errorTypes: []
66
+ });
67
+
68
+ _this._errors = [];
69
+ }
70
+
61
71
  _this.forceUpdate();
62
72
  };
63
73
 
74
+ _this.getInitialValue = function () {
75
+ var _children$type, _getInitialValue;
76
+
77
+ var _this$props = _this.props,
78
+ children = _this$props.children,
79
+ displayType = _this$props.displayType;
80
+
81
+ var _this$context$form$ge = _this.context.form.getInternalHooks(),
82
+ getInitialValue = _this$context$form$ge.getInitialValue;
83
+
84
+ var childrenType = displayType || ((_children$type = children.type) == null ? void 0 : _children$type.displayName); // get user-defined initialValue or if not defined
85
+
86
+ return (_getInitialValue = getInitialValue(_this.props.field)) != null ? _getInitialValue : (0, _utils.getDefaultValueForInterComponent)(childrenType);
87
+ };
88
+
64
89
  _this.getFieldError = function () {
65
90
  return _this._errors;
66
91
  };
@@ -69,21 +94,37 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
69
94
  return _this._touched;
70
95
  };
71
96
 
72
- _this.validateField = function () {
97
+ _this.getAllRuleValidateTriggers = function () {
98
+ var _this$props$rules;
99
+
100
+ return ((_this$props$rules = _this.props.rules) == null ? void 0 : _this$props$rules.map(function (rule) {
101
+ return rule.validateTrigger;
102
+ }).flat().filter(function (v) {
103
+ return !!v;
104
+ })) || [];
105
+ };
106
+
107
+ _this.validateField = function (validateTrigger) {
73
108
  var validateMessages = _this.context.validateMessages;
74
109
  var getFieldValue = _this.context.form.getFieldValue;
75
- var _this$props = _this.props,
76
- field = _this$props.field,
77
- rules = _this$props.rules,
78
- onValidateStatusChange = _this$props.onValidateStatusChange;
79
- var value = getFieldValue(field);
80
-
81
- if (rules != null && rules.length && field) {
110
+ var _this$props2 = _this.props,
111
+ field = _this$props2.field,
112
+ rules = _this$props2.rules,
113
+ onValidateStatusChange = _this$props2.onValidateStatusChange;
114
+ var value = getFieldValue(field); // rules: if validateTrigger is not defined, all rules will be validated
115
+ // if validateTrigger is defined, only rules with validateTrigger or without rule.validateTrigger will be validated
116
+
117
+ var curRules = validateTrigger ? rules == null ? void 0 : rules.filter(function (rule) {
118
+ var triggerList = [].concat(rule.validateTrigger || validateTrigger);
119
+ return triggerList.includes(validateTrigger);
120
+ }) : rules;
121
+
122
+ if (curRules != null && curRules.length && field) {
82
123
  var _Validator;
83
124
 
84
125
  var fieldDom = _this.props.getFormItemRef();
85
126
 
86
- var fieldValidator = new _mobileUtils.Validator((_Validator = {}, _Validator[field] = rules, _Validator), {
127
+ var fieldValidator = new _mobileUtils.Validator((_Validator = {}, _Validator[field] = curRules, _Validator), {
87
128
  validateMessages: validateMessages
88
129
  });
89
130
  return new _es6Promise.Promise(function (resolve) {
@@ -122,82 +163,79 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
122
163
  };
123
164
 
124
165
  _this.setFieldData = function (value) {
125
- var field = _this.props.field;
126
- var setFieldValue = _this.context.form.setFieldValue;
127
- setFieldValue(field, value);
166
+ var _this$props3 = _this.props,
167
+ field = _this$props3.field,
168
+ _this$props3$trigger = _this$props3.trigger,
169
+ trigger = _this$props3$trigger === void 0 ? 'onChange' : _this$props3$trigger;
170
+
171
+ var _this$context$form$ge2 = _this.context.form.getInternalHooks(),
172
+ innerSetFieldValue = _this$context$form$ge2.innerSetFieldValue;
128
173
 
129
- _this.validateField();
174
+ innerSetFieldValue(field, value);
175
+
176
+ _this.validateField(trigger);
130
177
  };
131
178
 
132
- _this.innerTriggerFunction = function (_, value) {
179
+ _this.innerTriggerFunctionWithValueFirst = function (value) {
133
180
  var _children$props;
134
181
 
135
182
  _this.setFieldData(value);
136
183
 
137
- var _this$props2 = _this.props,
138
- children = _this$props2.children,
139
- _this$props2$trigger = _this$props2.trigger,
140
- trigger = _this$props2$trigger === void 0 ? 'onChange' : _this$props2$trigger;
184
+ var _this$props4 = _this.props,
185
+ children = _this$props4.children,
186
+ _this$props4$trigger = _this$props4.trigger,
187
+ trigger = _this$props4$trigger === void 0 ? 'onChange' : _this$props4$trigger;
141
188
 
142
189
  if (trigger && (_children$props = children.props) != null && _children$props[trigger]) {
143
190
  var _children$props2;
144
191
 
145
- for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
146
- args[_key - 2] = arguments[_key];
192
+ for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
193
+ args[_key - 1] = arguments[_key];
147
194
  }
148
195
 
149
- (_children$props2 = children.props) == null ? void 0 : _children$props2[trigger].apply(_children$props2, [_, value].concat(args));
196
+ (_children$props2 = children.props) == null ? void 0 : _children$props2[trigger].apply(_children$props2, [value].concat(args));
150
197
  }
151
198
  };
152
199
 
153
- _this.innerTriggerFunctionWithValueFirst = function (value) {
200
+ _this.innerOnInputFunction = function (_, value) {
154
201
  var _children$props3;
155
202
 
156
203
  _this.setFieldData(value);
157
204
 
158
- var _this$props3 = _this.props,
159
- children = _this$props3.children,
160
- _this$props3$trigger = _this$props3.trigger,
161
- trigger = _this$props3$trigger === void 0 ? 'onChange' : _this$props3$trigger;
162
-
163
- if (trigger && (_children$props3 = children.props) != null && _children$props3[trigger]) {
164
- var _children$props4;
165
-
166
- for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
167
- args[_key2 - 1] = arguments[_key2];
168
- }
205
+ var children = _this.props.children;
169
206
 
170
- (_children$props4 = children.props) == null ? void 0 : _children$props4[trigger].apply(_children$props4, [value].concat(args));
207
+ for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
208
+ args[_key2 - 2] = arguments[_key2];
171
209
  }
210
+
211
+ (_children$props3 = children.props) == null ? void 0 : _children$props3.onInput == null ? void 0 : _children$props3.onInput.apply(_children$props3, [_, value].concat(args));
172
212
  };
173
213
 
174
214
  _this.innerClearFunction = function () {
175
- var _children$props5;
215
+ var _children$props4;
176
216
 
177
217
  var children = _this.props.children;
178
218
 
179
219
  _this.setFieldData('');
180
220
 
181
- if ((_children$props5 = children.props) != null && _children$props5.onClear) {
182
- var _children$props6;
221
+ if ((_children$props4 = children.props) != null && _children$props4.onClear) {
222
+ var _children$props5;
183
223
 
184
224
  for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
185
225
  args[_key3] = arguments[_key3];
186
226
  }
187
227
 
188
- (_children$props6 = children.props) == null ? void 0 : _children$props6.onClear.apply(_children$props6, args);
228
+ (_children$props5 = children.props) == null ? void 0 : _children$props5.onClear.apply(_children$props5, args);
189
229
  }
190
230
  };
191
231
 
192
232
  _this.destroyField = function () {};
193
233
 
194
234
  if (props != null && props.initialValue && props.field) {
195
- var _setInitialValues;
196
-
197
235
  var _context$form$getInte = context.form.getInternalHooks(),
198
- setInitialValues = _context$form$getInte.setInitialValues;
236
+ setInitialValue = _context$form$getInte.setInitialValue;
199
237
 
200
- setInitialValues((_setInitialValues = {}, _setInitialValues[props.field] = props.initialValue, _setInitialValues));
238
+ setInitialValue(props.field, props.initialValue);
201
239
  }
202
240
 
203
241
  return _this;
@@ -206,8 +244,8 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
206
244
  var _proto = FormItemInner.prototype;
207
245
 
208
246
  _proto.componentDidMount = function componentDidMount() {
209
- var _this$context$form$ge = this.context.form.getInternalHooks(),
210
- registerField = _this$context$form$ge.registerField;
247
+ var _this$context$form$ge3 = this.context.form.getInternalHooks(),
248
+ registerField = _this$context$form$ge3.registerField;
211
249
 
212
250
  this.destroyField = registerField(this.props.field, this);
213
251
  };
@@ -217,108 +255,90 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
217
255
  };
218
256
 
219
257
  _proto.renderChildren = function renderChildren() {
220
- var _props,
221
- _children$type,
258
+ var _this2 = this,
259
+ _children$type2,
222
260
  _children$props7,
223
- _children$props8,
224
- _this2 = this;
225
-
226
- var _this$props4 = this.props,
227
- children = _this$props4.children,
228
- field = _this$props4.field,
229
- _this$props4$trigger = _this$props4.trigger,
230
- trigger = _this$props4$trigger === void 0 ? 'onChange' : _this$props4$trigger,
231
- _this$props4$triggerP = _this$props4.triggerPropsField,
232
- triggerPropsField = _this$props4$triggerP === void 0 ? 'value' : _this$props4$triggerP,
233
- displayType = _this$props4.displayType;
261
+ _children$props8;
262
+
263
+ var _this$props5 = this.props,
264
+ children = _this$props5.children,
265
+ field = _this$props5.field,
266
+ _this$props5$trigger = _this$props5.trigger,
267
+ trigger = _this$props5$trigger === void 0 ? 'onChange' : _this$props5$trigger,
268
+ _this$props5$triggerP = _this$props5.triggerPropsField,
269
+ triggerPropsField = _this$props5$triggerP === void 0 ? 'value' : _this$props5$triggerP,
270
+ displayType = _this$props5.displayType,
271
+ disabled = _this$props5.disabled;
234
272
  var getFieldValue = this.context.form.getFieldValue;
235
- var props = (_props = {}, _props[triggerPropsField] = getFieldValue(field), _props.disabled = this.props.disabled, _props);
236
- var childrenType = displayType || ((_children$type = children.type) == null ? void 0 : _children$type.displayName);
273
+ var childrenProps = {
274
+ disabled: disabled
275
+ }; // inject validateTriggers of rules
276
+
277
+ this.getAllRuleValidateTriggers().forEach(function (triggerName) {
278
+ childrenProps[triggerName] = function (e) {
279
+ var _children$props6, _children$props6$trig;
280
+
281
+ _this2.validateField(triggerName);
282
+
283
+ 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);
284
+ };
285
+ });
286
+ var childrenType = displayType || ((_children$type2 = children.type) == null ? void 0 : _children$type2.displayName);
237
287
 
238
288
  switch (childrenType) {
239
289
  case _type.FormInternalComponentType.Input:
240
290
  case _type.FormInternalComponentType.Textarea:
241
- props = {
242
- value: getFieldValue(field) || '',
243
- onInput: this.innerTriggerFunction,
244
- onClear: this.innerClearFunction,
245
- disabled: this.props.disabled
246
- };
247
- break;
248
-
249
- case _type.FormInternalComponentType.Checkbox:
250
- case _type.FormInternalComponentType.Radio:
251
- case _type.FormInternalComponentType.Slider:
252
- case _type.FormInternalComponentType.RadioGroup:
253
- case _type.FormInternalComponentType.CheckboxGroup:
254
- props = {
255
- value: getFieldValue(field),
256
- onChange: this.innerTriggerFunctionWithValueFirst,
257
- disabled: this.props.disabled
258
- };
291
+ childrenProps.value = getFieldValue(field) || '';
292
+ childrenProps.onInput = this.innerOnInputFunction;
293
+ childrenProps.onClear = this.innerClearFunction;
259
294
  break;
260
295
 
261
296
  case _type.FormInternalComponentType.DatePicker:
262
- props = {
263
- currentTs: getFieldValue(field),
264
- onChange: this.innerTriggerFunctionWithValueFirst,
265
- disabled: this.props.disabled,
266
- renderLinkedContainer: ((_children$props7 = children.props) == null ? void 0 : _children$props7.renderLinkedContainer) || function (ts, types) {
267
- return /*#__PURE__*/_react.default.createElement(_linkedContainer.DefaultDatePickerLinkedContainer, {
268
- ts: ts,
269
- types: types
270
- });
271
- }
297
+ childrenProps.currentTs = getFieldValue(field);
298
+ childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
299
+
300
+ childrenProps.renderLinkedContainer = ((_children$props7 = children.props) == null ? void 0 : _children$props7.renderLinkedContainer) || function (ts, types) {
301
+ return /*#__PURE__*/_react.default.createElement(_linkedContainer.DefaultDatePickerLinkedContainer, {
302
+ ts: ts,
303
+ types: types
304
+ });
272
305
  };
306
+
273
307
  break;
274
308
 
275
309
  case _type.FormInternalComponentType.Picker:
276
- props = {
277
- value: getFieldValue(field),
278
- onChange: this.innerTriggerFunctionWithValueFirst,
279
- disabled: this.props.disabled,
280
- renderLinkedContainer: ((_children$props8 = children.props) == null ? void 0 : _children$props8.renderLinkedContainer) || function (val) {
281
- return /*#__PURE__*/_react.default.createElement(_linkedContainer.DefaultPickerLinkedContainer, {
282
- value: val
283
- });
284
- }
310
+ childrenProps.value = getFieldValue(field) || '';
311
+ childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
312
+
313
+ childrenProps.renderLinkedContainer = ((_children$props8 = children.props) == null ? void 0 : _children$props8.renderLinkedContainer) || function (val) {
314
+ return /*#__PURE__*/_react.default.createElement(_linkedContainer.DefaultPickerLinkedContainer, {
315
+ value: val
316
+ });
285
317
  };
318
+
286
319
  break;
287
320
 
288
321
  case _type.FormInternalComponentType.Switch:
289
- props = {
290
- checked: Boolean(getFieldValue(field)),
291
- onChange: this.innerTriggerFunctionWithValueFirst,
292
- disabled: this.props.disabled
293
- };
322
+ childrenProps.checked = Boolean(getFieldValue(field));
323
+ childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
294
324
  break;
295
325
 
296
326
  case _type.FormInternalComponentType.ImagePicker:
297
- props = {
298
- images: getFieldValue(field),
299
- onChange: this.innerTriggerFunctionWithValueFirst,
300
- disabled: this.props.disabled
301
- };
327
+ childrenProps.images = getFieldValue(field);
328
+ childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
302
329
  break;
303
330
 
304
331
  default:
305
- var originTrigger = children.props[trigger]; // inject the validated result
306
-
307
- props.error = this._errors;
332
+ if (triggerPropsField) {
333
+ childrenProps[triggerPropsField] = getFieldValue(field);
334
+ } // inject the validated result
308
335
 
309
- props[trigger] = function (newValue) {
310
- _this2.setFieldData(newValue);
311
-
312
- for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
313
- args[_key4 - 1] = arguments[_key4];
314
- }
315
-
316
- originTrigger && originTrigger.apply(void 0, [newValue].concat(args));
317
- };
318
336
 
337
+ childrenProps.error = this._errors;
338
+ childrenProps[trigger] = this.innerTriggerFunctionWithValueFirst;
319
339
  }
320
340
 
321
- return /*#__PURE__*/_react.default.cloneElement(children, props);
341
+ return /*#__PURE__*/_react.default.cloneElement(children, childrenProps);
322
342
  };
323
343
 
324
344
  _proto.render = function render() {
@@ -328,6 +348,7 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
328
348
  return FormItemInner;
329
349
  }(_react.PureComponent);
330
350
 
351
+ exports.FormItemInner = FormItemInner;
331
352
  FormItemInner.contextType = _formItemContext.FormItemContext;
332
353
 
333
354
  var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
package/cjs/form/index.js CHANGED
@@ -47,6 +47,7 @@ var Form = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
47
47
  formInstance = props.form,
48
48
  children = props.children,
49
49
  onValuesChange = props.onValuesChange,
50
+ onChange = props.onChange,
50
51
  onSubmit = props.onSubmit,
51
52
  onSubmitFailed = props.onSubmitFailed,
52
53
  disabled = props.disabled;
@@ -63,7 +64,8 @@ var Form = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
63
64
  setCallbacks({
64
65
  onValuesChange: onValuesChange,
65
66
  onSubmit: onSubmit,
66
- onSubmitFailed: onSubmitFailed
67
+ onSubmitFailed: onSubmitFailed,
68
+ onChange: onChange
67
69
  });
68
70
 
69
71
  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;
@@ -45,6 +45,10 @@ function DefaultDatePickerLinkedContainer(_ref2) {
45
45
 
46
46
  var className = prefixCls + "-form-picker-link-container";
47
47
  var dateTimeStr = (0, _react.useMemo)(function () {
48
+ if (ts === undefined) {
49
+ return '';
50
+ }
51
+
48
52
  if (typeof ts === 'number') {
49
53
  return formatDateTimeStr(ts, types);
50
54
  }
@@ -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
  }
@@ -1,8 +1,8 @@
1
1
  import { IRules } from '@arco-design/mobile-utils';
2
- import { ReactNode } from 'react';
2
+ import { ReactElement, 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",
@@ -46,12 +46,17 @@ export interface FormProps {
46
46
  * @en Form initial value
47
47
  */
48
48
  initialValues?: FieldItem;
49
- children: React.ReactNodeArray | ReactNode;
49
+ children: ReactNode[] | ReactNode;
50
50
  /**
51
51
  * 表单项数据变化时的回调
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
  /**
@@ -263,7 +282,7 @@ export interface FormItemProps {
263
282
  * 表单项子节点
264
283
  * @en Form item children
265
284
  */
266
- children: JSX.Element;
285
+ children: ReactElement;
267
286
  /**
268
287
  * 表单项是否刷新
269
288
  * @en Form item is updated
@@ -278,7 +297,7 @@ export interface FormItemProps {
278
297
  * 表单项下方节点
279
298
  * @en Form item extra node
280
299
  */
281
- extra?: JSX.Element;
300
+ extra?: ReactElement;
282
301
  /**
283
302
  * 触发事件更新事件名称
284
303
  * @en The function name when updating data
@@ -318,7 +337,7 @@ export interface IFormItemInnerProps {
318
337
  * 表单项子节点
319
338
  * @en Form item children
320
339
  */
321
- children: JSX.Element;
340
+ children: ReactElement<any, any>;
322
341
  /**
323
342
  * 表单项是否刷新
324
343
  * @en Form item is updated
@@ -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/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[];