Skip to content

Commit cd82a1d

Browse files
eps1loneps1lon
committed
Use explicit type declarations instead
1 parent 1d116c2 commit cd82a1d

31 files changed

+618
-520
lines changed

‎.eslintrc.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ const forbidTopLevelMessage = [
44
'Prefer one level nested imports to avoid bundling everything in dev mode',
55
'See https://github.com/mui-org/material-ui/pull/24147 for the kind of win it can unlock.',
66
].join('\n');
7+
// This only applies to packages published from this monorepo.
8+
// If you build a library around `@material-ui/core` you can safely use `createStyles` without running into the same issue as we are.
79
const forbidCreateStylesMessage =
8-
'Use `as const` assertions instead. ' +
10+
'Use `Styles<Theme, Props, ClassKey>` instead if the styles are exported. Otherwise use `as const` assertions. ' +
911
'`createStyles` will lead to inlined, at-compile-time-resolved type-imports. ' +
1012
'See https://github.com/microsoft/TypeScript/issues/36097#issuecomment-578324386 for more information';
1113

‎packages/material-ui-lab/src/ClockPicker/Clock.tsx

Lines changed: 67 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
33
import clsx from 'clsx';
44
import IconButton from '@material-ui/core/IconButton';
55
import Typography from '@material-ui/core/Typography';
6-
import { WithStyles, Theme, withStyles } from '@material-ui/core/styles';
6+
import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles';
77
import ClockPointer from './ClockPointer';
88
import { useUtils, MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
99
import { ClockViewType } from '../internal/pickers/constants/ClockType';
@@ -34,68 +34,74 @@ export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
3434
) => string;
3535
}
3636

