diff --git a/example/index.html b/example/index.html index e78c471f..70650b72 100644 --- a/example/index.html +++ b/example/index.html @@ -4,11 +4,11 @@ - - Document + + react-flow example
- + \ No newline at end of file diff --git a/example/index.js b/example/index.js deleted file mode 100644 index 4dddb40f..00000000 --- a/example/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render } from 'react-dom'; -import { unstable_trace as trace } from "scheduler/tracing"; - -import SimpleGraph from './SimpleGraph'; - -trace('initial render', performance.now(), () => - render(, document.getElementById('root')) -); diff --git a/example/SimpleGraph.js b/example/scripts/ExampleGraph.js similarity index 77% rename from example/SimpleGraph.js rename to example/scripts/ExampleGraph.js index 9e078159..a769d3ea 100644 --- a/example/SimpleGraph.js +++ b/example/scripts/ExampleGraph.js @@ -1,45 +1,9 @@ import React, { PureComponent } from 'react'; -import Graph, { isEdge, removeElements, getOutgoers, Handle, MiniMap } from '../src'; -// import Graph, { isEdge, removeElements, getOutgoers, Handle, MiniMap } from '../dist/ReactGraph'; +import Graph, { isEdge, removeElements, getOutgoers, MiniMap } from '../../src'; -const SpecialNode = ({ data, styles }) => ( -
- console.log('handle onConnect', params)} - /> - -
I am special!
{data.label}
- - -
-); - -const InputNode = ({ data, styles }) => ( -
- -
{data.input}
- data.onChange(e.target.value, data)} /> - -
-); +import SpecialNode from './SpecialNode'; +import InputNode from './InputNode'; const onNodeDragStop = node => console.log('drag stop', node); @@ -54,7 +18,13 @@ class App extends PureComponent { return e; } - return { ...e, data: { ...e.data, label: `Option ${option} selected.` } }; + return { + ...e, + data: { + ...e.data, + label: `Option ${option} selected.` + } + }; })} )); } @@ -67,7 +37,13 @@ class App extends PureComponent { } if (e.id === '8') { - return { ...e, data: { ...e.data, input: input || 'write something' } }; + return { + ...e, + data: { + ...e.data, + input: input || 'write something' + } + }; } })} )); diff --git a/example/scripts/InputNode.js b/example/scripts/InputNode.js new file mode 100644 index 00000000..5ae00d54 --- /dev/null +++ b/example/scripts/InputNode.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import { Handle } from '../../src'; + +export default({ data, styles }) => ( +
+ +
{data.input}
+ data.onChange(e.target.value, data)} /> + +
+); diff --git a/example/scripts/SpecialNode.js b/example/scripts/SpecialNode.js new file mode 100644 index 00000000..26274734 --- /dev/null +++ b/example/scripts/SpecialNode.js @@ -0,0 +1,32 @@ +import React from 'react'; + +import { Handle } from '../../src'; + +export default ({ data, styles }) => { + return ( +
+ console.log('handle onConnect', params)} + /> + +
I am special!
{data.label}
+ + +
+ ); +}; diff --git a/example/scripts/index.js b/example/scripts/index.js new file mode 100644 index 00000000..01fa8864 --- /dev/null +++ b/example/scripts/index.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { render } from 'react-dom'; +import { unstable_trace as trace } from 'scheduler/tracing'; + +import ExampleGraph from './ExampleGraph'; + +trace('initial render', performance.now(), () => + render(, document.getElementById('root')) +);