66 lines
2.5 KiB
JavaScript
66 lines
2.5 KiB
JavaScript
|
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 { Row, Text, Avatar, ComboBox, Icons } from 'asc-web-components';
|
||
|
import Section from '../../../.storybook/decorators/section';
|
||
|
|
||
|
storiesOf('Components|Row', module)
|
||
|
.addDecorator(withKnobs)
|
||
|
.addDecorator(withReadme(Readme))
|
||
|
.add('base', () => {
|
||
|
|
||
|
const contextButton = boolean('contextButton', true);
|
||
|
const checked = boolean('checkbox', true);
|
||
|
const element = select('element',['', 'Avatar', 'Icon', 'ComboBox'], '');
|
||
|
|
||
|
const elementAvatar = <Avatar size='small' role='user' userName='Demo Avatar' />;
|
||
|
const elementIcon = <Icons.CatalogFolderIcon size="big" />;
|
||
|
const elementComboBox = <ComboBox
|
||
|
options={
|
||
|
[
|
||
|
{key: 1, icon: 'ItemActiveIcon', label: 'Open'},
|
||
|
{key: 2, icon: 'CheckIcon', label: 'Closed'}
|
||
|
]
|
||
|
}
|
||
|
onSelect={option => console.log(option)}
|
||
|
selectedOption={{
|
||
|
key: 0,
|
||
|
icon: 'ItemActiveIcon',
|
||
|
label: ''
|
||
|
}}
|
||
|
scaled={false}
|
||
|
size='content'
|
||
|
isDisabled={false}
|
||
|
/>;
|
||
|
|
||
|
const checkedProps = checked ? { checked: false } : {};
|
||
|
const getElementProps = element =>
|
||
|
(element === 'Avatar')
|
||
|
? { element: elementAvatar }
|
||
|
: (element === 'Icon')
|
||
|
? { element: elementIcon }
|
||
|
: (element === 'ComboBox')
|
||
|
? { element: elementComboBox }
|
||
|
: {};
|
||
|
|
||
|
const elementProps = getElementProps(element);
|
||
|
|
||
|
return (
|
||
|
<Section>
|
||
|
<Row
|
||
|
key='1'
|
||
|
{...checkedProps}
|
||
|
{...elementProps}
|
||
|
contextOptions={contextButton ? [
|
||
|
{ key: 'key1', label: 'Edit', onClick: () => console.log('Context action: Edit') },
|
||
|
{ key: 'key2', label: 'Delete', onClick: () => console.log('Context action: Delete') }
|
||
|
] : []}
|
||
|
>
|
||
|
<Text.Body truncate={true} >{text('content', 'Sample text')}</Text.Body>
|
||
|
</Row>
|
||
|
</Section>
|
||
|
);
|
||
|
});
|