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

[pickers] Migrate PickersCalendarHeader to emotion #26354

Merged
merged 7 commits into from
May 21, 2021
Merged

[pickers] Migrate PickersCalendarHeader to emotion #26354

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
28350d1
migrate to emotion
siriwatknp May 18, 2021
10738b4
fix: missing className
siriwatknp May 18, 2021
c4ade15
provide components using `as` to remains same behaviour
siriwatknp May 20, 2021
132dd56
use `as` prop
siriwatknp May 20, 2021
bcbb93a
pass styleProps to each slot
siriwatknp May 20, 2021
4b79a0e
Merge branch 'next' of https://github.com/mui-org/material-ui into pi…
siriwatknp May 21, 2021
017265e
update styled args
siriwatknp May 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 72 additions & 77 deletions packages/material-ui-lab/src/CalendarPicker/PickersCalendarHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import Fade from '@material-ui/core/Fade';
import { WithStyles, withStyles, StyleRules, MuiStyles } from '@material-ui/core/styles';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import { SlideDirection } from './PickersSlideTransition';
import { useUtils } from '../internal/pickers/hooks/useUtils';
Expand Down Expand Up @@ -59,54 +57,66 @@ export interface PickersCalendarHeaderProps<TDate>
onViewChange?: (view: CalendarPickerView) => void;
}

export type PickersCalendarHeaderClassKey =
| 'root'
| 'yearSelectionSwitcher'
| 'switchView'
| 'switchViewActive'
| 'label'
| 'labelItem';

