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 4 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
156 changes: 78 additions & 78 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,7 @@ function PickersCalendarHeader<TDate>(

const utils = useUtils<TDate>();

const SwitchViewButton = components.SwitchViewButton || IconButton;
const switchViewButtonProps = componentsProps.switchViewButton || {};
const SwitchViewIcon = components.SwitchViewIcon || ArrowDropDownIcon;

const selectNextMonth = () => onMonthChange(utils.getNextMonth(month), 'left');
const selectPreviousMonth = () => onMonthChange(utils.getPreviousMonth(month), 'right');
Expand All @@ -169,40 +174,42 @@ function PickersCalendarHeader<TDate>(
return null;
}

// TODO: convert to simple assignment after the type error in defaultPropsHandler.js:60:6 is fixed
const styleProps = { ...props };
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved

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
<PickersCalendarHeaderSwitchViewButton
size="small"
className={classes.yearSelectionSwitcher}
as={components.SwitchViewButton}
aria-label={getViewSwitchingButtonText(currentView)}
{...switchViewButtonProps}
>
<SwitchViewIcon
className={clsx(classes.switchView, {
[classes.switchViewActive]: currentView === 'year',
})}
<PickersCalendarHeaderSwitchView
as={components.SwitchViewIcon}
styleProps={styleProps}
/>
</SwitchViewButton>
</PickersCalendarHeaderSwitchViewButton>
)}
</div>
</PickersCalendarHeaderLabel>
<Fade in={currentView === 'day'}>
<PickersArrowSwitcher
leftArrowButtonText={leftArrowButtonText}
Expand All @@ -215,15 +222,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;
75 changes: 40 additions & 35 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,55 +93,51 @@ const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitcher(
const theme = useTheme();
const isRtl = theme.direction === 'rtl';

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

const RightArrowButton = components.RightArrowButton || IconButton;
const rightArrowButtonProps = componentsProps.rightArrowButton || {};
const RightArrowIcon = components.RightArrowIcon || ArrowRightIcon;

return (
<div className={clsx(classes.root, className)} ref={ref} {...other}>
<LeftArrowButton
<PickersArrowSwitcherRoot ref={ref} className={className} {...other}>
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
<PickersArrowSwitcherButton
as={components.LeftArrowButton}
size="small"
aria-label={leftArrowButtonText}
title={leftArrowButtonText}
disabled={isLeftDisabled}
edge="end"
onClick={onLeftClick}
{...leftArrowButtonProps}
className={clsx(leftArrowButtonProps.className, {
[classes.hidden]: isLeftHidden,
})}
className={leftArrowButtonProps.className}
styleProps={{ ...leftArrowButtonProps, hidden: isLeftHidden }}
>
{isRtl ? <RightArrowIcon /> : <LeftArrowIcon />}
</LeftArrowButton>
</PickersArrowSwitcherButton>
{children ? (
<Typography variant="subtitle1" component="span">
{children}
</Typography>
) : (
<div className={classes.spacer} />
<PickersArrowSwitcherSpacer />
)}
<RightArrowButton
<PickersArrowSwitcherButton
as={components.RightArrowButton}
size="small"
aria-label={rightArrowButtonText}
title={rightArrowButtonText}
edge="start"
disabled={isRightDisabled}
onClick={onRightClick}
{...rightArrowButtonProps}
className={clsx(rightArrowButtonProps.className, {
[classes.hidden]: isRightHidden,
})}
className={rightArrowButtonProps.className}
styleProps={{ ...rightArrowButtonProps, hidden: isRightHidden }}
>
{isRtl ? <LeftArrowIcon /> : <RightArrowIcon />}
</RightArrowButton>
</div>
</PickersArrowSwitcherButton>
</PickersArrowSwitcherRoot>
);
});

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