Skip to content

Commit 7613b32

Browse files
siriwatknpsiriwatknp
authored
[DatePicker] Migrate CalendarPickerSkeleton to emotion (#26335)
1 parent 9bf937a commit 7613b32

File tree

6 files changed

+184
-121
lines changed

6 files changed

+184
-121
lines changed

‎docs/pages/api-docs/calendar-picker-skeleton.json‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,8 @@
11
{
2-
"props": {},
2+
"props": { "classes": { "type": { "name": "object" } }, "sx": { "type": { "name": "object" } } },
33
"name": "CalendarPickerSkeleton",
44
"styles": {
5-
"classes": [
6-
"hidden",
7-
"root",
8-
"loadingContainer",
9-
"weekContainer",
10-
"week",
11-
"daysHeader",
12-
"weekDayLabel",
13-
"daySkeleton"
14-
],
5+
"classes": ["root", "week", "daySkeleton"],
156
"globalClasses": {},
167
"name": "MuiCalendarPickerSkeleton"
178
},
@@ -20,6 +11,6 @@
2011
"filename": "/packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx",
2112
"inheritance": null,
2213
"demos": "<ul><li><a href=\"/components/date-picker/\">Date Picker</a></li></ul>",
23-
"styledComponent": false,
14+
"styledComponent": true,
2415
"cssComponent": false
2516
}

‎docs/translations/api-docs/calendar-picker-skeleton/calendar-picker-skeleton.json‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
1+
{
2+
"componentDescription": "",
3+
"propDescriptions": {
4+
"classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
5+
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details."
6+
},
7+
"classDescriptions": {
8+
"root": { "description": "Styles applied to the root element." },
9+
"week": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the week element" },
10+
"daySkeleton": {
11+
"description": "Styles applied to {{nodeName}}.",
12+
"nodeName": "the day element"
13+
}
14+
}
15+
}

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

Lines changed: 1 addition & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import Typography from '@material-ui/core/Typography';
3-
import { StyleRules, Theme, experimentalStyled as styled } from '@material-ui/core/styles';
3+
import { experimentalStyled as styled } from '@material-ui/core/styles';
44
import PickersDay, { PickersDayProps } from '../PickersDay/PickersDay';
55
import { useUtils, useNow } from '../internal/pickers/hooks/useUtils';
66
import { PickerOnChangeFn } from '../internal/pickers/hooks/useViews';
@@ -59,51 +59,6 @@ export interface PickersCalendarProps<TDate> extends ExportedCalendarProps<TDate
5959

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

62-
// TODO remove PickersCalendarClassKey in CalendarPickerSkeleton migration
63-
export type PickersCalendarClassKey =
64-
| 'root'
65-
| 'loadingContainer'
66-
| 'weekContainer'
67-
| 'week'
68-
| 'daysHeader'
69-
| 'weekDayLabel';
70-
71-
// TODO remove styles in CalendarPickerSkeleton migration
72-
export const styles = (theme: Theme): StyleRules<PickersCalendarClassKey> => ({
73-
root: {
74-
minHeight: weeksContainerHeight,
75-
},
76-
loadingContainer: {
77-
display: 'flex',
78-
justifyContent: 'center',
79-
alignItems: 'center',
80-
minHeight: weeksContainerHeight,
81-
},
82-
weekContainer: {
83-
overflow: 'hidden',
84-
},
85-
week: {
86-
margin: `${DAY_MARGIN}px 0`,
87-
display: 'flex',
88-
justifyContent: 'center',
89-
},
90-
daysHeader: {
91-
display: 'flex',
92-
justifyContent: 'center',
93-
alignItems: 'center',
94-
},
95-
weekDayLabel: {
96-
width: 36,
97-
height: 40,
98-
margin: '0 2px',
99-
textAlign: 'center',
100-
display: 'flex',
101-
justifyContent: 'center',
102-
alignItems: 'center',
103-
color: theme.palette.text.secondary,
104-
},
105-
});
106-
10762
const PickersCalendarDayHeader = styled(
10863
'div',
10964
{},

‎packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.test.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
import * as React from 'react';
2-
import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
3-
import CalendarPickerSkeleton from '@material-ui/lab/CalendarPickerSkeleton';
2+
import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
3+
import CalendarPickerSkeleton, {
4+
calendarPickerSkeletonClasses as classes,
5+
} from '@material-ui/lab/CalendarPickerSkeleton';
46

57
describe('<CalendarPickerSkeleton />', () => {
6-
let classes: Record<string, string>;
78
const render = createClientRender();
89
const mount = createMount();
910

10-
before(() => {
11-
classes = getClasses(<CalendarPickerSkeleton />);
12-
});
13-
14-
describeConformance(<CalendarPickerSkeleton />, () => ({
11+
describeConformanceV5(<CalendarPickerSkeleton />, () => ({
1512
classes,
1613
inheritComponent: 'div',
1714
render,
1815
mount,
16+
muiName: 'MuiCalendarPickerSkeleton',
1917
refInstanceof: window.HTMLDivElement,
20-
skip: ['componentProp', 'refForwarding'],
18+
skip: ['componentProp', 'refForwarding', 'componentsProp', 'themeVariants'],
2119
}));
2220
});

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

Lines changed: 153 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,119 @@ import * as React from 'react';
22
import PropTypes from 'prop-types';
33
import clsx from 'clsx';
44
import Skeleton from '@material-ui/core/Skeleton';
5-
import { WithStyles, withStyles, MuiStyles, StyleRules } from '@material-ui/core/styles';
6-
import { DAY_SIZE, DAY_MARGIN } from '../internal/pickers/constants/dimensions';
75
import {
8-
styles as calendarStyles,
9-
PickersCalendarClassKey,
10-
} from '../CalendarPicker/PickersCalendar';
11-
12-
export interface CalendarPickerSkeletonProps extends React.HTMLProps<HTMLDivElement> {}
13-
14-
export type CalendarPickerSkeletonClassKey =
15-
| PickersCalendarClassKey
16-
| 'root'
17-
| 'daySkeleton'
18-
| 'hidden';
19-
export const styles: MuiStyles<CalendarPickerSkeletonClassKey> = (
20-
theme,
21-
): StyleRules<CalendarPickerSkeletonClassKey> => ({
22-
...calendarStyles(theme),
23-
root: {
24-
alignSelf: 'start',
25-
},
26-
daySkeleton: {
27-
margin: `0 ${DAY_MARGIN}px`,
6+
experimentalStyled as styled,
7+
unstable_useThemeProps as useThemeProps,
8+
Theme,
9+
} from '@material-ui/core/styles';
10+
import { SxProps } from '@material-ui/system';
11+
import {
12+
unstable_composeClasses as composeClasses,
13+
generateUtilityClass,
14+
generateUtilityClasses,
15+
} from '@material-ui/unstyled';
16+
import { DAY_SIZE, DAY_MARGIN } from '../internal/pickers/constants/dimensions';
17+
18+
type HTMLDivProps = JSX.IntrinsicElements['div'];
19+
20+
export interface CalendarPickerSkeletonClasses {
21+
/** Styles applied to the root element. */
22+
root: string;
23+
/** Styles applied to the week element. */
24+
week: string;
25+
/** Styles applied to the day element. */
26+
daySkeleton: string;
27+
}
28+
29+
export interface CalendarPickerSkeletonProps extends HTMLDivProps {
30+
/**
31+
* Override or extend the styles applied to the component.
32+
*/
33+
classes?: Partial<CalendarPickerSkeletonClasses>;
34+
/**
35+
* The system prop that allows defining system overrides as well as additional CSS styles.
36+
*/
37+
sx?: SxProps<Theme>;
38+
}
39+
40+
export type CalendarPickerSkeletonClassKey = keyof CalendarPickerSkeletonClasses;
41+
42+
export function getCalendarPickerSkeletonUtilityClass(slot: string) {
43+
return generateUtilityClass('MuiCalendarPickerSkeleton', slot);
44+
}
45+
46+
export const calendarPickerSkeletonClasses: CalendarPickerSkeletonClasses = generateUtilityClasses(
47+
'MuiCalendarPickerSkeleton',
48+
['root', 'week', 'daySkeleton'],
49+
);
50+
51+
const useUtilityClasses = (styleProps: CalendarPickerSkeletonProps) => {
52+
const { classes } = styleProps;
53+
const slots = {
54+
root: ['root'],
55+
week: ['week'],
56+
daySkeleton: ['daySkeleton'],
57+
};
58+
59+
return composeClasses(slots, getCalendarPickerSkeletonUtilityClass, classes);
60+
};
61+
62+
const CalendarPickerSkeletonRoot = styled(
63+
'div',
64+
{},
65+
{
66+
name: 'MuiCalendarPickerSkeleton',
67+
slot: 'Root',
68+
overridesResolver: (props, styles) => styles.root,
2869
},
29-
hidden: {
30-
visibility: 'hidden',
70+
)({
71+
alignSelf: 'start',
72+
});
73+
74+
const CalendarPickerSkeletonWeek = styled(
75+
'div',
76+
{},
77+
{
78+
name: 'MuiCalendarPickerSkeleton',
79+
slot: 'Week',
80+
overridesResolver: (props, styles) => styles.week,
3181
},
82+
)({
83+
margin: `${DAY_MARGIN}px 0`,
84+
display: 'flex',
85+
justifyContent: 'center',
3286
});
3387

88+
const CalendarPickerSkeletonDay = styled(
89+
Skeleton,
90+
{},
91+
{
92+
name: 'MuiCalendarPickerSkeleton',
93+
slot: 'Day',
94+
overridesResolver: (props, styles) => styles.daySkeleton,
95+
},
96+
)(({ styleProps = {} }) => ({
97+
margin: `0 ${DAY_MARGIN}px`,
98+
...(styleProps.day === 0 && {
99+
visibility: 'hidden',
100+
}),
101+
}));
102+
103+
CalendarPickerSkeletonDay.propTypes /* remove-proptypes */ = {
104+
// ----------------------------- Warning --------------------------------
105+
// | These PropTypes are generated from the TypeScript type definitions |
106+
// | To update them edit TypeScript types and run "yarn proptypes" |
107+
// ----------------------------------------------------------------------
108+
/**
109+
* Optional children to infer width and height from.
110+
*/
111+
children: PropTypes.node,
112+
/**
113+
* @ignore
114+
*/
115+
styleProps: PropTypes.object,
116+
} as any;
117+
34118
const monthMap = [
35119
[0, 1, 1, 1, 1, 1, 1],
36120
[1, 1, 1, 1, 1, 1, 1],
@@ -39,31 +123,58 @@ const monthMap = [
39123
[1, 1, 1, 1, 0, 0, 0],
40124
];
41125

42-
const CalendarPickerSkeleton: React.FC<CalendarPickerSkeletonProps & WithStyles<typeof styles>> = (
43-
props,
44-
) => {
45-
const { className, classes, ...other } = props;
126+
/**
127+
*
128+
* Demos:
129+
*
130+
* - [Date Picker](https://material-ui.com/components/date-picker/)
131+
*
132+
* API:
133+
*
134+
* - [CalendarPickerSkeleton API](https://material-ui.com/api/calendar-picker-skeleton/)
135+
*/
136+
function CalendarPickerSkeleton(props: CalendarPickerSkeletonProps) {
137+
const { className, ...other } = useThemeProps<
138+
Theme,
139+
JSX.IntrinsicElements['div'],
140+
'MuiCalendarPickerSkeleton'
141+
>({
142+
props,
143+
name: 'MuiCalendarPickerSkeleton',
144+
});
145+
146+
const classes = useUtilityClasses(props);
46147

47148
return (
48-
<div className={clsx(classes.root, className)} {...other}>
149+
<CalendarPickerSkeletonRoot className={clsx(classes.root, className)} {...other}>
49150
{monthMap.map((week, index) => (
50-
<div key={index} className={classes.week}>
151+
<CalendarPickerSkeletonWeek key={index} className={classes.week}>
51152
{week.map((day, index2) => (
52-
<Skeleton
153+
<CalendarPickerSkeletonDay
53154
key={index2}
54155
variant="circular"
55156
width={DAY_SIZE}
56157
height={DAY_SIZE}
57-
className={clsx(classes.daySkeleton, {
58-
[classes.hidden]: day === 0,
59-
})}
158+
className={classes.daySkeleton}
159+
styleProps={{ day }}
60160
/>
61161
))}
62-
</div>
162+
</CalendarPickerSkeletonWeek>
63163
))}
64-
</div>
164+
</CalendarPickerSkeletonRoot>
65165
);
66-
};
166+
}
167+
168+
/**
169+
*
170+
* Demos:
171+
*
172+
* - [Date Picker](https://material-ui.com/components/date-picker/)
173+
*
174+
* API:
175+
*
176+
* - [CalendarPickerSkeleton API](https://material-ui.com/api/calendar-picker-skeleton/)
177+
*/
67178

68179
CalendarPickerSkeleton.propTypes /* remove-proptypes */ = {
69180
// ----------------------------- Warning --------------------------------
@@ -75,23 +186,13 @@ CalendarPickerSkeleton.propTypes /* remove-proptypes */ = {
75186
*/
76187
children: PropTypes.node,
77188
/**
78-
* @ignore
189+
* Override or extend the styles applied to the component.
79190
*/
80-
classes: PropTypes.object.isRequired,
191+
classes: PropTypes.object,
81192
/**
82-
* @ignore
193+
* The system prop that allows defining system overrides as well as additional CSS styles.
83194
*/
84-
className: PropTypes.string,
195+
sx: PropTypes.object,
85196
} as any;
86197

87-
/**
88-
*
89-
* Demos:
90-
*
91-
* - [Date Picker](https://material-ui.com/components/date-picker/)
92-
*
93-
* API:
94-
*
95-
* - [CalendarPickerSkeleton API](https://material-ui.com/api/calendar-picker-skeleton/)
96-
*/
97-
export default withStyles(styles, { name: 'MuiCalendarPickerSkeleton' })(CalendarPickerSkeleton);
198+
export default CalendarPickerSkeleton;

‎packages/material-ui-lab/src/CalendarPickerSkeleton/index.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
export { default } from './CalendarPickerSkeleton';
1+
export {
2+
default,
3+
calendarPickerSkeletonClasses,
4+
getCalendarPickerSkeletonUtilityClass,
5+
} from './CalendarPickerSkeleton';
26

37
export type CalendarPickerSkeletonClassKey = import('./CalendarPickerSkeleton').CalendarPickerSkeletonClassKey;
48
export type CalendarPickerSkeletonProps = import('./CalendarPickerSkeleton').CalendarPickerSkeletonProps;

0 commit comments

Comments
 (0)