Avatar - Adding custom color and style to avatar component
This commit is contained in:
parent
8c147e4127
commit
80c596db66
@ -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
|
||||||
|
@ -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' />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
.avatar {
|
.avatar {
|
||||||
background: red;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: remCalc(50);
|
height: remCalc(50);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
Loading…
Reference in New Issue
Block a user