2019-07-08 07:12:43 +00:00
|
|
|
import React from 'react'
|
|
|
|
import { storiesOf } from '@storybook/react'
|
2019-07-09 08:10:11 +00:00
|
|
|
import { withKnobs, text } from '@storybook/addon-knobs/react';
|
|
|
|
import { BooleanValue } from 'react-values'
|
2019-07-08 07:12:43 +00:00
|
|
|
import withReadme from 'storybook-readme/with-readme'
|
|
|
|
import styled from '@emotion/styled';
|
|
|
|
import Readme from './README.md'
|
2019-07-09 08:10:11 +00:00
|
|
|
import { GroupButtonsMenu, Checkbox, DropDownItem } from 'asc-web-components'
|
2019-07-08 07:12:43 +00:00
|
|
|
|
|
|
|
const GroupButtonsMenuContainer = styled.div`
|
|
|
|
height: 2000px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const createItems = (label, dropDownLabel, menuItemLabel, count) => {
|
|
|
|
var items =[
|
|
|
|
{
|
|
|
|
label: label,
|
|
|
|
isDropdown: true,
|
|
|
|
isSeparator: true,
|
|
|
|
fontWeight: 'bold',
|
|
|
|
children: [
|
2019-07-09 08:05:44 +00:00
|
|
|
<DropDownItem key='1' label={dropDownLabel}/>,
|
|
|
|
<DropDownItem key='2' label={dropDownLabel}/>,
|
|
|
|
<DropDownItem key='3' label={dropDownLabel}/>
|
2019-07-08 07:12:43 +00:00
|
|
|
]
|
|
|
|
}
|
|
|
|
];
|
|
|
|
|
|
|
|
for (var i=0; i<count; i++){
|
|
|
|
items.push({label:menuItemLabel});
|
|
|
|
}
|
|
|
|
|
|
|
|
return items;
|
|
|
|
}
|
|
|
|
|
|
|
|
storiesOf('Components|GroupButtonsMenu', module)
|
|
|
|
.addDecorator(withReadme(Readme))
|
|
|
|
.addDecorator(withKnobs)
|
|
|
|
.add('base', () => {
|
|
|
|
|
|
|
|
const elements = 10;
|
|
|
|
const selectLabel = 'Select';
|
|
|
|
const dropLabel = 'Dropdown item';
|
|
|
|
const menuItemLabel = 'Menu item';
|
|
|
|
|
|
|
|
const menuItems = createItems(selectLabel, dropLabel, menuItemLabel, elements);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<GroupButtonsMenuContainer>
|
|
|
|
<GroupButtonsMenu checkBox={
|
|
|
|
<BooleanValue>
|
|
|
|
{({ value, toggle }) => (
|
|
|
|
<Checkbox isChecked={value}
|
|
|
|
onChange={e => {
|
|
|
|
console.log(e.target.value+' is checked');
|
|
|
|
toggle(e.target.checked);
|
|
|
|
}}
|
|
|
|
isDisabled={false}
|
|
|
|
value='Checkbox'
|
|
|
|
id='check1' />)}
|
|
|
|
</BooleanValue>}
|
|
|
|
menuItems={menuItems}
|
|
|
|
visible={true}
|
|
|
|
moreLabel={text('moreLabel', 'More')}
|
|
|
|
closeTitle={text('closeTitle', 'Close')}
|
|
|
|
/>
|
|
|
|
</GroupButtonsMenuContainer>
|
|
|
|
);
|
|
|
|
});
|