react-flow/example/src/index.js at master · codeAligned/react-flow · GitHub

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
importReact,{useState}from'react';
importReactDOMfrom'react-dom';
import{BrowserRouterasRouter,Route,Switch,NavLink,withRouter}from'react-router-dom';

importOverviewfrom'./Overview';
importBasicfrom'./Basic';
importCustomNodefrom'./CustomNode';
importStressfrom'./Stress';
importInactivefrom'./Inactive';
importEmptyfrom'./Empty';
importEdgesfrom'./Edges';
importHorizontalfrom'./Horizontal';

import'./index.css';

constroutes=[{
path: '/',
component: Overview,
label: 'Overview'
},{
path: '/basic',
component: Basic,
label: 'Basic'
},{
path: '/edges',
component: Edges,
label: 'Edges'
},{
path: '/custom-node',
component: CustomNode,
label: 'CustomNode'
},{
path: '/horizontal',
component: Horizontal,
label: 'Horizontal'
},{
path: '/stress',
component: Stress,
label: 'Stress'
},{
path: '/empty',
component: Empty
},{
path: '/inactive',
component: Inactive
}];

constnavLinks=routes.filter(route=>route.label);

constSourceDisplay=withRouter(({ location })=>{
constroute=routes.find(route=>route.path===location.pathname);
constsourceLink=`https://github.com/wbkd/react-flow/tree/master/example/src/${route.label}/index.js`;

return(
<aclassName="sourcedisplay"href={sourceLink}>
{'<Source />'}
</a>
);
});

constHeader=()=>{
const[menuOpen,setMenuOpen]=useState();

return(
<header>
<aclassName="logo"href="https://github.com/wbkd/react-flow">React Flow</a>
<navclassName={menuOpen ? 'is-open' : ''}>
{navLinks.map(route=>(
<NavLinkto={route.path}key={route.label}exact>
{route.label}
</NavLink>
))}
</nav>
<buttonclassName="menu"onClick={()=>setMenuOpen(!menuOpen)}>Menu</button>
</header>
);
}

ReactDOM.render((
<RouterforceRefresh={true}>
<Header/>
<SourceDisplay/>
<Switch>
{routes.map(route=>(
<Routeexactpath={route.path}render={()=><route.component/>}key={route.path}/>
))}
</Switch>
</Router>
),document.getElementById('root'));