Avatar - Adding custom color and style to avatar component

This commit is contained in:
Alex Windett 2016-10-28 11:21:46 +01:00
parent 8c147e4127
commit 80c596db66
3 changed files with 20 additions and 8 deletions

View File

@ -5,6 +5,7 @@ const React = require('react');
const styles = require('./style.css'); const styles = require('./style.css');
const Avatar = ({ const Avatar = ({
color,
image, image,
name, name,
className, className,
@ -16,6 +17,11 @@ const Avatar = ({
styles.avatar styles.avatar
); );
style = {
...style,
background: color
}
const fill = () => { const fill = () => {
if ( image ) { if ( image ) {
return ( return (
@ -23,18 +29,24 @@ const Avatar = ({
alt={name} alt={name}
className={styles.picture} className={styles.picture}
src={image} src={image}
style={style}
/> />
); );
} else { } else {
const letter = name.split('')[0]; const letter = name.split('')[0];
return ( return (
<p className={styles.letter}>{letter}</p> <p
className={styles.letter}
style={style}
>
{letter}
</p>
); );
} }
} }
return ( return (
<div className={cn}> <div className={cn} style={style}>
{fill()} {fill()}
</div> </div>
); );
@ -42,6 +54,7 @@ const Avatar = ({
Avatar.propTypes = { Avatar.propTypes = {
className: React.PropTypes.string, className: React.PropTypes.string,
color: React.PropTypes.string,
image: React.PropTypes.string, image: React.PropTypes.string,
name: React.PropTypes.string, name: React.PropTypes.string,
style: React.PropTypes.object style: React.PropTypes.object

View File

@ -16,10 +16,10 @@ nmodule.exports = ReactDOM.renderToString(
<Base> <Base>
<Row> <Row>
<Column> <Column>
<Avatar name='Alex' /> <Avatar color='#35a8c0' name='Alex' />
</Column> </Column>
<Column> <Column>
<Avatar name='Alex' image='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' /> <Avatar color='#ef6176' name='Alex' image='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
</Column> </Column>
</Row> </Row>
</Base> </Base>
@ -34,8 +34,8 @@ const Avatar = require('ui/avatar');
module.exports = () => { module.exports = () => {
return ( return (
<Avatar name='Alex' /> <Avatar color='#35a8c0' name='Alex' />
<Avatar name='Alex' image='path/to/image.png' /> <Avatar color='#ef6176' name='Alex' image='path/to/image.png' />
); );
} }
``` ```

View File

@ -1,5 +1,4 @@
.avatar { .avatar {
background: red;
border-radius: 50%; border-radius: 50%;
height: remCalc(50); height: remCalc(50);
overflow: hidden; overflow: hidden;