2019-08-29 13:00:01 +00:00
|
|
|
import React from 'react';
|
|
|
|
import { storiesOf } from '@storybook/react';
|
2019-11-11 08:12:30 +00:00
|
|
|
import RowContainer from '../row-container';
|
|
|
|
import RowContent from '../row-content';
|
2019-09-07 09:16:00 +00:00
|
|
|
import Row from '../row';
|
|
|
|
import Section from '../../../.storybook/decorators/section';
|
|
|
|
import Readme from './README.md';
|
|
|
|
import withReadme from 'storybook-readme/with-readme';
|
2019-08-29 13:00:01 +00:00
|
|
|
|
2019-11-11 08:12:30 +00:00
|
|
|
const getRndString = (n) => Math.random().toString(36).substring(2, (n + 2));
|
|
|
|
|
2019-08-29 13:00:01 +00:00
|
|
|
storiesOf('Components|ContextMenu', module)
|
2019-09-07 09:16:00 +00:00
|
|
|
.addDecorator(withReadme(Readme))
|
2019-08-29 13:00:01 +00:00
|
|
|
.add('base', () => {
|
|
|
|
const array = Array.from(Array(10).keys());
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Section>
|
2019-11-11 08:12:30 +00:00
|
|
|
<RowContainer manualHeight='300px'>
|
|
|
|
{array.map((item, index) => {
|
|
|
|
return (
|
|
|
|
<Row
|
|
|
|
key={`${item + 1}`}
|
|
|
|
contextOptions={index !== 3 ? [
|
|
|
|
{ key: 1, label: getRndString(5) },
|
|
|
|
{ key: 2, label: getRndString(5) },
|
|
|
|
{ key: 3, label: getRndString(5) },
|
|
|
|
{ key: 4, label: getRndString(5) }
|
|
|
|
] : []}
|
|
|
|
>
|
|
|
|
<RowContent>
|
|
|
|
<span>{getRndString(5)}</span>
|
|
|
|
<></>
|
|
|
|
</RowContent>
|
|
|
|
</Row>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</RowContainer>
|
2019-08-29 13:00:01 +00:00
|
|
|
</Section>
|
|
|
|
);
|
|
|
|
});
|