153 lines
6.1 KiB
JavaScript
153 lines
6.1 KiB
JavaScript
import React from 'react';
|
|
import { storiesOf } from '@storybook/react';
|
|
import { Row, RowContent, Avatar, Link, Icons } from 'asc-web-components';
|
|
import Section from '../../../.storybook/decorators/section';
|
|
|
|
const fakeUsers = [
|
|
{
|
|
id: '1',
|
|
userName: 'Helen Walton',
|
|
avatar: '',
|
|
role: 'owner',
|
|
status: 'normal',
|
|
isHead: false,
|
|
department: 'Administration',
|
|
mobilePhone: '+5 104 6473420',
|
|
email: 'percival1979@yahoo.com',
|
|
contextOptions: [
|
|
{ key: 'key1', label: 'Send e-mail', onClick: () => console.log('Context action: Send e-mail') },
|
|
{ key: 'key2', label: 'Send message', onClick: () => console.log('Context action: Send message') },
|
|
{ key: 'key3', isSeparator: true },
|
|
{ key: 'key4', label: 'Edit', onClick: () => console.log('Context action: Edit') },
|
|
{ key: 'key5', label: 'Change password', onClick: () => console.log('Context action: Change password') },
|
|
{ key: 'key6', label: 'Change e-mail', onClick: () => console.log('Context action: Change e-mail') },
|
|
{ key: 'key7', label: 'Disable', onClick: () => console.log('Context action: Disable') }
|
|
]
|
|
},
|
|
{
|
|
id: '2',
|
|
userName: 'Nellie Harder',
|
|
avatar: '',
|
|
role: 'user',
|
|
status: 'normal',
|
|
isHead: true,
|
|
department: 'Development',
|
|
mobilePhone: '+1 716 3748605',
|
|
email: 'herta.reynol@yahoo.com',
|
|
contextOptions: []
|
|
},
|
|
{
|
|
id: '3',
|
|
userName: 'Alan Mason',
|
|
avatar: '',
|
|
role: 'admin',
|
|
status: 'normal',
|
|
isHead: true,
|
|
department: '',
|
|
mobilePhone: '+3 956 2064314',
|
|
email: 'davin_lindgr@hotmail.com',
|
|
contextOptions: [
|
|
{ key: 'key1', label: 'Send e-mail', onClick: () => console.log('Context action: Send e-mail') },
|
|
{ key: 'key2', label: 'Send message', onClick: () => console.log('Context action: Send message') },
|
|
{ key: 'key3', isSeparator: true },
|
|
{ key: 'key4', label: 'Edit', onClick: () => console.log('Context action: Edit') },
|
|
{ key: 'key5', label: 'Change password', onClick: () => console.log('Context action: Change password') },
|
|
{ key: 'key6', label: 'Change e-mail', onClick: () => console.log('Context action: Change e-mail') },
|
|
{ key: 'key7', label: 'Disable', onClick: () => console.log('Context action: Disable') }
|
|
]
|
|
},
|
|
{
|
|
id: '4',
|
|
userName: 'Michael Goldstein',
|
|
avatar: '',
|
|
role: 'guest',
|
|
status: 'normal',
|
|
isHead: false,
|
|
department: 'Visitors',
|
|
mobilePhone: '+7 715 6018678',
|
|
email: 'fidel_kerlu@hotmail.com',
|
|
contextOptions: [
|
|
{ key: 'key1', label: 'Send e-mail', onClick: () => console.log('Context action: Send e-mail') },
|
|
{ key: 'key2', label: 'Send message', onClick: () => console.log('Context action: Send message') },
|
|
{ key: 'key3', isSeparator: true },
|
|
{ key: 'key4', label: 'Edit', onClick: () => console.log('Context action: Edit') },
|
|
{ key: 'key5', label: 'Change password', onClick: () => console.log('Context action: Change password') },
|
|
{ key: 'key6', label: 'Change e-mail', onClick: () => console.log('Context action: Change e-mail') },
|
|
{ key: 'key7', label: 'Disable', onClick: () => console.log('Context action: Disable') }
|
|
]
|
|
},
|
|
{
|
|
id: '5',
|
|
userName: 'Robert Gardner Robert Gardner',
|
|
avatar: '',
|
|
role: 'user',
|
|
status: 'pending',
|
|
isHead: false,
|
|
department: '',
|
|
mobilePhone: '',
|
|
email: 'robert_gardner@hotmail.com',
|
|
contextOptions: [
|
|
{ key: 'key1', label: 'Edit', onClick: () => console.log('Context action: Edit') },
|
|
{ key: 'key2', label: 'Invite again', onClick: () => console.log('Context action: Invite again') },
|
|
{ key: 'key3', label: 'Delete profile', onClick: () => console.log('Context action: Delete profile') }
|
|
]
|
|
},
|
|
{
|
|
id: '6',
|
|
userName1: 'Timothy Morphis',
|
|
avatar: '',
|
|
role: 'user',
|
|
status: 'disabled',
|
|
isHead: false,
|
|
department: 'Disabled',
|
|
mobilePhone: '',
|
|
email: 'timothy_j_morphis@hotmail.com',
|
|
contextOptions: [
|
|
{ key: 'key1', label: 'Edit', onClick: () => console.log('Context action: Edit') },
|
|
{ key: 'key2', label: 'Reassign data', onClick: () => console.log('Context action: Reassign data') },
|
|
{ key: 'key3', label: 'Delete personal data', onClick: () => console.log('Context action: Delete personal data') },
|
|
{ key: 'key4', label: 'Delete profile', onClick: () => console.log('Context action: Delete profile') }
|
|
]
|
|
}
|
|
];
|
|
|
|
storiesOf('EXAMPLES|Row', module)
|
|
.add('people', () => {
|
|
|
|
return (
|
|
<Section>
|
|
{fakeUsers.map(user => {
|
|
const element = <Avatar size='small' role={user.role} userName={user.userName} source={user.avatar} />
|
|
const nameColor = user.status === 'pending' ? '#A3A9AE' : '#333333';
|
|
const sideInfoColor = user.status === 'pending' ? '#D0D5DA' : '#A3A9AE';
|
|
|
|
return (
|
|
<Row
|
|
key={user.id}
|
|
status={user.status}
|
|
checked={false}
|
|
data={user}
|
|
element={element}
|
|
contextOptions={user.contextOptions}
|
|
>
|
|
<RowContent>
|
|
<Link type='page' title={user.userName} isBold={true} fontSize={15} color={nameColor} >{user.userName}</Link>
|
|
<>
|
|
{user.status === 'pending' && <Icons.SendClockIcon size='small' isfill={true} color='#3B72A7' />}
|
|
{user.status === 'disabled' && <Icons.CatalogSpamIcon size='small' isfill={true} color='#3B72A7' />}
|
|
</>
|
|
{user.isHead
|
|
? <Link type='page' title='Head of department' fontSize={12} color={sideInfoColor} >Head of department</Link>
|
|
: <></>
|
|
}
|
|
<Link type='action' title={user.department} fontSize={12} color={sideInfoColor} >{user.department}</Link>
|
|
<Link type='page' title={user.mobilePhone} fontSize={12} color={sideInfoColor} >{user.mobilePhone}</Link>
|
|
<Link type='page' title={user.email} fontSize={12} color={sideInfoColor} >{user.email}</Link>
|
|
</RowContent>
|
|
</Row>
|
|
);
|
|
})}
|
|
</Section>
|
|
);
|
|
});
|