Skip to content

Commit

Permalink
[DateRangePicker] Migrate internal components to emotion (#26326)
Browse files Browse the repository at this point in the history
  • Loading branch information
@siriwatknp
siriwatknp committed May 19, 2021
1 parent 73b8c37 commit 9bf937a
Show file tree
Hide file tree
Showing 7 changed files with 170 additions and 118 deletions.
100 changes: 75 additions & 25 deletions packages/material-ui-lab/src/CalendarPicker/PickersCalendar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react';
import clsx from 'clsx';
import Typography from '@material-ui/core/Typography';
import { StyleRules, WithStyles, withStyles, Theme } from '@material-ui/core/styles';
import { StyleRules, Theme, experimentalStyled as styled } from '@material-ui/core/styles';
import PickersDay, { PickersDayProps } from '../PickersDay/PickersDay';
import { useUtils, useNow } from '../internal/pickers/hooks/useUtils';
import { PickerOnChangeFn } from '../internal/pickers/hooks/useViews';
Expand Down Expand Up @@ -58,6 +57,9 @@ export interface PickersCalendarProps<TDate> extends ExportedCalendarProps<TDate
TransitionProps?: Partial<SlideTransitionProps>;
}

const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;

// TODO remove PickersCalendarClassKey in CalendarPickerSkeleton migration
export type PickersCalendarClassKey =
| 'root'
| 'loadingContainer'
Expand All @@ -66,7 +68,7 @@ export type PickersCalendarClassKey =
| 'daysHeader'
| 'weekDayLabel';

