openecomp-ui/src/nfvo-components/tree/Tree.stories.js

   1 import React from 'react';
   2 import {storiesOf} from '@kadira/storybook';
   3 import {withKnobs} from '@kadira/storybook-addon-knobs';
   4 import Tree from './Tree.jsx';
   5 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
   6
   7 const stories = storiesOf('Version Tree', module);
   8 stories.addDecorator(withKnobs);
   9
  10 const response = {
  11         listCount: 6,
  12         results: [
  13                 {
  14                         'id': '123',
  15                         'name': '1.0',
  16                         'description': 'string',
  17                         'baseId': '',
  18                         'status': 'Draft',
  19                         'creationTime': '2017-06-08T08:55:37.831Z',
  20                         'modificationTime': '2017-06-08T08:55:37.831Z'
  21                 },
  22                 {
  23                         'id': '1234',
  24                         'name': '1.1',
  25                         'description': 'string',
  26                         'baseId': '123',
  27                         'status': 'Draft',
  28                         'creationTime': '2017-06-08T08:55:37.831Z',
  29                         'modificationTime': '2017-06-08T08:55:37.831Z'
  30                 },
  31                 {
  32                         'id': '12345',
  33                         'name': '2.0',
  34                         'description': 'string',
  35                         'baseId': '123',
  36                         'status': 'Draft',
  37                         'creationTime': '2017-06-08T08:55:37.831Z',
  38                         'modificationTime': '2017-06-08T08:55:37.831Z'
  39                 },
  40                 {
  41                         'id': '123456',
  42                         'name': '3.0',
  43                         'description': 'string',
  44                         'baseId': '12345',
  45                         'status': 'Draft',
  46                         'creationTime': '2017-06-08T08:55:37.831Z',
  47                         'modificationTime': '2017-06-08T08:55:37.831Z'
  48                 },
  49                 {
  50                         'id': '1234567',
  51                         'name': '1.2',
  52                         'description': 'string',
  53                         'baseId': '1234',
  54                         'status': 'Draft',
  55                         'creationTime': '2017-06-08T08:55:37.831Z',
  56                         'modificationTime': '2017-06-08T08:55:37.831Z'
  57                 },
  58                 {
  59                         'id': '12345678',
  60                         'name': '2.1',
  61                         'description': 'string',
  62                         'baseId': '12345',
  63                         'status': 'Draft',
  64                         'creationTime': '2017-06-08T08:55:37.831Z',
  65                         'modificationTime': '2017-06-08T08:55:37.831Z'
  66                 },
  67                 {
  68                         'id': '123456789',
  69                         'name': '4.0',
  70                         'description': 'string',
  71                         'baseId': '123456',
  72                         'status': 'Draft',
  73                         'creationTime': '2017-06-08T08:55:37.831Z',
  74                         'modificationTime': '2017-06-08T08:55:37.831Z'
  75                 },
  76                 {
  77                         'id': '12345678910',
  78                         'name': '3.1',
  79                         'description': 'string',
  80                         'baseId': '123456',
  81                         'status': 'Draft',
  82                         'creationTime': '2017-06-08T08:55:37.831Z',
  83                         'modificationTime': '2017-06-08T08:55:37.831Z'
  84                 }
  85         ]
  86 };
  87 const divStyle = { width: '200px', borderStyle: 'solid', borderColor: 'black', border: '1px solid black'};
  88 const tree = response.results.map(item => ({id: item.id, name: item.name, parent: item.baseId}));
  89 const nodeClickHandler = function (node) {
  90         window.alert(node.name);
  91 };
  92 stories.add('Classic Version Tree', () => (
  93         <div>
  94                 <Tree nodes={tree} onNodeClick={nodeClickHandler} selectedNodeId={'1234'}/>
  95         </div>
  96 )).add('Single Version Tree', () => (
  97         <div>
  98                 <Tree nodes={[tree[0]]} onNodeClick={nodeClickHandler}/>
  99         </div>
 100 )).add('Single Path Version Tree', () => (
 101         <div>
 102                 <Tree nodes={[tree[0], tree[1]]} onNodeClick={nodeClickHandler}/>
 103         </div>
 104 )).add('Empty Tree', () => (
 105         <div>
 106                 <Tree nodes={[]}/>
 107         </div>
 108 )).add('Add Tree in Version Page Frame', () => (
 109         <div style={divStyle}>
 110                 Tree wider than frame<br/><br/><br/>
 111                 <Tree
 112                         name={'versions-tree'}
 113                         width={200}
 114                         nodes={tree}
 115                         onRenderedBeyondWidth={() => {console.log('rendered beyond width')}}
 116                         allowScaleWidth={false}
 117                         onNodeClick={nodeClickHandler}/>
 118         </div>
 119 ));