2019-07-08 07:12:43 +00:00
|
|
|
import React from 'react'
|
|
|
|
import { storiesOf } from '@storybook/react'
|
|
|
|
import { withKnobs, text} from '@storybook/addon-knobs/react';
|
|
|
|
import styled from '@emotion/styled';
|
2019-07-18 08:56:30 +00:00
|
|
|
import { GroupButtonsMenu, DropDownItem } from 'asc-web-components'
|
2019-07-08 07:12:43 +00:00
|
|
|
|
|
|
|
const GroupButtonsMenuContainer = styled.div`
|
|
|
|
height: 2000px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const peopleItems = [
|
|
|
|
{
|
|
|
|
label: 'Select',
|
|
|
|
isDropdown: true,
|
|
|
|
isSeparator: true,
|
|
|
|
fontWeight: 'bold',
|
|
|
|
children: [
|
2019-07-09 08:10:11 +00:00
|
|
|
<DropDownItem key='active' label='Active'/>,
|
|
|
|
<DropDownItem key='disabled' label='Disabled'/>,
|
|
|
|
<DropDownItem key='invited' label='Invited'/>
|
2019-07-08 07:12:43 +00:00
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Make employee',
|
2019-07-10 13:19:45 +00:00
|
|
|
onClick: () => console.log('Make employee action')
|
2019-07-08 07:12:43 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Make guest',
|
2019-07-10 13:19:45 +00:00
|
|
|
onClick: () => console.log('Make guest action')
|
2019-07-08 07:12:43 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Set active',
|
2019-07-10 13:19:45 +00:00
|
|
|
onClick: () => console.log('Set active action')
|
2019-07-08 07:12:43 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Set disabled',
|
2019-07-10 13:19:45 +00:00
|
|
|
onClick: () => console.log('Set disabled action')
|
2019-07-08 07:12:43 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Invite again',
|
2019-07-10 13:19:45 +00:00
|
|
|
onClick: () => console.log('Invite again action')
|
2019-07-08 07:12:43 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Send e-mail',
|
2019-07-10 13:19:45 +00:00
|
|
|
onClick: () => console.log('Send e-mail action')
|
2019-07-08 07:12:43 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Delete',
|
2019-07-10 13:19:45 +00:00
|
|
|
onClick: () => console.log('Delete action')
|
2019-07-08 07:12:43 +00:00
|
|
|
}
|
|
|
|
];
|
|
|
|
|
|
|
|
storiesOf('EXAMPLES|GroupButtonsMenu', module)
|
|
|
|
.addDecorator(withKnobs)
|
|
|
|
.add('people', () => (
|
|
|
|
<GroupButtonsMenuContainer>
|
2019-07-18 08:56:30 +00:00
|
|
|
<GroupButtonsMenu
|
|
|
|
checked={false}
|
2019-07-08 07:12:43 +00:00
|
|
|
menuItems={peopleItems}
|
|
|
|
visible={true}
|
|
|
|
moreLabel={text('moreLabel', 'More')}
|
|
|
|
closeTitle={text('closeTitle', 'Close')}
|
|
|
|
/>
|
|
|
|
</GroupButtonsMenuContainer>
|
|
|
|
));
|