openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js

   1 import React from 'react';
   2 import {storiesOf, action} from '@kadira/storybook';
   3 import ListEditorView from './ListEditorView.jsx';
   4 import ListEditorItemView from './ListEditorItemView.jsx';
   5 import ListEditorItemField from './ListEditorItemViewField.jsx';
   6 import {text, number} from '@kadira/storybook-addon-knobs';
   7 import {withKnobs} from '@kadira/storybook-addon-knobs';
   8
   9 function makeChildren({onEdit = false, onDelete = false} = {}) {
  10     return (
  11         [...Array(number('Items', 2)).keys()].map(index => (
  12             <ListEditorItemView
  13                 key={index}
  14                 onEdit={onEdit ? onEdit : undefined}
  15                 onDelete={onDelete ? onDelete : undefined}>
  16                                 <ListEditorItemField>
  17                     <div>{text('field 1', 'Lorum Ipsum')}</div>
  18                                 </ListEditorItemField>
  19                                 <ListEditorItemField>
  20                     <div>{text('field 2', 'Lorum Ipsum')}</div>
  21                                 </ListEditorItemField>
  22             </ListEditorItemView>)
  23         )
  24     );
  25 }
  26
  27 const stories = storiesOf('ListEditor', module);
  28 stories.addDecorator(withKnobs);
  29
  30 stories
  31     .add('regular', () => (
  32         <ListEditorView title='List Editor'>
  33         {makeChildren()}
  34         </ListEditorView>
  35     ))
  36     .add('two columns', () => (
  37         <ListEditorView title='List Editor' twoColumns>
  38             {makeChildren()}
  39         </ListEditorView>
  40     ))
  41     .add('with add', () => (
  42         <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
  43         {makeChildren()}
  44         </ListEditorView>
  45     ))
  46     .add('with delete', () => (
  47         <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
  48         {makeChildren({onDelete: action('onDelete')})}
  49         </ListEditorView>
  50     ))
  51     .add('with edit', () => (
  52         <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
  53         {makeChildren({onEdit: action('onEdit')})}
  54         </ListEditorView>
  55     ))
  56     .add('with edit and delete', () => (
  57         <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
  58         {makeChildren({onDelete: action('onDelete'), onEdit: action('onEdit')})}
  59         </ListEditorView>
  60     ));