Skip to content

Commit

Permalink
Update @mui/x-date-pickers to 6.20.2
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmcpeak @cliedeman
jmcpeak authored and cliedeman committed Aug 27, 2024
1 parent 37d6d7f commit b86ec87
Show file tree
Hide file tree
Showing 32 changed files with 22,322 additions and 15,493 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"@mui/icons-material": "^5.2.3",
"@mui/material": "^5.2.3",
"@mui/system": "^5.2.3",
"@mui/x-date-pickers": "^5.0.0-alpha.2",
"@mui/x-date-pickers": "^6.20.2",
"@storybook/addon-actions": "^6.4.22",
"@storybook/addon-essentials": "^6.4.22",
"@storybook/addon-links": "^6.4.22",
Expand Down
2 changes: 1 addition & 1 deletion packages/formik-mui-x-date-pickers/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"@emotion/styled": ">=11.3.0",
"@mui/material": ">=5.2.3",
"@mui/system": ">=5.2.3",
"@mui/x-date-pickers": ">=5.0.0-alpha.2",
"@mui/x-date-pickers": ">=6.20.2",
"formik": ">=2.2.9",
"react": ">=17.0.2",
"tiny-warning": ">=1.0.3"
Expand Down
57 changes: 24 additions & 33 deletions packages/formik-mui-x-date-pickers/src/DatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import {
DatePicker as MuiDatePicker,
DatePickerProps as MuiDatePickerProps,
} from '@mui/x-date-pickers/DatePicker';
import TextField, { TextFieldProps } from '@mui/material/TextField';
import { TextFieldProps } from '@mui/material/TextField';
import { FieldProps, getIn } from 'formik';
import * as React from 'react';
import { createErrorHandler } from './errorHandler';

export interface DatePickerProps
extends FieldProps,
Omit<MuiDatePickerProps, 'name' | 'value' | 'error'> {
Omit<MuiDatePickerProps<Date>, 'name' | 'value' | 'error'> {
textField?: TextFieldProps;
}

Expand All @@ -28,50 +28,41 @@ export function fieldToDatePicker({
label,
onChange,
onError,
renderInput,
...props
}: DatePickerProps): MuiDatePickerProps {
}: DatePickerProps): MuiDatePickerProps<Date> {
const fieldError = getIn(errors, field.name);
const showError = getIn(touched, field.name) && !!fieldError;
const onBlurDefault = () => {
setFieldTouched(field.name, true, true);
};
const onChangeDefault = (date: Date | null) => {
// Do not switch this order, otherwise you might cause a race condition
// See https://github.com/formium/formik/issues/2083#issuecomment-884831583
setFieldTouched(field.name, true, false);
setFieldValue(field.name, date, true);
};

return {
renderInput:
renderInput ??
((params) => (
<TextField
{...params}
error={showError}
helperText={showError ? fieldError : helperText}
label={label}
onBlur={
onBlur ??
function () {
setFieldTouched(field.name, true, true);
}
}
{...textField}
/>
)),
disabled: disabled ?? isSubmitting,
onChange:
onChange ??
function (date) {
// Do not switch this order, otherwise you might cause a race condition
// See https://github.com/formium/formik/issues/2083#issuecomment-884831583
setFieldTouched(field.name, true, false);
setFieldValue(field.name, date, true);
},
onChange: onChange ?? onChangeDefault,
onError:
onError ?? createErrorHandler(fieldError, field.name, setFieldError),
slotProps: {
textField: {
error: showError,
helperText: showError ? fieldError : helperText,
label,
onBlur: onBlur ?? onBlurDefault,
...textField,
},
},
...field,
...props,
};
}

