Fixes #585
parent
0513cb72e9
commit
49658a39b4
|
@ -5,10 +5,11 @@ import { AVATAR } from '../identifiers.js';
|
|||
import InjectFontIcon from '../font_icon/FontIcon.js';
|
||||
|
||||
const factory = (FontIcon) => {
|
||||
const Avatar = ({children, className, icon, image, theme, title, ...other}) => (
|
||||
const Avatar = ({children, className, cover, icon, image, theme, title, ...other}) => (
|
||||
<div data-react-toolbox='avatar' className={classnames(theme.avatar, className)} {...other}>
|
||||
{children}
|
||||
{typeof image === 'string' ? <img className={theme.image} src={image} title={title} /> : image}
|
||||
{cover && typeof image === 'string' && <span alt={title} className={theme.image} style={{backgroundImage: `url(${image})`}} />}
|
||||
{!cover && (typeof image === 'string' ? <img alt={title} className={theme.image} src={image} title={title} /> : image)}
|
||||
{typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} /> : icon}
|
||||
{title ? <span className={theme.letter}>{title[0]}</span> : null}
|
||||
</div>
|
||||
|
@ -17,6 +18,7 @@ const factory = (FontIcon) => {
|
|||
Avatar.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
cover: PropTypes.bool,
|
||||
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
||||
image: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
||||
theme: PropTypes.shape({
|
||||
|
@ -27,6 +29,10 @@ const factory = (FontIcon) => {
|
|||
title: PropTypes.string
|
||||
};
|
||||
|
||||
Avatar.defaultProps = {
|
||||
cover: false
|
||||
};
|
||||
|
||||
return Avatar;
|
||||
};
|
||||
|
||||
|
|
|
@ -18,6 +18,7 @@ const AvatarTest = () => (
|
|||
<Avatar icon={<GithubIcon />} />
|
||||
<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
|
||||
<Avatar title="Javier" image="https://placeimg.com/80/80/animals" />
|
||||
<Avatar image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover />
|
||||
<Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
|
||||
</div>
|
||||
);
|
||||
|
@ -31,6 +32,7 @@ If you want to provide a theme via context, the component key is `RTAvatar`.
|
|||
|:-----|:-----|:-----|:-----|
|
||||
| `children` | `Node` | | Children for the avatar. You can pass an SVG for a custom icon or, for example, an image.|
|
||||
| `className` | `String` | `''` | Set a class to style the Component.|
|
||||
| `cover` | `Boolean` | `''` | Set to true if your image is not squared so it will be used as a cover for the element.|
|
||||
| `icon` | `String` or `Element` | | A key to identify an Icon from Material Design Icons or a custom Icon Element.|
|
||||
| `image` | `String` or `Element` | | An image source or an image element. |
|
||||
| `title` | `String` | `''` | A title for the image. If no image is provided, the first letter will be displayed as the avatar. |
|
||||
|
|
|
@ -9,6 +9,8 @@ const AvatarTest = () => (
|
|||
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
|
||||
<Avatar icon={<GithubIcon />}/>
|
||||
<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
|
||||
<Avatar image="https://placeimg.com/80/80/animals" />
|
||||
<Avatar image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover />
|
||||
<Avatar title="Javier"/>
|
||||
<Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
|
||||
</section>
|
||||
|
|
Loading…
Reference in New Issue