summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/tree/Tree.stories.js
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/nfvo-components/tree/Tree.stories.js')
-rw-r--r--openecomp-ui/src/nfvo-components/tree/Tree.stories.js242
1 files changed, 132 insertions, 110 deletions
diff --git a/openecomp-ui/src/nfvo-components/tree/Tree.stories.js b/openecomp-ui/src/nfvo-components/tree/Tree.stories.js
index b29920b3ec..aca1a13402 100644
--- a/openecomp-ui/src/nfvo-components/tree/Tree.stories.js
+++ b/openecomp-ui/src/nfvo-components/tree/Tree.stories.js
@@ -1,119 +1,141 @@
import React from 'react';
-import {storiesOf} from '@kadira/storybook';
-import {withKnobs} from '@kadira/storybook-addon-knobs';
+import { storiesOf } from '@kadira/storybook';
+import { withKnobs } from '@kadira/storybook-addon-knobs';
import Tree from './Tree.jsx';
-import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
const stories = storiesOf('Version Tree', module);
stories.addDecorator(withKnobs);
const response = {
- listCount: 6,
- results: [
- {
- 'id': '123',
- 'name': '1.0',
- 'description': 'string',
- 'baseId': '',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- },
- {
- 'id': '1234',
- 'name': '1.1',
- 'description': 'string',
- 'baseId': '123',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- },
- {
- 'id': '12345',
- 'name': '2.0',
- 'description': 'string',
- 'baseId': '123',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- },
- {
- 'id': '123456',
- 'name': '3.0',
- 'description': 'string',
- 'baseId': '12345',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- },
- {
- 'id': '1234567',
- 'name': '1.2',
- 'description': 'string',
- 'baseId': '1234',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- },
- {
- 'id': '12345678',
- 'name': '2.1',
- 'description': 'string',
- 'baseId': '12345',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- },
- {
- 'id': '123456789',
- 'name': '4.0',
- 'description': 'string',
- 'baseId': '123456',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- },
- {
- 'id': '12345678910',
- 'name': '3.1',
- 'description': 'string',
- 'baseId': '123456',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- }
- ]
+ listCount: 6,
+ results: [
+ {
+ id: '123',
+ name: '1.0',
+ description: 'string',
+ baseId: '',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ },
+ {
+ id: '1234',
+ name: '1.1',
+ description: 'string',
+ baseId: '123',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ },
+ {
+ id: '12345',
+ name: '2.0',
+ description: 'string',
+ baseId: '123',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ },
+ {
+ id: '123456',
+ name: '3.0',
+ description: 'string',
+ baseId: '12345',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ },
+ {
+ id: '1234567',
+ name: '1.2',
+ description: 'string',
+ baseId: '1234',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ },
+ {
+ id: '12345678',
+ name: '2.1',
+ description: 'string',
+ baseId: '12345',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ },
+ {
+ id: '123456789',
+ name: '4.0',
+ description: 'string',
+ baseId: '123456',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ },
+ {
+ id: '12345678910',
+ name: '3.1',
+ description: 'string',
+ baseId: '123456',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ }
+ ]
};
-const divStyle = { width: '200px', borderStyle: 'solid', borderColor: 'black', border: '1px solid black'};
-const tree = response.results.map(item => ({id: item.id, name: item.name, parent: item.baseId}));
-const nodeClickHandler = function (node) {
- window.alert(node.name);
+const divStyle = {
+ width: '200px',
+ borderStyle: 'solid',
+ borderColor: 'black',
+ border: '1px solid black'
};
-stories.add('Classic Version Tree', () => (
- <div>
- <Tree nodes={tree} onNodeClick={nodeClickHandler} selectedNodeId={'1234'}/>
- </div>
-)).add('Single Version Tree', () => (
- <div>
- <Tree nodes={[tree[0]]} onNodeClick={nodeClickHandler}/>
- </div>
-)).add('Single Path Version Tree', () => (
- <div>
- <Tree nodes={[tree[0], tree[1]]} onNodeClick={nodeClickHandler}/>
- </div>
-)).add('Empty Tree', () => (
- <div>
- <Tree nodes={[]}/>
- </div>
-)).add('Add Tree in Version Page Frame', () => (
- <div style={divStyle}>
- Tree wider than frame<br/><br/><br/>
- <Tree
- name={'versions-tree'}
- width={200}
- nodes={tree}
- onRenderedBeyondWidth={() => {console.log('rendered beyond width')}}
- allowScaleWidth={false}
- onNodeClick={nodeClickHandler}/>
- </div>
-));
+const tree = response.results.map(item => ({
+ id: item.id,
+ name: item.name,
+ parent: item.baseId
+}));
+const nodeClickHandler = function(node) {
+ window.alert(node.name);
+};
+stories
+ .add('Classic Version Tree', () => (
+ <div>
+ <Tree
+ nodes={tree}
+ onNodeClick={nodeClickHandler}
+ selectedNodeId={'1234'}
+ />
+ </div>
+ ))
+ .add('Single Version Tree', () => (
+ <div>
+ <Tree nodes={[tree[0]]} onNodeClick={nodeClickHandler} />
+ </div>
+ ))
+ .add('Single Path Version Tree', () => (
+ <div>
+ <Tree nodes={[tree[0], tree[1]]} onNodeClick={nodeClickHandler} />
+ </div>
+ ))
+ .add('Empty Tree', () => (
+ <div>
+ <Tree nodes={[]} />
+ </div>
+ ))
+ .add('Add Tree in Version Page Frame', () => (
+ <div style={divStyle}>
+ Tree wider than frame<br />
+ <br />
+ <br />
+ <Tree
+ name={'versions-tree'}
+ width={200}
+ nodes={tree}
+ onRenderedBeyondWidth={() => {
+ console.log('rendered beyond width');
+ }}
+ allowScaleWidth={false}
+ onNodeClick={nodeClickHandler}
+ />
+ </div>
+ ));