diff options
author | talig <talig@amdocs.com> | 2017-12-20 14:30:43 +0200 |
---|---|---|
committer | Vitaly Emporopulo <Vitaliy.Emporopulo@amdocs.com> | 2017-12-21 11:12:33 +0000 |
commit | 8e9c0653dd6c6862123c9609ae34e1206d86456e (patch) | |
tree | 5eeef00ec0677133baa439ca8d7ffd7aca4804b6 /openecomp-ui/src/nfvo-components/tree/Tree.stories.js | |
parent | 785ebcc95de3e064e843bec04ba7a209d854fc7c (diff) |
Add collaboration feature
Issue-ID: SDC-767
Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795
Signed-off-by: talig <talig@amdocs.com>
Diffstat (limited to 'openecomp-ui/src/nfvo-components/tree/Tree.stories.js')
-rw-r--r-- | openecomp-ui/src/nfvo-components/tree/Tree.stories.js | 119 |
1 files changed, 119 insertions, 0 deletions
diff --git a/openecomp-ui/src/nfvo-components/tree/Tree.stories.js b/openecomp-ui/src/nfvo-components/tree/Tree.stories.js new file mode 100644 index 0000000000..b29920b3ec --- /dev/null +++ b/openecomp-ui/src/nfvo-components/tree/Tree.stories.js @@ -0,0 +1,119 @@ +import React from 'react'; +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' + } + ] +}; +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); +}; +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> +)); |