Skip to content

Commit 34d4b19

Browse files
fabiovincenzifabiovincenzi
committed
refactor(tsx): convert Buttons components
1 parent 0882f1b commit 34d4b19

File tree

3 files changed

+109
-158
lines changed

3 files changed

+109
-158
lines changed

‎src/ui/assets/jss/material-dashboard-react/components/buttonStyle.js renamed to ‎src/ui/assets/jss/material-dashboard-react/components/buttonStyle.ts

Lines changed: 63 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { createStyles, Theme } from '@material-ui/core/styles';
12
import {
23
grayColor,
34
primaryColor,
@@ -9,76 +10,67 @@ import {
910
whiteColor,
1011
blackColor,
1112
hexToRgb,
12-
} from '../../material-dashboard-react.js';
13+
} from '../../material-dashboard-react';
1314

14-
const buttonStyle = {
15+
const buttonStyle = (theme: Theme) => createStyles({
1516
button: {
1617
minHeight: 'auto',
1718
minWidth: 'auto',
1819
backgroundColor: grayColor[0],
1920
color: whiteColor,
2021
boxShadow:
21-
'0 2px 2px 0 rgba(' +
22-
hexToRgb(grayColor[0]) +
23-
', 0.14), 0 3px 1px -2px rgba(' +
24-
hexToRgb(grayColor[0]) +
25-
', 0.2), 0 1px 5px 0 rgba(' +
26-
hexToRgb(grayColor[0]) +
27-
', 0.12)',
22+
`0 2px 2px 0 rgba(${hexToRgb(grayColor[0])}, 0.14),
23+
0 3px 1px -2px rgba(${hexToRgb(grayColor[0])}, 0.2),
24+
0 1px 5px 0 rgba(${hexToRgb(grayColor[0])}, 0.12)`,
2825
border: 'none',
2926
borderRadius: '3px',
30-
position: 'relative',
27+
position: 'relative' as const,
3128
padding: '12px 30px',
3229
margin: '.3125rem 1px',
3330
fontSize: '12px',
34-
fontWeight: '400',
35-
textTransform: 'uppercase',
31+
fontWeight: 400 as const,
32+
textTransform: 'uppercase' as const,
3633
letterSpacing: '0',
3734
willChange: 'box-shadow, transform',
3835
transition:
39-
// eslint-disable-next-line max-len
4036
'box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
4137
lineHeight: '1.42857143',
42-
textAlign: 'center',
43-
whiteSpace: 'nowrap',
44-
verticalAlign: 'middle',
45-
touchAction: 'manipulation',
46-
cursor: 'pointer',
38+
textAlign: 'center' as const,
39+
whiteSpace: 'nowrap' as const,
40+
verticalAlign: 'middle' as const,
41+
touchAction: 'manipulation' as const,
42+
cursor: 'pointer' as const,
4743
'&:hover,&:focus': {
4844
color: whiteColor,
4945
backgroundColor: grayColor[0],
5046
boxShadow:
51-
'0 14px 26px -12px rgba(' +
52-
hexToRgb(grayColor[0]) +
53-
', 0.42), 0 4px 23px 0px rgba(' +
54-
hexToRgb(blackColor) +
55-
', 0.12), 0 8px 10px -5px rgba(' +
56-
hexToRgb(grayColor[0]) +
57-
', 0.2)',
47+
`0 14px 26px -12px rgba(${hexToRgb(grayColor[0])}, 0.42),
48+
0 4px 23px 0px rgba(${hexToRgb(blackColor)}, 0.12),
49+
0 8px 10px -5px rgba(${hexToRgb(grayColor[0])}, 0.2)`,
5850
},
5951
'& .fab,& .fas,& .far,& .fal, &.material-icons': {
60-
position: 'relative',
61-
display: 'inline-block',
52+
position: 'relative' as const,
53+
display: 'inline-block' as const,
6254
top: '0',
6355
marginTop: '-1em',
6456
marginBottom: '-1em',
6557
fontSize: '1.1rem',
6658
marginRight: '4px',
67-
verticalAlign: 'middle',
59+
verticalAlign: 'middle' as const,
6860
},
6961
'& svg': {
70-
position: 'relative',
71-
display: 'inline-block',
62+
position: 'relative' as const,
63+
display: 'inline-block' as const,
7264
top: '0',
7365
width: '18px',
7466
height: '18px',
7567
marginRight: '4px',
76-
verticalAlign: 'middle',
68+
verticalAlign: 'middle' as const,
7769
},
7870
'&$justIcon': {
7971
'& .fab,& .fas,& .far,& .fal,& .material-icons': {
8072
marginTop: '0px',
81-
position: 'absolute',
73+
position: 'absolute' as const,
8274
width: '100%',
8375
transform: 'none',
8476
left: '0px',
@@ -98,133 +90,85 @@ const buttonStyle = {
9890
rose: {
9991
backgroundColor: roseColor[0],
10092
boxShadow:
101-
'0 2px 2px 0 rgba(' +
102-
hexToRgb(roseColor[0]) +
103-
', 0.14), 0 3px 1px -2px rgba(' +
104-
hexToRgb(roseColor[0]) +
105-
', 0.2), 0 1px 5px 0 rgba(' +
106-
hexToRgb(roseColor[0]) +
107-
', 0.12)',
93+
`0 2px 2px 0 rgba(${hexToRgb(roseColor[0])}, 0.14),
94+
0 3px 1px -2px rgba(${hexToRgb(roseColor[0])}, 0.2),
95+
0 1px 5px 0 rgba(${hexToRgb(roseColor[0])}, 0.12)`,
10896
'&:hover,&:focus': {
10997
backgroundColor: roseColor[0],
11098
boxShadow:
111-
'0 14px 26px -12px rgba(' +
112-
hexToRgb(roseColor[0]) +
113-
', 0.42), 0 4px 23px 0px rgba(' +
114-
hexToRgb(blackColor) +
115-
', 0.12), 0 8px 10px -5px rgba(' +
116-
hexToRgb(roseColor[0]) +
117-
', 0.2)',
99+
`0 14px 26px -12px rgba(${hexToRgb(roseColor[0])}, 0.42),
100+
0 4px 23px 0px rgba(${hexToRgb(blackColor)}, 0.12),
101+
0 8px 10px -5px rgba(${hexToRgb(roseColor[0])}, 0.2)`,
118102
},
119103
},
120104
primary: {
121105
backgroundColor: primaryColor[0],
122106
boxShadow:
123-
'0 2px 2px 0 rgba(' +
124-
hexToRgb(primaryColor[0]) +
125-
', 0.14), 0 3px 1px -2px rgba(' +
126-
hexToRgb(primaryColor[0]) +
127-
', 0.2), 0 1px 5px 0 rgba(' +
128-
hexToRgb(primaryColor[0]) +
129-
', 0.12)',
107+
`0 2px 2px 0 rgba(${hexToRgb(primaryColor[0])}, 0.14),
108+
0 3px 1px -2px rgba(${hexToRgb(primaryColor[0])}, 0.2),
109+
0 1px 5px 0 rgba(${hexToRgb(primaryColor[0])}, 0.12)`,
130110
'&:hover,&:focus': {
131111
backgroundColor: primaryColor[0],
132112
boxShadow:
133-
'0 14px 26px -12px rgba(' +
134-
hexToRgb(primaryColor[0]) +
135-
', 0.42), 0 4px 23px 0px rgba(' +
136-
hexToRgb(blackColor) +
137-
', 0.12), 0 8px 10px -5px rgba(' +
138-
hexToRgb(primaryColor[0]) +
139-
', 0.2)',
113+
`0 14px 26px -12px rgba(${hexToRgb(primaryColor[0])}, 0.42),
114+
0 4px 23px 0px rgba(${hexToRgb(blackColor)}, 0.12),
115+
0 8px 10px -5px rgba(${hexToRgb(primaryColor[0])}, 0.2)`,
140116
},
141117
},
142118
info: {
143119
backgroundColor: infoColor[0],
144120
boxShadow:
145-
'0 2px 2px 0 rgba(' +
146-
hexToRgb(infoColor[0]) +
147-
', 0.14), 0 3px 1px -2px rgba(' +
148-
hexToRgb(infoColor[0]) +
149-
', 0.2), 0 1px 5px 0 rgba(' +
150-
hexToRgb(infoColor[0]) +
151-
', 0.12)',
121+
`0 2px 2px 0 rgba(${hexToRgb(infoColor[0])}, 0.14),
122+
0 3px 1px -2px rgba(${hexToRgb(infoColor[0])}, 0.2),
123+
0 1px 5px 0 rgba(${hexToRgb(infoColor[0])}, 0.12)`,
152124
'&:hover,&:focus': {
153125
backgroundColor: infoColor[0],
154126
boxShadow:
155-
'0 14px 26px -12px rgba(' +
156-
hexToRgb(infoColor[0]) +
157-
', 0.42), 0 4px 23px 0px rgba(' +
158-
hexToRgb(blackColor) +
159-
', 0.12), 0 8px 10px -5px rgba(' +
160-
hexToRgb(infoColor[0]) +
161-
', 0.2)',
127+
`0 14px 26px -12px rgba(${hexToRgb(infoColor[0])}, 0.42),
128+
0 4px 23px 0px rgba(${hexToRgb(blackColor)}, 0.12),
129+
0 8px 10px -5px rgba(${hexToRgb(infoColor[0])}, 0.2)`,
162130
},
163131
},
164132
success: {
165133
backgroundColor: successColor[0],
166134
boxShadow:
167-
'0 2px 2px 0 rgba(' +
168-
hexToRgb(successColor[0]) +
169-
', 0.14), 0 3px 1px -2px rgba(' +
170-
hexToRgb(successColor[0]) +
171-
', 0.2), 0 1px 5px 0 rgba(' +
172-
hexToRgb(successColor[0]) +
173-
', 0.12)',
135+
`0 2px 2px 0 rgba(${hexToRgb(successColor[0])}, 0.14),
136+
0 3px 1px -2px rgba(${hexToRgb(successColor[0])}, 0.2),
137+
0 1px 5px 0 rgba(${hexToRgb(successColor[0])}, 0.12)`,
174138
'&:hover,&:focus': {
175139
backgroundColor: successColor[0],
176140
boxShadow:
177-
'0 14px 26px -12px rgba(' +
178-
hexToRgb(successColor[0]) +
179-
', 0.42), 0 4px 23px 0px rgba(' +
180-
hexToRgb(blackColor) +
181-
', 0.12), 0 8px 10px -5px rgba(' +
182-
hexToRgb(successColor[0]) +
183-
', 0.2)',
141+
`0 14px 26px -12px rgba(${hexToRgb(successColor[0])}, 0.42),
142+
0 4px 23px 0px rgba(${hexToRgb(blackColor)}, 0.12),
143+
0 8px 10px -5px rgba(${hexToRgb(successColor[0])}, 0.2)`,
184144
},
185145
},
186146
warning: {
187147
backgroundColor: warningColor[0],
188148
boxShadow:
189-
'0 2px 2px 0 rgba(' +
190-
hexToRgb(warningColor[0]) +
191-
', 0.14), 0 3px 1px -2px rgba(' +
192-
hexToRgb(warningColor[0]) +
193-
', 0.2), 0 1px 5px 0 rgba(' +
194-
hexToRgb(warningColor[0]) +
195-
', 0.12)',
149+
`0 2px 2px 0 rgba(${hexToRgb(warningColor[0])}, 0.14),
150+
0 3px 1px -2px rgba(${hexToRgb(warningColor[0])}, 0.2),
151+
0 1px 5px 0 rgba(${hexToRgb(warningColor[0])}, 0.12)`,
196152
'&:hover,&:focus': {
197153
backgroundColor: warningColor[0],
198154
boxShadow:
199-
'0 14px 26px -12px rgba(' +
200-
hexToRgb(warningColor[0]) +
201-
', 0.42), 0 4px 23px 0px rgba(' +
202-
hexToRgb(blackColor) +
203-
', 0.12), 0 8px 10px -5px rgba(' +
204-
hexToRgb(warningColor[0]) +
205-
', 0.2)',
155+
`0 14px 26px -12px rgba(${hexToRgb(warningColor[0])}, 0.42),
156+
0 4px 23px 0px rgba(${hexToRgb(blackColor)}, 0.12),
157+
0 8px 10px -5px rgba(${hexToRgb(warningColor[0])}, 0.2)`,
206158
},
207159
},
208160
danger: {
209161
backgroundColor: dangerColor[0],
210162
boxShadow:
211-
'0 2px 2px 0 rgba(' +
212-
hexToRgb(dangerColor[0]) +
213-
', 0.14), 0 3px 1px -2px rgba(' +
214-
hexToRgb(dangerColor[0]) +
215-
', 0.2), 0 1px 5px 0 rgba(' +
216-
hexToRgb(dangerColor[0]) +
217-
', 0.12)',
163+
`0 2px 2px 0 rgba(${hexToRgb(dangerColor[0])}, 0.14),
164+
0 3px 1px -2px rgba(${hexToRgb(dangerColor[0])}, 0.2),
165+
0 1px 5px 0 rgba(${hexToRgb(dangerColor[0])}, 0.12)`,
218166
'&:hover,&:focus': {
219167
backgroundColor: dangerColor[0],
220168
boxShadow:
221-
'0 14px 26px -12px rgba(' +
222-
hexToRgb(dangerColor[0]) +
223-
', 0.42), 0 4px 23px 0px rgba(' +
224-
hexToRgb(blackColor) +
225-
', 0.12), 0 8px 10px -5px rgba(' +
226-
hexToRgb(dangerColor[0]) +
227-
', 0.2)',
169+
`0 14px 26px -12px rgba(${hexToRgb(dangerColor[0])}, 0.42),
170+
0 4px 23px 0px rgba(${hexToRgb(blackColor)}, 0.12),
171+
0 8px 10px -5px rgba(${hexToRgb(dangerColor[0])}, 0.2)`,
228172
},
229173
},
230174
simple: {
@@ -273,7 +217,7 @@ const buttonStyle = {
273217
},
274218
disabled: {
275219
opacity: '0.65',
276-
pointerEvents: 'none',
220+
pointerEvents: 'none' as const,
277221
},
278222
lg: {
279223
padding: '1.125rem 2.25rem',
@@ -338,6 +282,6 @@ const buttonStyle = {
338282
},
339283
},
340284
},
341-
};
285+
});
342286

343-
export default buttonStyle;
287+
export default buttonStyle;

‎src/ui/components/CustomButtons/Button.jsx renamed to ‎src/ui/components/CustomButtons/Button.tsx

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,69 @@
11
import React from 'react';
22
import classNames from 'classnames';
3-
import PropTypes from 'prop-types';
43
import { makeStyles } from '@material-ui/core/styles';
5-
import Button from '@material-ui/core/Button';
4+
import Button, { ButtonProps } from '@material-ui/core/Button';
65
import styles from '../../assets/jss/material-dashboard-react/components/buttonStyle';
76

87
const useStyles = makeStyles(styles);
98

10-
export default function RegularButton(props) {
9+
type Color =
10+
| 'primary'
11+
| 'info'
12+
| 'success'
13+
| 'warning'
14+
| 'danger'
15+
| 'rose'
16+
| 'white'
17+
| 'transparent';
18+
type Size = 'sm' | 'lg';
19+
20+
interface RegularButtonProps extends ButtonProps {
21+
customColor?: Color;
22+
round?: boolean;
23+
disabled?: boolean;
24+
simple?: boolean;
25+
customSize?: Size;
26+
block?: boolean;
27+
link?: boolean;
28+
justIcon?: boolean;
29+
className?: string;
30+
muiClasses?: Record<string, string>;
31+
children?: React.ReactNode;
32+
}
33+
34+
export default function RegularButton(props: RegularButtonProps) {
1135
const classes = useStyles();
1236
const {
13-
color,
37+
customColor: color,
1438
round,
1539
children,
1640
disabled,
1741
simple,
18-
size,
42+
customSize: size,
1943
block,
2044
link,
2145
justIcon,
2246
className,
2347
muiClasses,
2448
...rest
2549
} = props;
50+
2651
const btnClasses = classNames({
2752
[classes.button]: true,
28-
[classes[size]]: size,
29-
[classes[color]]: color,
53+
[size ? classes[size] : '']: size,
54+
[color ? classes[color] : '']: color,
3055
[classes.round]: round,
3156
[classes.disabled]: disabled,
3257
[classes.simple]: simple,
3358
[classes.block]: block,
3459
[classes.link]: link,
3560
[classes.justIcon]: justIcon,
36-
[className]: className,
61+
[className || '']: className,
3762
});
63+
3864
return (
3965
<Button {...rest} classes={muiClasses} className={btnClasses}>
4066
{children}
4167
</Button>
4268
);
4369
}
44-
45-
RegularButton.propTypes = {
46-
color: PropTypes.oneOf([
47-
'primary',
48-
'info',
49-
'success',
50-
'warning',
51-
'danger',
52-
'rose',
53-
'white',
54-
'transparent',
55-
]),
56-
size: PropTypes.oneOf(['sm', 'lg']),
57-
simple: PropTypes.bool,
58-
round: PropTypes.bool,
59-
disabled: PropTypes.bool,
60-
block: PropTypes.bool,
61-
link: PropTypes.bool,
62-
justIcon: PropTypes.bool,
63-
className: PropTypes.string,
64-
// use this to pass the classes props from Material-UI
65-
muiClasses: PropTypes.object,
66-
children: PropTypes.node,
67-
};

0 commit comments

Comments
 (0)