const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
// TODO remove styles in CalendarPickerSkeleton migration
export const styles = (theme: Theme): StyleRules<PickersCalendarClassKey> => ({
root: {
minHeight: weeksContainerHeight,
Expand Down Expand Up @@ -102,15 +104,70 @@ export const styles = (theme: Theme): StyleRules<PickersCalendarClassKey> => ({
},
});

const PickersCalendarDayHeader = styled(
'div',
{},
{ skipSx: true },
)({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
});

const PickersCalendarWeekDayLabel = styled(
Typography,
{},
{ skipSx: true },
)(({ theme }) => ({
width: 36,
height: 40,
margin: '0 2px',
textAlign: 'center',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: theme.palette.text.secondary,
}));

const PickersCalendarLoadingContainer = styled(
'div',
{},
{ skipSx: true },
)({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: weeksContainerHeight,
});

const PickersCalendarSlideTransition = styled(
SlideTransition,
{},
{ skipSx: true },
)({
minHeight: weeksContainerHeight,
});

const PickersCalendarWeekContainer = styled('div', {}, { skipSx: true })({ overflow: 'hidden' });

const PickersCalendarWeek = styled(
'div',
{},
{ skipSx: true },
)({
margin: `${DAY_MARGIN}px 0`,
display: 'flex',
justifyContent: 'center',
});

/**
* @ignore - do not document.
*/
function PickersCalendar<TDate>(props: PickersCalendarProps<TDate> & WithStyles<typeof styles>) {
function PickersCalendar<TDate>(props: PickersCalendarProps<TDate>) {
const {
allowKeyboardControl,
allowSameDateSelection,
onFocusedDayChange: changeFocusedDay,
classes,
className,
currentMonth,
date,
Expand Down Expand Up @@ -148,33 +205,28 @@ function PickersCalendar<TDate>(props: PickersCalendarProps<TDate> & WithStyles<

return (
<React.Fragment>
<div className={classes.daysHeader}>
<PickersCalendarDayHeader>
{utils.getWeekdays().map((day, i) => (
<Typography
aria-hidden
key={day + i.toString()}
variant="caption"
className={classes.weekDayLabel}
>
<PickersCalendarWeekDayLabel aria-hidden key={day + i.toString()} variant="caption">
{day.charAt(0).toUpperCase()}
</Typography>
</PickersCalendarWeekDayLabel>
))}
</div>
</PickersCalendarDayHeader>

{loading ? (
<div className={classes.loadingContainer}>{renderLoading()}</div>
<PickersCalendarLoadingContainer>{renderLoading()}</PickersCalendarLoadingContainer>
) : (
<SlideTransition
<PickersCalendarSlideTransition
transKey={currentMonthNumber}
onExited={onMonthSwitchingAnimationEnd}
reduceAnimations={reduceAnimations}
slideDirection={slideDirection}
className={clsx(classes.root, className)}
className={className}
{...TransitionProps}
>
<div data-mui-test="pickers-calendar" role="grid" className={classes.weekContainer}>
<PickersCalendarWeekContainer data-mui-test="pickers-calendar" role="grid">
{utils.getWeekArray(currentMonth).map((week) => (
<div role="row" key={`week-${week[0]}`} className={classes.week}>
<PickersCalendarWeek role="row" key={`week-${week[0]}`}>
{week.map((day) => {
const pickersDayProps: PickersDayProps<TDate> = {
key: (day as any)?.toString(),
Expand Down Expand Up @@ -206,15 +258,13 @@ function PickersCalendar<TDate>(props: PickersCalendarProps<TDate> & WithStyles<
</div>
);
})}
</div>
</PickersCalendarWeek>
))}
</div>
</SlideTransition>
</PickersCalendarWeekContainer>
</PickersCalendarSlideTransition>
)}
</React.Fragment>
);
}

export default withStyles(styles, { name: 'PrivatePickersCalendar' })(PickersCalendar) as <TDate>(
props: PickersCalendarProps<TDate>,
) => JSX.Element;
export default PickersCalendar;
4 changes: 2 additions & 2 deletions packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ interface BaseDateRangePickerProps<TDate>
value: RangeInput<TDate>;
}

const KeyboardDateInputComponent = DateRangePickerInput as React.FC<DateInputPropsLike>;
const PureDateInputComponent = DateRangePickerInput as React.FC<DateInputPropsLike>;
const KeyboardDateInputComponent = (DateRangePickerInput as unknown) as React.FC<DateInputPropsLike>;
const PureDateInputComponent = (DateRangePickerInput as unknown) as React.FC<DateInputPropsLike>;

const rangePickerValueManager: PickerStateValueManager<any, any> = {
emptyValue: [null, null],
Expand Down
41 changes: 16 additions & 25 deletions packages/material-ui-lab/src/DateRangePicker/DateRangePickerInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { MuiStyles, StyleRules, withStyles, WithStyles } from '@material-ui/core/styles';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import { useUtils } from '../internal/pickers/hooks/useUtils';
import { RangeInput, DateRange, CurrentlySelectingRangeEndProps } from './RangeTypes';
import { useMaskedInput } from '../internal/pickers/hooks/useMaskedInput';
Expand All @@ -12,26 +12,18 @@ import {
MuiTextFieldProps,
} from '../internal/pickers/PureDateInput';

export type DateRangePickerInputClassKey = 'root' | 'toLabelDelimiter';

export const styles: MuiStyles<DateRangePickerInputClassKey> = (
theme,
): StyleRules<DateRangePickerInputClassKey> => ({
root: {
display: 'flex',
alignItems: 'baseline',
[theme.breakpoints.down('xs')]: {
flexDirection: 'column',
alignItems: 'center',
},
},
toLabelDelimiter: {
margin: '8px 0',
[theme.breakpoints.up('sm')]: {
margin: '0 16px',
},
const DateRangePickerInputRoot = styled(
'div',
{},
{ skipSx: true },
)(({ theme }) => ({
display: 'flex',
alignItems: 'baseline',
[theme.breakpoints.down('xs')]: {
flexDirection: 'column',
alignItems: 'center',
},
});
}));

export interface ExportedDateRangePickerInputProps
extends Omit<ExportedDateInputProps<RangeInput<any>, DateRange<any>>, 'renderInput'> {
Expand Down Expand Up @@ -69,11 +61,10 @@ export interface DateRangeInputProps
* @ignore - internal component.
*/
const DateRangePickerInput = React.forwardRef(function DateRangePickerInput(
props: DateRangeInputProps & WithStyles<typeof styles>,
props: DateRangeInputProps,
ref: React.Ref<HTMLDivElement>,
): JSX.Element {
const {
classes,
currentlySelectingRangeEnd,
disableOpenPicker,
endText,
Expand Down Expand Up @@ -181,10 +172,10 @@ const DateRangePickerInput = React.forwardRef(function DateRangePickerInput(
});

return (
<div onBlur={onBlur} className={classes.root} ref={ref}>
<DateRangePickerInputRoot onBlur={onBlur} ref={ref}>
{renderInput(startInputProps, endInputProps)}
</div>
</DateRangePickerInputRoot>
);
});

export default withStyles(styles, { name: 'MuiDateRangePickerInput' })(DateRangePickerInput);
export default DateRangePickerInput;
49 changes: 29 additions & 20 deletions packages/material-ui-lab/src/DateRangePicker/DateRangePickerToolbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,14 @@
import * as React from 'react';
import Typography from '@material-ui/core/Typography';
import { MuiStyles, withStyles, WithStyles } from '@material-ui/core/styles';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import { generateUtilityClasses } from '@material-ui/unstyled';
import PickersToolbar from '../internal/pickers/PickersToolbar';
import { useUtils } from '../internal/pickers/hooks/useUtils';
import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';
import { ToolbarComponentProps } from '../internal/pickers/typings/BasePicker';
import { DateRange, CurrentlySelectingRangeEndProps } from './RangeTypes';

export const styles: MuiStyles<'root' | 'penIcon' | 'dateTextContainer'> = {
root: {},
penIcon: {
position: 'relative',
top: 4,
},
dateTextContainer: {
display: 'flex',
},
};
const classes = generateUtilityClasses('PrivateDateRangePickerToolbar', ['penIcon']);

interface DateRangePickerToolbarProps
extends CurrentlySelectingRangeEndProps,
Expand All @@ -31,11 +23,29 @@ interface DateRangePickerToolbarProps
setCurrentlySelectingRangeEnd: (newSelectingEnd: 'start' | 'end') => void;
}

const DateRangePickerToolbarRoot = styled(
PickersToolbar,
{},
{ skipSx: true },
)({
[`& .${classes.penIcon}`]: {
position: 'relative',
top: 4,
},
});

const DateRangePickerToolbarContainer = styled(
'div',
{},
{ skipSx: true },
)({
display: 'flex',
});

/**
* @ignore - internal component.
*/
const DateRangePickerToolbar: React.FC<DateRangePickerToolbarProps & WithStyles<typeof styles>> = ({
classes,
const DateRangePickerToolbar = ({
currentlySelectingRangeEnd,
date: [start, end],
endText,
Expand All @@ -45,7 +55,7 @@ const DateRangePickerToolbar: React.FC<DateRangePickerToolbarProps & WithStyles<
toggleMobileKeyboardView,
toolbarFormat,
toolbarTitle = 'SELECT DATE RANGE',
}) => {
}: DateRangePickerToolbarProps) => {
const utils = useUtils();

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

return (
<PickersToolbar
className={classes.root}
<DateRangePickerToolbarRoot
toolbarTitle={toolbarTitle}
isMobileKeyboardViewOpen={isMobileKeyboardViewOpen}
toggleMobileKeyboardView={toggleMobileKeyboardView}
isLandscape={false}
penIconClassName={classes.penIcon}
>
<div className={classes.dateTextContainer}>
<DateRangePickerToolbarContainer>
<PickersToolbarButton
variant={start !== null ? 'h5' : 'h6'}
value={startDateValue}
Expand All @@ -79,9 +88,9 @@ const DateRangePickerToolbar: React.FC<DateRangePickerToolbarProps & WithStyles<
selected={currentlySelectingRangeEnd === 'end'}
onClick={() => setCurrentlySelectingRangeEnd('end')}
/>
</div>
</PickersToolbar>
</DateRangePickerToolbarContainer>
</DateRangePickerToolbarRoot>
);
};

export default withStyles(styles, { name: 'MuiDateRangePickerToolbar' })(DateRangePickerToolbar);
export default DateRangePickerToolbar;
Loading

0 comments on commit 9bf937a

Please sign in to comment.