Skip to content

Commit d93ed65

Browse files
fabiovincenzifabiovincenzi
committed
refactor(tsx): convert Card components
1 parent 8f9c599 commit d93ed65

File tree

10 files changed

+263
-212
lines changed

10 files changed

+263
-212
lines changed

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
const cardBodyStyle = {
1+
import { createStyles } from '@material-ui/core/styles';
2+
3+
const cardBodyStyle = createStyles({
24
cardBody: {
35
padding: '0.9375rem 20px',
46
flex: '1 1 auto',
5-
WebkitBoxFlex: '1',
6-
position: 'relative',
7+
WebkitBoxFlex: 1,
8+
position: 'relative' as const,
79
},
810
cardBodyPlain: {
911
paddingLeft: '5px',
@@ -12,6 +14,6 @@ const cardBodyStyle = {
1214
cardBodyProfile: {
1315
marginTop: '15px',
1416
},
15-
};
17+
});
1618

1719
export default cardBodyStyle;

‎src/ui/assets/jss/material-dashboard-react/components/cardHeaderStyle.js

Lines changed: 0 additions & 127 deletions
This file was deleted.

‎src/ui/assets/jss/material-dashboard-react/components/cardHeaderStyle.ts

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import { createStyles, Theme } from '@material-ui/core/styles';
2+
import {
3+
warningCardHeader,
4+
successCardHeader,
5+
dangerCardHeader,
6+
infoCardHeader,
7+
primaryCardHeader,
8+
roseCardHeader,
9+
whiteColor,
10+
} from '../../material-dashboard-react';
11+
12+
const cardHeaderStyle = (theme: Theme) =>
13+
createStyles({
14+
cardHeader: {
15+
padding: '0.75rem 1.25rem',
16+
marginBottom: '0',
17+
borderBottom: 'none',
18+
background: 'transparent',
19+
zIndex: '3 !important' as any,
20+
'&$cardHeaderPlain,&$cardHeaderIcon,&$cardHeaderStats,&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader':
21+
{
22+
margin: '0 15px',
23+
padding: '0',
24+
position: 'relative',
25+
color: whiteColor,
26+
},
27+
'&:first-child': {
28+
borderRadius: 'calc(.25rem - 1px) calc(.25rem - 1px) 0 0',
29+
},
30+
'&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader':
31+
{
32+
'&:not($cardHeaderIcon)': {
33+
borderRadius: '3px',
34+
marginTop: '-20px',
35+
padding: '15px',
36+
},
37+
},
38+
'&$cardHeaderStats svg': {
39+
fontSize: '36px',
40+
lineHeight: '56px',
41+
textAlign: 'center',
42+
width: '36px',
43+
height: '36px',
44+
margin: '10px 10px 4px',
45+
},
46+
'&$cardHeaderStats i,&$cardHeaderStats .material-icons': {
47+
fontSize: '36px',
48+
lineHeight: '56px',
49+
width: '56px',
50+
height: '56px',
51+
textAlign: 'center',
52+
overflow: 'unset',
53+
marginBottom: '1px',
54+
},
55+
'&$cardHeaderStats$cardHeaderIcon': {
56+
textAlign: 'right',
57+
},
58+
},
59+
cardHeaderPlain: {
60+
marginLeft: '0px !important',
61+
marginRight: '0px !important',
62+
},
63+
cardHeaderStats: {
64+
'& $cardHeaderIcon': {
65+
textAlign: 'right',
66+
},
67+
'& h1,& h2,& h3,& h4,& h5,& h6': {
68+
margin: '0 !important',
69+
},
70+
},
71+
cardHeaderIcon: {
72+
'&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader':
73+
{
74+
background: 'transparent',
75+
boxShadow: 'none',
76+
},
77+
'& i,& .material-icons': {
78+
width: '33px',
79+
height: '33px',
80+
textAlign: 'center',
81+
lineHeight: '33px',
82+
},
83+
'& svg': {
84+
width: '24px',
85+
height: '24px',
86+
textAlign: 'center',
87+
lineHeight: '33px',
88+
margin: '5px 4px 0px',
89+
},
90+
},
91+
warningCardHeader: {
92+
color: whiteColor,
93+
'&:not($cardHeaderIcon)': {
94+
...warningCardHeader,
95+
},
96+
},
97+
successCardHeader: {
98+
color: whiteColor,
99+
'&:not($cardHeaderIcon)': {
100+
...successCardHeader,
101+
},
102+
},
103+
dangerCardHeader: {
104+
color: whiteColor,
105+
'&:not($cardHeaderIcon)': {
106+
...dangerCardHeader,
107+
},
108+
},
109+
infoCardHeader: {
110+
color: whiteColor,
111+
'&:not($cardHeaderIcon)': {
112+
...infoCardHeader,
113+
},
114+
},
115+
primaryCardHeader: {
116+
color: whiteColor,
117+
'&:not($cardHeaderIcon)': {
118+
...primaryCardHeader,
119+
},
120+
},
121+
roseCardHeader: {
122+
color: whiteColor,
123+
'&:not($cardHeaderIcon)': {
124+
...roseCardHeader,
125+
},
126+
},
127+
});
128+
129+
export default cardHeaderStyle;

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

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
1-
import { blackColor, whiteColor, hexToRgb } from '../../material-dashboard-react.js';
1+
import { createStyles } from '@material-ui/core/styles';
2+
import { blackColor, whiteColor, hexToRgb } from '../../material-dashboard-react';
23

3-
const cardStyle = {
4+
const cardStyle = createStyles({
45
card: {
56
border: '0',
67
marginBottom: '30px',
78
marginTop: '30px',
89
borderRadius: '6px',
9-
color: 'rgba(' + hexToRgb(blackColor) + ', 0.87)',
10+
color: `rgba(${hexToRgb(blackColor)}, 0.87)`,
1011
background: whiteColor,
1112
width: '100%',
12-
boxShadow: '0 1px 4px 0 rgba(' + hexToRgb(blackColor) + ', 0.14)',
13-
position: 'relative',
14-
display: 'flex',
15-
flexDirection: 'column',
13+
boxShadow: `0 1px 4px 0 rgba(${hexToRgb(blackColor)}, 0.14)`,
14+
position: 'relative' as const,
15+
display: 'flex' as const,
16+
flexDirection: 'column' as const,
1617
minWidth: '0',
17-
wordWrap: 'break-word',
18+
wordWrap: 'break-word' as const,
1819
fontSize: '.875rem',
1920
},
2021
cardPlain: {
@@ -23,14 +24,14 @@ const cardStyle = {
2324
},
2425
cardProfile: {
2526
marginTop: '30px',
26-
textAlign: 'center',
27+
textAlign: 'center' as const,
2728
},
2829
cardChart: {
2930
'& p': {
3031
marginTop: '0px',
3132
paddingTop: '0px',
3233
},
3334
},
34-
};
35+
});
3536

36-
export default cardStyle;
37+
export default cardStyle;

‎src/ui/components/Card/Card.jsx renamed to ‎src/ui/components/Card/Card.tsx

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,41 @@
11
import React from 'react';
22
import classNames from 'classnames';
3-
import PropTypes from 'prop-types';
43
import { makeStyles } from '@material-ui/core/styles';
54
import styles from '../../assets/jss/material-dashboard-react/components/cardStyle';
65

76
const useStyles = makeStyles(styles);
87

9-
export default function Card(props) {
8+
interface CardProps extends React.ComponentProps<'div'> {
9+
className?: string;
10+
plain?: boolean;
11+
profile?: boolean;
12+
chart?: boolean;
13+
children?: React.ReactNode;
14+
}
15+
16+
const Card: React.FC<CardProps> = ({
17+
className = '',
18+
children,
19+
plain = false,
20+
profile = false,
21+
chart = false,
22+
...rest
23+
}) => {
1024
const classes = useStyles();
11-
const { className, children, plain, profile, chart, ...rest } = props;
25+
1226
const cardClasses = classNames({
1327
[classes.card]: true,
1428
[classes.cardPlain]: plain,
1529
[classes.cardProfile]: profile,
1630
[classes.cardChart]: chart,
17-
[className]: className !== undefined,
31+
[className]: className,
1832
});
33+
1934
return (
2035
<div className={cardClasses} {...rest}>
2136
{children}
2237
</div>
2338
);
24-
}
25-
26-
Card.propTypes = {
27-
className: PropTypes.string,
28-
plain: PropTypes.bool,
29-
profile: PropTypes.bool,
30-
chart: PropTypes.bool,
31-
children: PropTypes.node,
3239
};
40+
41+
export default Card;

0 commit comments

Comments
 (0)