Web: Added Avatar component
This commit is contained in:
Ilya Oleshko
parent
994001ee5d
commit
5a8fb940a7
@ -46,7 +46,7 @@
|
||||
"@storybook/addon-storysource": "^5.0.11",
|
||||
"@storybook/addon-viewport": "^5.0.11",
|
||||
"@storybook/addons": "^5.0.11",
|
||||
"@storybook/cli": "^5.0.11",
|
||||
"@storybook/cli": "^5.1.8",
|
||||
"@storybook/react": "^5.0.11",
|
||||
"babel-loader": "^8.0.6",
|
||||
"install-peers": "^1.0.3",
|
||||
|
||||
27
web/ASC.Web.Components/example/stories/avatar/base/README.md
Normal file
27
web/ASC.Web.Components/example/stories/avatar/base/README.md
Normal file
@ -0,0 +1,27 @@
|
||||
# Avatar
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import { Avatar } from 'asc-web-components';
|
||||
```
|
||||
|
||||
#### Description
|
||||
|
||||
Required to display user avatar on page.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
<Avatar size='max' role='admin' source='' pending={false} disabled={false} />
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------ | -------- | :------: | ----------------------------------------- | --------- | ----------------------------------------------------- |
|
||||
| `size` | `oneOf` | - | `retina`, `max`, `big`, `medium`, `small` | `medium` | Tells what size avatar should be displayed |
|
||||
| `role` | `oneOf` | - | `owner`, `admin`, `guest`, `user` | ` ` | Adds a user role table |
|
||||
| `source` | `string` | - | - | ` ` | Avatar image source |
|
||||
| `pending` | `bool` | - | - | `false` | Reports account pending |
|
||||
| `disabled` | `bool` | - | - | `false` | Reports that account is disabled |
|
||||
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Readme from './README.md';
|
||||
import { Avatar } from 'asc-web-components';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
|
||||
const roleOptions = ['owner', 'admin','guest','user'];
|
||||
const sizeOptions = ['retina', 'max', 'big', 'medium', 'small'];
|
||||
|
||||
storiesOf('Components|Avatar', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('base', () => (
|
||||
<Section>
|
||||
<Avatar
|
||||
size={select('size', sizeOptions, 'max')}
|
||||
role={select('role', roleOptions, 'admin')}
|
||||
source={text('source', '')}
|
||||
pending={boolean('pending', false)}
|
||||
disabled={boolean('disabled', false)}
|
||||
/>
|
||||
</Section>
|
||||
));
|
||||
140
web/ASC.Web.Components/src/components/avatar/index.js
Normal file
140
web/ASC.Web.Components/src/components/avatar/index.js
Normal file
@ -0,0 +1,140 @@
|
||||
import React from 'react'
|
||||
import styled, { css } from 'styled-components'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Icons } from '../icons'
|
||||
|
||||
const StyledAvatar = styled.div`
|
||||
position: relative;
|
||||
width: ${props =>
|
||||
(props.size === 'retina' && '360px') ||
|
||||
(props.size === 'max' && '200px') ||
|
||||
(props.size === 'big' && '82px') ||
|
||||
(props.size === 'medium' && '48px') ||
|
||||
(props.size === 'small' && '32px')
|
||||
};
|
||||
height: ${props =>
|
||||
(props.size === 'retina' && '360px') ||
|
||||
(props.size === 'max' && '200px') ||
|
||||
(props.size === 'big' && '82px') ||
|
||||
(props.size === 'medium' && '48px') ||
|
||||
(props.size === 'small' && '32px')
|
||||
};
|
||||
border: 1px solid ${props => (props.size === 'max') ? '#bfbfbf' : '#c7c7c7'};
|
||||
border-radius: ${props => (props.size === 'max') ? '3px' : '0px'};
|
||||
-moz-border-radius: ${props => (props.size === 'max') ? '3px' : '0px'};
|
||||
-webkit-border-radius: ${props => (props.size === 'max') ? '3px' : '0px'};
|
||||
`;
|
||||
|
||||
const Role = styled.div`
|
||||
position: absolute;
|
||||
left: ${props =>
|
||||
(props.size === 'retina' && '8px') ||
|
||||
(props.size === 'max' && '6px') ||
|
||||
(props.size === 'big' && '-2px') ||
|
||||
(props.size === 'medium' && '-2px') ||
|
||||
(props.size === 'small' && '-2px')
|
||||
};
|
||||
bottom: ${props =>
|
||||
(props.size === 'retina' && '8px') ||
|
||||
(props.size === 'max' && '6px') ||
|
||||
(props.size === 'big' && '4px') ||
|
||||
(props.size === 'medium' && '4px') ||
|
||||
(props.size === 'small' && '4px')
|
||||
};
|
||||
width: ${props =>
|
||||
(props.size === 'retina' && '40px') ||
|
||||
(props.size === 'max' && '22px') ||
|
||||
(props.size === 'big' && '12px') ||
|
||||
(props.size === 'medium' && '12px') ||
|
||||
(props.size === 'small' && '12px')
|
||||
};
|
||||
height: ${props =>
|
||||
(props.size === 'retina' && '40px') ||
|
||||
(props.size === 'max' && '22px') ||
|
||||
(props.size === 'big' && '12px') ||
|
||||
(props.size === 'medium' && '12px') ||
|
||||
(props.size === 'small' && '12px')
|
||||
};
|
||||
`;
|
||||
|
||||
const Pending = styled.div`
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: ${props => (props.size === 'retina' || props.size === 'max') ? 'none repeat scroll 0 0 white' : 'transparent'};
|
||||
border: ${props => (props.size === 'retina' || props.size === 'max') ? '1px solid #919191' : 'none'};
|
||||
color: #7D7D7D;
|
||||
opacity: ${props => (props.size === 'retina' || props.size === 'max') ? '0.9' : '1'};
|
||||
text-align: center;
|
||||
width: auto;
|
||||
border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: bold;
|
||||
padding: 42px 16px 5px;
|
||||
|
||||
& > svg {
|
||||
position: absolute;
|
||||
top: ${props => (props.size === 'retina' || props.size === 'max') ? '40%' : '50%'};
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
`;
|
||||
|
||||
const Disabled = styled(Pending)`
|
||||
color: #a83200;
|
||||
`;
|
||||
|
||||
const ImageStyled = styled.img`
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const Avatar = props => {
|
||||
const {size, source, role, pending, disabled, pendingLabel, disabledLabel} = props;
|
||||
|
||||
return (
|
||||
<StyledAvatar {... props}>
|
||||
{source === '' && <Icons.PeopleIcon size='scale' />}
|
||||
{source !== '' && <ImageStyled src={source} />}
|
||||
<Role {... props}>
|
||||
{role === 'guest' && <Icons.GuestIcon size='scale' />}
|
||||
{role === 'admin' && <Icons.AdministratorIcon size='scale' />}
|
||||
{role === 'owner' && <Icons.OwnerIcon size='scale' />}
|
||||
</Role>
|
||||
{pending &&
|
||||
<Pending {... props}>
|
||||
{(size !== 'max' || size !== 'retina') && <Icons.CalendarIcon size={size === 'small' ? 'small' : 'big'}/>}
|
||||
{(size === 'max' || size === 'retina') && pendingLabel}
|
||||
</Pending>}
|
||||
{disabled &&
|
||||
<Disabled {... props}>
|
||||
{(size !== 'max' || size !== 'retina') && <Icons.CalendarIcon size={size === 'small' ? 'small' : 'big'} color='#a83200' />}
|
||||
{(size === 'max' || size === 'retina') && disabledLabel}
|
||||
</Disabled>}
|
||||
</StyledAvatar>
|
||||
);
|
||||
};
|
||||
|
||||
Avatar.propTypes = {
|
||||
size: PropTypes.oneOf(['retina', 'max', 'big', 'medium', 'small']),
|
||||
role: PropTypes.oneOf(['owner', 'admin','guest', 'user']),
|
||||
pending: PropTypes.bool,
|
||||
disabled: PropTypes.bool,
|
||||
source: PropTypes.string,
|
||||
pendingLabel: PropTypes.string,
|
||||
disabledLabel: PropTypes.string
|
||||
};
|
||||
|
||||
Avatar.defaultProps = {
|
||||
size: 'medium',
|
||||
role: '',
|
||||
pending: false,
|
||||
disabled: false,
|
||||
source: '',
|
||||
pendingLabel: 'Pending',
|
||||
disabledLabel: 'Disabled'
|
||||
};
|
||||
|
||||
export default Avatar;
|
||||
@ -11,3 +11,4 @@ export { default as DropDown } from './components/drop-down'
|
||||
export { default as GroupButtonsMenu } from './components/group-buttons-menu'
|
||||
export { default as TreeMenu } from './components/tree-menu'
|
||||
export { default as TreeNode } from './components/tree-menu-node'
|
||||
export { default as Avatar } from './components/avatar'
|
||||
Loading…
Reference in New Issue
Block a user