Web: Components: DropDownProfileItem: Removed component
This commit is contained in:
Ilya Oleshko
parent
a62b0f2c39
commit
c9182de792
@ -1,32 +0,0 @@
|
||||
# DropDownProfileItem
|
||||
|
||||
### Usage
|
||||
|
||||
```js
|
||||
import { DropDownProfileItem } from "asc-web-components";
|
||||
```
|
||||
|
||||
```jsx
|
||||
<DropDownProfileItem
|
||||
avatarRole="admin"
|
||||
avatarSource=""
|
||||
displayName="Jane Doe"
|
||||
email="janedoe@gmail.com"
|
||||
/>
|
||||
```
|
||||
|
||||
To add preview of user profile, you must use DropDownProfileItem component inherited from DropDownItem and add isUserPreview parameter to DropDown.
|
||||
|
||||
To add an avatar username and email when you turn on isUserPreview parameter, you need to add parameters of Avatar component: avatarSource - link to user's avatar, avatarRole - user's role, displayName - user name and email - user’s email address.
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| -------------- | :------------: | :------: | :----------------------------: | :-----: | ---------------------- |
|
||||
| `avatarRole` | `oneOf` | - | `owner`,`admin`,`guest`,`user` | `user` | Adds a user role table |
|
||||
| `avatarSource` | `string` | - | - | - | Avatar image source |
|
||||
| `className` | `string` | - | - | - | Accepts class |
|
||||
| `displayName` | `string` | - | - | - | User name for display |
|
||||
| `email` | `string` | - | - | - | User email for display |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
@ -1,39 +0,0 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import withReadme from 'storybook-readme/with-readme'
|
||||
import Readme from './README.md'
|
||||
import DropDown from '../drop-down';
|
||||
import DropDownItem from '../drop-down-item';
|
||||
import DropDownProfileItem from '.';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
|
||||
storiesOf('Components | DropDown', module)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('base profile item', () => {
|
||||
|
||||
return (
|
||||
<Section>
|
||||
<DropDown
|
||||
isUserPreview={true}
|
||||
withArrow={true}
|
||||
directionX='right'
|
||||
manualY='1%'
|
||||
open={true}>
|
||||
<DropDownProfileItem
|
||||
avatarRole='admin'
|
||||
avatarSource='https://static-www.onlyoffice.com/images/team/developers_photos/personal_44_2x.jpg'
|
||||
displayName='Jane Doe'
|
||||
email='janedoe@gmail.com' />
|
||||
<DropDownItem
|
||||
label='Profile'
|
||||
onClick={() => console.log('Profile clicked')} />
|
||||
<DropDownItem
|
||||
label='About'
|
||||
onClick={() => console.log('About clicked')} />
|
||||
<DropDownItem
|
||||
label='Log out'
|
||||
onClick={() => console.log('Log out clicked')} />
|
||||
</DropDown>
|
||||
</Section>
|
||||
)
|
||||
});
|
||||
@ -1,44 +0,0 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import DropDownProfileItem from '.';
|
||||
|
||||
const baseProps = {
|
||||
avatarRole: 'admin',
|
||||
avatarSource: '',
|
||||
displayName: 'Jane Doe',
|
||||
email: 'janedoe@gmail.com'
|
||||
}
|
||||
|
||||
describe('<DropDownProfileItem />', () => {
|
||||
it('renders without error', () => {
|
||||
const wrapper = mount(
|
||||
<DropDownProfileItem {...baseProps} />
|
||||
);
|
||||
|
||||
expect(wrapper).toExist();
|
||||
});
|
||||
|
||||
it('accepts id', () => {
|
||||
const wrapper = mount(
|
||||
<DropDownProfileItem {...baseProps} id="testId" />
|
||||
);
|
||||
|
||||
expect(wrapper.prop('id')).toEqual('testId');
|
||||
});
|
||||
|
||||
it('accepts className', () => {
|
||||
const wrapper = mount(
|
||||
<DropDownProfileItem {...baseProps} className="test" />
|
||||
);
|
||||
|
||||
expect(wrapper.prop('className')).toEqual('test');
|
||||
});
|
||||
|
||||
it('accepts style', () => {
|
||||
const wrapper = mount(
|
||||
<DropDownProfileItem {...baseProps} style={{ color: 'red' }} />
|
||||
);
|
||||
|
||||
expect(wrapper.prop('style')).toEqual({ color: 'red' });
|
||||
});
|
||||
});
|
||||
@ -1,89 +0,0 @@
|
||||
import React, { memo } from 'react'
|
||||
import styled, { css } from 'styled-components'
|
||||
import PropTypes from 'prop-types'
|
||||
import Avatar from '../avatar'
|
||||
import DropDownItem from '../drop-down-item'
|
||||
|
||||
const StyledDropDownItem = styled(DropDownItem)``
|
||||
|
||||
const StyledDropdownProfileItem = styled.div`
|
||||
${StyledDropDownItem}
|
||||
padding: 0px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
`;
|
||||
|
||||
const commonStyle = css`
|
||||
font-family: 'Open Sans',sans-serif,Arial;
|
||||
font-style: normal;
|
||||
color: #FFFFFF;
|
||||
margin-left: 60px;
|
||||
max-width:300px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
`;
|
||||
|
||||
const UserPreview = styled.div`
|
||||
position: relative;
|
||||
height: 76px;
|
||||
background: linear-gradient(200.71deg, #2274AA 0%, #0F4071 100%);
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
padding: 15px;
|
||||
cursor: default;
|
||||
box-sizing: border-box;
|
||||
`;
|
||||
|
||||
const AvatarWrapper = styled.div`
|
||||
display: inline-block;
|
||||
float: left;
|
||||
`;
|
||||
|
||||
const UserNameWrapper = styled.div`
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
|
||||
${commonStyle}
|
||||
`;
|
||||
|
||||
const UserEmailWrapper = styled.div`
|
||||
font-weight: normal;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
|
||||
${commonStyle}
|
||||
`;
|
||||
|
||||
// eslint-disable-next-line react/display-name
|
||||
const DropDownProfileItem = memo(props => {
|
||||
//console.log("DropDownItem render");
|
||||
const { displayName, email, avatarRole, avatarSource } = props;
|
||||
|
||||
return (
|
||||
<StyledDropdownProfileItem {...props}>
|
||||
<UserPreview {...props}>
|
||||
<AvatarWrapper>
|
||||
<Avatar size='medium'
|
||||
role={avatarRole}
|
||||
source={avatarSource}
|
||||
userName={displayName}
|
||||
/>
|
||||
</AvatarWrapper>
|
||||
<UserNameWrapper>{displayName}</UserNameWrapper>
|
||||
<UserEmailWrapper>{email}</UserEmailWrapper>
|
||||
</UserPreview>
|
||||
</StyledDropdownProfileItem>
|
||||
);
|
||||
});
|
||||
|
||||
DropDownProfileItem.propTypes = {
|
||||
displayName: PropTypes.string,
|
||||
email: PropTypes.string,
|
||||
avatarRole: PropTypes.oneOf(['owner', 'admin', 'guest', 'user']),
|
||||
avatarSource: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
|
||||
};
|
||||
|
||||
export default DropDownProfileItem
|
||||
@ -13,7 +13,6 @@ export { default as CustomScrollbarsVirtualList } from './components/scrollbar/c
|
||||
export { default as DatePicker } from './components/date-picker'
|
||||
export { default as DropDown } from './components/drop-down'
|
||||
export { default as DropDownItem } from './components/drop-down-item'
|
||||
export { default as DropDownProfileItem } from './components/drop-down-profile-item'
|
||||
export { default as EmailInput } from './components/email-input'
|
||||
export { default as EmptyScreenContainer} from './components/empty-screen-container'
|
||||
export { default as ErrorContainer } from './components/error-container'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user