Skip to content

Commit df48629

Browse files
chrismcvchrismcv
committed
create PR for card component
1 parent cb70f0d commit df48629

File tree

12 files changed

+410
-0
lines changed

12 files changed

+410
-0
lines changed

‎docs/src/app/app-routes.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ var Components = require('./components/pages/components.jsx');
1919
var AppBar = require('./components/pages/components/app-bar.jsx');
2020
var Avatars = require('./components/pages/components/avatars.jsx');
2121
var Buttons = require('./components/pages/components/buttons.jsx');
22+
var Cards = require('./components/pages/components/cards.jsx');
2223
var DatePicker = require('./components/pages/components/date-picker.jsx');
2324
var Dialog = require('./components/pages/components/dialog.jsx');
2425
var DropDownMenu = require('./components/pages/components/drop-down-menu.jsx');
@@ -62,6 +63,7 @@ var AppRoutes = (
6263
<Route name="appbar" handler={AppBar} />
6364
<Route name="avatars" handler={Avatars} />
6465
<Route name="buttons" handler={Buttons} />
66+
<Route name="cards" handler={Cards} />
6567
<Route name="date-picker" handler={DatePicker} />
6668
<Route name="dialog" handler={Dialog} />
6769
<Route name="dropdown-menu" handler={DropDownMenu} />

‎docs/src/app/components/pages/components.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ class Components extends React.Component {
88
{ route: 'appbar', text: 'AppBar'},
99
{ route: 'avatars', text: 'Avatars'},
1010
{ route: 'buttons', text: 'Buttons'},
11+
{ route: 'cards', text: 'Cards'},
1112
{ route: 'date-picker', text: 'Date Picker'},
1213
{ route: 'dialog', text: 'Dialog'},
1314
{ route: 'dropdown-menu', text: 'Dropdown Menu'},

‎docs/src/app/components/pages/components/cards.jsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
var React = require('react');
2+
var mui = require('mui');
3+
var ComponentDoc = require('../../component-doc.jsx');
4+
var {Card, CardMedia, CardTitle, CardActions, CardText, CardHeader, FlatButton, Avatar} = mui;
5+
6+
class CardPage extends React.Component {
7+
8+
constructor(props) {
9+
super(props);
10+
11+
this.code = `
12+
<Card>
13+
<CardHeader
14+
title="Title"
15+
subtitle="Subtitle"
16+
avatar={<Avatar>A</Avatar>}/>
17+
<CardHeader
18+
title="Demo Url Based Avatar"
19+
subtitle="Subtitle"
20+
avatar="http://lorempixel.com/100/100/nature/"/>
21+
<CardMedia overlay={<CardTitle title="Title" subtitle="Subtitle"/>}>
22+
<img src="http://lorempixel.com/600/337/nature/"/>
23+
</CardMedia>
24+
<CardTitle title="Title" subtitle="Subtitle"/>
25+
<CardActions>
26+
<FlatButton label="Action1"/>
27+
<FlatButton label="Action2"/>
28+
</CardActions>
29+
<CardText>
30+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
31+
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
32+
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
33+
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
34+
</CardText>
35+
</Card>`;
36+
37+
this.desc =
38+
'A card is a piece of paper with unique related data that serves as an '+
39+
'entry point to more detailed information. For example, a card could '+
40+
'contain a photo, text, and a link about a single subject.'+
41+
'\n\n'+
42+
'Cards have a constant width and variable height. The maximum height is '+
43+
'limited to the height of the available space on a platform, '+
44+
'but it can temporarily expand (for example, to display a comment field). '+
45+
'Cards do not flip over to reveal information on the back.';
46+
47+
48+
this.componentInfo = [];
49+
}
50+
51+
render() {
52+
return (
53+
<ComponentDoc
54+
name="Card"
55+
code={this.code}
56+
desc={this.desc}
57+
componentInfo={this.componentInfo}>
58+
<Card>
59+
<CardHeader
60+
title="Title"
61+
subtitle="Subtitle"
62+
avatar={<Avatar style={{color:'red'}}>A</Avatar>}/>
63+
<CardHeader
64+
title="Demo Url Based Avatar"
65+
subtitle="Subtitle"
66+
avatar="http://lorempixel.com/100/100/nature/"/>
67+
<CardMedia overlay={<CardTitle title="Title" subtitle="Subtitle"/>}>
68+
<img src="http://lorempixel.com/600/337/nature/"/>
69+
</CardMedia>
70+
<CardTitle title="Title" subtitle="Subtitle"/>
71+
<CardActions>
72+
<FlatButton label="Action1"/>
73+
<FlatButton label="Action2"/>
74+
</CardActions>
75+
<CardText>
76+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
77+
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
78+
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
79+
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
80+
</CardText>
81+
</Card>
82+
</ComponentDoc>
83+
);
84+
}
85+
86+
}
87+
88+
module.exports = CardPage;

‎src/avatar.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ var SvgIcon = React.createClass({
4545
borderRadius: '50%',
4646
border: src ? 'solid 1px' : 'none',
4747
borderColor: this.context.muiTheme.palette.borderColor,
48+
display:'inline-block',
4849

4950
//Needed for letter avatars
5051
textAlign: 'center',

‎src/card/card-actions.jsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var React = require('react');
2+
var Styles = require('../styles');
3+
4+
var CardActions = React.createClass({
5+
getStyles: function () {
6+
return {
7+
root: {
8+
padding: 8
9+
}
10+
}
11+
},
12+
render: function () {
13+
var styles = this.getStyles();
14+
15+
var children = React.Children.map(this.props.children, function (child) {
16+
return React.cloneElement(child, {
17+
style: {marginRight: 8}
18+
});
19+
});
20+
21+
return (
22+
<div style={styles.root}>
23+
{children}
24+
</div>
25+
);
26+
}
27+
});
28+
29+
module.exports = CardActions;

‎src/card/card-header.jsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
var React = require('react');
2+
var Styles = require('../styles');
3+
var Avatar = require('../avatar');
4+
var StylePropable = require('../mixins/style-propable');
5+
6+
var CardHeader = React.createClass({
7+
8+
mixins: [StylePropable],
9+
10+
propTypes: {
11+
avatar: React.PropTypes.any,
12+
title: React.PropTypes.string,
13+
titleColor: React.PropTypes.string,
14+
subtitle: React.PropTypes.string,
15+
subtitleColor: React.PropTypes.string
16+
},
17+
18+
getDefaultProps: function () {
19+
return {
20+
titleColor: Styles.Colors.darkBlack,
21+
subtitleColor: Styles.Colors.lightBlack
22+
};
23+
},
24+
25+
getStyles: function () {
26+
return {
27+
root: {
28+
height: 72,
29+
padding: 16,
30+
fontWeight: Styles.Typography.fontWeightMedium,
31+
boxSizing: 'border-box'
32+
},
33+
text: {
34+
display: 'inline-block',
35+
verticalAlign: 'top'
36+
},
37+
avatar: {
38+
marginRight:16
39+
},
40+
title: {
41+
color: this.props.titleColor,
42+
display: 'block',
43+
fontSize: 15
44+
},
45+
subtitle: {
46+
color: this.props.subtitleColor,
47+
display: 'block',
48+
fontSize: 14
49+
}
50+
}
51+
},
52+
53+
render: function () {
54+
var styles = this.getStyles();
55+
var avatar = this.props.avatar;
56+
if (React.isValidElement(this.props.avatar)) {
57+
var avatarMergedStyle = this.mergeStyles(styles.avatar, avatar.props.style);
58+
avatar = React.cloneElement(avatar, {style:avatarMergedStyle})
59+
}
60+
else
61+
avatar = <Avatar src={this.props.avatar} style={styles.avatar}/>
62+
63+
64+
65+
return (
66+
<div style={styles.root}>
67+
{avatar}
68+
<div style={styles.text}>
69+
<span style={styles.title}>{this.props.title}</span>
70+
<span style={styles.subtitle}>{this.props.subtitle}</span>
71+
</div>
72+
</div>
73+
);
74+
}
75+
});
76+
77+
module.exports = CardHeader;

‎src/card/card-media.jsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
var React = require('react');
2+
var Styles = require('../styles');
3+
4+
var CardMedia = React.createClass({
5+
propTypes: {
6+
overlay: React.PropTypes.node
7+
},
8+
getStyles: function () {
9+
return {
10+
root: {
11+
position: 'relative'
12+
},
13+
overlayContainer: {
14+
position: 'absolute',
15+
top: 0,
16+
bottom: 0,
17+
right: 0,
18+
left: 0
19+
},
20+
overlay: {
21+
height: '100%',
22+
position: 'relative'
23+
},
24+
overlayContent: {
25+
position: 'absolute',
26+
bottom: 0,
27+
right: 0,
28+
left: 0,
29+
paddingTop: 8,
30+
background: Styles.Colors.lightBlack
31+
}
32+
};
33+
},
34+
render: function () {
35+
var styles = this.getStyles();
36+
37+
var children = React.Children.map(this.props.children, function (child) {
38+
return React.cloneElement(child, {
39+
style: {
40+
verticalAlign: 'top',
41+
maxWidth: '100%',
42+
minWidth: '100%'
43+
}
44+
});
45+
});
46+
47+
var overlayChildren = React.Children.map(this.props.overlay, function (child) {
48+
if (child.type.displayName === 'CardHeader' || child.type.displayName === 'CardTitle'
49+
) {
50+
return React.cloneElement(child, {
51+
titleColor: Styles.Colors.darkWhite,
52+
subtitleColor: Styles.Colors.lightWhite
53+
});
54+
} else if (child.type.displayName === 'CardText') {
55+
return React.cloneElement(child, {
56+
color: Styles.Colors.darkWhite
57+
});
58+
} else {
59+
return child;
60+
}
61+
});
62+
63+
return (
64+
<div style={styles.root}>
65+
<div style={styles.media}>
66+
{children}
67+
</div>
68+
{(this.props.overlay) ?
69+
<div style={styles.overlayContainer}>
70+
<div style={styles.overlay}>
71+
<div style={styles.overlayContent}>
72+
{overlayChildren}
73+
</div>
74+
</div>
75+
</div> : ''}
76+
</div>
77+
);
78+
}
79+
});
80+
81+
module.exports = CardMedia;

‎src/card/card-text.jsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
var React = require('react');
2+
var Styles = require('../styles');
3+
4+
var CardText = React.createClass({
5+
propTypes: {
6+
color: React.PropTypes.string
7+
},
8+
getDefaultProps: function () {
9+
return {
10+
color: Styles.Colors.ck
11+
}
12+
},
13+
getStyles: function () {
14+
return {
15+
root: {
16+
padding: 16,
17+
fontSize: '14px',
18+
color: this.props.color
19+
}
20+
}
21+
},
22+
render: function () {
23+
var styles = this.getStyles();
24+
25+
return (
26+
<div style={styles.root}>
27+
{this.props.children}
28+
</div>
29+
);
30+
}
31+
});
32+
33+
module.exports = CardText;

‎src/card/card-title.jsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
var React = require('react');
2+
var Styles = require('../styles');
3+
4+
var CardTitle = React.createClass({
5+
propTypes: {
6+
title: React.PropTypes.string,
7+
titleColor: React.PropTypes.string,
8+
subtitle: React.PropTypes.string,
9+
subtitleColor: React.PropTypes.string
10+
},
11+
getDefaultProps: function () {
12+
return {
13+
titleColor: Styles.Colors.darkBlack,
14+
subtitleColor: Styles.Colors.lightBlack
15+
};
16+
},
17+
getStyles: function () {
18+
return {
19+
root: {
20+
padding: 16
21+
},
22+
title: {
23+
fontSize: 24,
24+
color: this.props.titleColor,
25+
display: 'block',
26+
lineHeight: '36px'
27+
},
28+
subtitle: {
29+
fontSize: 14,
30+
color: this.props.subtitleColor,
31+
display: 'block'
32+
}
33+
}
34+
},
35+
render: function () {
36+
var styles = this.getStyles();
37+
38+
return (
39+
<div style={styles.root}>
40+
<span style={styles.title}>{this.props.title}</span>
41+
<span style={styles.subtitle}>{this.props.subtitle}</span>
42+
</div>
43+
);
44+
}
45+
});
46+
47+
module.exports = CardTitle;

0 commit comments

Comments
 (0)