1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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>
));
|
