-
-
Notifications
You must be signed in to change notification settings - Fork 32.1k
/
CardHeader.js
149 lines (141 loc) · 3.65 KB
/
CardHeader.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { componentPropType } from '@material-ui/utils';
import withStyles from '../styles/withStyles';
import Typography from '../Typography';
export const styles = {
/* Styles applied to the root element. */
root: {
display: 'flex',
alignItems: 'center',
padding: 16,
},
/* Styles applied to the avatar element. */
avatar: {
flex: '0 0 auto',
marginRight: 16,
},
/* Styles applied to the action element. */
action: {
flex: '0 0 auto',
alignSelf: 'flex-start',
marginTop: -8,
marginRight: -8,
},
/* Styles applied to the content wrapper element. */
content: {
flex: '1 1 auto',
},
/* Styles applied to the title Typography element. */
title: {},
/* Styles applied to the subheader Typography element. */
subheader: {},
};
function CardHeader(props) {
const {
action,
avatar,
classes,
className: classNameProp,
component: Component,
disableTypography,
subheader: subheaderProp,
subheaderTypographyProps,
title: titleProp,
titleTypographyProps,
...other
} = props;
let title = titleProp;
if (title != null && title.type !== Typography && !disableTypography) {
title = (
<Typography
variant={avatar ? 'body2' : 'headline'}
internalDeprecatedVariant
className={classes.title}
component="span"
{...titleTypographyProps}
>
{title}
</Typography>
);
}
let subheader = subheaderProp;
if (subheader != null && subheader.type !== Typography && !disableTypography) {
subheader = (
<Typography
variant={avatar ? 'body2' : 'body1'}
className={classes.subheader}
color="textSecondary"
component="span"
{...subheaderTypographyProps}
>
{subheader}
</Typography>
);
}
return (
<Component className={classNames(classes.root, classNameProp)} {...other}>
{avatar && <div className={classes.avatar}>{avatar}</div>}
<div className={classes.content}>
{title}
{subheader}
</div>
{action && <div className={classes.action}>{action}</div>}
</Component>
);
}
CardHeader.propTypes = {
/**
* The action to display in the card header.
*/
action: PropTypes.node,
/**
* The Avatar for the Card Header.
*/
avatar: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css-api) below for more details.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: componentPropType,
/**
* If `true`, the children won't be wrapped by a Typography component.
* This can be useful to render an alternative Typography variant by wrapping
* the `title` text, and optional `subheader` text
* with the Typography component.
*/
disableTypography: PropTypes.bool,
/**
* The content of the component.
*/
subheader: PropTypes.node,
/**
* These props will be forwarded to the subheader
* (as long as disableTypography is not `true`).
*/
subheaderTypographyProps: PropTypes.object,
/**
* The content of the Card Title.
*/
title: PropTypes.node,
/**
* These props will be forwarded to the title
* (as long as disableTypography is not `true`).
*/
titleTypographyProps: PropTypes.object,
};
CardHeader.defaultProps = {
component: 'div',
disableTypography: false,
};
export default withStyles(styles, { name: 'MuiCardHeader' })(CardHeader);