37-
export const styles = (theme: Theme) =>
38-
({
39-
root: {
40-
display: 'flex',
41-
justifyContent: 'center',
42-
alignItems: 'center',
43-
margin: theme.spacing(2),
44-
},
45-
clock: {
46-
backgroundColor: 'rgba(0,0,0,.07)',
47-
borderRadius: '50%',
48-
height: 220,
49-
width: 220,
50-
flexShrink: 0,
51-
position: 'relative',
52-
pointerEvents: 'none',
53-
},
54-
squareMask: {
55-
width: '100%',
56-
height: '100%',
57-
position: 'absolute',
58-
pointerEvents: 'auto',
59-
outline: 0,
60-
// Disable scroll capabilities.
61-
touchAction: 'none',
62-
userSelect: 'none',
63-
'&:active': {
64-
cursor: 'move',
65-
},
66-
},
67-
pin: {
68-
width: 6,
69-
height: 6,
70-
borderRadius: '50%',
71-
backgroundColor: theme.palette.primary.main,
72-
position: 'absolute',
73-
top: '50%',
74-
left: '50%',
75-
transform: 'translate(-50%, -50%)',
76-
},
77-
amButton: {
78-
zIndex: 1,
79-
left: 8,
80-
position: 'absolute',
81-
bottom: 8,
82-
},
83-
pmButton: {
84-
zIndex: 1,
85-
position: 'absolute',
86-
bottom: 8,
87-
right: 8,
37+
export type ClockClassKey =
38+
| 'root'
39+
| 'clock'
40+
| 'squareMask'
41+
| 'pin'
42+
| 'amButton'
43+
| 'pmButton'
44+
| 'meridiemButtonSelected';
45+
46+
export const styles: MuiStyles<ClockClassKey> = (theme): StyleRules<ClockClassKey> => ({
47+
root: {
48+
display: 'flex',
49+
justifyContent: 'center',
50+
alignItems: 'center',
51+
margin: theme.spacing(2),
52+
},
53+
clock: {
54+
backgroundColor: 'rgba(0,0,0,.07)',
55+
borderRadius: '50%',
56+
height: 220,
57+
width: 220,
58+
flexShrink: 0,
59+
position: 'relative',
60+
pointerEvents: 'none',
61+
},
62+
squareMask: {
63+
width: '100%',
64+
height: '100%',
65+
position: 'absolute',
66+
pointerEvents: 'auto',
67+
outline: 0,
68+
// Disable scroll capabilities.
69+
touchAction: 'none',
70+
userSelect: 'none',
71+
'&:active': {
72+
cursor: 'move',
8873
},
89-
meridiemButtonSelected: {
90-
backgroundColor: theme.palette.primary.main,
91-
color: theme.palette.primary.contrastText,
92-
'&:hover': {
93-
backgroundColor: theme.palette.primary.light,
94-
},
74+
},
75+
pin: {
76+
width: 6,
77+
height: 6,
78+
borderRadius: '50%',
79+
backgroundColor: theme.palette.primary.main,
80+
position: 'absolute',
81+
top: '50%',
82+
left: '50%',
83+
transform: 'translate(-50%, -50%)',
84+
},
85+
amButton: {
86+
zIndex: 1,
87+
left: 8,
88+
position: 'absolute',
89+
bottom: 8,
90+
},
91+
pmButton: {
92+
zIndex: 1,
93+
position: 'absolute',
94+
bottom: 8,
95+
right: 8,
96+
},
97+
meridiemButtonSelected: {
98+
backgroundColor: theme.palette.primary.main,
99+
color: theme.palette.primary.contrastText,
100+
'&:hover': {
101+
backgroundColor: theme.palette.primary.light,
95102
},
96-
} as const);
97-
98-
export type ClockClassKey = keyof WithStyles<typeof styles>['classes'];
103+
},
104+
});
99105

100106
/**
101107
* @ignore - internal component.

‎packages/material-ui-lab/src/ClockPicker/ClockNumber.tsx

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import clsx from 'clsx';
3-
import { WithStyles, withStyles, Theme } from '@material-ui/core/styles';
3+
import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles';
44
import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from '../internal/pickers/constants/dimensions';
55

66
export interface ClockNumberProps {
@@ -12,38 +12,37 @@ export interface ClockNumberProps {
1212
'aria-label': string;
1313
}
1414

15-
export const styles = (theme: Theme) =>
16-
({
17-
root: {
18-
width: CLOCK_HOUR_WIDTH,
19-
height: CLOCK_HOUR_WIDTH,
20-
position: 'absolute',
21-
left: `calc((100% - ${CLOCK_HOUR_WIDTH}px) / 2)`,
22-
display: 'inline-flex',
23-
justifyContent: 'center',
24-
alignItems: 'center',
25-
borderRadius: '50%',
26-
color: theme.palette.text.primary,
27-
'&:focused': {
28-
backgroundColor: theme.palette.background.paper,
29-
},
30-
'&$selected': {
31-
color: theme.palette.primary.contrastText,
32-
},
33-
'&$disabled': {
34-
pointerEvents: 'none',
35-
color: theme.palette.text.disabled,
36-
},
15+
export type ClockNumberClassKey = 'root' | 'selected' | 'disabled' | 'inner';
16+
17+
export const styles: MuiStyles<ClockNumberClassKey> = (theme): StyleRules<ClockNumberClassKey> => ({
18+
root: {
19+
width: CLOCK_HOUR_WIDTH,
20+
height: CLOCK_HOUR_WIDTH,
21+
position: 'absolute',
22+
left: `calc((100% - ${CLOCK_HOUR_WIDTH}px) / 2)`,
23+
display: 'inline-flex',
24+
justifyContent: 'center',
25+
alignItems: 'center',
26+
borderRadius: '50%',
27+
color: theme.palette.text.primary,
28+
'&:focused': {
29+
backgroundColor: theme.palette.background.paper,
3730
},
38-
selected: {},
39-
disabled: {},
40-
inner: {
41-
...theme.typography.body2,
42-
color: theme.palette.text.secondary,
31+
'&$selected': {
32+
color: theme.palette.primary.contrastText,
4333
},
44-
} as const);
45-
46-
export type ClockNumberClassKey = keyof WithStyles<typeof styles>['classes'];
34+
'&$disabled': {
35+
pointerEvents: 'none',
36+
color: theme.palette.text.disabled,
37+
},
38+
},
39+
selected: {},
40+
disabled: {},
41+
inner: {
42+
...theme.typography.body2,
43+
color: theme.palette.text.secondary,
44+
},
45+
});
4746

4847
/**
4948
* @ignore - internal component.

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
3-
import { WithStyles, withStyles } from '@material-ui/core/styles';
3+
import { MuiStyles, WithStyles, withStyles } from '@material-ui/core/styles';
44
import Clock from './Clock';
55
import { pipe } from '../internal/pickers/utils';
66
import { useUtils, useNow, MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
@@ -80,13 +80,13 @@ export interface ClockPickerProps<TDate>
8080
showViewSwitcher?: boolean;
8181
}
8282

83-
export const styles = {
83+
export const styles: MuiStyles<'arrowSwitcher'> = {
8484
arrowSwitcher: {
8585
position: 'absolute',
8686
right: 12,
8787
top: 15,
8888
},
89-
} as const;
89+
};
9090

9191
const getDefaultClockLabelText = <TDate extends any>(
9292
view: 'hours' | 'minutes' | 'seconds',

‎packages/material-ui-lab/src/ClockPicker/ClockPointer.tsx

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,40 @@
11
import * as React from 'react';
22
import clsx from 'clsx';
3-
import { withStyles, Theme, WithStyles } from '@material-ui/core/styles';
3+
import { StyleRules, MuiStyles, withStyles, WithStyles } from '@material-ui/core/styles';
44
import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from '../internal/pickers/constants/dimensions';
55
import { ClockViewType } from '../internal/pickers/constants/ClockType';
66

7-
export const styles = (theme: Theme) =>
8-
({
9-
root: {
10-
width: 2,
11-
backgroundColor: theme.palette.primary.main,
12-
position: 'absolute',
13-
left: 'calc(50% - 1px)',
14-
bottom: '50%',
15-
transformOrigin: 'center bottom 0px',
16-
},
17-
animateTransform: {
18-
transition: theme.transitions.create(['transform', 'height']),
19-
},
20-
thumb: {
21-
width: 4,
22-
height: 4,
23-
backgroundColor: theme.palette.primary.contrastText,
24-
borderRadius: '50%',
25-
position: 'absolute',
26-
top: -21,
27-
left: `calc(50% - ${CLOCK_HOUR_WIDTH / 2}px)`,
28-
border: `${(CLOCK_HOUR_WIDTH - 4) / 2}px solid ${theme.palette.primary.main}`,
29-
boxSizing: 'content-box',
30-
},
31-
noPoint: {
32-
backgroundColor: theme.palette.primary.main,
33-
},
34-
} as const);
7+
export type ClockPointerClassKey = 'root' | 'animateTransform' | 'thumb' | 'noPoint';
358

36-
export type ClockPointerClassKey = keyof WithStyles<typeof styles>['classes'];
9+
export const styles: MuiStyles<ClockPointerClassKey> = (
10+
theme,
11+
): StyleRules<ClockPointerClassKey> => ({
12+
root: {
13+
width: 2,
14+
backgroundColor: theme.palette.primary.main,
15+
position: 'absolute',
16+
left: 'calc(50% - 1px)',
17+
bottom: '50%',
18+
transformOrigin: 'center bottom 0px',
19+
},
20+
animateTransform: {
21+
transition: theme.transitions.create(['transform', 'height']),
22+
},
23+
thumb: {
24+
width: 4,
25+
height: 4,
26+
backgroundColor: theme.palette.primary.contrastText,
27+
borderRadius: '50%',
28+
position: 'absolute',
29+
top: -21,
30+
left: `calc(50% - ${CLOCK_HOUR_WIDTH / 2}px)`,
31+
border: `${(CLOCK_HOUR_WIDTH - 4) / 2}px solid ${theme.palette.primary.main}`,
32+
boxSizing: 'content-box',
33+
},
34+
noPoint: {
35+
backgroundColor: theme.palette.primary.main,
36+
},
37+
});
3738

3839
export interface ClockPointerProps
3940
extends React.HTMLProps<HTMLDivElement>,

‎packages/material-ui-lab/src/DatePicker/DatePickerToolbar.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import * as React from 'react';
22
import clsx from 'clsx';
33
import Typography from '@material-ui/core/Typography';
4-
import { WithStyles, withStyles } from '@material-ui/core/styles';
4+
import { MuiStyles, WithStyles, withStyles } from '@material-ui/core/styles';
55
import PickersToolbar from '../internal/pickers/PickersToolbar';
66
import { useUtils } from '../internal/pickers/hooks/useUtils';
77
import { isYearAndMonthViews, isYearOnlyView } from '../internal/pickers/date-utils';
88
import { DatePickerView } from '../internal/pickers/typings/Views';
99
import { ToolbarComponentProps } from '../internal/pickers/typings/BasePicker';
1010

11-
export const styles = {
11+
export type DatePickerToolbarClassKey = 'root' | 'dateTitleLandscape' | 'penIcon';
12+
13+
export const styles: MuiStyles<DatePickerToolbarClassKey> = {
1214
root: {},
1315
dateTitleLandscape: {
1416
margin: 'auto 16px auto auto',
@@ -17,8 +19,7 @@ export const styles = {
1719
position: 'relative',
1820
top: 4,
1921
},
20-
} as const;
21-
export type DatePickerToolbarClassKey = keyof WithStyles<typeof styles>['classes'];
22+
};
2223

2324
/**
2425
* @ignore - internal component.

0 commit comments

Comments
 (0)