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