Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[fields] Fix usage of slotProps.textField.InputProps #8428

Merged
merged 1 commit into from Apr 3, 2023
Merged

[fields] Fix usage of slotProps.textField.InputProps #8428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 14 additions & 8 deletions packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx
View file
Open in desktop
Expand Up @@ -19,17 +19,23 @@ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRange
name: 'MuiSingleInputDateRangeField',
});

const { slots, slotProps, components, componentsProps, ...other } = themeProps;
const { slots, slotProps, components, componentsProps, InputProps, inputProps, ...other } =
themeProps;

const ownerState = themeProps;

const TextField = slots?.textField ?? components?.TextField ?? MuiTextField;
const textFieldProps: SingleInputDateRangeFieldProps<TDate> = useSlotProps({
elementType: TextField,
externalSlotProps: slotProps?.textField ?? componentsProps?.textField,
externalForwardedProps: other,
ownerState,
});
const { inputRef: externalInputRef, ...textFieldProps }: SingleInputDateRangeFieldProps<TDate> =
useSlotProps({
elementType: TextField,
externalSlotProps: slotProps?.textField ?? componentsProps?.textField,
externalForwardedProps: other,
ownerState,
});

// TODO: Remove when mui/material-ui#35088 will be merged
textFieldProps.inputProps = { ...textFieldProps.inputProps, ...inputProps };
textFieldProps.InputProps = { ...textFieldProps.InputProps, ...InputProps };
Comment on lines +37 to +38
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see reason to say it's a bad pattern, but it's the first time I see a mutation in React code

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For me it's OK because we know that the object is generate on useSlotProps above, so the location is locale (it has no impact before line 28 and after line 38.


const {
ref: inputRef,
Expand All @@ -39,7 +45,7 @@ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRange
...fieldProps
} = useSingleInputDateRangeField<TDate, typeof textFieldProps>({
props: textFieldProps,
inputRef: textFieldProps.inputRef,
inputRef: externalInputRef,
});