export const styles: MuiStyles<PickersCalendarHeaderClassKey> = (
theme,
): StyleRules<PickersCalendarHeaderClassKey> => ({
root: {
display: 'flex',
alignItems: 'center',
marginTop: 16,
marginBottom: 8,
paddingLeft: 24,
paddingRight: 12,
// prevent jumping in safari
maxHeight: 30,
minHeight: 30,
},
yearSelectionSwitcher: {
marginRight: 'auto',
},
switchView: {
willChange: 'transform',
transition: theme.transitions.create('transform'),
transform: 'rotate(0deg)',
},
switchViewActive: {
transform: 'rotate(180deg)',
},
label: {
display: 'flex',
maxHeight: 30,
overflow: 'hidden',
alignItems: 'center',
cursor: 'pointer',
marginRight: 'auto',
...theme.typography.body1,
fontWeight: theme.typography.fontWeightMedium,
},
labelItem: {
marginRight: 6,
},
const PickersCalendarHeaderRoot = styled(
'div',
{},
{ skipSx: true },
)({
display: 'flex',
alignItems: 'center',
marginTop: 16,
marginBottom: 8,
paddingLeft: 24,
paddingRight: 12,
// prevent jumping in safari
maxHeight: 30,
minHeight: 30,
});

const PickersCalendarHeaderLabel = styled(
'div',
{},
{ skipSx: true },
)(({ theme }) => ({
display: 'flex',
maxHeight: 30,
overflow: 'hidden',
alignItems: 'center',
cursor: 'pointer',
marginRight: 'auto',
...theme.typography.body1,
fontWeight: theme.typography.fontWeightMedium,
}));

const PickersCalendarHeaderLabelItem = styled(
'div',
{},
{ skipSx: true },
)({
marginRight: 6,
});

const PickersCalendarHeaderSwitchViewButton = styled(
IconButton,
{},
{ skipSx: true },
)({
marginRight: 'auto',
});

const PickersCalendarHeaderSwitchView = styled(
ArrowDropDownIcon,
{},
{ skipSx: true },
)(({ theme, styleProps = {} }) => ({
willChange: 'transform',
transition: theme.transitions.create('transform'),
transform: 'rotate(0deg)',
...(styleProps.openView === 'year' && {
transform: 'rotate(180deg)',
}),
}));

function getSwitchingViewAriaText(view: CalendarPickerView) {
return view === 'year'
? 'year view is open, switch to calendar view'
Expand All @@ -116,11 +126,8 @@ function getSwitchingViewAriaText(view: CalendarPickerView) {
/**
* @ignore - do not document.
*/
function PickersCalendarHeader<TDate>(
props: PickersCalendarHeaderProps<TDate> & WithStyles<typeof styles>,
) {
function PickersCalendarHeader<TDate>(props: PickersCalendarHeaderProps<TDate>) {
const {
classes,
components = {},
componentsProps = {},
currentMonth: month,
Expand All @@ -140,9 +147,9 @@ function PickersCalendarHeader<TDate>(

const utils = useUtils<TDate>();

const SwitchViewButton = components.SwitchViewButton || IconButton;
const SwitchViewButton = components.SwitchViewButton || PickersCalendarHeaderSwitchViewButton;
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
const switchViewButtonProps = componentsProps.switchViewButton || {};
const SwitchViewIcon = components.SwitchViewIcon || ArrowDropDownIcon;
const SwitchViewIcon = components.SwitchViewIcon || PickersCalendarHeaderSwitchView;
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved

const selectNextMonth = () => onMonthChange(utils.getNextMonth(month), 'left');
const selectPreviousMonth = () => onMonthChange(utils.getPreviousMonth(month), 'right');
Expand Down Expand Up @@ -170,39 +177,34 @@ function PickersCalendarHeader<TDate>(
}

return (
<div className={classes.root}>
<div role="presentation" className={classes.label} onClick={handleToggleView}>
<PickersCalendarHeaderRoot>
<PickersCalendarHeaderLabel role="presentation" onClick={handleToggleView}>
<FadeTransitionGroup
reduceAnimations={reduceAnimations}
transKey={utils.format(month, 'month')}
>
<div aria-live="polite" data-mui-test="calendar-month-text" className={classes.labelItem}>
<PickersCalendarHeaderLabelItem aria-live="polite" data-mui-test="calendar-month-text">
{utils.format(month, 'month')}
</div>
</PickersCalendarHeaderLabelItem>
</FadeTransitionGroup>
<FadeTransitionGroup
reduceAnimations={reduceAnimations}
transKey={utils.format(month, 'year')}
>
<div aria-live="polite" data-mui-test="calendar-year-text" className={classes.labelItem}>
<PickersCalendarHeaderLabelItem aria-live="polite" data-mui-test="calendar-year-text">
{utils.format(month, 'year')}
</div>
</PickersCalendarHeaderLabelItem>
</FadeTransitionGroup>
{views.length > 1 && (
<SwitchViewButton
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
size="small"
className={classes.yearSelectionSwitcher}
aria-label={getViewSwitchingButtonText(currentView)}
{...switchViewButtonProps}
>
<SwitchViewIcon
className={clsx(classes.switchView, {
[classes.switchViewActive]: currentView === 'year',
})}
/>
<SwitchViewIcon styleProps={props} />
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
</SwitchViewButton>
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
)}
</div>
</PickersCalendarHeaderLabel>
<Fade in={currentView === 'day'}>
<PickersArrowSwitcher
leftArrowButtonText={leftArrowButtonText}
Expand All @@ -215,15 +217,8 @@ function PickersCalendarHeader<TDate>(
isRightDisabled={isNextMonthDisabled}
/>
</Fade>
</div>
</PickersCalendarHeaderRoot>
);
}

PickersCalendarHeader.propTypes = {
leftArrowButtonText: PropTypes.string,
rightArrowButtonText: PropTypes.string,
};

export default withStyles(styles, { name: 'PrivatePickersCalendarHeader' })(
PickersCalendarHeader,
) as <TDate>(props: PickersCalendarHeaderProps<TDate>) => JSX.Element;
export default PickersCalendarHeader;
67 changes: 36 additions & 31 deletions packages/material-ui-lab/src/internal/pickers/PickersArrowSwitcher.tsx
View file
Open in desktop
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 { MuiStyles, StyleRules, WithStyles, withStyles, useTheme } from '@material-ui/core/styles';
import { useTheme, experimentalStyled as styled } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import ArrowLeftIcon from '../svg-icons/ArrowLeft';
import ArrowRightIcon from '../svg-icons/ArrowRight';
Expand Down Expand Up @@ -45,29 +44,39 @@ interface ArrowSwitcherProps extends ExportedArrowSwitcherProps, React.HTMLProps
onLeftClick: () => void;
onRightClick: () => void;
}
export type PickersArrowSwitcherClassKey = 'root' | 'spacer' | 'hidden';

export const styles: MuiStyles<PickersArrowSwitcherClassKey> = (
theme,
): StyleRules<PickersArrowSwitcherClassKey> => ({
root: {
display: 'flex',
},
spacer: {
width: theme.spacing(3),
},
hidden: {
visibility: 'hidden',
},
const PickersArrowSwitcherRoot = styled(
'div',
{},
{ skipSx: true },
)({
display: 'flex',
});

const PickersArrowSwitcherSpacer = styled(
'div',
{},
{ skipSx: true },
)(({ theme }) => ({
width: theme.spacing(3),
}));

const PickersArrowSwitcherButton = styled(
IconButton,
{},
{ skipSx: true },
)(({ styleProps = {} }) => ({
...(!!styleProps.hidden && {
visibility: 'hidden',
}),
}));

const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitcher(
props: ArrowSwitcherProps & WithStyles<typeof styles>,
props: Omit<ArrowSwitcherProps, 'as'>,
ref: React.Ref<HTMLDivElement>,
) {
const {
children,
classes,
className,
components = {},
componentsProps = {},
Expand All @@ -84,16 +93,16 @@ const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitcher(
const theme = useTheme();
const isRtl = theme.direction === 'rtl';

const LeftArrowButton = components.LeftArrowButton || IconButton;
const LeftArrowButton = components.LeftArrowButton || PickersArrowSwitcherButton;
const leftArrowButtonProps = componentsProps.leftArrowButton || {};
const LeftArrowIcon = components.LeftArrowIcon || ArrowLeftIcon;

const RightArrowButton = components.RightArrowButton || IconButton;
const RightArrowButton = components.RightArrowButton || PickersArrowSwitcherButton;
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
const rightArrowButtonProps = componentsProps.rightArrowButton || {};
const RightArrowIcon = components.RightArrowIcon || ArrowRightIcon;

return (
<div className={clsx(classes.root, className)} ref={ref} {...other}>
<PickersArrowSwitcherRoot ref={ref} className={className} {...other}>
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
<LeftArrowButton
size="small"
aria-label={leftArrowButtonText}
Expand All @@ -102,9 +111,8 @@ const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitcher(
edge="end"
onClick={onLeftClick}
{...leftArrowButtonProps}
className={clsx(leftArrowButtonProps.className, {
[classes.hidden]: isLeftHidden,
})}
className={leftArrowButtonProps.className}
styleProps={{ ...leftArrowButtonProps, hidden: isLeftHidden }}
>
{isRtl ? <RightArrowIcon /> : <LeftArrowIcon />}
</LeftArrowButton>
Expand All @@ -113,7 +121,7 @@ const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitcher(
{children}
</Typography>
) : (
<div className={classes.spacer} />
<PickersArrowSwitcherSpacer />
)}
<RightArrowButton
size="small"
Expand All @@ -123,16 +131,13 @@ const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitcher(
disabled={isRightDisabled}
onClick={onRightClick}
{...rightArrowButtonProps}
className={clsx(rightArrowButtonProps.className, {
[classes.hidden]: isRightHidden,
})}
className={rightArrowButtonProps.className}
styleProps={{ ...rightArrowButtonProps, hidden: isRightHidden }}
>
{isRtl ? <LeftArrowIcon /> : <RightArrowIcon />}
</RightArrowButton>
</div>
</PickersArrowSwitcherRoot>
);
});

export default React.memo(
withStyles(styles, { name: 'PrivatePickersArrowSwitcher' })(PickersArrowSwitcher),
);
export default PickersArrowSwitcher;