@rjsf/core 5.18.5 → 5.18.6
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/dist/core.umd.js +77 -60
- package/dist/index.esm.js +77 -56
- package/dist/index.esm.js.map +2 -2
- package/dist/index.js +77 -56
- package/dist/index.js.map +2 -2
- package/lib/components/Form.d.ts +16 -2
- package/lib/components/Form.js +77 -56
- package/lib/components/Form.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -6
- package/src/components/Form.tsx +38 -19
package/dist/core.umd.js
CHANGED
|
@@ -3030,9 +3030,22 @@
|
|
|
3030
3030
|
};
|
|
3031
3031
|
return getAllPaths(pathSchema);
|
|
3032
3032
|
};
|
|
3033
|
+
/** Returns the `formData` after filtering to remove any extra data not in a form field
|
|
3034
|
+
*
|
|
3035
|
+
* @param formData - The data for the `Form`
|
|
3036
|
+
* @returns The `formData` after omitting extra data
|
|
3037
|
+
*/
|
|
3038
|
+
this.omitExtraData = (formData) => {
|
|
3039
|
+
const { schema, schemaUtils } = this.state;
|
|
3040
|
+
const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
|
|
3041
|
+
const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
|
|
3042
|
+
const fieldNames = this.getFieldNames(pathSchema, formData);
|
|
3043
|
+
const newFormData = this.getUsedFormData(formData, fieldNames);
|
|
3044
|
+
return newFormData;
|
|
3045
|
+
};
|
|
3033
3046
|
/** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
|
|
3034
3047
|
* `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
|
|
3035
|
-
* then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be
|
|
3048
|
+
* then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
|
|
3036
3049
|
* in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
|
|
3037
3050
|
* updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
|
|
3038
3051
|
* callback will be called if specified with the updated state.
|
|
@@ -3051,12 +3064,8 @@
|
|
|
3051
3064
|
const mustValidate = !noValidate && liveValidate;
|
|
3052
3065
|
let state = { formData, schema };
|
|
3053
3066
|
let newFormData = formData;
|
|
3054
|
-
let _retrievedSchema;
|
|
3055
3067
|
if (omitExtraData === true && liveOmit === true) {
|
|
3056
|
-
|
|
3057
|
-
const pathSchema = schemaUtils.toPathSchema(_retrievedSchema, "", formData);
|
|
3058
|
-
const fieldNames = this.getFieldNames(pathSchema, formData);
|
|
3059
|
-
newFormData = this.getUsedFormData(formData, fieldNames);
|
|
3068
|
+
newFormData = this.omitExtraData(formData);
|
|
3060
3069
|
state = {
|
|
3061
3070
|
formData: newFormData
|
|
3062
3071
|
};
|
|
@@ -3087,9 +3096,6 @@
|
|
|
3087
3096
|
errors: utils.toErrorList(errorSchema)
|
|
3088
3097
|
};
|
|
3089
3098
|
}
|
|
3090
|
-
if (_retrievedSchema) {
|
|
3091
|
-
state.retrievedSchema = _retrievedSchema;
|
|
3092
|
-
}
|
|
3093
3099
|
this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
|
|
3094
3100
|
};
|
|
3095
3101
|
/**
|
|
@@ -3151,14 +3157,10 @@
|
|
|
3151
3157
|
event.persist();
|
|
3152
3158
|
const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
|
|
3153
3159
|
let { formData: newFormData } = this.state;
|
|
3154
|
-
const { schema, schemaUtils } = this.state;
|
|
3155
3160
|
if (omitExtraData === true) {
|
|
3156
|
-
|
|
3157
|
-
const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", newFormData);
|
|
3158
|
-
const fieldNames = this.getFieldNames(pathSchema, newFormData);
|
|
3159
|
-
newFormData = this.getUsedFormData(newFormData, fieldNames);
|
|
3161
|
+
newFormData = this.omitExtraData(newFormData);
|
|
3160
3162
|
}
|
|
3161
|
-
if (noValidate || this.
|
|
3163
|
+
if (noValidate || this.validateFormWithFormData(newFormData)) {
|
|
3162
3164
|
const errorSchema = extraErrors || {};
|
|
3163
3165
|
const errors = extraErrors ? utils.toErrorList(extraErrors) : [];
|
|
3164
3166
|
this.setState(
|
|
@@ -3188,6 +3190,59 @@
|
|
|
3188
3190
|
this.formElement.current.requestSubmit();
|
|
3189
3191
|
}
|
|
3190
3192
|
};
|
|
3193
|
+
/** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
|
|
3194
|
+
* If `onError` is provided, then it will be called with the list of errors.
|
|
3195
|
+
*
|
|
3196
|
+
* @param formData - The form data to validate
|
|
3197
|
+
* @returns - True if the form is valid, false otherwise.
|
|
3198
|
+
*/
|
|
3199
|
+
this.validateFormWithFormData = (formData) => {
|
|
3200
|
+
const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
|
|
3201
|
+
const { errors: prevErrors } = this.state;
|
|
3202
|
+
const schemaValidation = this.validate(formData);
|
|
3203
|
+
let errors = schemaValidation.errors;
|
|
3204
|
+
let errorSchema = schemaValidation.errorSchema;
|
|
3205
|
+
const schemaValidationErrors = errors;
|
|
3206
|
+
const schemaValidationErrorSchema = errorSchema;
|
|
3207
|
+
const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
|
|
3208
|
+
if (hasError) {
|
|
3209
|
+
if (extraErrors) {
|
|
3210
|
+
const merged = utils.validationDataMerge(schemaValidation, extraErrors);
|
|
3211
|
+
errorSchema = merged.errorSchema;
|
|
3212
|
+
errors = merged.errors;
|
|
3213
|
+
}
|
|
3214
|
+
if (focusOnFirstError) {
|
|
3215
|
+
if (typeof focusOnFirstError === "function") {
|
|
3216
|
+
focusOnFirstError(errors[0]);
|
|
3217
|
+
} else {
|
|
3218
|
+
this.focusOnError(errors[0]);
|
|
3219
|
+
}
|
|
3220
|
+
}
|
|
3221
|
+
this.setState(
|
|
3222
|
+
{
|
|
3223
|
+
errors,
|
|
3224
|
+
errorSchema,
|
|
3225
|
+
schemaValidationErrors,
|
|
3226
|
+
schemaValidationErrorSchema
|
|
3227
|
+
},
|
|
3228
|
+
() => {
|
|
3229
|
+
if (onError) {
|
|
3230
|
+
onError(errors);
|
|
3231
|
+
} else {
|
|
3232
|
+
console.error("Form validation failed", errors);
|
|
3233
|
+
}
|
|
3234
|
+
}
|
|
3235
|
+
);
|
|
3236
|
+
} else if (prevErrors.length > 0) {
|
|
3237
|
+
this.setState({
|
|
3238
|
+
errors: [],
|
|
3239
|
+
errorSchema: {},
|
|
3240
|
+
schemaValidationErrors: [],
|
|
3241
|
+
schemaValidationErrorSchema: {}
|
|
3242
|
+
});
|
|
3243
|
+
}
|
|
3244
|
+
return !hasError;
|
|
3245
|
+
};
|
|
3191
3246
|
if (!props.validator) {
|
|
3192
3247
|
throw new Error("A validator is required for Form functionality to work");
|
|
3193
3248
|
}
|
|
@@ -3431,57 +3486,19 @@
|
|
|
3431
3486
|
field.focus();
|
|
3432
3487
|
}
|
|
3433
3488
|
}
|
|
3434
|
-
/** Programmatically validate the form.
|
|
3489
|
+
/** Programmatically validate the form. If `omitExtraData` is true, the `formData` will first be filtered to remove
|
|
3490
|
+
* any extra data not in a form field. If `onError` is provided, then it will be called with the list of errors the
|
|
3435
3491
|
* same way as would happen on form submission.
|
|
3436
3492
|
*
|
|
3437
3493
|
* @returns - True if the form is valid, false otherwise.
|
|
3438
3494
|
*/
|
|
3439
3495
|
validateForm() {
|
|
3440
|
-
const {
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
let errorSchema = schemaValidation.errorSchema;
|
|
3445
|
-
const schemaValidationErrors = errors;
|
|
3446
|
-
const schemaValidationErrorSchema = errorSchema;
|
|
3447
|
-
const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
|
|
3448
|
-
if (hasError) {
|
|
3449
|
-
if (extraErrors) {
|
|
3450
|
-
const merged = utils.validationDataMerge(schemaValidation, extraErrors);
|
|
3451
|
-
errorSchema = merged.errorSchema;
|
|
3452
|
-
errors = merged.errors;
|
|
3453
|
-
}
|
|
3454
|
-
if (focusOnFirstError) {
|
|
3455
|
-
if (typeof focusOnFirstError === "function") {
|
|
3456
|
-
focusOnFirstError(errors[0]);
|
|
3457
|
-
} else {
|
|
3458
|
-
this.focusOnError(errors[0]);
|
|
3459
|
-
}
|
|
3460
|
-
}
|
|
3461
|
-
this.setState(
|
|
3462
|
-
{
|
|
3463
|
-
errors,
|
|
3464
|
-
errorSchema,
|
|
3465
|
-
schemaValidationErrors,
|
|
3466
|
-
schemaValidationErrorSchema
|
|
3467
|
-
},
|
|
3468
|
-
() => {
|
|
3469
|
-
if (onError) {
|
|
3470
|
-
onError(errors);
|
|
3471
|
-
} else {
|
|
3472
|
-
console.error("Form validation failed", errors);
|
|
3473
|
-
}
|
|
3474
|
-
}
|
|
3475
|
-
);
|
|
3476
|
-
} else if (prevErrors.length > 0) {
|
|
3477
|
-
this.setState({
|
|
3478
|
-
errors: [],
|
|
3479
|
-
errorSchema: {},
|
|
3480
|
-
schemaValidationErrors: [],
|
|
3481
|
-
schemaValidationErrorSchema: {}
|
|
3482
|
-
});
|
|
3496
|
+
const { omitExtraData } = this.props;
|
|
3497
|
+
let { formData: newFormData } = this.state;
|
|
3498
|
+
if (omitExtraData === true) {
|
|
3499
|
+
newFormData = this.omitExtraData(newFormData);
|
|
3483
3500
|
}
|
|
3484
|
-
return
|
|
3501
|
+
return this.validateFormWithFormData(newFormData);
|
|
3485
3502
|
}
|
|
3486
3503
|
/** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
|
|
3487
3504
|
* needed along with the submit button or any children of the form.
|
package/dist/index.esm.js
CHANGED
|
@@ -3379,9 +3379,22 @@ var Form = class extends Component5 {
|
|
|
3379
3379
|
};
|
|
3380
3380
|
return getAllPaths(pathSchema);
|
|
3381
3381
|
};
|
|
3382
|
+
/** Returns the `formData` after filtering to remove any extra data not in a form field
|
|
3383
|
+
*
|
|
3384
|
+
* @param formData - The data for the `Form`
|
|
3385
|
+
* @returns The `formData` after omitting extra data
|
|
3386
|
+
*/
|
|
3387
|
+
this.omitExtraData = (formData) => {
|
|
3388
|
+
const { schema, schemaUtils } = this.state;
|
|
3389
|
+
const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
|
|
3390
|
+
const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
|
|
3391
|
+
const fieldNames = this.getFieldNames(pathSchema, formData);
|
|
3392
|
+
const newFormData = this.getUsedFormData(formData, fieldNames);
|
|
3393
|
+
return newFormData;
|
|
3394
|
+
};
|
|
3382
3395
|
/** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
|
|
3383
3396
|
* `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
|
|
3384
|
-
* then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be
|
|
3397
|
+
* then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
|
|
3385
3398
|
* in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
|
|
3386
3399
|
* updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
|
|
3387
3400
|
* callback will be called if specified with the updated state.
|
|
@@ -3402,10 +3415,7 @@ var Form = class extends Component5 {
|
|
|
3402
3415
|
let newFormData = formData;
|
|
3403
3416
|
let _retrievedSchema;
|
|
3404
3417
|
if (omitExtraData === true && liveOmit === true) {
|
|
3405
|
-
|
|
3406
|
-
const pathSchema = schemaUtils.toPathSchema(_retrievedSchema, "", formData);
|
|
3407
|
-
const fieldNames = this.getFieldNames(pathSchema, formData);
|
|
3408
|
-
newFormData = this.getUsedFormData(formData, fieldNames);
|
|
3418
|
+
newFormData = this.omitExtraData(formData);
|
|
3409
3419
|
state = {
|
|
3410
3420
|
formData: newFormData
|
|
3411
3421
|
};
|
|
@@ -3500,14 +3510,10 @@ var Form = class extends Component5 {
|
|
|
3500
3510
|
event.persist();
|
|
3501
3511
|
const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
|
|
3502
3512
|
let { formData: newFormData } = this.state;
|
|
3503
|
-
const { schema, schemaUtils } = this.state;
|
|
3504
3513
|
if (omitExtraData === true) {
|
|
3505
|
-
|
|
3506
|
-
const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", newFormData);
|
|
3507
|
-
const fieldNames = this.getFieldNames(pathSchema, newFormData);
|
|
3508
|
-
newFormData = this.getUsedFormData(newFormData, fieldNames);
|
|
3514
|
+
newFormData = this.omitExtraData(newFormData);
|
|
3509
3515
|
}
|
|
3510
|
-
if (noValidate || this.
|
|
3516
|
+
if (noValidate || this.validateFormWithFormData(newFormData)) {
|
|
3511
3517
|
const errorSchema = extraErrors || {};
|
|
3512
3518
|
const errors = extraErrors ? toErrorList(extraErrors) : [];
|
|
3513
3519
|
this.setState(
|
|
@@ -3537,6 +3543,59 @@ var Form = class extends Component5 {
|
|
|
3537
3543
|
this.formElement.current.requestSubmit();
|
|
3538
3544
|
}
|
|
3539
3545
|
};
|
|
3546
|
+
/** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
|
|
3547
|
+
* If `onError` is provided, then it will be called with the list of errors.
|
|
3548
|
+
*
|
|
3549
|
+
* @param formData - The form data to validate
|
|
3550
|
+
* @returns - True if the form is valid, false otherwise.
|
|
3551
|
+
*/
|
|
3552
|
+
this.validateFormWithFormData = (formData) => {
|
|
3553
|
+
const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
|
|
3554
|
+
const { errors: prevErrors } = this.state;
|
|
3555
|
+
const schemaValidation = this.validate(formData);
|
|
3556
|
+
let errors = schemaValidation.errors;
|
|
3557
|
+
let errorSchema = schemaValidation.errorSchema;
|
|
3558
|
+
const schemaValidationErrors = errors;
|
|
3559
|
+
const schemaValidationErrorSchema = errorSchema;
|
|
3560
|
+
const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
|
|
3561
|
+
if (hasError) {
|
|
3562
|
+
if (extraErrors) {
|
|
3563
|
+
const merged = validationDataMerge(schemaValidation, extraErrors);
|
|
3564
|
+
errorSchema = merged.errorSchema;
|
|
3565
|
+
errors = merged.errors;
|
|
3566
|
+
}
|
|
3567
|
+
if (focusOnFirstError) {
|
|
3568
|
+
if (typeof focusOnFirstError === "function") {
|
|
3569
|
+
focusOnFirstError(errors[0]);
|
|
3570
|
+
} else {
|
|
3571
|
+
this.focusOnError(errors[0]);
|
|
3572
|
+
}
|
|
3573
|
+
}
|
|
3574
|
+
this.setState(
|
|
3575
|
+
{
|
|
3576
|
+
errors,
|
|
3577
|
+
errorSchema,
|
|
3578
|
+
schemaValidationErrors,
|
|
3579
|
+
schemaValidationErrorSchema
|
|
3580
|
+
},
|
|
3581
|
+
() => {
|
|
3582
|
+
if (onError) {
|
|
3583
|
+
onError(errors);
|
|
3584
|
+
} else {
|
|
3585
|
+
console.error("Form validation failed", errors);
|
|
3586
|
+
}
|
|
3587
|
+
}
|
|
3588
|
+
);
|
|
3589
|
+
} else if (prevErrors.length > 0) {
|
|
3590
|
+
this.setState({
|
|
3591
|
+
errors: [],
|
|
3592
|
+
errorSchema: {},
|
|
3593
|
+
schemaValidationErrors: [],
|
|
3594
|
+
schemaValidationErrorSchema: {}
|
|
3595
|
+
});
|
|
3596
|
+
}
|
|
3597
|
+
return !hasError;
|
|
3598
|
+
};
|
|
3540
3599
|
if (!props.validator) {
|
|
3541
3600
|
throw new Error("A validator is required for Form functionality to work");
|
|
3542
3601
|
}
|
|
@@ -3780,57 +3839,19 @@ var Form = class extends Component5 {
|
|
|
3780
3839
|
field.focus();
|
|
3781
3840
|
}
|
|
3782
3841
|
}
|
|
3783
|
-
/** Programmatically validate the form.
|
|
3842
|
+
/** Programmatically validate the form. If `omitExtraData` is true, the `formData` will first be filtered to remove
|
|
3843
|
+
* any extra data not in a form field. If `onError` is provided, then it will be called with the list of errors the
|
|
3784
3844
|
* same way as would happen on form submission.
|
|
3785
3845
|
*
|
|
3786
3846
|
* @returns - True if the form is valid, false otherwise.
|
|
3787
3847
|
*/
|
|
3788
3848
|
validateForm() {
|
|
3789
|
-
const {
|
|
3790
|
-
|
|
3791
|
-
|
|
3792
|
-
|
|
3793
|
-
let errorSchema = schemaValidation.errorSchema;
|
|
3794
|
-
const schemaValidationErrors = errors;
|
|
3795
|
-
const schemaValidationErrorSchema = errorSchema;
|
|
3796
|
-
const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
|
|
3797
|
-
if (hasError) {
|
|
3798
|
-
if (extraErrors) {
|
|
3799
|
-
const merged = validationDataMerge(schemaValidation, extraErrors);
|
|
3800
|
-
errorSchema = merged.errorSchema;
|
|
3801
|
-
errors = merged.errors;
|
|
3802
|
-
}
|
|
3803
|
-
if (focusOnFirstError) {
|
|
3804
|
-
if (typeof focusOnFirstError === "function") {
|
|
3805
|
-
focusOnFirstError(errors[0]);
|
|
3806
|
-
} else {
|
|
3807
|
-
this.focusOnError(errors[0]);
|
|
3808
|
-
}
|
|
3809
|
-
}
|
|
3810
|
-
this.setState(
|
|
3811
|
-
{
|
|
3812
|
-
errors,
|
|
3813
|
-
errorSchema,
|
|
3814
|
-
schemaValidationErrors,
|
|
3815
|
-
schemaValidationErrorSchema
|
|
3816
|
-
},
|
|
3817
|
-
() => {
|
|
3818
|
-
if (onError) {
|
|
3819
|
-
onError(errors);
|
|
3820
|
-
} else {
|
|
3821
|
-
console.error("Form validation failed", errors);
|
|
3822
|
-
}
|
|
3823
|
-
}
|
|
3824
|
-
);
|
|
3825
|
-
} else if (prevErrors.length > 0) {
|
|
3826
|
-
this.setState({
|
|
3827
|
-
errors: [],
|
|
3828
|
-
errorSchema: {},
|
|
3829
|
-
schemaValidationErrors: [],
|
|
3830
|
-
schemaValidationErrorSchema: {}
|
|
3831
|
-
});
|
|
3849
|
+
const { omitExtraData } = this.props;
|
|
3850
|
+
let { formData: newFormData } = this.state;
|
|
3851
|
+
if (omitExtraData === true) {
|
|
3852
|
+
newFormData = this.omitExtraData(newFormData);
|
|
3832
3853
|
}
|
|
3833
|
-
return
|
|
3854
|
+
return this.validateFormWithFormData(newFormData);
|
|
3834
3855
|
}
|
|
3835
3856
|
/** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
|
|
3836
3857
|
* needed along with the submit button or any children of the form.
|