return (
Expand Down
26 changes: 17 additions & 9 deletions ...es/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx
View file
Open in desktop
@@ -1,6 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import TextField from '@mui/material/TextField';
import MuiTextField from '@mui/material/TextField';
import { useThemeProps } from '@mui/material/styles';
import { useSlotProps } from '@mui/base/utils';
import { SingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types';
Expand All @@ -18,31 +18,39 @@ const SingleInputDateTimeRangeField = React.forwardRef(function SingleInputDateT
name: 'MuiSingleInputDateTimeRangeField',
});

const { slots, slotProps, components, componentsProps, ...other } = themeProps;
const { slots, slotProps, components, componentsProps, InputProps, inputProps, ...other } =
themeProps;

const ownerState = themeProps;

const Input = slots?.textField ?? components?.TextField ?? TextField;
const inputProps: SingleInputDateTimeRangeFieldProps<TDate> = useSlotProps({
elementType: Input,
const TextField = slots?.textField ?? components?.TextField ?? MuiTextField;
const {
inputRef: externalInputRef,
...textFieldProps
}: SingleInputDateTimeRangeFieldProps<TDate> = useSlotProps({
elementType: TextField,
externalSlotProps: slotProps?.textField ?? componentsProps?.textField,
externalForwardedProps: other,
ownerState,
});

// TODO: Remove when mui/material-ui#35088 will be merged
textFieldProps.inputProps = { ...textFieldProps.inputProps, ...inputProps };
textFieldProps.InputProps = { ...textFieldProps.InputProps, ...InputProps };

const {
ref: inputRef,
onPaste,
inputMode,
readOnly,
...fieldProps
} = useSingleInputDateTimeRangeField<TDate, typeof inputProps>({
props: inputProps,
inputRef: inputProps.inputRef,
} = useSingleInputDateTimeRangeField<TDate, typeof textFieldProps>({
props: textFieldProps,
inputRef: externalInputRef,
});

return (
<Input
<TextField
ref={ref}
{...fieldProps}
inputProps={{ ...fieldProps.inputProps, ref: inputRef, onPaste, inputMode, readOnly }}
Expand Down
32 changes: 19 additions & 13 deletions packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx
View file
Open in desktop
@@ -1,6 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import TextField from '@mui/material/TextField';
import MuiTextField from '@mui/material/TextField';
import { useThemeProps } from '@mui/material/styles';
import { useSlotProps } from '@mui/base/utils';
import { SingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types';
Expand All @@ -19,31 +19,37 @@ const SingleInputTimeRangeField = React.forwardRef(function SingleInputTimeRange
name: 'MuiSingleInputTimeRangeField',
});

const { slots, slotProps, components, componentsProps, ...other } = themeProps;
const { slots, slotProps, components, componentsProps, InputProps, inputProps, ...other } =
themeProps;

const ownerState = themeProps;

const Input = slots?.textField ?? components?.TextField ?? TextField;
const inputProps: SingleInputTimeRangeFieldProps<TDate> = useSlotProps({
elementType: Input,
externalSlotProps: slotProps?.textField ?? componentsProps?.textField,
externalForwardedProps: other,
ownerState,
});
const TextField = slots?.textField ?? components?.TextField ?? MuiTextField;
const { inputRef: externalInputRef, ...textFieldProps }: SingleInputTimeRangeFieldProps<TDate> =
useSlotProps({
elementType: TextField,
externalSlotProps: slotProps?.textField ?? componentsProps?.textField,
externalForwardedProps: other,
ownerState,
});

// TODO: Remove when mui/material-ui#35088 will be merged
textFieldProps.inputProps = { ...textFieldProps.inputProps, ...inputProps };
textFieldProps.InputProps = { ...textFieldProps.InputProps, ...InputProps };

const {
ref: inputRef,
onPaste,
inputMode,
readOnly,
...fieldProps
} = useSingleInputTimeRangeField<TDate, typeof inputProps>({
props: inputProps,
inputRef: inputProps.inputRef,
} = useSingleInputTimeRangeField<TDate, typeof textFieldProps>({
props: textFieldProps,
inputRef: externalInputRef,
});

return (
<Input
<TextField
ref={ref}
{...fieldProps}
inputProps={{ ...fieldProps.inputProps, ref: inputRef, onPaste, inputMode, readOnly }}
Expand Down
7 changes: 6 additions & 1 deletion packages/x-date-pickers/src/DateField/DateField.tsx
View file
Open in desktop
Expand Up @@ -19,7 +19,8 @@ const DateField = React.forwardRef(function DateField<TDate>(
name: 'MuiDateField',
});

const { components, componentsProps, slots, slotProps, ...other } = themeProps;
const { components, componentsProps, slots, slotProps, InputProps, inputProps, ...other } =
themeProps;

const ownerState = themeProps;

Expand All @@ -31,6 +32,10 @@ const DateField = React.forwardRef(function DateField<TDate>(
ownerState,
});

// TODO: Remove when mui/material-ui#35088 will be merged
textFieldProps.inputProps = { ...textFieldProps.inputProps, ...inputProps };
textFieldProps.InputProps = { ...textFieldProps.InputProps, ...InputProps };

const {
ref: inputRef,
onPaste,
Expand Down
7 changes: 6 additions & 1 deletion packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx
View file
Open in desktop
Expand Up @@ -19,7 +19,8 @@ const DateTimeField = React.forwardRef(function DateTimeField<TDate>(
name: 'MuiDateTimeField',
});

const { components, componentsProps, slots, slotProps, ...other } = themeProps;
const { components, componentsProps, slots, slotProps, InputProps, inputProps, ...other } =
themeProps;

const ownerState = themeProps;

Expand All @@ -33,6 +34,10 @@ const DateTimeField = React.forwardRef(function DateTimeField<TDate>(
},
);

// TODO: Remove when mui/material-ui#35088 will be merged
textFieldProps.inputProps = { ...textFieldProps.inputProps, ...inputProps };
textFieldProps.InputProps = { ...textFieldProps.InputProps, ...InputProps };

const {
ref: inputRef,
onPaste,
Expand Down
7 changes: 6 additions & 1 deletion packages/x-date-pickers/src/TimeField/TimeField.tsx
View file
Open in desktop
Expand Up @@ -19,7 +19,8 @@ const TimeField = React.forwardRef(function TimeField<TDate>(
name: 'MuiTimeField',
});

const { slots, slotProps, components, componentsProps, ...other } = themeProps;
const { slots, slotProps, components, componentsProps, InputProps, inputProps, ...other } =
themeProps;

const ownerState = themeProps;

Expand All @@ -31,6 +32,10 @@ const TimeField = React.forwardRef(function TimeField<TDate>(
ownerState,
});

// TODO: Remove when mui/material-ui#35088 will be merged
textFieldProps.inputProps = { ...textFieldProps.inputProps, ...inputProps };
textFieldProps.InputProps = { ...textFieldProps.InputProps, ...InputProps };

const {
ref: inputRef,
onPaste,
Expand Down