export function DatePicker({ children, ...props }: DatePickerProps) {
return (
<MuiDatePicker {...fieldToDatePicker(props)}>{children}</MuiDatePicker>
);
export function DatePicker(props: DatePickerProps) {
return <MuiDatePicker {...fieldToDatePicker(props)} />;
}

DatePicker.displayName = 'FormikMUIDatePicker';
59 changes: 24 additions & 35 deletions packages/formik-mui-x-date-pickers/src/DateTimePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import {
DateTimePicker as MuiDateTimePicker,
DateTimePickerProps as MuiDateTimePickerProps,
} from '@mui/x-date-pickers/DateTimePicker';
import TextField, { TextFieldProps } from '@mui/material/TextField';
import { TextFieldProps } from '@mui/material/TextField';
import { FieldProps, getIn } from 'formik';
import * as React from 'react';
import { createErrorHandler } from './errorHandler';

export interface DateTimePickerProps
extends FieldProps,
Omit<MuiDateTimePickerProps, 'name' | 'value' | 'error'> {
Omit<MuiDateTimePickerProps<Date>, 'name' | 'value' | 'error'> {
textField?: TextFieldProps;
}

Expand All @@ -28,52 +28,41 @@ export function fieldToDateTimePicker({
label,
onChange,
onError,
renderInput,
...props
}: DateTimePickerProps): MuiDateTimePickerProps {
}: DateTimePickerProps): MuiDateTimePickerProps<Date> {
const fieldError = getIn(errors, field.name);
const showError = getIn(touched, field.name) && !!fieldError;
const onBlurDefault = () => {
setFieldTouched(field.name, true, true);
};
const onChangeDefault = (date: Date | null) => {
// Do not switch this order, otherwise you might cause a race condition
// See https://github.com/formium/formik/issues/2083#issuecomment-884831583
setFieldTouched(field.name, true, false);
setFieldValue(field.name, date, true);
};

return {
renderInput:
renderInput ??
((params) => (
<TextField
{...params}
error={showError}
helperText={showError ? fieldError : helperText}
label={label}
onBlur={
onBlur ??
function () {
setFieldTouched(field.name, true, true);
}
}
{...textField}
/>
)),
disabled: disabled ?? isSubmitting,
onChange:
onChange ??
function (date) {
// Do not switch this order, otherwise you might cause a race condition
// See https://github.com/formium/formik/issues/2083#issuecomment-884831583
setFieldTouched(field.name, true, false);
setFieldValue(field.name, date, true);
},
onChange: onChange ?? onChangeDefault,
onError:
onError ?? createErrorHandler(fieldError, field.name, setFieldError),
slotProps: {
textField: {
error: showError,
helperText: showError ? fieldError : helperText,
label,
onBlur: onBlur ?? onBlurDefault,
...textField,
},
},
...field,
...props,
};
}

export function DateTimePicker({ children, ...props }: DateTimePickerProps) {
return (
<MuiDateTimePicker {...fieldToDateTimePicker(props)}>
{children}
</MuiDateTimePicker>
);
export function DateTimePicker(props: DateTimePickerProps) {
return <MuiDateTimePicker {...fieldToDateTimePicker(props)} />;
}

DateTimePicker.displayName = 'FormikMUIDateTimePicker';
62 changes: 24 additions & 38 deletions packages/formik-mui-x-date-pickers/src/DesktopDatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import {
DesktopDatePicker as MuiDesktopDatePicker,
DesktopDatePickerProps as MuiDesktopDatePickerProps,
} from '@mui/x-date-pickers/DesktopDatePicker';
import TextField, { TextFieldProps } from '@mui/material/TextField';
import { TextFieldProps } from '@mui/material/TextField';
import { FieldProps, getIn } from 'formik';
import * as React from 'react';
import { createErrorHandler } from './errorHandler';

export interface DesktopDatePickerProps
extends FieldProps,
Omit<MuiDesktopDatePickerProps, 'name' | 'value' | 'error'> {
Omit<MuiDesktopDatePickerProps<Date>, 'name' | 'value' | 'error'> {
textField?: TextFieldProps;
}

Expand All @@ -28,55 +28,41 @@ export function fieldToDesktopDatePicker({
label,
onChange,
onError,
renderInput,
...props
}: DesktopDatePickerProps): MuiDesktopDatePickerProps {
}: DesktopDatePickerProps): MuiDesktopDatePickerProps<Date> {
const fieldError = getIn(errors, field.name);
const showError = getIn(touched, field.name) && !!fieldError;
const onBlurDefault = () => {
setFieldTouched(field.name, true, true);
};
const onChangeDefault = (date: Date | null) => {
// Do not switch this order, otherwise you might cause a race condition
// See https://github.com/formium/formik/issues/2083#issuecomment-884831583
setFieldTouched(field.name, true, false);
setFieldValue(field.name, date, true);
};

return {
renderInput:
renderInput ??
((params) => (
<TextField
{...params}
error={showError}
helperText={showError ? fieldError : helperText}
label={label}
onBlur={
onBlur ??
function () {
setFieldTouched(field.name, true, true);
}
}
{...textField}
/>
)),
disabled: disabled ?? isSubmitting,
onChange:
onChange ??
function (date) {
// Do not switch this order, otherwise you might cause a race condition
// See https://github.com/formium/formik/issues/2083#issuecomment-884831583
setFieldTouched(field.name, true, false);
setFieldValue(field.name, date, true);
},
onChange: onChange ?? onChangeDefault,
onError:
onError ?? createErrorHandler(fieldError, field.name, setFieldError),
slotProps: {
textField: {
error: showError,
helperText: showError ? fieldError : helperText,
label,
onBlur: onBlur ?? onBlurDefault,
...textField,
},
},
...field,
...props,
};
}

export function DesktopDatePicker({
children,
...props
}: DesktopDatePickerProps) {
return (
<MuiDesktopDatePicker {...fieldToDesktopDatePicker(props)}>
{children}
</MuiDesktopDatePicker>
);
export function DesktopDatePicker(props: DesktopDatePickerProps) {
return <MuiDesktopDatePicker {...fieldToDesktopDatePicker(props)} />;
}

DesktopDatePicker.displayName = 'FormikMUIDesktopDatePicker';
62 changes: 24 additions & 38 deletions packages/formik-mui-x-date-pickers/src/DesktopDateTimePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import {
DesktopDateTimePicker as MuiDesktopDateTimePicker,
DesktopDateTimePickerProps as MuiDesktopDateTimePickerProps,
} from '@mui/x-date-pickers/DesktopDateTimePicker';
import TextField, { TextFieldProps } from '@mui/material/TextField';
import { TextFieldProps } from '@mui/material/TextField';
import { FieldProps, getIn } from 'formik';
import * as React from 'react';
import { createErrorHandler } from './errorHandler';

export interface DesktopDateTimePickerProps
extends FieldProps,
Omit<MuiDesktopDateTimePickerProps, 'name' | 'value' | 'error'> {
Omit<MuiDesktopDateTimePickerProps<Date>, 'name' | 'value' | 'error'> {
textField?: TextFieldProps;
}

Expand All @@ -28,55 +28,41 @@ export function fieldToDesktopDateTimePicker({
label,
onChange,
onError,
renderInput,
...props
}: DesktopDateTimePickerProps): MuiDesktopDateTimePickerProps {
}: DesktopDateTimePickerProps): MuiDesktopDateTimePickerProps<Date> {
const fieldError = getIn(errors, field.name);
const showError = getIn(touched, field.name) && !!fieldError;
const onBlurDefault = () => {
setFieldTouched(field.name, true, true);
};
const onChangeDefault = (date: Date | null) => {
// Do not switch this order, otherwise you might cause a race condition
// See https://github.com/formium/formik/issues/2083#issuecomment-884831583
setFieldTouched(field.name, true, false);
setFieldValue(field.name, date, true);
};

return {
renderInput:
renderInput ??
((params) => (
<TextField
{...params}
error={showError}
helperText={showError ? fieldError : helperText}
label={label}
onBlur={
onBlur ??
function () {
setFieldTouched(field.name, true, true);
}
}
{...textField}
/>
)),
disabled: disabled ?? isSubmitting,
onChange:
onChange ??
function (date) {
// Do not switch this order, otherwise you might cause a race condition
// See https://github.com/formium/formik/issues/2083#issuecomment-884831583
setFieldTouched(field.name, true, false);
setFieldValue(field.name, date, true);
},
onChange: onChange ?? onChangeDefault,
onError:
onError ?? createErrorHandler(fieldError, field.name, setFieldError),
slotProps: {
textField: {
error: showError,
helperText: showError ? fieldError : helperText,
label,
onBlur: onBlur ?? onBlurDefault,
...textField,
},
},
...field,
...props,
};
}

export function DesktopDateTimePicker({
children,
...props
}: DesktopDateTimePickerProps) {
return (
<MuiDesktopDateTimePicker {...fieldToDesktopDateTimePicker(props)}>
{children}
</MuiDesktopDateTimePicker>
);
export function DesktopDateTimePicker(props: DesktopDateTimePickerProps) {
return <MuiDesktopDateTimePicker {...fieldToDesktopDateTimePicker(props)} />;
}

DesktopDateTimePicker.displayName = 'FormikMUIDesktopDateTimePicker';
Loading

0 comments on commit b86ec87

Please sign in to comment.