Migrate Avatar to themr
parent
fc6b702bb9
commit
1974336a56
|
@ -1,24 +1,27 @@
|
|||
import React, {PropTypes} from 'react';
|
||||
import { themr } from 'react-css-themr';
|
||||
import FontIcon from '../font_icon';
|
||||
import style from './style';
|
||||
|
||||
const Avatar = ({children, className, icon, image, title, ...other}) => {
|
||||
return (
|
||||
<div data-react-toolbox='avatar' className={`${style.avatar} ${className}`} {...other}>
|
||||
{children}
|
||||
{typeof image === 'string' ? <img className={style.image} src={image} title={title} /> : image}
|
||||
{typeof icon === 'string' ? <FontIcon className={style.letter} value={icon} /> : icon}
|
||||
{title ? <span className={style.letter}>{title[0]}</span> : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const Avatar = ({children, className, icon, image, theme, title, ...other}) => (
|
||||
<div data-react-toolbox='avatar' className={`${theme.avatar} ${className}`} {...other}>
|
||||
{children}
|
||||
{typeof image === 'string' ? <img 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>
|
||||
);
|
||||
|
||||
Avatar.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
||||
image: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
||||
theme: React.PropTypes.shape({
|
||||
avatar: React.PropTypes.string.isRequired,
|
||||
image: React.PropTypes.string.isRequired,
|
||||
letter: React.PropTypes.string.isRequired
|
||||
}),
|
||||
title: PropTypes.string
|
||||
};
|
||||
|
||||
export default Avatar;
|
||||
export default themr('ToolboxAvatar')(Avatar);
|
||||
|
|
|
@ -5,6 +5,7 @@ Avatars can be used to represent people. This offer users the ability to persona
|
|||
<!-- example -->
|
||||
```jsx
|
||||
import Avatar from 'react-toolbox/lib/avatar';
|
||||
import theme from 'react-toolbox/lib/avatar/theme';
|
||||
|
||||
const GithubIcon = () => (
|
||||
<svg viewBox="0 0 284 277">
|
||||
|
@ -14,11 +15,11 @@ const GithubIcon = () => (
|
|||
|
||||
const AvatarTest = () => (
|
||||
<div>
|
||||
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
|
||||
<Avatar icon={<GithubIcon />}/>
|
||||
<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
|
||||
<Avatar title="Javier" image="https://placeimg.com/80/80/animals"/>
|
||||
<Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
|
||||
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" theme={theme} />
|
||||
<Avatar icon={<GithubIcon />} theme={theme} />
|
||||
<Avatar theme={theme}><img src="https://placeimg.com/80/80/animals"/></Avatar>
|
||||
<Avatar title="Javier" image="https://placeimg.com/80/80/animals" theme={theme} />
|
||||
<Avatar style={{backgroundColor: 'yellowgreen'}} theme={theme}><GithubIcon /></Avatar>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
@ -32,3 +33,14 @@ const AvatarTest = () => (
|
|||
| `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. |
|
||||
| `theme` | `Object` | `null` | Classnames object defining the component style.|
|
||||
|
||||
## Theming
|
||||
|
||||
You can take a look to the `_config.scss` variables. The theme should implement the following interface:
|
||||
|
||||
| Name | Description|
|
||||
|:---------|:-----------|
|
||||
| `avatar` | Root class.|
|
||||
| `image` | Used for the image if the avatar has image.|
|
||||
| `letter` | Used for the letter in case the avatar has no image.|
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
font-size: $avatar-font-size;
|
||||
color: $avatar-color;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background-color: $avatar-background;
|
||||
border-radius: 50%;
|
||||
> svg {
|
|
@ -1,3 +1,7 @@
|
|||
import ToolboxAppBar from '../components/app_bar/theme.scss';
|
||||
import ToolboxAvatar from '../components/avatar/theme.scss';
|
||||
|
||||
export default { ToolboxAppBar };
|
||||
export default {
|
||||
ToolboxAppBar,
|
||||
ToolboxAvatar
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue