[fix] Fix custom validation playground example #3858
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- update `validation` example to use RJSF v5 API - add types for all samples and fix/ignore uncovered type issues - Spread sample data as extra form props
nickgros
commented
Sep 8, 2023
| @@ -39,7 +40,7 @@ export default function Playground({ themes, validators }: PlaygroundProps) { | |||
| experimental_defaultFormStateBehavior: { arrayMinItems: 'populate', emptyObjectFields: 'populateAllDefaults' }, | |||
| }); | |||
| const [FormComponent, setFormComponent] = useState<ComponentType<FormProps>>(withTheme({})); | |||
| const [templates, setTemplates] = useState<Partial<TemplatesType>>(); | |||
| const [otherFormProps, setOtherFormProps] = useState<Partial<FormProps>>({}); | |||
There was a problem hiding this comment.
Capture all of the form props that only change on load in this object. templates can be included, so they don't need their own state variable.
nickgros
commented
Sep 8, 2023
Comment on lines
+4
to
+20
| function customValidate({ pass1, pass2 }: { pass1: string; pass2: string }, errors: any) { | ||
| if (pass1 !== pass2) { | ||
| errors.pass2.addError("Passwords don't match."); | ||
| } | ||
| return errors; | ||
| } | ||
|
|
||
| function transformErrors(errors: { name: string; property: string }[]) { | ||
| const transformErrors: ErrorTransformer = (errors) => { | ||
| return errors.map((error) => { | ||
| if (error.name === 'minimum' && error.property === 'instance.age') { | ||
| if (error.name === 'minimum' && error.schemaPath === '#/properties/age/minimum') { | ||
| return Object.assign({}, error, { | ||
| message: 'You need to be 18 because of some legal thing', | ||
| }); | ||
| } | ||
| return error; | ||
| }); | ||
| } | ||
| }; |
There was a problem hiding this comment.
This example was never updated when the API changed in v5.
nickgros
commented
Sep 8, 2023
| @@ -0,0 +1,3 @@ | |||
| import { FormProps } from '@rjsf/core'; | |||
|
|
|||
| export type Sample = Omit<FormProps, 'validator'>; | |||
There was a problem hiding this comment.
Main cause for the playground example breaking was that it didn't get updated when the API changed in v5. This is more easily caught if the samples are all typed.
| @@ -67,8 +69,11 @@ export default { | |||
| password: 'noneed', | |||
| }, | |||
| extraErrors: { | |||
There was a problem hiding this comment.
Consider using the ErrorSchemaBuilder
|
|
||
| export type Sample = keyof typeof samples; | ||
| export const samples = Object.freeze(_samples); |
There was a problem hiding this comment.
Consider using "deep-freeze-es6": "^1.4.1", for this
| return errors.map((error) => { | ||
| if (error.name === 'minimum' && error.property === 'instance.age') { | ||
| if (error.name === 'minimum' && error.schemaPath === '#/properties/age/minimum') { |
There was a problem hiding this comment.
Does this work with ajv v6?
heath-freenome
approved these changes
Sep 8, 2023
nickgros
commented
Sep 15, 2023
| @@ -76,3 +76,5 @@ export default { | |||
| }, | |||
| }, | |||
| }; | |||
|
|
|||
| export default propertyDependencies; | |||
There was a problem hiding this comment.
TODO: Fix UI schema contains a non-latin1 apostrophe.
- Use ErrorSchemaBuilder - Deep freeze playground samples - Remove non-latin1 apostrophes
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fix #3856 playground issues
validationexample to use RJSF v5 API