Skip to content

Commit

Permalink
[docs] Add example to add a second icon next to the field's opening b…
Browse files Browse the repository at this point in the history
…utton (#12524)
  • Loading branch information
flaviendelangle authored Mar 22, 2024
1 parent ec57ad7 commit 02867d1
Show file tree
Hide file tree
Showing 6 changed files with 202 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import * as React from 'react';
import dayjs from 'dayjs';
import InputAdornment from '@mui/material/InputAdornment';
import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

function CustomInputAdornment(props) {
const { hasError, children, sx, ...other } = props;
return (
<InputAdornment {...other}>
<PriorityHighIcon
color="error"
sx={{ marginLeft: 1, opacity: hasError ? 1 : 0 }}
/>
{children}
</InputAdornment>
);
}

export default function AddWarningIconWhenInvalid() {
const [error, setError] = React.useState(null);

return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DatePicker']}>
<DatePicker
label="Picker with error icon"
maxDate={dayjs('2022-04-17')}
defaultValue={dayjs('2022-04-18')}
onError={setError}
slots={{ inputAdornment: CustomInputAdornment }}
slotProps={{
inputAdornment: { hasError: !!error },
}}
/>
</DemoContainer>
</LocalizationProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import * as React from 'react';
import dayjs from 'dayjs';
import InputAdornment, { InputAdornmentProps } from '@mui/material/InputAdornment';
import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DateValidationError } from '@mui/x-date-pickers/models';

function CustomInputAdornment(props: InputAdornmentProps & { hasError?: boolean }) {
const { hasError, children, sx, ...other } = props;
return (
<InputAdornment {...other}>
<PriorityHighIcon
color="error"
sx={{ marginLeft: 1, opacity: hasError ? 1 : 0 }}
/>
{children}
</InputAdornment>
);
}

export default function AddWarningIconWhenInvalid() {
const [error, setError] = React.useState<DateValidationError>(null);

return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DatePicker']}>
<DatePicker
label="Picker with error icon"
maxDate={dayjs('2022-04-17')}
defaultValue={dayjs('2022-04-18')}
onError={setError}
slots={{ inputAdornment: CustomInputAdornment }}
slotProps={{
inputAdornment: { hasError: !!error } as any,
}}
/>
</DemoContainer>
</LocalizationProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<DatePicker
label="Picker with error icon"
maxDate={dayjs('2022-04-17')}
defaultValue={dayjs('2022-04-18')}
onError={setError}
slots={{ inputAdornment: CustomInputAdornment }}
slotProps={{
inputAdornment: { hasError: !!error } as any,
}}
/>
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import * as React from 'react';
import dayjs from 'dayjs';
import InputAdornment from '@mui/material/InputAdornment';
import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';

function CustomInputAdornment(props) {
const { hasError, children, sx, ...other } = props;
return (
<InputAdornment {...other}>
<PriorityHighIcon color="error" sx={{ opacity: hasError ? 1 : 0 }} />
{children}
</InputAdornment>
);
}

export default function AddWarningIconWhenInvalidRange() {
const [error, setError] = React.useState([null, null]);

return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DatePicker']}>
<DateRangePicker
label="Picker with error icon"
maxDate={dayjs('2022-04-19')}
defaultValue={[dayjs('2022-04-18'), dayjs('2022-04-21')]}
onError={setError}
slotProps={{
textField: (ownerState) => ({
InputProps: {
endAdornment: (
<CustomInputAdornment
position="end"
hasError={!!error[ownerState.position === 'start' ? 0 : 1]}
/>
),
},
}),
}}
/>
</DemoContainer>
</LocalizationProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import * as React from 'react';
import dayjs from 'dayjs';
import InputAdornment, { InputAdornmentProps } from '@mui/material/InputAdornment';
import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { DateRangeValidationError } from '@mui/x-date-pickers-pro/models';

function CustomInputAdornment(props: InputAdornmentProps & { hasError?: boolean }) {
const { hasError, children, sx, ...other } = props;
return (
<InputAdornment {...other}>
<PriorityHighIcon color="error" sx={{ opacity: hasError ? 1 : 0 }} />
{children}
</InputAdornment>
);
}

export default function AddWarningIconWhenInvalidRange() {
const [error, setError] = React.useState<DateRangeValidationError>([null, null]);

return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DatePicker']}>
<DateRangePicker
label="Picker with error icon"
maxDate={dayjs('2022-04-19')}
defaultValue={[dayjs('2022-04-18'), dayjs('2022-04-21')]}
onError={setError}
slotProps={{
textField: (ownerState) => ({
InputProps: {
endAdornment: (
<CustomInputAdornment
position="end"
hasError={!!error[ownerState.position === 'start' ? 0 : 1]}
/>
),
},
}),
}}
/>
</DemoContainer>
</LocalizationProvider>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,15 @@ If you want to track the opening of the picker, you should use the `onOpen` / `o
```

:::

## Add an icon next to the opening button

If you want to add an icon next to the opening button, you can use the `inputAdornment` slot.
In the example below, the warning icon will be visible anytime the current value is invalid:

{{"demo": "AddWarningIconWhenInvalid.js"}}

To add the same behavior to a picker that do not have an input adornment (e.g: Date Range Picker),
you need to use the `textField` slot to add one:

{{"demo": "AddWarningIconWhenInvalidRange.js"}}

0 comments on commit 02867d1

Please sign in to comment.