-
Notifications
You must be signed in to change notification settings - Fork 833
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Introduce reason-based validation * Remove dead validation code * Implement new validation for TimePicker and DateTimePicker * Remove redux form docs example * Add Formik with validation schema example * More tests * TimePicker validation tests * Move parsing min/max date up to the root component * Use touched state in the formik example * Remove console.logs * Fix lint and build errors * Remove visual regression flakiness with time validation * Remove emptyInputText * Fix validation tests * Commit .size-snapshot * Implement validation for DateRangePicker.tsx * Add DateRange validation tests * Fix linter * Fix broken design of date rangepicker input parsing * Remove <Code> from formik examples * Update yarn.lock * Update docs/pages/guides/FormikOurValidation.example.tsx Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> * Update docs/pages/guides/FormikOurValidation.example.tsx Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> * Update docs/pages/guides/FormikOurValidation.example.tsx Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> * Update new forms example to be more consolidated with @materail-ui/core Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
- Loading branch information
1 parent
3d16fc3
commit bffad8f
Showing
45 changed files
with
1,230 additions
and
1,279 deletions.
There are no files selected for viewing
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
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
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
This file was deleted.
Oops, something went wrong.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import React from 'react'; | ||
| import Grid from '@material-ui/core/Grid'; | ||
| import TextField from '@material-ui/core/TextField'; | ||
| import { Formik, Form, Field, FieldProps } from 'formik'; | ||
| import { format, isWeekend, isWednesday } from 'date-fns'; | ||
| import { DatePicker, DatePickerProps } from '@material-ui/pickers'; | ||
|
|
||
| interface DatePickerFieldProps extends FieldProps, DatePickerProps { | ||
| getShouldDisableDateError: (date: Date) => string; | ||
| } | ||
|
|
||
| function DatePickerField({ | ||
| form, | ||
| field: { value, name }, | ||
| maxDate = new Date('2100-01-01'), | ||
| minDate = new Date('1900-01-01'), | ||
| getShouldDisableDateError, | ||
| ...other | ||
| }: DatePickerFieldProps) { | ||
| const currentError = form.errors[name]; | ||
| const toShowError = Boolean(currentError && form.touched[name]); | ||
|
|
||
| return ( | ||
| <DatePicker | ||
| autoOk | ||
| clearable | ||
| minDate={minDate} | ||
| maxDate={maxDate} | ||
| value={value} | ||
| onError={(reason, value) => { | ||
| switch (reason) { | ||
| case 'invalidDate': | ||
| form.setFieldError(name, 'Invalid date format'); | ||
| break; | ||
|
|
||
| case 'disablePast': | ||
| form.setFieldError(name, 'Values in the past are not allowed'); | ||
| break; | ||
|
|
||
| case 'maxDate': | ||
| form.setFieldError(name, `Date should not be after ${format(maxDate, 'P')}`); | ||
| break; | ||
|
|
||
| case 'minDate': | ||
| form.setFieldError(name, `Date should not be after ${format(maxDate, 'P')}`); | ||
| break; | ||
|
|
||
| case 'shouldDisableDate': | ||
| // shouldDisableDate returned true, render custom message according to the `shouldDisableDate` logic | ||
| form.setFieldError(name, getShouldDisableDateError(value)); | ||
| break; | ||
|
|
||
| default: | ||
| form.setErrors({ | ||
| ...form.errors, | ||
| [name]: undefined, | ||
| }); | ||
| } | ||
| }} | ||
| // Make sure that your 3d param is set to `false` on order to not clear errors | ||
| onChange={date => form.setFieldValue(name, date, false)} | ||
| renderInput={props => ( | ||
| <TextField | ||
| {...props} | ||
| name={name} | ||
| error={toShowError} | ||
| helperText={toShowError ? currentError ?? props.helperText : undefined} | ||
| // Make sure that your 3d param is set to `false` on order to not clear errors | ||
| onBlur={() => form.setFieldTouched(name, true, false)} | ||
| /> | ||
| )} | ||
| {...other} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| function validateDatePickerValue(date: Date) { | ||
| if (isWeekend(date)) { | ||
| return 'Weekends are not allowed'; | ||
| } | ||
|
|
||
| if (isWednesday(date)) { | ||
| return 'Wednesdays are not allowed'; | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| export default function FormikExample() { | ||
| return ( | ||
| <Formik onSubmit={console.log} initialValues={{ date: new Date() }}> | ||
| {({ values, errors }) => ( | ||
| <Form> | ||
| <Grid container> | ||
| <Grid item container justify="center" xs={12}> | ||
| <Field | ||
| name="date" | ||
| disablePast | ||
| component={DatePickerField} | ||
| shouldDisableDate={(date: Date) => validateDatePickerValue(date) !== null} | ||
| getShouldDisableDateError={validateDatePickerValue} | ||
| /> | ||
| </Grid> | ||
|
|
||
| <Grid item xs={12} sm={12} style={{ margin: '24px' }}> | ||
| <pre> | ||
| <code>{JSON.stringify({ errors, values }, null, 2)}</code> | ||
| </pre> | ||
| </Grid> | ||
| </Grid> | ||
| </Form> | ||
| )} | ||
| </Formik> | ||
| ); | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import React from 'react'; | ||
| import { date, object } from 'yup'; | ||
| import { Grid } from '@material-ui/core'; | ||
| import { TextField } from '@material-ui/core'; | ||
| import { Formik, Form, Field, FieldProps } from 'formik'; | ||
| import { DatePicker, BaseDatePickerProps } from '@material-ui/pickers'; | ||
|
|
||
| interface DatePickerFieldProps extends FieldProps, BaseDatePickerProps { | ||
| getShouldDisableDateError: (date: Date) => string; | ||
| } | ||
|
|
||
| function DatePickerField({ | ||
| field, | ||
| form, | ||
| maxDate = new Date('2100-01-01'), | ||
| minDate = new Date('1900-01-01'), | ||
| getShouldDisableDateError, | ||
| ...other | ||
| }: DatePickerFieldProps) { | ||
| const currentError = form.errors[field.name]; | ||
|
|
||
| return ( | ||
| <DatePicker | ||
| autoOk | ||
| clearable | ||
| minDate={minDate} | ||
| maxDate={maxDate} | ||
| value={field.value} | ||
| // Make sure that your 3d param is set to `true` in order to run validation | ||
| onChange={date => form.setFieldValue(field.name, date, true)} | ||
| renderInput={props => ( | ||
| <TextField | ||
| name={field.name} | ||
| {...props} | ||
| error={Boolean(currentError)} | ||
| helperText={currentError ?? props.helperText} | ||
| // Make sure that your 3d param is set to `true` in order to run validation | ||
| onBlur={() => form.setFieldTouched(name, true, true)} | ||
| /> | ||
| )} | ||
| {...other} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| const schema = object({ | ||
| date: date() | ||
| .required() | ||
| .min(new Date()) | ||
| .max(new Date('2100-10-10')), | ||
| }); | ||
|
|
||
| export default function FormikValidationSchemaExample() { | ||
| return ( | ||
| <Formik validationSchema={schema} onSubmit={console.log} initialValues={{ date: new Date() }}> | ||
| {({ values, errors }) => ( | ||
| <Form> | ||
| <Grid container> | ||
| <Grid item container justify="center" xs={12}> | ||
| <Field name="date" disablePast component={DatePickerField} /> | ||
| </Grid> | ||
|
|
||
| <Grid item xs={12} sm={12} style={{ margin: '24px' }}> | ||
| <pre> | ||
| <code>{JSON.stringify({ errors, values }, null, 2)}</code> | ||
| </pre> | ||
| </Grid> | ||
| </Grid> | ||
| </Form> | ||
| )} | ||
| </Formik> | ||
| ); | ||
| } |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.
bffad8fThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to following URLs: