@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/index.js
CHANGED
|
@@ -3285,9 +3285,22 @@ var Form = class extends import_react17.Component {
|
|
|
3285
3285
|
};
|
|
3286
3286
|
return getAllPaths(pathSchema);
|
|
3287
3287
|
};
|
|
3288
|
+
/** Returns the `formData` after filtering to remove any extra data not in a form field
|
|
3289
|
+
*
|
|
3290
|
+
* @param formData - The data for the `Form`
|
|
3291
|
+
* @returns The `formData` after omitting extra data
|
|
3292
|
+
*/
|
|
3293
|
+
this.omitExtraData = (formData) => {
|
|
3294
|
+
const { schema, schemaUtils } = this.state;
|
|
3295
|
+
const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
|
|
3296
|
+
const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
|
|
3297
|
+
const fieldNames = this.getFieldNames(pathSchema, formData);
|
|
3298
|
+
const newFormData = this.getUsedFormData(formData, fieldNames);
|
|
3299
|
+
return newFormData;
|
|
3300
|
+
};
|
|
3288
3301
|
/** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
|
|
3289
3302
|
* `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
|
|
3290
|
-
* then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be
|
|
3303
|
+
* then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
|
|
3291
3304
|
* in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
|
|
3292
3305
|
* updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
|
|
3293
3306
|
* callback will be called if specified with the updated state.
|
|
@@ -3308,10 +3321,7 @@ var Form = class extends import_react17.Component {
|
|
|
3308
3321
|
let newFormData = formData;
|
|
3309
3322
|
let _retrievedSchema;
|
|
3310
3323
|
if (omitExtraData === true && liveOmit === true) {
|
|
3311
|
-
|
|
3312
|
-
const pathSchema = schemaUtils.toPathSchema(_retrievedSchema, "", formData);
|
|
3313
|
-
const fieldNames = this.getFieldNames(pathSchema, formData);
|
|
3314
|
-
newFormData = this.getUsedFormData(formData, fieldNames);
|
|
3324
|
+
newFormData = this.omitExtraData(formData);
|
|
3315
3325
|
state = {
|
|
3316
3326
|
formData: newFormData
|
|
3317
3327
|
};
|
|
@@ -3406,14 +3416,10 @@ var Form = class extends import_react17.Component {
|
|
|
3406
3416
|
event.persist();
|
|
3407
3417
|
const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
|
|
3408
3418
|
let { formData: newFormData } = this.state;
|
|
3409
|
-
const { schema, schemaUtils } = this.state;
|
|
3410
3419
|
if (omitExtraData === true) {
|
|
3411
|
-
|
|
3412
|
-
const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", newFormData);
|
|
3413
|
-
const fieldNames = this.getFieldNames(pathSchema, newFormData);
|
|
3414
|
-
newFormData = this.getUsedFormData(newFormData, fieldNames);
|
|
3420
|
+
newFormData = this.omitExtraData(newFormData);
|
|
3415
3421
|
}
|
|
3416
|
-
if (noValidate || this.
|
|
3422
|
+
if (noValidate || this.validateFormWithFormData(newFormData)) {
|
|
3417
3423
|
const errorSchema = extraErrors || {};
|
|
3418
3424
|
const errors = extraErrors ? (0, import_utils39.toErrorList)(extraErrors) : [];
|
|
3419
3425
|
this.setState(
|
|
@@ -3443,6 +3449,59 @@ var Form = class extends import_react17.Component {
|
|
|
3443
3449
|
this.formElement.current.requestSubmit();
|
|
3444
3450
|
}
|
|
3445
3451
|
};
|
|
3452
|
+
/** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
|
|
3453
|
+
* If `onError` is provided, then it will be called with the list of errors.
|
|
3454
|
+
*
|
|
3455
|
+
* @param formData - The form data to validate
|
|
3456
|
+
* @returns - True if the form is valid, false otherwise.
|
|
3457
|
+
*/
|
|
3458
|
+
this.validateFormWithFormData = (formData) => {
|
|
3459
|
+
const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
|
|
3460
|
+
const { errors: prevErrors } = this.state;
|
|
3461
|
+
const schemaValidation = this.validate(formData);
|
|
3462
|
+
let errors = schemaValidation.errors;
|
|
3463
|
+
let errorSchema = schemaValidation.errorSchema;
|
|
3464
|
+
const schemaValidationErrors = errors;
|
|
3465
|
+
const schemaValidationErrorSchema = errorSchema;
|
|
3466
|
+
const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
|
|
3467
|
+
if (hasError) {
|
|
3468
|
+
if (extraErrors) {
|
|
3469
|
+
const merged = (0, import_utils39.validationDataMerge)(schemaValidation, extraErrors);
|
|
3470
|
+
errorSchema = merged.errorSchema;
|
|
3471
|
+
errors = merged.errors;
|
|
3472
|
+
}
|
|
3473
|
+
if (focusOnFirstError) {
|
|
3474
|
+
if (typeof focusOnFirstError === "function") {
|
|
3475
|
+
focusOnFirstError(errors[0]);
|
|
3476
|
+
} else {
|
|
3477
|
+
this.focusOnError(errors[0]);
|
|
3478
|
+
}
|
|
3479
|
+
}
|
|
3480
|
+
this.setState(
|
|
3481
|
+
{
|
|
3482
|
+
errors,
|
|
3483
|
+
errorSchema,
|
|
3484
|
+
schemaValidationErrors,
|
|
3485
|
+
schemaValidationErrorSchema
|
|
3486
|
+
},
|
|
3487
|
+
() => {
|
|
3488
|
+
if (onError) {
|
|
3489
|
+
onError(errors);
|
|
3490
|
+
} else {
|
|
3491
|
+
console.error("Form validation failed", errors);
|
|
3492
|
+
}
|
|
3493
|
+
}
|
|
3494
|
+
);
|
|
3495
|
+
} else if (prevErrors.length > 0) {
|
|
3496
|
+
this.setState({
|
|
3497
|
+
errors: [],
|
|
3498
|
+
errorSchema: {},
|
|
3499
|
+
schemaValidationErrors: [],
|
|
3500
|
+
schemaValidationErrorSchema: {}
|
|
3501
|
+
});
|
|
3502
|
+
}
|
|
3503
|
+
return !hasError;
|
|
3504
|
+
};
|
|
3446
3505
|
if (!props.validator) {
|
|
3447
3506
|
throw new Error("A validator is required for Form functionality to work");
|
|
3448
3507
|
}
|
|
@@ -3686,57 +3745,19 @@ var Form = class extends import_react17.Component {
|
|
|
3686
3745
|
field.focus();
|
|
3687
3746
|
}
|
|
3688
3747
|
}
|
|
3689
|
-
/** Programmatically validate the form.
|
|
3748
|
+
/** Programmatically validate the form. If `omitExtraData` is true, the `formData` will first be filtered to remove
|
|
3749
|
+
* any extra data not in a form field. If `onError` is provided, then it will be called with the list of errors the
|
|
3690
3750
|
* same way as would happen on form submission.
|
|
3691
3751
|
*
|
|
3692
3752
|
* @returns - True if the form is valid, false otherwise.
|
|
3693
3753
|
*/
|
|
3694
3754
|
validateForm() {
|
|
3695
|
-
const {
|
|
3696
|
-
|
|
3697
|
-
|
|
3698
|
-
|
|
3699
|
-
let errorSchema = schemaValidation.errorSchema;
|
|
3700
|
-
const schemaValidationErrors = errors;
|
|
3701
|
-
const schemaValidationErrorSchema = errorSchema;
|
|
3702
|
-
const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
|
|
3703
|
-
if (hasError) {
|
|
3704
|
-
if (extraErrors) {
|
|
3705
|
-
const merged = (0, import_utils39.validationDataMerge)(schemaValidation, extraErrors);
|
|
3706
|
-
errorSchema = merged.errorSchema;
|
|
3707
|
-
errors = merged.errors;
|
|
3708
|
-
}
|
|
3709
|
-
if (focusOnFirstError) {
|
|
3710
|
-
if (typeof focusOnFirstError === "function") {
|
|
3711
|
-
focusOnFirstError(errors[0]);
|
|
3712
|
-
} else {
|
|
3713
|
-
this.focusOnError(errors[0]);
|
|
3714
|
-
}
|
|
3715
|
-
}
|
|
3716
|
-
this.setState(
|
|
3717
|
-
{
|
|
3718
|
-
errors,
|
|
3719
|
-
errorSchema,
|
|
3720
|
-
schemaValidationErrors,
|
|
3721
|
-
schemaValidationErrorSchema
|
|
3722
|
-
},
|
|
3723
|
-
() => {
|
|
3724
|
-
if (onError) {
|
|
3725
|
-
onError(errors);
|
|
3726
|
-
} else {
|
|
3727
|
-
console.error("Form validation failed", errors);
|
|
3728
|
-
}
|
|
3729
|
-
}
|
|
3730
|
-
);
|
|
3731
|
-
} else if (prevErrors.length > 0) {
|
|
3732
|
-
this.setState({
|
|
3733
|
-
errors: [],
|
|
3734
|
-
errorSchema: {},
|
|
3735
|
-
schemaValidationErrors: [],
|
|
3736
|
-
schemaValidationErrorSchema: {}
|
|
3737
|
-
});
|
|
3755
|
+
const { omitExtraData } = this.props;
|
|
3756
|
+
let { formData: newFormData } = this.state;
|
|
3757
|
+
if (omitExtraData === true) {
|
|
3758
|
+
newFormData = this.omitExtraData(newFormData);
|
|
3738
3759
|
}
|
|
3739
|
-
return
|
|
3760
|
+
return this.validateFormWithFormData(newFormData);
|
|
3740
3761
|
}
|
|
3741
3762
|
/** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
|
|
3742
3763
|
* needed along with the submit button or any children of the form.
|