Skip to content

Commit 9bf937a

Browse files
siriwatknpsiriwatknp
authored
[DateRangePicker] Migrate internal components to emotion (#26326)
1 parent 73b8c37 commit 9bf937a

File tree

7 files changed

+170
-118
lines changed

7 files changed

+170
-118
lines changed

‎packages/material-ui-lab/src/CalendarPicker/PickersCalendar.tsx‎

Lines changed: 75 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
2-
import clsx from 'clsx';
32
import Typography from '@material-ui/core/Typography';
4-
import { StyleRules, WithStyles, withStyles, Theme } from '@material-ui/core/styles';
3+
import { StyleRules, Theme, experimentalStyled as styled } from '@material-ui/core/styles';
54
import PickersDay, { PickersDayProps } from '../PickersDay/PickersDay';
65
import { useUtils, useNow } from '../internal/pickers/hooks/useUtils';
76
import { PickerOnChangeFn } from '../internal/pickers/hooks/useViews';
@@ -58,6 +57,9 @@ export interface PickersCalendarProps<TDate> extends ExportedCalendarProps<TDate
5857
TransitionProps?: Partial<SlideTransitionProps>;
5958
}
6059

60+
const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
61+
62+
// TODO remove PickersCalendarClassKey in CalendarPickerSkeleton migration
6163
export type PickersCalendarClassKey =
6264
| 'root'
6365
| 'loadingContainer'
@@ -66,7 +68,7 @@ export type PickersCalendarClassKey =
6668
| 'daysHeader'
6769
| 'weekDayLabel';
6870

