feat(examples): add source link

xyflow · May 4, 2020 · 1627bba · 1627bba
1 parent bac0ed5
commit 1627bba
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 8 deletions.
diff --git a/example/src/CustomNode/index.js b/example/src/CustomNode/index.js
@@ -10,7 +10,7 @@ const onLoad = (graph) => {
   console.log('graph loaded:', graph);
 };
 
-const initBgColor = '#8888e8';
+const initBgColor = '#f0e742';
 
 const CustomNodeGraph = () => {
   const [elements, setElements] = useState([]);

diff --git a/example/src/Empty/index.js b/example/src/Empty/index.js
@@ -37,7 +37,7 @@ const EmptyGraph = () => {
     <button
       type="button"
       onClick={addRandomNode}
-      style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
+      style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}
     >
       add node
     </button>

diff --git a/example/src/Inactive/index.js b/example/src/Inactive/index.js
@@ -27,7 +27,7 @@ const EmptyGraph = () => {
       <MiniMap />
       <Controls />
       <div
-        style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
+        style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}
       >
         <label>
           interactive

diff --git a/example/src/Rich/index.js b/example/src/Rich/index.js
@@ -69,7 +69,7 @@ const RichGraph = () => {
       <button
         type="button"
         onClick={addRandomNode}
-        style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
+        style={{ position: 'absolute', left: 15, top: 10, zIndex: 4 }}
       >
         add node
       </button>

diff --git a/example/src/index.css b/example/src/index.css
@@ -25,6 +25,18 @@ header {
   font-weight: 700;
 }
 
+header a {
+  text-decoration: none;
+}
+
+header a, header a:focus, header a:active, header a:visited {
+  color: #111;
+}
+
+header a:hover {
+  color: #333;
+}
+
 header nav {
   font-weight: 400;
   margin-left: auto;
@@ -41,7 +53,7 @@ nav a {
   position: relative;
 }
 
-nav a, nav a:focus, nav a:active {
+nav a, nav a:focus, nav a:active, nav a:visited {
   color: #fff;
 }
 
@@ -60,4 +72,21 @@ nav a.active:before {
   left:0;
   top:50%;
   transform: translateY(-50%);
+}
+
+.sourcedisplay {
+  position: absolute;
+  top: 45px;
+  right: 15px;
+  z-index: 4;
+  text-decoration: none;
+  font-size: 12px;
+}
+
+.sourcedisplay, .sourcedisplay:focus, .sourcedisplay:active, .sourcedisplay:visited {
+  color: #777;
+}
+
+.sourcedisplay:hover {
+  color: #111;
 }
diff --git a/example/src/index.js b/example/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Route, Switch, NavLink } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch, NavLink, withRouter } from 'react-router-dom';
 
 import Rich from './Rich';
 import Basic from './Basic';
@@ -26,7 +26,7 @@ const routes = [{
 }, {
   path: '/stress',
   component: Stress,
-  label: 'StressTest'
+  label: 'Stress'
 }, {
   path: '/empty',
   component: Empty
@@ -37,10 +37,21 @@ const routes = [{
 
 const navLinks = routes.filter(route => route.label);
 
+const SourceDisplay = withRouter(({ location }) => {
+  const route = routes.find(route => route.path === location.pathname);
+  const sourceLink = `https://github.com/wbkd/react-flow/tree/master/example/src/${route.label}/index.js`;
+
+  return (
+    <a className="sourcedisplay" href={sourceLink}>
+     {'<Source />'}
+    </a>
+  );
+});
+
 ReactDOM.render((
   <Router forceRefresh={true}>
     <header>
-      <div>React Flow Examples</div>
+      <a href="https://github.com/wbkd/react-flow">React Flow</a>
       <nav>
         {navLinks.map(route => (
           <NavLink to={route.path} key={route.label} exact>
@@ -49,6 +60,7 @@ ReactDOM.render((
         ))}
       </nav>
     </header>
+    <SourceDisplay />
     <Switch>
       {routes.map(route => (
         <Route exact path={route.path} render={() => <route.component />} key={route.path} />