Skip to content

Commit d34f265

Browse files
LukasTyflaviendelangle
LukasTy
and
flaviendelangle
authored
[pickers] Remove useClearableField hook (#16859)
Signed-off-by: Lukas Tyla <[email protected]> Co-authored-by: Flavien DELANGLE <[email protected]>
1 parent 79dab54 commit d34f265

15 files changed

+323
-188
lines changed

‎docs/data/date-pickers/custom-field/BrowserV7Field.js

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import * as React from 'react';
22
import useForkRef from '@mui/utils/useForkRef';
33
import { styled } from '@mui/material/styles';
4-
import IconButton from '@mui/material/IconButton';
5-
import { CalendarIcon } from '@mui/x-date-pickers/icons';
4+
import { CalendarIcon, ClearIcon } from '@mui/x-date-pickers/icons';
65
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
76
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
87
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
@@ -28,6 +27,18 @@ const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content
2827
},
2928
);
3029

30+
const BrowserIconButton = styled('button', {
31+
name: 'BrowserField',
32+
slot: 'IconButton',
33+
})({
34+
backgroundColor: 'transparent',
35+
border: 0,
36+
cursor: 'pointer',
37+
'&:hover, &:focus': {
38+
backgroundColor: 'rgba(0, 0, 0, 0.04)',
39+
},
40+
});
41+
3142
function BrowserDateField(props) {
3243
const fieldResponse = useDateField(props);
3344

@@ -80,13 +91,24 @@ function BrowserDateField(props) {
8091
onKeyDown={onKeyDown}
8192
/>
8293
</BrowserFieldContent>
83-
<IconButton
94+
{clearable && value && (
95+
<BrowserIconButton
96+
type="button"
97+
title="Clear"
98+
tabIndex={-1}
99+
onClick={onClear}
100+
sx={{ marginLeft: 1 }}
101+
>
102+
<ClearIcon fontSize="small" />
103+
</BrowserIconButton>
104+
)}
105+
<BrowserIconButton
84106
onClick={() => pickerContext.setOpen((prev) => !prev)}
85-
sx={{ marginLeft: 1.5 }}
107+
sx={{ marginLeft: 1 }}
86108
aria-label={openPickerAriaLabel}
87109
>
88110
<CalendarIcon />
89-
</IconButton>
111+
</BrowserIconButton>
90112
</BrowserFieldRoot>
91113
);
92114
}

‎docs/data/date-pickers/custom-field/BrowserV7Field.tsx

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import * as React from 'react';
22
import useForkRef from '@mui/utils/useForkRef';
33
import { styled } from '@mui/material/styles';
4-
import IconButton from '@mui/material/IconButton';
5-
import { CalendarIcon } from '@mui/x-date-pickers/icons';
4+
import { CalendarIcon, ClearIcon } from '@mui/x-date-pickers/icons';
65
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
76
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
87
import {
@@ -32,6 +31,18 @@ const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content
3231
},
3332
);
3433

34+
const BrowserIconButton = styled('button', {
35+
name: 'BrowserField',
36+
slot: 'IconButton',
37+
})({
38+
backgroundColor: 'transparent',
39+
border: 0,
40+
cursor: 'pointer',
41+
'&:hover, &:focus': {
42+
backgroundColor: 'rgba(0, 0, 0, 0.04)',
43+
},
44+
});
45+
3546
function BrowserDateField(props: DatePickerFieldProps) {
3647
const fieldResponse = useDateField<true, typeof props>(props);
3748

@@ -90,13 +101,24 @@ function BrowserDateField(props: DatePickerFieldProps) {
90101
onKeyDown={onKeyDown}
91102
/>
92103
</BrowserFieldContent>
93-
<IconButton
104+
{clearable && value && (
105+
<BrowserIconButton
106+
type="button"
107+
title="Clear"
108+
tabIndex={-1}
109+
onClick={onClear}
110+
sx={{ marginLeft: 1 }}
111+
>
112+
<ClearIcon fontSize="small" />
113+
</BrowserIconButton>
114+
)}
115+
<BrowserIconButton
94116
onClick={() => pickerContext.setOpen((prev) => !prev)}
95-
sx={{ marginLeft: 1.5 }}
117+
sx={{ marginLeft: 1 }}
96118
aria-label={openPickerAriaLabel}
97119
>
98120
<CalendarIcon />
99-
</IconButton>
121+
</BrowserIconButton>
100122
</BrowserFieldRoot>
101123
);
102124
}

‎docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import * as React from 'react';
22
import useForkRef from '@mui/utils/useForkRef';
33
import { styled } from '@mui/material/styles';
4-
import IconButton from '@mui/material/IconButton';
5-
import InputAdornment from '@mui/material/InputAdornment';
6-
import { DateRangeIcon } from '@mui/x-date-pickers/icons';
4+
import { ClearIcon, DateRangeIcon } from '@mui/x-date-pickers/icons';
75
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
86
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
97
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
@@ -29,6 +27,18 @@ const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content
2927
},
3028
);
3129