69-
const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
71+
// TODO remove styles in CalendarPickerSkeleton migration
7072
export const styles = (theme: Theme): StyleRules<PickersCalendarClassKey> => ({
7173
root: {
7274
minHeight: weeksContainerHeight,
@@ -102,15 +104,70 @@ export const styles = (theme: Theme): StyleRules<PickersCalendarClassKey> => ({
102104
},
103105
});
104106

107+
const PickersCalendarDayHeader = styled(
108+
'div',
109+
{},
110+
{ skipSx: true },
111+
)({
112+
display: 'flex',
113+
justifyContent: 'center',
114+
alignItems: 'center',
115+
});
116+
117+
const PickersCalendarWeekDayLabel = styled(
118+
Typography,
119+
{},
120+
{ skipSx: true },
121+
)(({ theme }) => ({
122+
width: 36,
123+
height: 40,
124+
margin: '0 2px',
125+
textAlign: 'center',
126+
display: 'flex',
127+
justifyContent: 'center',
128+
alignItems: 'center',
129+
color: theme.palette.text.secondary,
130+
}));
131+
132+
const PickersCalendarLoadingContainer = styled(
133+
'div',
134+
{},
135+
{ skipSx: true },
136+
)({
137+
display: 'flex',
138+
justifyContent: 'center',
139+
alignItems: 'center',
140+
minHeight: weeksContainerHeight,
141+
});
142+
143+
const PickersCalendarSlideTransition = styled(
144+
SlideTransition,
145+
{},
146+
{ skipSx: true },
147+
)({
148+
minHeight: weeksContainerHeight,
149+
});
150+
151+
const PickersCalendarWeekContainer = styled('div', {}, { skipSx: true })({ overflow: 'hidden' });
152+
153+
const PickersCalendarWeek = styled(
154+
'div',
155+
{},
156+
{ skipSx: true },
157+
)({
158+
margin: `${DAY_MARGIN}px 0`,
159+
display: 'flex',
160+
justifyContent: 'center',
161+
});
162+
105163
/**
106164
* @ignore - do not document.
107165
*/
108-
function PickersCalendar<TDate>(props: PickersCalendarProps<TDate> & WithStyles<typeof styles>) {
166+
function PickersCalendar<TDate>(props: PickersCalendarProps<TDate>) {
109167
const {
110168
allowKeyboardControl,
111169
allowSameDateSelection,
112170
onFocusedDayChange: changeFocusedDay,
113-
classes,
114171
className,
115172
currentMonth,
116173
date,
@@ -148,33 +205,28 @@ function PickersCalendar<TDate>(props: PickersCalendarProps<TDate> & WithStyles<
148205

149206
return (
150207
<React.Fragment>
151-
<div className={classes.daysHeader}>
208+
<PickersCalendarDayHeader>
152209
{utils.getWeekdays().map((day, i) => (
153-
<Typography
154-
aria-hidden
155-
key={day + i.toString()}
156-
variant="caption"
157-
className={classes.weekDayLabel}
158-
>
210+
<PickersCalendarWeekDayLabel aria-hidden key={day + i.toString()} variant="caption">
159211
{day.charAt(0).toUpperCase()}
160-
</Typography>
212+
</PickersCalendarWeekDayLabel>
161213
))}
162-
</div>
214+
</PickersCalendarDayHeader>
163215

164216
{loading ? (
165-
<div className={classes.loadingContainer}>{renderLoading()}</div>
217+
<PickersCalendarLoadingContainer>{renderLoading()}</PickersCalendarLoadingContainer>
166218
) : (
167-
<SlideTransition
219+
<PickersCalendarSlideTransition
168220
transKey={currentMonthNumber}
169221
onExited={onMonthSwitchingAnimationEnd}
170222
reduceAnimations={reduceAnimations}
171223
slideDirection={slideDirection}
172-
className={clsx(classes.root, className)}
224+
className={className}
173225
{...TransitionProps}
174226
>
175-
<div data-mui-test="pickers-calendar" role="grid" className={classes.weekContainer}>
227+
<PickersCalendarWeekContainer data-mui-test="pickers-calendar" role="grid">
176228
{utils.getWeekArray(currentMonth).map((week) => (
177-
<div role="row" key={`week-${week[0]}`} className={classes.week}>
229+
<PickersCalendarWeek role="row" key={`week-${week[0]}`}>
178230
{week.map((day) => {
179231
const pickersDayProps: PickersDayProps<TDate> = {
180232
key: (day as any)?.toString(),
@@ -206,15 +258,13 @@ function PickersCalendar<TDate>(props: PickersCalendarProps<TDate> & WithStyles<
206258
</div>
207259
);
208260
})}
209-
</div>
261+
</PickersCalendarWeek>
210262
))}
211-
</div>
212-
</SlideTransition>
263+
</PickersCalendarWeekContainer>
264+
</PickersCalendarSlideTransition>
213265
)}
214266
</React.Fragment>
215267
);
216268
}
217269

218-
export default withStyles(styles, { name: 'PrivatePickersCalendar' })(PickersCalendar) as <TDate>(
219-
props: PickersCalendarProps<TDate>,
220-
) => JSX.Element;
270+
export default PickersCalendar;

‎packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ interface BaseDateRangePickerProps<TDate>
5555
value: RangeInput<TDate>;
5656
}
5757

58-
const KeyboardDateInputComponent = DateRangePickerInput as React.FC<DateInputPropsLike>;
59-
const PureDateInputComponent = DateRangePickerInput as React.FC<DateInputPropsLike>;
58+
const KeyboardDateInputComponent = (DateRangePickerInput as unknown) as React.FC<DateInputPropsLike>;
59+
const PureDateInputComponent = (DateRangePickerInput as unknown) as React.FC<DateInputPropsLike>;
6060

6161
const rangePickerValueManager: PickerStateValueManager<any, any> = {
6262
emptyValue: [null, null],

‎packages/material-ui-lab/src/DateRangePicker/DateRangePickerInput.tsx‎

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { MuiStyles, StyleRules, withStyles, WithStyles } from '@material-ui/core/styles';
2+
import { experimentalStyled as styled } from '@material-ui/core/styles';
33
import { useUtils } from '../internal/pickers/hooks/useUtils';
44
import { RangeInput, DateRange, CurrentlySelectingRangeEndProps } from './RangeTypes';
55
import { useMaskedInput } from '../internal/pickers/hooks/useMaskedInput';
@@ -12,26 +12,18 @@ import {
1212
MuiTextFieldProps,
1313
} from '../internal/pickers/PureDateInput';
1414

15-
export type DateRangePickerInputClassKey = 'root' | 'toLabelDelimiter';
16-
17-
export const styles: MuiStyles<DateRangePickerInputClassKey> = (
18-
theme,
19-
): StyleRules<DateRangePickerInputClassKey> => ({
20-
root: {
21-
display: 'flex',
22-
alignItems: 'baseline',
23-
[theme.breakpoints.down('xs')]: {
24-
flexDirection: 'column',
25-
alignItems: 'center',
26-
},
27-
},
28-
toLabelDelimiter: {
29-
margin: '8px 0',
30-
[theme.breakpoints.up('sm')]: {
31-
margin: '0 16px',
32-
},
15+
const DateRangePickerInputRoot = styled(
16+
'div',
17+
{},
18+
{ skipSx: true },
19+
)(({ theme }) => ({
20+
display: 'flex',
21+
alignItems: 'baseline',
22+
[theme.breakpoints.down('xs')]: {
23+
flexDirection: 'column',
24+
alignItems: 'center',
3325
},
34-
});
26+
}));
3527

3628
export interface ExportedDateRangePickerInputProps
3729
extends Omit<ExportedDateInputProps<RangeInput<any>, DateRange<any>>, 'renderInput'> {
@@ -69,11 +61,10 @@ export interface DateRangeInputProps
6961
* @ignore - internal component.
7062
*/
7163
const DateRangePickerInput = React.forwardRef(function DateRangePickerInput(
72-
props: DateRangeInputProps & WithStyles<typeof styles>,
64+
props: DateRangeInputProps,
7365
ref: React.Ref<HTMLDivElement>,
7466
): JSX.Element {
7567
const {
76-
classes,
7768
currentlySelectingRangeEnd,
7869
disableOpenPicker,
7970
endText,
@@ -181,10 +172,10 @@ const DateRangePickerInput = React.forwardRef(function DateRangePickerInput(
181172
});
182173

183174
return (
184-
<div onBlur={onBlur} className={classes.root} ref={ref}>
175+
<DateRangePickerInputRoot onBlur={onBlur} ref={ref}>
185176
{renderInput(startInputProps, endInputProps)}
186-
</div>
177+
</DateRangePickerInputRoot>
187178
);
188179
});
189180

190-
export default withStyles(styles, { name: 'MuiDateRangePickerInput' })(DateRangePickerInput);
181+
export default DateRangePickerInput;

‎packages/material-ui-lab/src/DateRangePicker/DateRangePickerToolbar.tsx‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,14 @@
11
import * as React from 'react';
22
import Typography from '@material-ui/core/Typography';
3-
import { MuiStyles, withStyles, WithStyles } from '@material-ui/core/styles';
3+
import { experimentalStyled as styled } from '@material-ui/core/styles';
4+
import { generateUtilityClasses } from '@material-ui/unstyled';
45
import PickersToolbar from '../internal/pickers/PickersToolbar';
56
import { useUtils } from '../internal/pickers/hooks/useUtils';
67
import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';
78
import { ToolbarComponentProps } from '../internal/pickers/typings/BasePicker';
89
import { DateRange, CurrentlySelectingRangeEndProps } from './RangeTypes';
910

10-
export const styles: MuiStyles<'root' | 'penIcon' | 'dateTextContainer'> = {
11-
root: {},
12-
penIcon: {
13-
position: 'relative',
14-
top: 4,
15-
},
16-
dateTextContainer: {
17-
display: 'flex',
18-
},
19-
};
11+
const classes = generateUtilityClasses('PrivateDateRangePickerToolbar', ['penIcon']);
2012

2113
interface DateRangePickerToolbarProps
2214
extends CurrentlySelectingRangeEndProps,
@@ -31,11 +23,29 @@ interface DateRangePickerToolbarProps
3123
setCurrentlySelectingRangeEnd: (newSelectingEnd: 'start' | 'end') => void;
3224
}
3325

26+
const DateRangePickerToolbarRoot = styled(
27+
PickersToolbar,
28+
{},
29+
{ skipSx: true },
30+
)({
31+
[`& .${classes.penIcon}`]: {
32+
position: 'relative',
33+
top: 4,
34+
},
35+
});
36+
37+
const DateRangePickerToolbarContainer = styled(
38+
'div',
39+
{},
40+
{ skipSx: true },
41+
)({
42+
display: 'flex',
43+
});
44+
3445
/**
3546
* @ignore - internal component.
3647
*/
37-
const DateRangePickerToolbar: React.FC<DateRangePickerToolbarProps & WithStyles<typeof styles>> = ({
38-
classes,
48+
const DateRangePickerToolbar = ({
3949
currentlySelectingRangeEnd,
4050
date: [start, end],
4151
endText,
@@ -45,7 +55,7 @@ const DateRangePickerToolbar: React.FC<DateRangePickerToolbarProps & WithStyles<
4555
toggleMobileKeyboardView,
4656
toolbarFormat,
4757
toolbarTitle = 'SELECT DATE RANGE',
48-
}) => {
58+
}: DateRangePickerToolbarProps) => {
4959
const utils = useUtils();
5060

5161
const startDateValue = start
@@ -57,15 +67,14 @@ const DateRangePickerToolbar: React.FC<DateRangePickerToolbarProps & WithStyles<
5767
: endText;
5868

5969
return (
60-
<PickersToolbar
61-
className={classes.root}
70+
<DateRangePickerToolbarRoot
6271
toolbarTitle={toolbarTitle}
6372
isMobileKeyboardViewOpen={isMobileKeyboardViewOpen}
6473
toggleMobileKeyboardView={toggleMobileKeyboardView}
6574
isLandscape={false}
6675
penIconClassName={classes.penIcon}
6776
>
68-
<div className={classes.dateTextContainer}>
77+
<DateRangePickerToolbarContainer>
6978
<PickersToolbarButton
7079
variant={start !== null ? 'h5' : 'h6'}
7180
value={startDateValue}
@@ -79,9 +88,9 @@ const DateRangePickerToolbar: React.FC<DateRangePickerToolbarProps & WithStyles<
7988
selected={currentlySelectingRangeEnd === 'end'}
8089
onClick={() => setCurrentlySelectingRangeEnd('end')}
8190
/>
82-
</div>
83-
</PickersToolbar>
91+
</DateRangePickerToolbarContainer>
92+
</DateRangePickerToolbarRoot>
8493
);
8594
};
8695

87-
export default withStyles(styles, { name: 'MuiDateRangePickerToolbar' })(DateRangePickerToolbar);
96+
export default DateRangePickerToolbar;

0 commit comments

Comments
 (0)