From e0ea040c1bfc0ca82ef7b6d8b9cf0de4e6d96dc8 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 3 Jun 2020 21:35:19 +0200 Subject: [PATCH] feat(example): add sidebar to provider example --- .prettierignore | 1 - example/src/Provider/Sidebar.js | 25 +++++++ example/src/Provider/index.js | 34 ++++++--- example/src/Provider/provider.css | 32 ++++++++ example/src/index.js | 117 +++++++++++++++++------------- 5 files changed, 145 insertions(+), 64 deletions(-) create mode 100644 example/src/Provider/Sidebar.js create mode 100644 example/src/Provider/provider.css diff --git a/.prettierignore b/.prettierignore index e97773a6..2e1fa2d5 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1 @@ -example/src *.md \ No newline at end of file diff --git a/example/src/Provider/Sidebar.js b/example/src/Provider/Sidebar.js new file mode 100644 index 00000000..41dc0891 --- /dev/null +++ b/example/src/Provider/Sidebar.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { useStoreState } from 'react-flow-renderer'; + +export default () => { + const nodes = useStoreState((store) => store.nodes); + const transform = useStoreState((store) => store.transform); + + return ( + + ); +}; diff --git a/example/src/Provider/index.js b/example/src/Provider/index.js index be1c2054..63f16334 100644 --- a/example/src/Provider/index.js +++ b/example/src/Provider/index.js @@ -1,8 +1,11 @@ import React, { useState } from 'react'; +import ReactFlow, { ReactFlowProvider, addEdge, removeElements } from 'react-flow-renderer'; -import ReactFlow, { addEdge, ReactFlowProvider } from 'react-flow-renderer'; +import Sidebar from './Sidebar'; -const onElementClick = element => console.log('click', element); +import './provider.css'; + +const onElementClick = (element) => console.log('click', element); const initialElements = [ { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }, @@ -10,22 +13,29 @@ const initialElements = [ { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } }, { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } }, { id: 'e1-2', source: '1', target: '2', animated: true }, - { id: 'e1-3', source: '1', target: '3' } + { id: 'e1-3', source: '1', target: '3' }, ]; const ProviderFlow = () => { const [elements, setElements] = useState(initialElements); - const onConnect = (params) => setElements(els => addEdge(params, els)); + const onConnect = (params) => setElements((els) => addEdge(params, els)); + const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els)); return ( - - - +
+ + +
+ +
+ +
); -} +}; export default ProviderFlow; diff --git a/example/src/Provider/provider.css b/example/src/Provider/provider.css new file mode 100644 index 00000000..ac199bab --- /dev/null +++ b/example/src/Provider/provider.css @@ -0,0 +1,32 @@ +.providerflow { + display: flex; + height: 100%; +} + +.providerflow aside { + width: 20%; + max-width: 250px; + flex-grow: 1; + border-right: 1px solid #eee; + padding: 10px; + font-size: 12px; + background: #fcfcfc; +} + +.providerflow aside .description { + margin-bottom: 10px; +} + +.providerflow aside .title { + font-weight: 700; + margin-bottom: 5px; +} + +.providerflow aside .transform { + margin-bottom: 20px; +} + +.providerflow .reactflow-wrapper { + flex-grow: 1; + height: 100%; +} diff --git a/example/src/index.js b/example/src/index.js index ff0f52a8..d03a5e12 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -15,54 +15,65 @@ import Provider from './Provider'; import './index.css'; -const routes = [{ - path: '/', - component: Overview, - label: 'Overview' -}, { - path: '/provider', - component: Provider, - label: 'Provider' -}, { - path: '/edges', - component: Edges, - label: 'Edges' -}, { - path: '/custom-node', - component: CustomNode, - label: 'CustomNode' -}, { - path: '/horizontal', - component: Horizontal, - label: 'Horizontal' -}, { - path: '/validation', - component: Validation, - label: 'Validation' -}, { - path: '/stress', - component: Stress, - label: 'Stress' -}, { - path: '/basic', - component: Basic -}, { - path: '/empty', - component: Empty -}, { - path: '/inactive', - component: Inactive -}]; +const routes = [ + { + path: '/', + component: Overview, + label: 'Overview', + }, + { + path: '/edges', + component: Edges, + label: 'Edges', + }, + { + path: '/custom-node', + component: CustomNode, + label: 'CustomNode', + }, + { + path: '/horizontal', + component: Horizontal, + label: 'Horizontal', + }, + { + path: '/validation', + component: Validation, + label: 'Validation', + }, + { + path: '/provider', + component: Provider, + label: 'Provider', + }, + { + path: '/stress', + component: Stress, + label: 'Stress', + }, + { + path: '/basic', + component: Basic, + }, + { + path: '/empty', + component: Empty, + }, + { + path: '/inactive', + component: Inactive, + }, +]; -const navLinks = routes.filter(route => route.label); +const navLinks = routes.filter((route) => route.label); const SourceDisplay = withRouter(({ location }) => { - const route = routes.find(route => route.path === location.pathname); + 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 ( - {''} + {''} ); }); @@ -70,30 +81,34 @@ const SourceDisplay = withRouter(({ location }) => { const Header = () => { const [menuOpen, setMenuOpen] = useState(); - return ( + return (
- React Flow + + React Flow + - +
); -} +}; -ReactDOM.render(( +ReactDOM.render(
- {routes.map(route => ( + {routes.map((route) => ( } key={route.path} /> ))} - -), document.getElementById('root')); - + , + document.getElementById('root') +);