30+
const BrowserIconButton = styled('button', {
31+
name: 'BrowserField',
32+
slot: 'IconButton',
33+
})({
34+
backgroundColor: 'transparent',
35+
border: 0,
36+
cursor: 'pointer',
37+
'&:hover, &:focus': {
38+
backgroundColor: 'rgba(0, 0, 0, 0.04)',
39+
},
40+
});
41+
3242
function BrowserSingleInputDateRangeField(props) {
3343
const fieldResponse = useSingleInputDateRangeField(props);
3444

@@ -45,6 +55,8 @@ function BrowserSingleInputDateRangeField(props) {
4555
onInput,
4656
onPaste,
4757
onKeyDown,
58+
// Should be passed to the button that opens the picker
59+
openPickerAriaLabel,
4860
// Can be passed to a hidden <input /> element
4961
onChange,
5062
value,
@@ -85,11 +97,24 @@ function BrowserSingleInputDateRangeField(props) {
8597
onKeyDown={onKeyDown}
8698
/>
8799
</BrowserFieldContent>
88-
<InputAdornment position="end">
89-
<IconButton onClick={() => pickerContext.setOpen((prev) => !prev)}>
90-
<DateRangeIcon />
91-
</IconButton>
92-
</InputAdornment>
100+
{clearable && value && (
101+
<BrowserIconButton
102+
type="button"
103+
title="Clear"
104+
tabIndex={-1}
105+
onClick={onClear}
106+
sx={{ marginLeft: 1 }}
107+
>
108+
<ClearIcon fontSize="small" />
109+
</BrowserIconButton>
110+
)}
111+
<BrowserIconButton
112+
onClick={() => pickerContext.setOpen((prev) => !prev)}
113+
aria-label={openPickerAriaLabel}
114+
sx={{ marginLeft: 1 }}
115+
>
116+
<DateRangeIcon />
117+
</BrowserIconButton>
93118
</BrowserFieldRoot>
94119
);
95120
}

‎docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import * as React from 'react';
22
import useForkRef from '@mui/utils/useForkRef';
33
import { styled } from '@mui/material/styles';
4-
import IconButton from '@mui/material/IconButton';
5-
import InputAdornment from '@mui/material/InputAdornment';
6-
import { DateRangeIcon } from '@mui/x-date-pickers/icons';
4+
import { ClearIcon, DateRangeIcon } from '@mui/x-date-pickers/icons';
75
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
86
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
97
import {
@@ -33,6 +31,18 @@ const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content
3331
},
3432
);
3533

34+
const BrowserIconButton = styled('button', {
35+
name: 'BrowserField',
36+
slot: 'IconButton',
37+
})({
38+
backgroundColor: 'transparent',
39+
border: 0,
40+
cursor: 'pointer',
41+
'&:hover, &:focus': {
42+
backgroundColor: 'rgba(0, 0, 0, 0.04)',
43+
},
44+
});
45+
3646
interface BrowserSingleInputDateRangeFieldProps extends DateRangePickerFieldProps {}
3747

3848
function BrowserSingleInputDateRangeField(
@@ -55,6 +65,9 @@ function BrowserSingleInputDateRangeField(
5565
onPaste,
5666
onKeyDown,
5767

68+
// Should be passed to the button that opens the picker
69+
openPickerAriaLabel,
70+
5871
// Can be passed to a hidden <input /> element
5972
onChange,
6073
value,
@@ -98,11 +111,24 @@ function BrowserSingleInputDateRangeField(
98111
onKeyDown={onKeyDown}
99112
/>
100113
</BrowserFieldContent>
101-
<InputAdornment position="end">
102-
<IconButton onClick={() => pickerContext.setOpen((prev) => !prev)}>
103-
<DateRangeIcon />
104-
</IconButton>
105-
</InputAdornment>
114+
{clearable && value && (
115+
<BrowserIconButton
116+
type="button"
117+
title="Clear"
118+
tabIndex={-1}
119+
onClick={onClear}
120+
sx={{ marginLeft: 1 }}
121+
>
122+
<ClearIcon fontSize="small" />
123+
</BrowserIconButton>
124+
)}
125+
<BrowserIconButton
126+
onClick={() => pickerContext.setOpen((prev) => !prev)}
127+
aria-label={openPickerAriaLabel}
128+
sx={{ marginLeft: 1 }}
129+
>
130+
<DateRangeIcon />
131+
</BrowserIconButton>
106132
</BrowserFieldRoot>
107133
);
108134
}

‎docs/data/date-pickers/custom-field/JoyV6Field.js

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
2020
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
2121
import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
2222
import { usePickerContext } from '@mui/x-date-pickers/hooks';
23+
import { ClearIcon } from '@mui/x-date-pickers/icons';
2324

2425
const CalendarIcon = createSvgIcon(
2526
<path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z" />,
@@ -46,6 +47,7 @@ function JoyDateField(props) {
4647
inputRef,
4748
// The rest can be passed to the root element
4849
id,
50+
value,
4951
...other
5052
} = fieldResponse;
5153

@@ -57,17 +59,30 @@ function JoyDateField(props) {
5759
<Input
5860
disabled={disabled}
5961
endDecorator={
60-
<IconButton
61-
onClick={() => pickerContext.setOpen((prev) => !prev)}
62-
aria-label={openPickerAriaLabel}
63-
>
64-
<CalendarIcon size="md" />
65-
</IconButton>
62+
<React.Fragment>
63+
{clearable && value && (
64+
<IconButton
65+
title="Clear"
66+
tabIndex={-1}
67+
onClick={onClear}
68+
sx={{ marginRight: 0.5 }}
69+
>
70+
<ClearIcon fontSize="md" />
71+
</IconButton>
72+
)}
73+
<IconButton
74+
onClick={() => pickerContext.setOpen((prev) => !prev)}
75+
aria-label={openPickerAriaLabel}
76+
>
77+
<CalendarIcon size="md" />
78+
</IconButton>
79+
</React.Fragment>
6680
}
6781
slotProps={{
6882
input: { ref: inputRef },
6983
}}
7084
{...other}
85+
value={value}
7186
ref={pickerContext.triggerRef}
7287
/>
7388
</FormControl>
@@ -105,7 +120,11 @@ export default function JoyV6Field() {
105120
<CssVarsProvider theme={{ [THEME_ID]: joyTheme }}>
106121
<SyncThemeMode mode={materialTheme.palette.mode} />
107122
<LocalizationProvider dateAdapter={AdapterDayjs}>
108-
<JoyDatePicker />
123+
<JoyDatePicker
124+
slotProps={{
125+
field: { clearable: true },
126+
}}
127+
/>
109128
</LocalizationProvider>
110129
</CssVarsProvider>
111130
</MaterialCssVarsProvider>

‎docs/data/date-pickers/custom-field/JoyV6Field.tsx

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
} from '@mui/x-date-pickers/DatePicker';
2525
import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
2626
import { usePickerContext } from '@mui/x-date-pickers/hooks';
27+
import { ClearIcon } from '@mui/x-date-pickers/icons';
2728

2829
const CalendarIcon = createSvgIcon(
2930
<path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z" />,
@@ -54,6 +55,7 @@ function JoyDateField(props: DatePickerFieldProps) {
5455

5556
// The rest can be passed to the root element
5657
id,
58+
value,
5759
...other
5860
} = fieldResponse;
5961

@@ -65,17 +67,30 @@ function JoyDateField(props: DatePickerFieldProps) {
6567
<Input
6668
disabled={disabled}
6769
endDecorator={
68-
<IconButton
69-
onClick={() => pickerContext.setOpen((prev) => !prev)}
70-
aria-label={openPickerAriaLabel}
71-
>
72-
<CalendarIcon size="md" />
73-
</IconButton>
70+
<React.Fragment>
71+
{clearable && value && (
72+
<IconButton
73+
title="Clear"
74+
tabIndex={-1}
75+
onClick={onClear}
76+
sx={{ marginRight: 0.5 }}
77+
>
78+
<ClearIcon fontSize="md" />
79+
</IconButton>
80+
)}
81+
<IconButton
82+
onClick={() => pickerContext.setOpen((prev) => !prev)}
83+
aria-label={openPickerAriaLabel}
84+
>
85+
<CalendarIcon size="md" />
86+
</IconButton>
87+
</React.Fragment>
7488
}
7589
slotProps={{
7690
input: { ref: inputRef },
7791
}}
7892
{...other}
93+
value={value}
7994
ref={pickerContext.triggerRef}
8095
/>
8196
</FormControl>
@@ -113,7 +128,11 @@ export default function JoyV6Field() {
113128
<CssVarsProvider theme={{ [THEME_ID]: joyTheme }}>
114129
<SyncThemeMode mode={materialTheme.palette.mode} />
115130
<LocalizationProvider dateAdapter={AdapterDayjs}>
116-
<JoyDatePicker />
131+
<JoyDatePicker
132+
slotProps={{
133+
field: { clearable: true },
134+
}}
135+
/>
117136
</LocalizationProvider>
118137
</CssVarsProvider>
119138
</MaterialCssVarsProvider>

‎docs/data/date-pickers/custom-field/JoyV6Field.tsx.preview

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
<CssVarsProvider theme={{ [THEME_ID]: joyTheme }}>
33
<SyncThemeMode mode={materialTheme.palette.mode} />
44
<LocalizationProvider dateAdapter={AdapterDayjs}>
5-
<JoyDatePicker />
5+
<JoyDatePicker
6+
slotProps={{
7+
field: { clearable: true },
8+
}}
9+
/>
610
</LocalizationProvider>
711
</CssVarsProvider>
812
</MaterialCssVarsProvider>

0 commit comments

Comments
 (0)