@hi-ui/form 4.1.2 → 4.1.3
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.
- package/CHANGELOG.md +18 -0
- package/lib/cjs/Form.js +26 -54
- package/lib/cjs/FormField.js +0 -19
- package/lib/cjs/FormItem.js +16 -48
- package/lib/cjs/FormLabel.js +45 -78
- package/lib/cjs/FormList.js +16 -52
- package/lib/cjs/FormMessage.js +9 -38
- package/lib/cjs/FormReset.js +9 -39
- package/lib/cjs/FormSubmit.js +11 -43
- package/lib/cjs/context.js +0 -9
- package/lib/cjs/index.js +0 -7
- package/lib/cjs/styles/index.scss.js +2 -5
- package/lib/cjs/use-form-field.js +15 -44
- package/lib/cjs/use-form.js +71 -168
- package/lib/cjs/utils/index.js +1 -11
- package/lib/esm/Form.js +24 -32
- package/lib/esm/FormField.js +0 -11
- package/lib/esm/FormItem.js +13 -22
- package/lib/esm/FormLabel.js +39 -51
- package/lib/esm/FormList.js +9 -26
- package/lib/esm/FormMessage.js +8 -18
- package/lib/esm/FormReset.js +8 -16
- package/lib/esm/FormSubmit.js +10 -20
- package/lib/esm/context.js +0 -4
- package/lib/esm/index.js +2 -6
- package/lib/esm/styles/index.scss.js +2 -4
- package/lib/esm/use-form-field.js +14 -24
- package/lib/esm/use-form.js +64 -136
- package/lib/esm/utils/index.js +1 -6
- package/lib/types/Form.d.ts +1 -1
- package/lib/types/FormField.d.ts +0 -3
- package/lib/types/FormItem.d.ts +0 -3
- package/lib/types/FormLabel.d.ts +0 -3
- package/lib/types/FormList.d.ts +0 -3
- package/lib/types/FormMessage.d.ts +0 -3
- package/lib/types/FormReset.d.ts +0 -3
- package/lib/types/FormSubmit.d.ts +0 -3
- package/package.json +13 -14
package/lib/cjs/use-form.js
CHANGED
|
@@ -9,104 +9,71 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
|
-
Object.defineProperty(exports, '__esModule', {
|
|
15
|
-
value: true
|
|
16
|
-
});
|
|
17
|
-
|
|
18
12
|
var _regeneratorRuntime = require('@babel/runtime/regenerator');
|
|
19
|
-
|
|
20
13
|
var tslib = require('tslib');
|
|
21
|
-
|
|
22
14
|
var index = require('./utils/index.js');
|
|
23
|
-
|
|
24
15
|
var React = require('react');
|
|
25
|
-
|
|
26
16
|
var useLatest = require('@hi-ui/use-latest');
|
|
27
|
-
|
|
28
17
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
29
|
-
|
|
30
18
|
var funcUtils = require('@hi-ui/func-utils');
|
|
31
|
-
|
|
32
19
|
var objectUtils = require('@hi-ui/object-utils');
|
|
33
|
-
|
|
34
20
|
var domUtils = require('@hi-ui/dom-utils');
|
|
35
|
-
|
|
36
|
-
function _interopDefaultLegacy(e) {
|
|
37
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
38
|
-
'default': e
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
|
|
43
|
-
|
|
44
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
45
|
-
|
|
46
21
|
var EMPTY_RULES = {};
|
|
47
22
|
var EMPTY_ERRORS = {};
|
|
48
23
|
var EMPTY_TOUCHED = {};
|
|
49
24
|
var DEFAULT_VALIDATE_TRIGGER = ['onChange', 'onBlur'];
|
|
50
|
-
|
|
51
25
|
var EMPTY_FUNC = function EMPTY_FUNC() {};
|
|
52
|
-
|
|
53
26
|
var useForm = function useForm(_a) {
|
|
54
27
|
var initialValues = _a.initialValues,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
28
|
+
_a$initialErrors = _a.initialErrors,
|
|
29
|
+
initialErrors = _a$initialErrors === void 0 ? EMPTY_ERRORS : _a$initialErrors,
|
|
30
|
+
_a$initialTouched = _a.initialTouched,
|
|
31
|
+
initialTouched = _a$initialTouched === void 0 ? EMPTY_TOUCHED : _a$initialTouched,
|
|
32
|
+
_a$lazyValidate = _a.lazyValidate,
|
|
33
|
+
lazyValidate = _a$lazyValidate === void 0 ? false : _a$lazyValidate,
|
|
34
|
+
onValuesChange = _a.onValuesChange,
|
|
35
|
+
onReset = _a.onReset,
|
|
36
|
+
onSubmit = _a.onSubmit,
|
|
37
|
+
_a$rules = _a.rules,
|
|
38
|
+
rules = _a$rules === void 0 ? EMPTY_RULES : _a$rules,
|
|
39
|
+
_a$validateAfterTouch = _a.validateAfterTouched,
|
|
40
|
+
validateAfterTouched = _a$validateAfterTouch === void 0 ? false : _a$validateAfterTouch,
|
|
41
|
+
_a$validateTrigger = _a.validateTrigger,
|
|
42
|
+
validateTriggerProp = _a$validateTrigger === void 0 ? DEFAULT_VALIDATE_TRIGGER : _a$validateTrigger,
|
|
43
|
+
rest = tslib.__rest(_a, ["initialValues", "initialErrors", "initialTouched", "lazyValidate", "onValuesChange", "onReset", "onSubmit", "rules", "validateAfterTouched", "validateTrigger"]);
|
|
71
44
|
/**
|
|
72
45
|
* 处理校验触发器,保证 memo 依赖的是数组每个项,避免无效重渲染
|
|
73
46
|
*/
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
var validateTrigger = typeAssertion.isArray(validateTriggerProp) ? validateTriggerProp : [validateTriggerProp]; // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
77
|
-
|
|
47
|
+
var validateTrigger = typeAssertion.isArray(validateTriggerProp) ? validateTriggerProp : [validateTriggerProp];
|
|
48
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
78
49
|
var validateTriggersMemo = React.useMemo(function () {
|
|
79
50
|
return validateTrigger;
|
|
80
51
|
}, validateTrigger);
|
|
81
52
|
/**
|
|
82
53
|
* 收集 Field 的校验器注册表
|
|
83
54
|
*/
|
|
84
|
-
|
|
85
55
|
var _useCollection = useCollection(),
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
56
|
+
getValidation = _useCollection[0],
|
|
57
|
+
registerField = _useCollection[1],
|
|
58
|
+
unregisterField = _useCollection[2],
|
|
59
|
+
getRegisteredKeys = _useCollection[3];
|
|
90
60
|
/**
|
|
91
61
|
* form 数据管理中心
|
|
92
62
|
*/
|
|
93
|
-
|
|
94
|
-
|
|
95
63
|
var _useReducer = React.useReducer(formReducer, {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
64
|
+
values: initialValues,
|
|
65
|
+
errors: initialErrors,
|
|
66
|
+
touched: initialTouched,
|
|
67
|
+
validating: false,
|
|
68
|
+
submitting: false
|
|
69
|
+
}),
|
|
70
|
+
formState = _useReducer[0],
|
|
71
|
+
formDispatch = _useReducer[1];
|
|
72
|
+
// 使用 latest ref 维护,保证每次主动拿取的 formState 都是最新的
|
|
73
|
+
var formStateRef = useLatest.useLatestRef(formState);
|
|
74
|
+
// const getFieldNames = useCallback(() => Object.keys(formStateRef.current.values as any), [
|
|
107
75
|
// formStateRef,
|
|
108
76
|
// ])
|
|
109
|
-
|
|
110
77
|
var getFieldValue = React.useCallback(function (fieldName) {
|
|
111
78
|
return objectUtils.getNested(formStateRef.current.values, fieldName);
|
|
112
79
|
}, [formStateRef]);
|
|
@@ -133,7 +100,6 @@ var useForm = function useForm(_a) {
|
|
|
133
100
|
if (touched === void 0) {
|
|
134
101
|
touched = false;
|
|
135
102
|
}
|
|
136
|
-
|
|
137
103
|
formDispatch({
|
|
138
104
|
type: 'SET_FIELD_TOUCHED',
|
|
139
105
|
// @ts-ignore
|
|
@@ -146,23 +112,19 @@ var useForm = function useForm(_a) {
|
|
|
146
112
|
/**
|
|
147
113
|
* 使用单个 Field 规则对给定值进行校验
|
|
148
114
|
*/
|
|
149
|
-
|
|
150
115
|
var validateField = React.useCallback(function (field, value) {
|
|
151
|
-
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/
|
|
116
|
+
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
152
117
|
var fieldValidation, errorResultAsPromise;
|
|
153
|
-
return
|
|
118
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
154
119
|
while (1) {
|
|
155
120
|
switch (_context.prev = _context.next) {
|
|
156
121
|
case 0:
|
|
157
122
|
fieldValidation = getValidation(field);
|
|
158
|
-
|
|
159
123
|
if (fieldValidation) {
|
|
160
124
|
_context.next = 3;
|
|
161
125
|
break;
|
|
162
126
|
}
|
|
163
|
-
|
|
164
127
|
return _context.abrupt("return");
|
|
165
|
-
|
|
166
128
|
case 3:
|
|
167
129
|
formDispatch({
|
|
168
130
|
type: 'SET_VALIDATING',
|
|
@@ -178,16 +140,14 @@ var useForm = function useForm(_a) {
|
|
|
178
140
|
return objectUtils.setNested({}, field, value);
|
|
179
141
|
}, function (errorMsg) {
|
|
180
142
|
var _a, _b, _c;
|
|
181
|
-
|
|
182
143
|
formDispatch({
|
|
183
144
|
type: 'SET_VALIDATING',
|
|
184
145
|
payload: false
|
|
185
|
-
});
|
|
186
|
-
|
|
146
|
+
});
|
|
147
|
+
// @ts-ignore
|
|
187
148
|
setFieldError(field, (_c = (_b = (_a = errorMsg.fields[index.stringify(field)]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : '');
|
|
188
149
|
throw errorMsg;
|
|
189
150
|
}));
|
|
190
|
-
|
|
191
151
|
case 6:
|
|
192
152
|
case "end":
|
|
193
153
|
return _context.stop();
|
|
@@ -199,7 +159,6 @@ var useForm = function useForm(_a) {
|
|
|
199
159
|
/**
|
|
200
160
|
* 校验单个 Field 及其当前值
|
|
201
161
|
*/
|
|
202
|
-
|
|
203
162
|
var validateFieldState = React.useCallback(function (field) {
|
|
204
163
|
var value = getFieldValue(field);
|
|
205
164
|
return validateField(field, value);
|
|
@@ -207,7 +166,6 @@ var useForm = function useForm(_a) {
|
|
|
207
166
|
/**
|
|
208
167
|
* 检验所有字段
|
|
209
168
|
*/
|
|
210
|
-
|
|
211
169
|
var validateAll = React.useCallback(function () {
|
|
212
170
|
var fieldNames = getRegisteredKeys();
|
|
213
171
|
formDispatch({
|
|
@@ -217,37 +175,30 @@ var useForm = function useForm(_a) {
|
|
|
217
175
|
return Promise.all(fieldNames.map(function (fieldName) {
|
|
218
176
|
var value = getFieldValue(fieldName);
|
|
219
177
|
var fieldValidation = getValidation(fieldName);
|
|
220
|
-
|
|
221
178
|
if (!fieldValidation) {
|
|
222
179
|
return Promise.resolve(null);
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
|
|
180
|
+
}
|
|
181
|
+
// catch 错误,保证检验所有表单项
|
|
226
182
|
return fieldValidation.validate(value)["catch"](function (error) {
|
|
227
183
|
// 第一个出错,即退出校验
|
|
228
184
|
if (lazyValidate) {
|
|
229
185
|
throw error;
|
|
230
186
|
}
|
|
231
|
-
|
|
232
187
|
return error;
|
|
233
188
|
});
|
|
234
189
|
})).then(function (result) {
|
|
235
190
|
// 合并错误,批量更新并返回
|
|
236
191
|
var combinedError = result.reduce(function (prev, cur, index$1) {
|
|
237
192
|
var _a, _b;
|
|
238
|
-
|
|
239
193
|
var fieldName = fieldNames[index$1];
|
|
240
194
|
var errorMsg;
|
|
241
|
-
|
|
242
195
|
if (cur instanceof Error) {
|
|
243
196
|
// @ts-ignore
|
|
244
197
|
errorMsg = ((_b = (_a = cur.fields[index.stringify(fieldName)]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) || '';
|
|
245
|
-
|
|
246
198
|
if (typeof errorMsg === 'string' && !!errorMsg) {
|
|
247
199
|
return objectUtils.setNested(prev, fieldName, errorMsg);
|
|
248
200
|
}
|
|
249
201
|
}
|
|
250
|
-
|
|
251
202
|
return prev;
|
|
252
203
|
}, {});
|
|
253
204
|
formDispatch({
|
|
@@ -261,16 +212,14 @@ var useForm = function useForm(_a) {
|
|
|
261
212
|
return combinedError;
|
|
262
213
|
})["catch"](function (error) {
|
|
263
214
|
var _a, _b;
|
|
264
|
-
|
|
265
215
|
var fieldNameStrings = fieldNames.map(function (item) {
|
|
266
216
|
return index.stringify(item);
|
|
267
|
-
});
|
|
268
|
-
|
|
217
|
+
});
|
|
218
|
+
// @ts-ignore
|
|
269
219
|
var fieldNameString = Object.keys(error.fields).find(function (item) {
|
|
270
220
|
return fieldNameStrings.includes(item);
|
|
271
221
|
});
|
|
272
222
|
var combinedError = {};
|
|
273
|
-
|
|
274
223
|
if (!fieldNameString) {
|
|
275
224
|
formDispatch({
|
|
276
225
|
type: 'SET_VALIDATING',
|
|
@@ -278,20 +227,15 @@ var useForm = function useForm(_a) {
|
|
|
278
227
|
});
|
|
279
228
|
return error;
|
|
280
229
|
}
|
|
281
|
-
|
|
282
230
|
var errorMsg;
|
|
283
|
-
|
|
284
231
|
if (error instanceof Error) {
|
|
285
232
|
// @ts-ignore
|
|
286
233
|
errorMsg = ((_b = (_a = error.fields[fieldNameString]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) || '';
|
|
287
234
|
}
|
|
288
|
-
|
|
289
235
|
var fieldName = index.parse(fieldNameString);
|
|
290
|
-
|
|
291
236
|
if (typeof errorMsg === 'string' && !!errorMsg) {
|
|
292
237
|
combinedError = objectUtils.setNested(combinedError, fieldName, errorMsg);
|
|
293
238
|
}
|
|
294
|
-
|
|
295
239
|
formDispatch({
|
|
296
240
|
type: 'SET_VALIDATING',
|
|
297
241
|
payload: false
|
|
@@ -306,7 +250,6 @@ var useForm = function useForm(_a) {
|
|
|
306
250
|
/**
|
|
307
251
|
* 控件值更新策略
|
|
308
252
|
*/
|
|
309
|
-
|
|
310
253
|
var setFieldValue = React.useCallback(function (field, value, shouldValidate) {
|
|
311
254
|
formDispatch({
|
|
312
255
|
type: 'SET_FIELD_VALUE',
|
|
@@ -314,10 +257,9 @@ var useForm = function useForm(_a) {
|
|
|
314
257
|
field: field,
|
|
315
258
|
value: value
|
|
316
259
|
}
|
|
317
|
-
});
|
|
318
|
-
|
|
260
|
+
});
|
|
261
|
+
// touched 给外部控制展示,而不是当做参数暴露
|
|
319
262
|
var shouldValidateField = validateAfterTouched ? objectUtils.getNested(formState.touched, field) && shouldValidate : shouldValidate;
|
|
320
|
-
|
|
321
263
|
if (shouldValidateField) {
|
|
322
264
|
validateField(field, value)["catch"](EMPTY_FUNC);
|
|
323
265
|
}
|
|
@@ -332,26 +274,23 @@ var useForm = function useForm(_a) {
|
|
|
332
274
|
}, []);
|
|
333
275
|
var normalizeValueFromChange = React.useCallback(function (eventOrValue, valuePropName) {
|
|
334
276
|
var nextValue = eventOrValue;
|
|
335
|
-
|
|
336
277
|
if (typeAssertion.isObjectLike(eventOrValue) && eventOrValue.target) {
|
|
337
|
-
var event = eventOrValue;
|
|
338
|
-
|
|
278
|
+
var event = eventOrValue;
|
|
279
|
+
// @see https://reactjs.org/docs/events.html#event-pooling
|
|
339
280
|
if (typeAssertion.isFunction(event.persist)) {
|
|
340
281
|
event.persist();
|
|
341
282
|
}
|
|
342
|
-
|
|
343
|
-
|
|
283
|
+
var target = event.target || event.currentTarget;
|
|
284
|
+
// if (hasOwnProp(target, valuePropName)) {
|
|
344
285
|
// nextValue = target[valuePropName]
|
|
345
286
|
// }
|
|
346
287
|
// TODO: support all native html field
|
|
347
|
-
|
|
348
288
|
if (/checkbox/.test(target.type)) {
|
|
349
289
|
nextValue = target.checked;
|
|
350
290
|
} else {
|
|
351
291
|
nextValue = target.value;
|
|
352
292
|
}
|
|
353
293
|
}
|
|
354
|
-
|
|
355
294
|
return nextValue;
|
|
356
295
|
}, []);
|
|
357
296
|
var handleFieldChange = React.useCallback(function (fieldName, valuePropName, valueDispatchTransform, shouldValidate) {
|
|
@@ -359,7 +298,6 @@ var useForm = function useForm(_a) {
|
|
|
359
298
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
360
299
|
args[_key - 1] = arguments[_key];
|
|
361
300
|
}
|
|
362
|
-
|
|
363
301
|
var nextValue = typeAssertion.isFunction(valueDispatchTransform) ? valueDispatchTransform.apply(void 0, [evt].concat(args)) : normalizeValueFromChange(evt, valuePropName);
|
|
364
302
|
setFieldValue(fieldName, nextValue, shouldValidate);
|
|
365
303
|
var changedValues = objectUtils.setNested({}, fieldName, nextValue);
|
|
@@ -370,13 +308,11 @@ var useForm = function useForm(_a) {
|
|
|
370
308
|
/**
|
|
371
309
|
* 控件失焦策略
|
|
372
310
|
*/
|
|
373
|
-
|
|
374
311
|
var handleFieldBlur = React.useCallback(function (fieldName, shouldValidate) {
|
|
375
312
|
return function (evt) {
|
|
376
313
|
if (shouldValidate) {
|
|
377
314
|
validateFieldState(fieldName)["catch"](EMPTY_FUNC);
|
|
378
315
|
}
|
|
379
|
-
|
|
380
316
|
setFieldTouched(fieldName, true);
|
|
381
317
|
};
|
|
382
318
|
}, [setFieldTouched, validateFieldState]);
|
|
@@ -388,28 +324,26 @@ var useForm = function useForm(_a) {
|
|
|
388
324
|
/**
|
|
389
325
|
* 表单重置,永远使用第一次的初始值
|
|
390
326
|
*/
|
|
391
|
-
|
|
392
327
|
var initialValuesRef = React.useRef(initialValues);
|
|
393
328
|
var initialErrorsRef = React.useRef(initialErrors);
|
|
394
329
|
var initialTouchedRef = React.useRef(initialTouched);
|
|
395
330
|
var onResetLatestRef = useLatest.useLatestRef(onReset);
|
|
396
331
|
var resetForm = React.useCallback(function (nextState) {
|
|
397
|
-
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/
|
|
332
|
+
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
|
|
398
333
|
var values, errors, touched, submitting, validating, dispatchFn;
|
|
399
|
-
return
|
|
334
|
+
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
400
335
|
while (1) {
|
|
401
336
|
switch (_context2.prev = _context2.next) {
|
|
402
337
|
case 0:
|
|
403
338
|
values = nextState && nextState.values ? nextState.values : initialValuesRef.current;
|
|
404
339
|
errors = nextState && nextState.errors ? nextState.errors : initialErrorsRef.current;
|
|
405
340
|
touched = nextState && nextState.touched ? nextState.touched : initialTouchedRef.current;
|
|
406
|
-
initialValuesRef.current = values;
|
|
407
|
-
|
|
341
|
+
initialValuesRef.current = values;
|
|
342
|
+
// @ts-ignore
|
|
408
343
|
initialErrorsRef.current = errors;
|
|
409
344
|
initialTouchedRef.current = touched;
|
|
410
345
|
submitting = !!(nextState && nextState.submitting);
|
|
411
346
|
validating = !!(nextState && nextState.validating);
|
|
412
|
-
|
|
413
347
|
dispatchFn = function dispatchFn() {
|
|
414
348
|
formDispatch({
|
|
415
349
|
type: 'SET_FORM',
|
|
@@ -422,23 +356,18 @@ var useForm = function useForm(_a) {
|
|
|
422
356
|
}
|
|
423
357
|
});
|
|
424
358
|
};
|
|
425
|
-
|
|
426
359
|
if (!onResetLatestRef.current) {
|
|
427
360
|
_context2.next = 15;
|
|
428
361
|
break;
|
|
429
362
|
}
|
|
430
|
-
|
|
431
363
|
_context2.next = 12;
|
|
432
364
|
return onResetLatestRef.current(formState.values);
|
|
433
|
-
|
|
434
365
|
case 12:
|
|
435
366
|
dispatchFn();
|
|
436
367
|
_context2.next = 16;
|
|
437
368
|
break;
|
|
438
|
-
|
|
439
369
|
case 15:
|
|
440
370
|
dispatchFn();
|
|
441
|
-
|
|
442
371
|
case 16:
|
|
443
372
|
case "end":
|
|
444
373
|
return _context2.stop();
|
|
@@ -450,10 +379,9 @@ var useForm = function useForm(_a) {
|
|
|
450
379
|
/**
|
|
451
380
|
* 表单提交
|
|
452
381
|
*/
|
|
453
|
-
|
|
454
382
|
var submitForm = React.useCallback(function () {
|
|
455
|
-
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/
|
|
456
|
-
return
|
|
383
|
+
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
|
|
384
|
+
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
|
|
457
385
|
while (1) {
|
|
458
386
|
switch (_context3.prev = _context3.next) {
|
|
459
387
|
case 0:
|
|
@@ -463,10 +391,8 @@ var useForm = function useForm(_a) {
|
|
|
463
391
|
return _context3.abrupt("return", validateAll().then(function (combinedErrors) {
|
|
464
392
|
var isInstanceOfError = combinedErrors instanceof Error;
|
|
465
393
|
var isActuallyValid = !!combinedErrors && !isInstanceOfError && Object.keys(combinedErrors).length === 0;
|
|
466
|
-
|
|
467
394
|
if (isActuallyValid) {
|
|
468
395
|
var promiseOrUndefined;
|
|
469
|
-
|
|
470
396
|
try {
|
|
471
397
|
// @ts-ignore
|
|
472
398
|
promiseOrUndefined = onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formState.values);
|
|
@@ -476,21 +402,19 @@ var useForm = function useForm(_a) {
|
|
|
476
402
|
});
|
|
477
403
|
throw error;
|
|
478
404
|
}
|
|
479
|
-
|
|
480
405
|
if (promiseOrUndefined === undefined) {
|
|
481
406
|
formDispatch({
|
|
482
407
|
type: 'SUBMIT_DONE'
|
|
483
|
-
});
|
|
484
|
-
|
|
408
|
+
});
|
|
409
|
+
// return combinedErrors
|
|
485
410
|
return formState.values;
|
|
486
411
|
}
|
|
487
|
-
|
|
488
412
|
return Promise.resolve(promiseOrUndefined).then(function (result) {
|
|
489
413
|
formDispatch({
|
|
490
414
|
type: 'SUBMIT_DONE'
|
|
491
|
-
});
|
|
415
|
+
});
|
|
416
|
+
// return result
|
|
492
417
|
// TODO: 满足promise 如果既给到values 又给到 errors
|
|
493
|
-
|
|
494
418
|
return formState.values;
|
|
495
419
|
})["catch"](function (_errors) {
|
|
496
420
|
formDispatch({
|
|
@@ -502,7 +426,6 @@ var useForm = function useForm(_a) {
|
|
|
502
426
|
formDispatch({
|
|
503
427
|
type: 'SUBMIT_DONE'
|
|
504
428
|
});
|
|
505
|
-
|
|
506
429
|
if (isInstanceOfError) {
|
|
507
430
|
throw combinedErrors;
|
|
508
431
|
} else {
|
|
@@ -515,7 +438,6 @@ var useForm = function useForm(_a) {
|
|
|
515
438
|
});
|
|
516
439
|
throw error;
|
|
517
440
|
}));
|
|
518
|
-
|
|
519
441
|
case 2:
|
|
520
442
|
case "end":
|
|
521
443
|
return _context3.stop();
|
|
@@ -541,7 +463,7 @@ var useForm = function useForm(_a) {
|
|
|
541
463
|
var resetFieldError = React.useCallback(function (field) {
|
|
542
464
|
setFieldError(field, '');
|
|
543
465
|
}, [setFieldError]);
|
|
544
|
-
var setFormState =
|
|
466
|
+
var setFormState = React.useCallback(function (stateOrFunc) {
|
|
545
467
|
// @ts-ignore
|
|
546
468
|
formDispatch({
|
|
547
469
|
type: 'SET_STATE',
|
|
@@ -556,25 +478,23 @@ var useForm = function useForm(_a) {
|
|
|
556
478
|
});
|
|
557
479
|
var getFieldProps = React.useCallback(function (props) {
|
|
558
480
|
var _returnProps;
|
|
559
|
-
|
|
560
481
|
if (props === void 0) {
|
|
561
482
|
props = {};
|
|
562
483
|
}
|
|
563
|
-
|
|
564
484
|
var _props = props,
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
if (!index.isValidField(field)) return {};
|
|
577
|
-
|
|
485
|
+
field = _props.field,
|
|
486
|
+
_props$valuePropName = _props.valuePropName,
|
|
487
|
+
valuePropName = _props$valuePropName === void 0 ? 'value' : _props$valuePropName,
|
|
488
|
+
_props$valueChangeFun = _props.valueChangeFuncPropName,
|
|
489
|
+
valueChangeFuncPropName = _props$valueChangeFun === void 0 ? 'onChange' : _props$valueChangeFun,
|
|
490
|
+
valueDispatchTransform = _props.valueDispatchTransform,
|
|
491
|
+
valueConnectTransform = _props.valueConnectTransform,
|
|
492
|
+
_props$validateTrigge = _props.validateTrigger,
|
|
493
|
+
validateTriggerProp = _props$validateTrigge === void 0 ? validateTriggersMemo : _props$validateTrigge,
|
|
494
|
+
children = _props.children;
|
|
495
|
+
// field 未设置,不进行收集管理
|
|
496
|
+
if (!index.isValidField(field)) return {};
|
|
497
|
+
// 控件的 props
|
|
578
498
|
var controlProps = children && children.props || {};
|
|
579
499
|
var validateTrigger = typeAssertion.isArray(validateTriggerProp) ? validateTriggerProp : [validateTriggerProp];
|
|
580
500
|
var validateOnCollect = validateTrigger.includes(valueChangeFuncPropName);
|
|
@@ -614,62 +534,50 @@ var useForm = function useForm(_a) {
|
|
|
614
534
|
getFieldsError: getFieldsError
|
|
615
535
|
});
|
|
616
536
|
};
|
|
617
|
-
|
|
618
537
|
function formReducer(state, action) {
|
|
619
538
|
switch (action.type) {
|
|
620
539
|
case 'SET_STATE':
|
|
621
540
|
var nextState = typeAssertion.isFunction(action.payload) ? action.payload(state) : action.payload;
|
|
622
541
|
return Object.assign(Object.assign({}, state), nextState);
|
|
623
|
-
|
|
624
542
|
case 'SET_VALUES':
|
|
625
543
|
var nextValues = typeAssertion.isFunction(action.payload) ? action.payload(state.values) : action.payload;
|
|
626
544
|
return Object.assign(Object.assign({}, state), {
|
|
627
545
|
values: nextValues
|
|
628
546
|
});
|
|
629
|
-
|
|
630
547
|
case 'SET_ERRORS':
|
|
631
548
|
return Object.assign(Object.assign({}, state), {
|
|
632
549
|
errors: action.payload
|
|
633
550
|
});
|
|
634
|
-
|
|
635
551
|
case 'SET_TOUCHED':
|
|
636
552
|
return Object.assign(Object.assign({}, state), {
|
|
637
553
|
touched: action.payload
|
|
638
554
|
});
|
|
639
|
-
|
|
640
555
|
case 'SET_SUBMITTING':
|
|
641
556
|
return Object.assign(Object.assign({}, state), {
|
|
642
557
|
submitting: action.payload
|
|
643
558
|
});
|
|
644
|
-
|
|
645
559
|
case 'SET_VALIDATING':
|
|
646
560
|
return Object.assign(Object.assign({}, state), {
|
|
647
561
|
validating: action.payload
|
|
648
562
|
});
|
|
649
|
-
|
|
650
563
|
case 'SET_FIELD_VALUE':
|
|
651
564
|
return Object.assign(Object.assign({}, state), {
|
|
652
565
|
values: objectUtils.setNested(state.values, action.payload.field, action.payload.value)
|
|
653
566
|
});
|
|
654
|
-
|
|
655
567
|
case 'SET_FIELD_TOUCHED':
|
|
656
568
|
return Object.assign(Object.assign({}, state), {
|
|
657
569
|
touched: objectUtils.setNested(state.touched, action.payload.field, action.payload.value)
|
|
658
570
|
});
|
|
659
|
-
|
|
660
571
|
case 'SET_FIELD_ERROR':
|
|
661
572
|
return Object.assign(Object.assign({}, state), {
|
|
662
573
|
errors: objectUtils.setNested(state.errors, action.payload.field, action.payload.value)
|
|
663
574
|
});
|
|
664
|
-
|
|
665
575
|
case 'SET_FORM':
|
|
666
576
|
return Object.assign(Object.assign({}, state), action.payload);
|
|
667
|
-
|
|
668
577
|
case 'SUBMIT_DONE':
|
|
669
578
|
return Object.assign(Object.assign({}, state), {
|
|
670
579
|
submitting: false
|
|
671
580
|
});
|
|
672
|
-
|
|
673
581
|
default:
|
|
674
582
|
return state;
|
|
675
583
|
}
|
|
@@ -677,8 +585,6 @@ function formReducer(state, action) {
|
|
|
677
585
|
/**
|
|
678
586
|
* 一个注册表的收集器
|
|
679
587
|
*/
|
|
680
|
-
|
|
681
|
-
|
|
682
588
|
var useCollection = function useCollection() {
|
|
683
589
|
var collectionMp = React.useMemo(function () {
|
|
684
590
|
return new Map();
|
|
@@ -692,11 +598,9 @@ var useCollection = function useCollection() {
|
|
|
692
598
|
}, []);
|
|
693
599
|
var getCollection = React.useCallback(function (keyOrKeys) {
|
|
694
600
|
var key = index.stringify(keyOrKeys);
|
|
695
|
-
|
|
696
601
|
if (collectionRef.current.has(key)) {
|
|
697
602
|
return collectionRef.current.get(key);
|
|
698
603
|
}
|
|
699
|
-
|
|
700
604
|
return null;
|
|
701
605
|
}, []);
|
|
702
606
|
var getRegisteredKeys = React.useCallback(function () {
|
|
@@ -708,5 +612,4 @@ var useCollection = function useCollection() {
|
|
|
708
612
|
}, []);
|
|
709
613
|
return [getCollection, register, unregister, getRegisteredKeys];
|
|
710
614
|
};
|
|
711
|
-
|
|
712
615
|
exports.useForm = useForm;
|
package/lib/cjs/utils/index.js
CHANGED
|
@@ -9,22 +9,16 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
Object.defineProperty(exports, '__esModule', {
|
|
13
|
-
value: true
|
|
14
|
-
});
|
|
15
|
-
|
|
16
12
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
17
|
-
|
|
18
13
|
var objectUtils = require('@hi-ui/object-utils');
|
|
19
14
|
|
|
15
|
+
// TODO: 支持 数字字符串持久化 唯一化
|
|
20
16
|
var stringify = function stringify(field) {
|
|
21
17
|
return JSON.stringify(field);
|
|
22
18
|
};
|
|
23
|
-
|
|
24
19
|
var parse = function parse(fieldStr) {
|
|
25
20
|
return JSON.parse(fieldStr);
|
|
26
21
|
};
|
|
27
|
-
|
|
28
22
|
var isValidField = function isValidField(field) {
|
|
29
23
|
if (typeAssertion.isNullish(field) || field === '') return false;
|
|
30
24
|
if (typeAssertion.isArray(field) && field.every(function (item) {
|
|
@@ -32,21 +26,17 @@ var isValidField = function isValidField(field) {
|
|
|
32
26
|
})) return false;
|
|
33
27
|
return true;
|
|
34
28
|
};
|
|
35
|
-
|
|
36
29
|
var mergeValues = function mergeValues(source, override) {
|
|
37
30
|
if (!override) return source;
|
|
38
31
|
if (!source) return objectUtils.clone(override);
|
|
39
32
|
var target = objectUtils.clone(source);
|
|
40
|
-
|
|
41
33
|
for (var key in override) {
|
|
42
34
|
if (objectUtils.hasOwnProp(override, key)) {
|
|
43
35
|
target[key] = override[key];
|
|
44
36
|
}
|
|
45
37
|
}
|
|
46
|
-
|
|
47
38
|
return target;
|
|
48
39
|
};
|
|
49
|
-
|
|
50
40
|
exports.isValidField = isValidField;
|
|
51
41
|
exports.mergeValues = mergeValues;
|
|
52
42
|
exports.parse = parse;
|