Skip to content

Instantly share code, notes, and snippets.

@farconada
Last active August 17, 2016 10:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save farconada/56000664bd2adef7e24c5a68a5b5409d to your computer and use it in GitHub Desktop.
Save farconada/56000664bd2adef7e24c5a68a5b5409d to your computer and use it in GitHub Desktop.
CardItem
import React from 'react';
import {Card, CardActions, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import IconButton from 'material-ui/IconButton';
import Divider from 'material-ui/Divider';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import FavoriteBorderIcon from 'material-ui/svg-icons/action/favorite-border';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import { connect } from 'react-redux';
const CardItem = ({style, card, onSaveClick}) => (
<Card style={style}>
<CardMedia>
<img src="http://lorempixel.com/600/337/nature/"/>
</CardMedia>
<CardTitle title="Card title" subtitle="Card subtitle"/>
<CardText>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
</CardText>
<Divider />
<CardActions>
<FlatButton label="Guardar" icon={<FavoriteBorderIcon />} onClick={() => onSaveClick(card)}/>
<IconMenu
style={{float: 'right'}}
iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
>
<MenuItem primaryText="Refresh"/>
<MenuItem primaryText="Send feedback"/>
<MenuItem primaryText="Settings"/>
<MenuItem primaryText="Help"/>
<MenuItem primaryText="Sign out"/>
</IconMenu>
</CardActions>
</Card>
);
const mapStateToProps = () => {return {}};
const mapDispatchToProps = (dispatch) => {
return {
onSaveClick: (card) => {
dispatch({type: 'INC_PENDING'})
}
}
};
const CardItemContainer = connect(
mapStateToProps,
mapDispatchToPropsyes,
)(CardItem);
export default CardItemContainer;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment