Migrate Avatar to themr
parent
fc6b702bb9
commit
1974336a56
|
@ -1,24 +1,27 @@
|
||||||
import React, {PropTypes} from 'react';
|
import React, {PropTypes} from 'react';
|
||||||
|
import { themr } from 'react-css-themr';
|
||||||
import FontIcon from '../font_icon';
|
import FontIcon from '../font_icon';
|
||||||
import style from './style';
|
|
||||||
|
|
||||||
const Avatar = ({children, className, icon, image, title, ...other}) => {
|
const Avatar = ({children, className, icon, image, theme, title, ...other}) => (
|
||||||
return (
|
<div data-react-toolbox='avatar' className={`${theme.avatar} ${className}`} {...other}>
|
||||||
<div data-react-toolbox='avatar' className={`${style.avatar} ${className}`} {...other}>
|
{children}
|
||||||
{children}
|
{typeof image === 'string' ? <img className={theme.image} src={image} title={title} /> : image}
|
||||||
{typeof image === 'string' ? <img className={style.image} src={image} title={title} /> : image}
|
{typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} /> : icon}
|
||||||
{typeof icon === 'string' ? <FontIcon className={style.letter} value={icon} /> : icon}
|
{title ? <span className={theme.letter}>{title[0]}</span> : null}
|
||||||
{title ? <span className={style.letter}>{title[0]}</span> : null}
|
</div>
|
||||||
</div>
|
);
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
Avatar.propTypes = {
|
Avatar.propTypes = {
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
||||||
image: 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
|
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 -->
|
<!-- example -->
|
||||||
```jsx
|
```jsx
|
||||||
import Avatar from 'react-toolbox/lib/avatar';
|
import Avatar from 'react-toolbox/lib/avatar';
|
||||||
|
import theme from 'react-toolbox/lib/avatar/theme';
|
||||||
|
|
||||||
const GithubIcon = () => (
|
const GithubIcon = () => (
|
||||||
<svg viewBox="0 0 284 277">
|
<svg viewBox="0 0 284 277">
|
||||||
|
@ -14,11 +15,11 @@ const GithubIcon = () => (
|
||||||
|
|
||||||
const AvatarTest = () => (
|
const AvatarTest = () => (
|
||||||
<div>
|
<div>
|
||||||
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
|
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" theme={theme} />
|
||||||
<Avatar icon={<GithubIcon />}/>
|
<Avatar icon={<GithubIcon />} theme={theme} />
|
||||||
<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
|
<Avatar theme={theme}><img src="https://placeimg.com/80/80/animals"/></Avatar>
|
||||||
<Avatar title="Javier" image="https://placeimg.com/80/80/animals"/>
|
<Avatar title="Javier" image="https://placeimg.com/80/80/animals" theme={theme} />
|
||||||
<Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
|
<Avatar style={{backgroundColor: 'yellowgreen'}} theme={theme}><GithubIcon /></Avatar>
|
||||||
</div>
|
</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.|
|
| `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. |
|
| `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. |
|
| `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;
|
font-size: $avatar-font-size;
|
||||||
color: $avatar-color;
|
color: $avatar-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
background-color: $avatar-background;
|
background-color: $avatar-background;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
> svg {
|
> svg {
|
|
@ -1,3 +1,7 @@
|
||||||
import ToolboxAppBar from '../components/app_bar/theme.scss';
|
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