@hi-ui/form 4.0.0-beta.9 → 4.0.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.
- package/lib/cjs/Form.js +12 -10
- package/lib/cjs/FormField.js +5 -2
- package/lib/cjs/FormItem.js +25 -8
- package/lib/cjs/FormLabel.js +11 -10
- package/lib/cjs/FormList.js +9 -11
- package/lib/cjs/FormMessage.js +2 -3
- package/lib/cjs/FormReset.js +2 -3
- package/lib/cjs/FormSubmit.js +4 -3
- package/lib/cjs/context.js +1 -2
- package/lib/cjs/index.js +1 -2
- package/lib/cjs/styles/index.scss.js +3 -4
- package/lib/cjs/use-form-field.js +20 -17
- package/lib/cjs/use-form.js +130 -37
- package/lib/cjs/utils/index.js +29 -2
- package/lib/esm/Form.js +10 -8
- package/lib/esm/FormField.js +5 -2
- package/lib/esm/FormItem.js +22 -6
- package/lib/esm/FormLabel.js +6 -5
- package/lib/esm/FormList.js +2 -4
- package/lib/esm/FormMessage.js +1 -2
- package/lib/esm/FormReset.js +1 -2
- package/lib/esm/FormSubmit.js +3 -2
- package/lib/esm/context.js +1 -2
- package/lib/esm/index.js +2 -3
- package/lib/esm/styles/index.scss.js +4 -6
- package/lib/esm/use-form-field.js +21 -19
- package/lib/esm/use-form.js +125 -32
- package/lib/esm/utils/index.js +27 -3
- package/lib/types/Form.d.ts +4 -0
- package/lib/types/FormField.d.ts +2 -2
- package/lib/types/FormItem.d.ts +3 -3
- package/lib/types/FormLabel.d.ts +1 -1
- package/lib/types/FormList.d.ts +4 -3
- package/lib/types/FormReset.d.ts +3 -0
- package/lib/types/FormSubmit.d.ts +4 -1
- package/lib/types/context.d.ts +2 -0
- package/lib/types/types.d.ts +38 -21
- package/lib/types/use-form-field.d.ts +3 -1
- package/lib/types/use-form.d.ts +8 -6
- package/lib/types/utils/index.d.ts +2 -1
- package/package.json +16 -15
- package/lib/cjs/Form.js.map +0 -1
- package/lib/cjs/FormField.js.map +0 -1
- package/lib/cjs/FormItem.js.map +0 -1
- package/lib/cjs/FormLabel.js.map +0 -1
- package/lib/cjs/FormList.js.map +0 -1
- package/lib/cjs/FormMessage.js.map +0 -1
- package/lib/cjs/FormReset.js.map +0 -1
- package/lib/cjs/FormSubmit.js.map +0 -1
- package/lib/cjs/context.js.map +0 -1
- package/lib/cjs/index.js.map +0 -1
- package/lib/cjs/styles/index.scss.js.map +0 -1
- package/lib/cjs/use-form-field.js.map +0 -1
- package/lib/cjs/use-form.js.map +0 -1
- package/lib/cjs/utils/index.js.map +0 -1
- package/lib/esm/Form.js.map +0 -1
- package/lib/esm/FormField.js.map +0 -1
- package/lib/esm/FormItem.js.map +0 -1
- package/lib/esm/FormLabel.js.map +0 -1
- package/lib/esm/FormList.js.map +0 -1
- package/lib/esm/FormMessage.js.map +0 -1
- package/lib/esm/FormReset.js.map +0 -1
- package/lib/esm/FormSubmit.js.map +0 -1
- package/lib/esm/context.js.map +0 -1
- package/lib/esm/index.js.map +0 -1
- package/lib/esm/styles/index.scss.js.map +0 -1
- package/lib/esm/use-form-field.js.map +0 -1
- package/lib/esm/use-form.js.map +0 -1
- package/lib/esm/utils/index.js.map +0 -1
package/lib/cjs/use-form.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -48,12 +48,16 @@ var EMPTY_ERRORS = {};
|
|
|
48
48
|
var EMPTY_TOUCHED = {};
|
|
49
49
|
var DEFAULT_VALIDATE_TRIGGER = ['onChange', 'onBlur'];
|
|
50
50
|
|
|
51
|
+
var EMPTY_FUNC = function EMPTY_FUNC() {};
|
|
52
|
+
|
|
51
53
|
var useForm = function useForm(_a) {
|
|
52
54
|
var initialValues = _a.initialValues,
|
|
53
55
|
_a$initialErrors = _a.initialErrors,
|
|
54
56
|
initialErrors = _a$initialErrors === void 0 ? EMPTY_ERRORS : _a$initialErrors,
|
|
55
57
|
_a$initialTouched = _a.initialTouched,
|
|
56
58
|
initialTouched = _a$initialTouched === void 0 ? EMPTY_TOUCHED : _a$initialTouched,
|
|
59
|
+
_a$lazyValidate = _a.lazyValidate,
|
|
60
|
+
lazyValidate = _a$lazyValidate === void 0 ? false : _a$lazyValidate,
|
|
57
61
|
onValuesChange = _a.onValuesChange,
|
|
58
62
|
onReset = _a.onReset,
|
|
59
63
|
onSubmit = _a.onSubmit,
|
|
@@ -144,9 +148,9 @@ var useForm = function useForm(_a) {
|
|
|
144
148
|
*/
|
|
145
149
|
|
|
146
150
|
var validateField = React.useCallback(function (field, value) {
|
|
147
|
-
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default[
|
|
151
|
+
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee() {
|
|
148
152
|
var fieldValidation, errorResultAsPromise;
|
|
149
|
-
return _regeneratorRuntime__default[
|
|
153
|
+
return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
|
|
150
154
|
while (1) {
|
|
151
155
|
switch (_context.prev = _context.next) {
|
|
152
156
|
case 0:
|
|
@@ -179,11 +183,8 @@ var useForm = function useForm(_a) {
|
|
|
179
183
|
type: 'SET_VALIDATING',
|
|
180
184
|
payload: false
|
|
181
185
|
}); // @ts-ignore
|
|
182
|
-
// @ts-ignore
|
|
183
|
-
|
|
184
|
-
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 : ''); // TODO: 回调和promise支持
|
|
185
|
-
// TODO: 回调和promise支持
|
|
186
186
|
|
|
187
|
+
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 : '');
|
|
187
188
|
throw errorMsg;
|
|
188
189
|
}));
|
|
189
190
|
|
|
@@ -209,16 +210,104 @@ var useForm = function useForm(_a) {
|
|
|
209
210
|
|
|
210
211
|
var validateAll = React.useCallback(function () {
|
|
211
212
|
var fieldNames = getRegisteredKeys();
|
|
213
|
+
formDispatch({
|
|
214
|
+
type: 'SET_VALIDATING',
|
|
215
|
+
payload: true
|
|
216
|
+
});
|
|
212
217
|
return Promise.all(fieldNames.map(function (fieldName) {
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
218
|
+
var value = getFieldValue(fieldName);
|
|
219
|
+
var fieldValidation = getValidation(fieldName);
|
|
220
|
+
|
|
221
|
+
if (!fieldValidation) {
|
|
222
|
+
return Promise.resolve(null);
|
|
223
|
+
} // catch 错误,保证检验所有表单项
|
|
224
|
+
|
|
225
|
+
|
|
226
|
+
return fieldValidation.validate(value)["catch"](function (error) {
|
|
227
|
+
// 第一个出错,即退出校验
|
|
228
|
+
if (lazyValidate) {
|
|
229
|
+
throw error;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
return error;
|
|
233
|
+
});
|
|
234
|
+
})).then(function (result) {
|
|
235
|
+
// 合并错误,批量更新并返回
|
|
236
|
+
var combinedError = result.reduce(function (prev, cur, index$1) {
|
|
237
|
+
var _a, _b;
|
|
238
|
+
|
|
239
|
+
var fieldName = fieldNames[index$1];
|
|
240
|
+
var errorMsg;
|
|
241
|
+
|
|
242
|
+
if (cur instanceof Error) {
|
|
243
|
+
// @ts-ignore
|
|
244
|
+
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
|
+
if (typeof errorMsg === 'string' && !!errorMsg) {
|
|
247
|
+
return objectUtils.setNested(prev, fieldName, errorMsg);
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
return prev;
|
|
252
|
+
}, {});
|
|
253
|
+
formDispatch({
|
|
254
|
+
type: 'SET_VALIDATING',
|
|
255
|
+
payload: false
|
|
256
|
+
});
|
|
257
|
+
formDispatch({
|
|
258
|
+
type: 'SET_ERRORS',
|
|
259
|
+
payload: combinedError
|
|
260
|
+
});
|
|
261
|
+
return combinedError;
|
|
262
|
+
})["catch"](function (error) {
|
|
263
|
+
var _a, _b;
|
|
264
|
+
|
|
265
|
+
var fieldNameStrings = fieldNames.map(function (item) {
|
|
266
|
+
return index.stringify(item);
|
|
267
|
+
}); // @ts-ignore
|
|
268
|
+
|
|
269
|
+
var fieldNameString = Object.keys(error.fields).find(function (item) {
|
|
270
|
+
return fieldNameStrings.includes(item);
|
|
271
|
+
});
|
|
272
|
+
var combinedError = {};
|
|
273
|
+
|
|
274
|
+
if (!fieldNameString) {
|
|
275
|
+
formDispatch({
|
|
276
|
+
type: 'SET_VALIDATING',
|
|
277
|
+
payload: false
|
|
278
|
+
});
|
|
279
|
+
return error;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
var errorMsg;
|
|
283
|
+
|
|
284
|
+
if (error instanceof Error) {
|
|
285
|
+
// @ts-ignore
|
|
286
|
+
errorMsg = ((_b = (_a = error.fields[fieldNameString]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) || '';
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
var fieldName = index.parse(fieldNameString);
|
|
290
|
+
|
|
291
|
+
if (typeof errorMsg === 'string' && !!errorMsg) {
|
|
292
|
+
combinedError = objectUtils.setNested(combinedError, fieldName, errorMsg);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
formDispatch({
|
|
296
|
+
type: 'SET_VALIDATING',
|
|
297
|
+
payload: false
|
|
298
|
+
});
|
|
299
|
+
formDispatch({
|
|
300
|
+
type: 'SET_ERRORS',
|
|
301
|
+
payload: combinedError
|
|
302
|
+
});
|
|
303
|
+
return combinedError;
|
|
304
|
+
});
|
|
305
|
+
}, [getRegisteredKeys, getFieldValue, getValidation, lazyValidate]);
|
|
216
306
|
/**
|
|
217
307
|
* 控件值更新策略
|
|
218
308
|
*/
|
|
219
309
|
|
|
220
310
|
var setFieldValue = React.useCallback(function (field, value, shouldValidate) {
|
|
221
|
-
// @ts-ignore
|
|
222
311
|
formDispatch({
|
|
223
312
|
type: 'SET_FIELD_VALUE',
|
|
224
313
|
payload: {
|
|
@@ -227,20 +316,20 @@ var useForm = function useForm(_a) {
|
|
|
227
316
|
}
|
|
228
317
|
}); // touched 给外部控制展示,而不是当做参数暴露
|
|
229
318
|
|
|
230
|
-
var shouldValidateField =
|
|
231
|
-
validateAfterTouched ? objectUtils.getNested(formState.touched, field) && shouldValidate : shouldValidate;
|
|
319
|
+
var shouldValidateField = validateAfterTouched ? objectUtils.getNested(formState.touched, field) && shouldValidate : shouldValidate;
|
|
232
320
|
|
|
233
321
|
if (shouldValidateField) {
|
|
234
|
-
validateField(field, value);
|
|
322
|
+
validateField(field, value)["catch"](EMPTY_FUNC);
|
|
235
323
|
}
|
|
236
324
|
}, [validateField, validateAfterTouched, formState]);
|
|
237
|
-
var setFieldsValue = React.useCallback(function (
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
325
|
+
var setFieldsValue = React.useCallback(function (fieldsState) {
|
|
326
|
+
formDispatch({
|
|
327
|
+
type: 'SET_VALUES',
|
|
328
|
+
payload: function payload(prevState) {
|
|
329
|
+
return typeAssertion.isFunction(fieldsState) ? fieldsState(prevState) : index.mergeValues(prevState, fieldsState);
|
|
330
|
+
}
|
|
242
331
|
});
|
|
243
|
-
}, [
|
|
332
|
+
}, []);
|
|
244
333
|
var normalizeValueFromChange = React.useCallback(function (eventOrValue, valuePropName) {
|
|
245
334
|
var nextValue = eventOrValue;
|
|
246
335
|
|
|
@@ -285,7 +374,7 @@ var useForm = function useForm(_a) {
|
|
|
285
374
|
var handleFieldBlur = React.useCallback(function (fieldName, shouldValidate) {
|
|
286
375
|
return function (evt) {
|
|
287
376
|
if (shouldValidate) {
|
|
288
|
-
validateFieldState(fieldName);
|
|
377
|
+
validateFieldState(fieldName)["catch"](EMPTY_FUNC);
|
|
289
378
|
}
|
|
290
379
|
|
|
291
380
|
setFieldTouched(fieldName, true);
|
|
@@ -293,7 +382,7 @@ var useForm = function useForm(_a) {
|
|
|
293
382
|
}, [setFieldTouched, validateFieldState]);
|
|
294
383
|
var handleFieldTrigger = React.useCallback(function (fieldName) {
|
|
295
384
|
return function (evt) {
|
|
296
|
-
validateFieldState(fieldName);
|
|
385
|
+
validateFieldState(fieldName)["catch"](EMPTY_FUNC);
|
|
297
386
|
};
|
|
298
387
|
}, [validateFieldState]);
|
|
299
388
|
/**
|
|
@@ -305,9 +394,9 @@ var useForm = function useForm(_a) {
|
|
|
305
394
|
var initialTouchedRef = React.useRef(initialTouched);
|
|
306
395
|
var onResetLatestRef = useLatest.useLatestRef(onReset);
|
|
307
396
|
var resetForm = React.useCallback(function (nextState) {
|
|
308
|
-
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default[
|
|
397
|
+
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee2() {
|
|
309
398
|
var values, errors, touched, submitting, validating, dispatchFn;
|
|
310
|
-
return _regeneratorRuntime__default[
|
|
399
|
+
return _regeneratorRuntime__default["default"].wrap(function _callee2$(_context2) {
|
|
311
400
|
while (1) {
|
|
312
401
|
switch (_context2.prev = _context2.next) {
|
|
313
402
|
case 0:
|
|
@@ -363,8 +452,8 @@ var useForm = function useForm(_a) {
|
|
|
363
452
|
*/
|
|
364
453
|
|
|
365
454
|
var submitForm = React.useCallback(function () {
|
|
366
|
-
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default[
|
|
367
|
-
return _regeneratorRuntime__default[
|
|
455
|
+
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee3() {
|
|
456
|
+
return _regeneratorRuntime__default["default"].wrap(function _callee3$(_context3) {
|
|
368
457
|
while (1) {
|
|
369
458
|
switch (_context3.prev = _context3.next) {
|
|
370
459
|
case 0:
|
|
@@ -373,7 +462,7 @@ var useForm = function useForm(_a) {
|
|
|
373
462
|
});
|
|
374
463
|
return _context3.abrupt("return", validateAll().then(function (combinedErrors) {
|
|
375
464
|
var isInstanceOfError = combinedErrors instanceof Error;
|
|
376
|
-
var isActuallyValid = !isInstanceOfError;
|
|
465
|
+
var isActuallyValid = !!combinedErrors && !isInstanceOfError && Object.keys(combinedErrors).length === 0;
|
|
377
466
|
|
|
378
467
|
if (isActuallyValid) {
|
|
379
468
|
var promiseOrUndefined;
|
|
@@ -392,7 +481,6 @@ var useForm = function useForm(_a) {
|
|
|
392
481
|
formDispatch({
|
|
393
482
|
type: 'SUBMIT_DONE'
|
|
394
483
|
}); // return combinedErrors
|
|
395
|
-
// return combinedErrors
|
|
396
484
|
|
|
397
485
|
return formState.values;
|
|
398
486
|
}
|
|
@@ -402,8 +490,6 @@ var useForm = function useForm(_a) {
|
|
|
402
490
|
type: 'SUBMIT_DONE'
|
|
403
491
|
}); // return result
|
|
404
492
|
// TODO: 满足promise 如果既给到values 又给到 errors
|
|
405
|
-
// return result
|
|
406
|
-
// TODO: 满足promise 如果既给到values 又给到 errors
|
|
407
493
|
|
|
408
494
|
return formState.values;
|
|
409
495
|
})["catch"](function (_errors) {
|
|
@@ -419,6 +505,8 @@ var useForm = function useForm(_a) {
|
|
|
419
505
|
|
|
420
506
|
if (isInstanceOfError) {
|
|
421
507
|
throw combinedErrors;
|
|
508
|
+
} else {
|
|
509
|
+
throw new TypeError('Validation Error');
|
|
422
510
|
}
|
|
423
511
|
}
|
|
424
512
|
}, function (error) {
|
|
@@ -446,12 +534,14 @@ var useForm = function useForm(_a) {
|
|
|
446
534
|
}, [resetForm]);
|
|
447
535
|
var resetErrors = React.useCallback(function () {
|
|
448
536
|
formDispatch({
|
|
449
|
-
// TODO: reset errorMsg
|
|
450
537
|
type: 'SET_ERRORS',
|
|
451
538
|
payload: {}
|
|
452
539
|
});
|
|
453
540
|
}, []);
|
|
454
|
-
var
|
|
541
|
+
var resetFieldError = React.useCallback(function (field) {
|
|
542
|
+
setFieldError(field, '');
|
|
543
|
+
}, [setFieldError]);
|
|
544
|
+
var setFormState = React__default["default"].useCallback(function (stateOrFunc) {
|
|
455
545
|
// @ts-ignore
|
|
456
546
|
formDispatch({
|
|
457
547
|
type: 'SET_STATE',
|
|
@@ -481,7 +571,10 @@ var useForm = function useForm(_a) {
|
|
|
481
571
|
valueConnectTransform = _props.valueConnectTransform,
|
|
482
572
|
_props$validateTrigge = _props.validateTrigger,
|
|
483
573
|
validateTriggerProp = _props$validateTrigge === void 0 ? validateTriggersMemo : _props$validateTrigge,
|
|
484
|
-
children = _props.children;
|
|
574
|
+
children = _props.children; // field 未设置,不进行收集管理
|
|
575
|
+
|
|
576
|
+
if (!index.isValidField(field)) return {}; // 控件的 props
|
|
577
|
+
|
|
485
578
|
var controlProps = children && children.props || {};
|
|
486
579
|
var validateTrigger = typeAssertion.isArray(validateTriggerProp) ? validateTriggerProp : [validateTriggerProp];
|
|
487
580
|
var validateOnCollect = validateTrigger.includes(valueChangeFuncPropName);
|
|
@@ -513,14 +606,14 @@ var useForm = function useForm(_a) {
|
|
|
513
606
|
submitForm: submitForm,
|
|
514
607
|
resetForm: resetForm,
|
|
515
608
|
resetErrors: resetErrors,
|
|
609
|
+
resetFieldError: resetFieldError,
|
|
516
610
|
validateFieldState: validateFieldState,
|
|
517
611
|
validateValue: validateField,
|
|
518
612
|
getFieldsValue: getFieldsValue,
|
|
519
613
|
setFieldsValue: setFieldsValue,
|
|
520
614
|
getFieldsError: getFieldsError
|
|
521
615
|
});
|
|
522
|
-
};
|
|
523
|
-
|
|
616
|
+
};
|
|
524
617
|
|
|
525
618
|
function formReducer(state, action) {
|
|
526
619
|
switch (action.type) {
|
|
@@ -529,8 +622,9 @@ function formReducer(state, action) {
|
|
|
529
622
|
return Object.assign(Object.assign({}, state), nextState);
|
|
530
623
|
|
|
531
624
|
case 'SET_VALUES':
|
|
625
|
+
var nextValues = typeAssertion.isFunction(action.payload) ? action.payload(state.values) : action.payload;
|
|
532
626
|
return Object.assign(Object.assign({}, state), {
|
|
533
|
-
values:
|
|
627
|
+
values: nextValues
|
|
534
628
|
});
|
|
535
629
|
|
|
536
630
|
case 'SET_ERRORS':
|
|
@@ -616,4 +710,3 @@ var useCollection = function useCollection() {
|
|
|
616
710
|
};
|
|
617
711
|
|
|
618
712
|
exports.useForm = useForm;
|
|
619
|
-
//# sourceMappingURL=use-form.js.map
|
package/lib/cjs/utils/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -13,6 +13,10 @@ Object.defineProperty(exports, '__esModule', {
|
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
15
|
|
|
16
|
+
var typeAssertion = require('@hi-ui/type-assertion');
|
|
17
|
+
|
|
18
|
+
var objectUtils = require('@hi-ui/object-utils');
|
|
19
|
+
|
|
16
20
|
var stringify = function stringify(field) {
|
|
17
21
|
return JSON.stringify(field);
|
|
18
22
|
};
|
|
@@ -21,6 +25,29 @@ var parse = function parse(fieldStr) {
|
|
|
21
25
|
return JSON.parse(fieldStr);
|
|
22
26
|
};
|
|
23
27
|
|
|
28
|
+
var isValidField = function isValidField(field) {
|
|
29
|
+
if (typeAssertion.isNullish(field) || field === '') return false;
|
|
30
|
+
if (typeAssertion.isArray(field) && field.every(function (item) {
|
|
31
|
+
return typeAssertion.isNullish(item) || item === '';
|
|
32
|
+
})) return false;
|
|
33
|
+
return true;
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
var mergeValues = function mergeValues(source, override) {
|
|
37
|
+
if (!override) return source;
|
|
38
|
+
if (!source) return objectUtils.clone(override);
|
|
39
|
+
var target = objectUtils.clone(source);
|
|
40
|
+
|
|
41
|
+
for (var key in override) {
|
|
42
|
+
if (objectUtils.hasOwnProp(override, key)) {
|
|
43
|
+
target[key] = override[key];
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
return target;
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
exports.isValidField = isValidField;
|
|
51
|
+
exports.mergeValues = mergeValues;
|
|
24
52
|
exports.parse = parse;
|
|
25
53
|
exports.stringify = stringify;
|
|
26
|
-
//# sourceMappingURL=index.js.map
|
package/lib/esm/Form.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -38,9 +38,11 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
38
38
|
placement = _a$placement === void 0 ? 'vertical' : _a$placement,
|
|
39
39
|
_a$contentPosition = _a.contentPosition,
|
|
40
40
|
contentPosition = _a$contentPosition === void 0 ? 'center' : _a$contentPosition,
|
|
41
|
+
_a$showRequiredOnVali = _a.showRequiredOnValidateRequired,
|
|
42
|
+
showRequiredOnValidateRequired = _a$showRequiredOnVali === void 0 ? false : _a$showRequiredOnVali,
|
|
41
43
|
_a$showColon = _a.showColon,
|
|
42
44
|
showColon = _a$showColon === void 0 ? true : _a$showColon,
|
|
43
|
-
rest = __rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showColon"]);
|
|
45
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon"]);
|
|
44
46
|
|
|
45
47
|
var formContext = useForm(rest);
|
|
46
48
|
var getRootProps = formContext.getRootProps; // @ts-ignore
|
|
@@ -50,14 +52,14 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
50
52
|
validate: formContext.submitForm,
|
|
51
53
|
reset: formContext.resetForm,
|
|
52
54
|
validateField: formContext.validateFieldState,
|
|
53
|
-
// validateFields: formContext.va,
|
|
54
55
|
setFieldValue: formContext.setFieldValue,
|
|
55
56
|
setFieldsValue: formContext.setFieldsValue,
|
|
56
57
|
getFieldValue: formContext.getFieldValue,
|
|
57
58
|
getFieldsValue: formContext.getFieldsValue,
|
|
58
59
|
getFieldError: formContext.getFieldError,
|
|
59
60
|
getFieldsError: formContext.getFieldsError,
|
|
60
|
-
clearValidates: formContext.resetErrors
|
|
61
|
+
clearValidates: formContext.resetErrors,
|
|
62
|
+
clearFieldValidate: formContext.resetFieldError
|
|
61
63
|
};
|
|
62
64
|
});
|
|
63
65
|
var providedValue = useMemo(function () {
|
|
@@ -65,11 +67,12 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
65
67
|
labelWidth: labelWidth,
|
|
66
68
|
labelPlacement: labelPlacement,
|
|
67
69
|
showColon: showColon,
|
|
68
|
-
contentPosition: contentPosition
|
|
70
|
+
contentPosition: contentPosition,
|
|
71
|
+
showRequiredOnValidateRequired: showRequiredOnValidateRequired
|
|
69
72
|
}, formContext), {
|
|
70
73
|
prefixCls: prefixCls
|
|
71
74
|
});
|
|
72
|
-
}, [labelWidth, formContext, labelPlacement, showColon, prefixCls, contentPosition]);
|
|
75
|
+
}, [labelWidth, formContext, labelPlacement, showColon, prefixCls, contentPosition, showRequiredOnValidateRequired]);
|
|
73
76
|
var cls = cx(prefixCls, className, placement && prefixCls + "--placement-" + placement);
|
|
74
77
|
return (
|
|
75
78
|
/*#__PURE__*/
|
|
@@ -94,7 +97,7 @@ var formExtends = function formExtends(model) {
|
|
|
94
97
|
// @ts-ignore
|
|
95
98
|
FORM_REGISTER_TABLE[model.name] = model;
|
|
96
99
|
} else {
|
|
97
|
-
invariant(
|
|
100
|
+
invariant(false, 'The name should be unique string and not empty.');
|
|
98
101
|
}
|
|
99
102
|
};
|
|
100
103
|
|
|
@@ -102,4 +105,3 @@ Object.assign(Form, {
|
|
|
102
105
|
"extends": formExtends
|
|
103
106
|
});
|
|
104
107
|
export { FORM_REGISTER_TABLE, Form };
|
|
105
|
-
//# sourceMappingURL=Form.js.map
|
package/lib/esm/FormField.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -24,6 +24,10 @@ var FormField = function FormField(props) {
|
|
|
24
24
|
return props.render(fieldProps);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
if (isFunction(props.children)) {
|
|
28
|
+
return props.children(fieldProps);
|
|
29
|
+
}
|
|
30
|
+
|
|
27
31
|
if (! /*#__PURE__*/isValidElement(props.children)) {
|
|
28
32
|
console.warn('FormField must pass a valid element as children.');
|
|
29
33
|
return (_a = props.children) !== null && _a !== void 0 ? _a : null;
|
|
@@ -37,4 +41,3 @@ if (__DEV__) {
|
|
|
37
41
|
}
|
|
38
42
|
|
|
39
43
|
export { FormField };
|
|
40
|
-
//# sourceMappingURL=FormField.js.map
|
package/lib/esm/FormItem.js
CHANGED
|
@@ -2,14 +2,15 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
10
|
import { __rest } from 'tslib';
|
|
11
|
-
import React from 'react';
|
|
11
|
+
import React, { useMemo } from 'react';
|
|
12
12
|
import { __DEV__ } from '@hi-ui/env';
|
|
13
|
+
import { useFiledRules } from './use-form-field.js';
|
|
13
14
|
import { FormLabel } from './FormLabel.js';
|
|
14
15
|
import { FormMessage } from './FormMessage.js';
|
|
15
16
|
import { FormField } from './FormField.js';
|
|
@@ -31,13 +32,29 @@ var FormItem = function FormItem(_a) {
|
|
|
31
32
|
valueConnectTransform = _a.valueConnectTransform,
|
|
32
33
|
validateTrigger = _a.validateTrigger,
|
|
33
34
|
render = _a.render,
|
|
34
|
-
rest = __rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
|
|
35
|
-
|
|
35
|
+
rest = __rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
|
|
36
36
|
|
|
37
37
|
var _useFormContext = useFormContext(),
|
|
38
|
-
prefixCls = _useFormContext.prefixCls
|
|
38
|
+
prefixCls = _useFormContext.prefixCls,
|
|
39
|
+
showRequiredOnValidateRequired = _useFormContext.showRequiredOnValidateRequired;
|
|
40
|
+
|
|
41
|
+
var fieldRules = useFiledRules({
|
|
42
|
+
field: field,
|
|
43
|
+
rules: rules,
|
|
44
|
+
valueType: valueType
|
|
45
|
+
});
|
|
46
|
+
var required = rest.required;
|
|
47
|
+
var showRequired = useMemo(function () {
|
|
48
|
+
if (required === undefined) {
|
|
49
|
+
return showRequiredOnValidateRequired && fieldRules.some(function (item) {
|
|
50
|
+
return item.required;
|
|
51
|
+
});
|
|
52
|
+
}
|
|
39
53
|
|
|
54
|
+
return required;
|
|
55
|
+
}, [required, showRequiredOnValidateRequired, fieldRules]);
|
|
40
56
|
return /*#__PURE__*/React.createElement(FormLabel, Object.assign({}, rest, {
|
|
57
|
+
required: showRequired,
|
|
41
58
|
className: cx(prefixCls + "-item", className)
|
|
42
59
|
}), /*#__PURE__*/React.createElement(FormField, {
|
|
43
60
|
field: field,
|
|
@@ -60,4 +77,3 @@ if (__DEV__) {
|
|
|
60
77
|
}
|
|
61
78
|
|
|
62
79
|
export { FormItem };
|
|
63
|
-
//# sourceMappingURL=FormItem.js.map
|
package/lib/esm/FormLabel.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -13,7 +13,7 @@ import { getPrefixCls, cx } from '@hi-ui/classname';
|
|
|
13
13
|
import { __DEV__ } from '@hi-ui/env';
|
|
14
14
|
import { useFormContext } from './context.js';
|
|
15
15
|
import { isNumeric } from '@hi-ui/type-assertion';
|
|
16
|
-
import { useLocaleContext } from '@hi-ui/
|
|
16
|
+
import { useLocaleContext } from '@hi-ui/core';
|
|
17
17
|
var _role = 'form-label';
|
|
18
18
|
|
|
19
19
|
var _prefix = getPrefixCls(_role);
|
|
@@ -27,7 +27,7 @@ var FormLabel = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
27
27
|
|
|
28
28
|
var _useFormContext = useFormContext(),
|
|
29
29
|
labelWidthContext = _useFormContext.labelWidth,
|
|
30
|
-
|
|
30
|
+
labelPlacementContext = _useFormContext.labelPlacement,
|
|
31
31
|
showColonContext = _useFormContext.showColon,
|
|
32
32
|
contentPositionContext = _useFormContext.contentPosition;
|
|
33
33
|
|
|
@@ -47,7 +47,9 @@ var FormLabel = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
47
47
|
showColon = _props$showColon === void 0 ? showColonContext : _props$showColon,
|
|
48
48
|
_props$contentPositio = props.contentPosition,
|
|
49
49
|
contentPosition = _props$contentPositio === void 0 ? contentPositionContext : _props$contentPositio,
|
|
50
|
-
|
|
50
|
+
_props$labelPlacement = props.labelPlacement,
|
|
51
|
+
labelPlacement = _props$labelPlacement === void 0 ? labelPlacementContext : _props$labelPlacement,
|
|
52
|
+
rest = __rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement"]);
|
|
51
53
|
|
|
52
54
|
var _useMemo = useMemo(function () {
|
|
53
55
|
if (labelPlacement === 'top') return {
|
|
@@ -111,4 +113,3 @@ if (__DEV__) {
|
|
|
111
113
|
}
|
|
112
114
|
|
|
113
115
|
export { FormLabel };
|
|
114
|
-
//# sourceMappingURL=FormLabel.js.map
|
package/lib/esm/FormList.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -35,8 +35,7 @@ var FormList = function FormList(_ref) {
|
|
|
35
35
|
|
|
36
36
|
var updateFormList = React.useCallback(function (stateFunc, alterTouched, alterErrors) {
|
|
37
37
|
setFormState(function (prev) {
|
|
38
|
-
var values = setNested(prev.values, name, stateFunc(getNested(prev.values, name)));
|
|
39
|
-
|
|
38
|
+
var values = setNested(prev.values, name, stateFunc(getNested(prev.values, name)));
|
|
40
39
|
var updateErrors = typeof alterErrors === 'function' ? alterErrors : stateFunc;
|
|
41
40
|
var updateTouched = typeof alterTouched === 'function' ? alterTouched : stateFunc;
|
|
42
41
|
var fieldError = alterErrors ? updateErrors(getNested(prev.errors, name)) : undefined;
|
|
@@ -142,4 +141,3 @@ var asArray = function asArray(arr) {
|
|
|
142
141
|
};
|
|
143
142
|
|
|
144
143
|
export { FormList };
|
|
145
|
-
//# sourceMappingURL=FormList.js.map
|
package/lib/esm/FormMessage.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -48,4 +48,3 @@ if (__DEV__) {
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
export { FormMessage };
|
|
51
|
-
//# sourceMappingURL=FormMessage.js.map
|
package/lib/esm/FormReset.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -49,4 +49,3 @@ if (__DEV__) {
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
export { FormReset };
|
|
52
|
-
//# sourceMappingURL=FormReset.js.map
|
package/lib/esm/FormSubmit.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -47,8 +47,10 @@ var FormSubmit = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
47
47
|
evt.preventDefault();
|
|
48
48
|
evt.stopPropagation();
|
|
49
49
|
submitForm().then(function (result) {
|
|
50
|
+
// @ts-ignore
|
|
50
51
|
_onClick === null || _onClick === void 0 ? void 0 : _onClick(result, null);
|
|
51
52
|
})["catch"](function (error) {
|
|
53
|
+
// @ts-ignore
|
|
52
54
|
_onClick === null || _onClick === void 0 ? void 0 : _onClick(null, error);
|
|
53
55
|
});
|
|
54
56
|
}
|
|
@@ -60,4 +62,3 @@ if (__DEV__) {
|
|
|
60
62
|
}
|
|
61
63
|
|
|
62
64
|
export { FormSubmit };
|
|
63
|
-
//# sourceMappingURL=FormSubmit.js.map
|
package/lib/esm/context.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -22,4 +22,3 @@ var useFormContext = function useFormContext() {
|
|
|
22
22
|
};
|
|
23
23
|
|
|
24
24
|
export { FormProvider, useFormContext };
|
|
25
|
-
//# sourceMappingURL=context.js.map
|
package/lib/esm/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -24,5 +24,4 @@ var Form = Object.assign(Form$1, {
|
|
|
24
24
|
Submit: FormSubmit,
|
|
25
25
|
Reset: FormReset
|
|
26
26
|
});
|
|
27
|
-
export default
|
|
28
|
-
//# sourceMappingURL=index.js.map
|
|
27
|
+
export { Form as default };
|