chore(examples): cleanup
This commit is contained in:
moklick
@@ -0,0 +1,34 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
|
||||
|
||||
import routes from './routes';
|
||||
|
||||
export default function Header() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [currentPath, setCurrentPath] = useState(location.pathname);
|
||||
|
||||
useEffect(() => {
|
||||
const name = routes.find((route) => route.path === currentPath)?.name;
|
||||
document.title = `React Flow Examples${name ? ' - ' + name : ''}`;
|
||||
navigate(currentPath);
|
||||
}, [currentPath]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<a className="logo" href="https://github.com/xyflow/xyflow">
|
||||
React Flow Dev
|
||||
</a>
|
||||
<select value={currentPath} onChange={(event) => setCurrentPath(event.target.value)}>
|
||||
{routes.map((route) => (
|
||||
<option value={route.path} key={route.path}>
|
||||
{route.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</header>
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,339 +1,21 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { BrowserRouter, Navigate, Outlet, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
|
||||
|
||||
import GenericTests from '../generic-tests';
|
||||
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
|
||||
|
||||
import routes from './routes';
|
||||
import GenericTestRoutes from '../generic-tests';
|
||||
import Basic from '../examples/Basic';
|
||||
import Backgrounds from '../examples/Backgrounds';
|
||||
import ControlledUncontrolled from '../examples/ControlledUncontrolled';
|
||||
import ControlledViewport from '../examples/ControlledViewport';
|
||||
import CustomConnectionLine from '../examples/CustomConnectionLine';
|
||||
import CustomMiniMapNode from '../examples/CustomMiniMapNode';
|
||||
import CustomNode from '../examples/CustomNode';
|
||||
import DefaultNodes from '../examples/DefaultNodes';
|
||||
import DragHandle from '../examples/DragHandle';
|
||||
import DragNDrop from '../examples/DragNDrop';
|
||||
import EasyConnect from '../examples/EasyConnect';
|
||||
import Edges from '../examples/Edges';
|
||||
import EdgeRenderer from '../examples/EdgeRenderer';
|
||||
import EdgeTypes from '../examples/EdgeTypes';
|
||||
import Empty from '../examples/Empty';
|
||||
import Figma from '../examples/Figma';
|
||||
import FloatingEdges from '../examples/FloatingEdges';
|
||||
import Hidden from '../examples/Hidden';
|
||||
import Interaction from '../examples/Interaction';
|
||||
import Intersection from '../examples/Intersection';
|
||||
import Layouting from '../examples/Layouting';
|
||||
import MultiFlows from '../examples/MultiFlows';
|
||||
import NestedNodes from '../examples/NestedNodes';
|
||||
import NodeResizer from '../examples/NodeResizer';
|
||||
import NodeTypeChange from '../examples/NodeTypeChange';
|
||||
import NodeTypesObjectChange from '../examples/NodeTypesObjectChange';
|
||||
import Overview from '../examples/Overview';
|
||||
import Provider from '../examples/Provider';
|
||||
import SaveRestore from '../examples/SaveRestore';
|
||||
import Stress from '../examples/Stress';
|
||||
import Subflow from '../examples/Subflow';
|
||||
import SwitchFlow from '../examples/Switch';
|
||||
import TouchDevice from '../examples/TouchDevice';
|
||||
import Undirectional from '../examples/Undirectional';
|
||||
import UpdatableEdge from '../examples/UpdatableEdge';
|
||||
import UpdateNode from '../examples/UpdateNode';
|
||||
import UseUpdateNodeInternals from '../examples/UseUpdateNodeInternals';
|
||||
import UseReactFlow from '../examples/UseReactFlow';
|
||||
import Validation from '../examples/Validation';
|
||||
import UseKeyPress from '../examples/UseKeyPress';
|
||||
import EdgeRouting from '../examples/EdgeRouting';
|
||||
import CancelConnection from '../examples/CancelConnection';
|
||||
import InteractiveMinimap from '../examples/InteractiveMinimap';
|
||||
import UseOnSelectionChange from '../examples/UseOnSelectionChange';
|
||||
import NodeToolbar from '../examples/NodeToolbar';
|
||||
import useNodesInitialized from '../examples/UseNodesInit';
|
||||
import Header from './header';
|
||||
|
||||
interface IRoute {
|
||||
name: string;
|
||||
path: string;
|
||||
component: React.ComponentType;
|
||||
}
|
||||
|
||||
const routes: IRoute[] = [
|
||||
{
|
||||
name: 'Basic',
|
||||
path: 'basic',
|
||||
component: Basic,
|
||||
},
|
||||
{
|
||||
name: 'Backgrounds',
|
||||
path: 'backgrounds',
|
||||
component: Backgrounds,
|
||||
},
|
||||
{
|
||||
name: 'Cancel Connection',
|
||||
path: 'cancel-connection',
|
||||
component: CancelConnection,
|
||||
},
|
||||
{
|
||||
name: 'Controlled/Uncontrolled',
|
||||
path: 'controlled-uncontrolled',
|
||||
component: ControlledUncontrolled,
|
||||
},
|
||||
{
|
||||
name: 'Controlled Viewport',
|
||||
path: 'controlled-viewport',
|
||||
component: ControlledViewport,
|
||||
},
|
||||
{
|
||||
name: 'Custom Connection Line',
|
||||
path: 'custom-connectionline',
|
||||
component: CustomConnectionLine,
|
||||
},
|
||||
{
|
||||
name: 'Custom Minimap Node',
|
||||
path: 'custom-minimap-node',
|
||||
component: CustomMiniMapNode,
|
||||
},
|
||||
{
|
||||
name: 'Custom Node',
|
||||
path: 'custom-node',
|
||||
component: CustomNode,
|
||||
},
|
||||
{
|
||||
name: 'Default Nodes',
|
||||
path: 'default-nodes',
|
||||
component: DefaultNodes,
|
||||
},
|
||||
{
|
||||
name: 'Drag Handle',
|
||||
path: 'draghandle',
|
||||
component: DragHandle,
|
||||
},
|
||||
{
|
||||
name: 'Drag and Drop',
|
||||
path: 'dragndrop',
|
||||
component: DragNDrop,
|
||||
},
|
||||
{
|
||||
name: 'EasyConnect',
|
||||
path: 'easy-connect',
|
||||
component: EasyConnect,
|
||||
},
|
||||
{
|
||||
name: 'Edges',
|
||||
path: 'edges',
|
||||
component: Edges,
|
||||
},
|
||||
{
|
||||
name: 'Edge Renderer',
|
||||
path: 'edge-renderer',
|
||||
component: EdgeRenderer,
|
||||
},
|
||||
{
|
||||
name: 'Edge Types',
|
||||
path: 'edge-types',
|
||||
component: EdgeTypes,
|
||||
},
|
||||
{
|
||||
name: 'Edge Routing',
|
||||
path: 'edge-routing',
|
||||
component: EdgeRouting,
|
||||
},
|
||||
{
|
||||
name: 'Empty',
|
||||
path: 'empty',
|
||||
component: Empty,
|
||||
},
|
||||
{
|
||||
name: 'Figma',
|
||||
path: 'figma',
|
||||
component: Figma,
|
||||
},
|
||||
{
|
||||
name: 'Floating Edges',
|
||||
path: 'floating-edges',
|
||||
component: FloatingEdges,
|
||||
},
|
||||
{
|
||||
name: 'Hidden',
|
||||
path: 'hidden',
|
||||
component: Hidden,
|
||||
},
|
||||
{
|
||||
name: 'Interaction',
|
||||
path: 'interaction',
|
||||
component: Interaction,
|
||||
},
|
||||
{
|
||||
name: 'Intersection',
|
||||
path: 'intersection',
|
||||
component: Intersection,
|
||||
},
|
||||
{
|
||||
name: 'Interactive Minimap',
|
||||
path: 'interactive-minimap',
|
||||
component: InteractiveMinimap,
|
||||
},
|
||||
{
|
||||
name: 'Layouting',
|
||||
path: 'layouting',
|
||||
component: Layouting,
|
||||
},
|
||||
{
|
||||
name: 'Multi Flows',
|
||||
path: 'multiflows',
|
||||
component: MultiFlows,
|
||||
},
|
||||
{
|
||||
name: 'Nested Nodes',
|
||||
path: 'nested-nodes',
|
||||
component: NestedNodes,
|
||||
},
|
||||
{
|
||||
name: 'Node Type Change',
|
||||
path: 'nodetype-change',
|
||||
component: NodeTypeChange,
|
||||
},
|
||||
{
|
||||
name: 'nodeTypes Object Change',
|
||||
path: 'nodetypesobject-change',
|
||||
component: NodeTypesObjectChange,
|
||||
},
|
||||
{
|
||||
name: 'NodeToolbar',
|
||||
path: 'node-toolbar',
|
||||
component: NodeToolbar,
|
||||
},
|
||||
{
|
||||
name: 'NodeResizer',
|
||||
path: 'node-resizer',
|
||||
component: NodeResizer,
|
||||
},
|
||||
{
|
||||
name: 'Overview',
|
||||
path: 'overview',
|
||||
component: Overview,
|
||||
},
|
||||
{
|
||||
name: 'Provider',
|
||||
path: 'provider',
|
||||
component: Provider,
|
||||
},
|
||||
{
|
||||
name: 'Save/Restore',
|
||||
path: 'save-restore',
|
||||
component: SaveRestore,
|
||||
},
|
||||
{
|
||||
name: 'Stress',
|
||||
path: 'stress',
|
||||
component: Stress,
|
||||
},
|
||||
{
|
||||
name: 'Subflow',
|
||||
path: 'subflow',
|
||||
component: Subflow,
|
||||
},
|
||||
{
|
||||
name: 'Switch Flow',
|
||||
path: 'switch',
|
||||
component: SwitchFlow,
|
||||
},
|
||||
{
|
||||
name: 'Touch Device',
|
||||
path: 'touch-device',
|
||||
component: TouchDevice,
|
||||
},
|
||||
{
|
||||
name: 'Undirectional',
|
||||
path: 'undirectional',
|
||||
component: Undirectional,
|
||||
},
|
||||
{
|
||||
name: 'Updatable Edge',
|
||||
path: 'updatable-edge',
|
||||
component: UpdatableEdge,
|
||||
},
|
||||
{
|
||||
name: 'Update Node',
|
||||
path: 'update-node',
|
||||
component: UpdateNode,
|
||||
},
|
||||
{
|
||||
name: 'useNodesInitialized',
|
||||
path: 'use-nodes-initialized',
|
||||
component: useNodesInitialized,
|
||||
},
|
||||
{
|
||||
name: 'useOnSelectionChange',
|
||||
path: 'use-on-selection-change',
|
||||
component: UseOnSelectionChange,
|
||||
},
|
||||
{
|
||||
name: 'useReactFlow',
|
||||
path: 'usereactflow',
|
||||
component: UseReactFlow,
|
||||
},
|
||||
{
|
||||
name: 'useUpdateNodeInternals',
|
||||
path: 'useupdatenodeinternals',
|
||||
component: UseUpdateNodeInternals,
|
||||
},
|
||||
{
|
||||
name: 'Validation',
|
||||
path: 'validation',
|
||||
component: Validation,
|
||||
},
|
||||
{
|
||||
name: 'useKeyPress',
|
||||
path: 'use-key-press',
|
||||
component: UseKeyPress,
|
||||
},
|
||||
];
|
||||
|
||||
const Header = () => {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [currentPath, setCurrentPath] = useState(location.pathname);
|
||||
|
||||
useEffect(() => {
|
||||
const name = routes.find((route) => route.path === currentPath)?.name;
|
||||
document.title = `React Flow Examples${name ? ' - ' + name : ''}`;
|
||||
navigate(currentPath);
|
||||
}, [currentPath]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<a className="logo" href="https://github.com/wbkd/react-flow">
|
||||
React Flow Dev
|
||||
</a>
|
||||
<select value={currentPath} onChange={(event) => setCurrentPath(event.target.value)}>
|
||||
{routes.map((route) => (
|
||||
<option value={route.path} key={route.path}>
|
||||
{route.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</header>
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/examples" />} />
|
||||
<Route path="examples" element={<Header />}>
|
||||
<Route index element={<Basic />} />
|
||||
{routes.map((route) => (
|
||||
<Route path={route.path} key={route.path} element={<route.component />} />
|
||||
))}
|
||||
</Route>
|
||||
<Route path="tests/generic/*" element={<GenericTests />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default () => (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/examples" />} />
|
||||
<Route path="examples" element={<Header />}>
|
||||
<Route index element={<Basic />} />
|
||||
{routes.map((route) => (
|
||||
<Route path={route.path} key={route.path} element={<route.component />} />
|
||||
))}
|
||||
</Route>
|
||||
<Route path="tests/generic/*" element={<GenericTestRoutes />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,287 @@
|
||||
import Basic from '../examples/Basic';
|
||||
import Backgrounds from '../examples/Backgrounds';
|
||||
import ControlledUncontrolled from '../examples/ControlledUncontrolled';
|
||||
import ControlledViewport from '../examples/ControlledViewport';
|
||||
import CustomConnectionLine from '../examples/CustomConnectionLine';
|
||||
import CustomMiniMapNode from '../examples/CustomMiniMapNode';
|
||||
import CustomNode from '../examples/CustomNode';
|
||||
import DefaultNodes from '../examples/DefaultNodes';
|
||||
import DragHandle from '../examples/DragHandle';
|
||||
import DragNDrop from '../examples/DragNDrop';
|
||||
import EasyConnect from '../examples/EasyConnect';
|
||||
import Edges from '../examples/Edges';
|
||||
import EdgeRenderer from '../examples/EdgeRenderer';
|
||||
import EdgeTypes from '../examples/EdgeTypes';
|
||||
import Empty from '../examples/Empty';
|
||||
import Figma from '../examples/Figma';
|
||||
import FloatingEdges from '../examples/FloatingEdges';
|
||||
import Hidden from '../examples/Hidden';
|
||||
import Interaction from '../examples/Interaction';
|
||||
import Intersection from '../examples/Intersection';
|
||||
import Layouting from '../examples/Layouting';
|
||||
import MultiFlows from '../examples/MultiFlows';
|
||||
import NestedNodes from '../examples/NestedNodes';
|
||||
import NodeResizer from '../examples/NodeResizer';
|
||||
import NodeTypeChange from '../examples/NodeTypeChange';
|
||||
import NodeTypesObjectChange from '../examples/NodeTypesObjectChange';
|
||||
import Overview from '../examples/Overview';
|
||||
import Provider from '../examples/Provider';
|
||||
import SaveRestore from '../examples/SaveRestore';
|
||||
import Stress from '../examples/Stress';
|
||||
import Subflow from '../examples/Subflow';
|
||||
import SwitchFlow from '../examples/Switch';
|
||||
import TouchDevice from '../examples/TouchDevice';
|
||||
import Undirectional from '../examples/Undirectional';
|
||||
import UpdatableEdge from '../examples/UpdatableEdge';
|
||||
import UpdateNode from '../examples/UpdateNode';
|
||||
import UseUpdateNodeInternals from '../examples/UseUpdateNodeInternals';
|
||||
import UseReactFlow from '../examples/UseReactFlow';
|
||||
import Validation from '../examples/Validation';
|
||||
import UseKeyPress from '../examples/UseKeyPress';
|
||||
import EdgeRouting from '../examples/EdgeRouting';
|
||||
import CancelConnection from '../examples/CancelConnection';
|
||||
import InteractiveMinimap from '../examples/InteractiveMinimap';
|
||||
import UseOnSelectionChange from '../examples/UseOnSelectionChange';
|
||||
import NodeToolbar from '../examples/NodeToolbar';
|
||||
import useNodesInitialized from '../examples/UseNodesInit';
|
||||
|
||||
export interface IRoute {
|
||||
name: string;
|
||||
path: string;
|
||||
component: React.ComponentType;
|
||||
}
|
||||
|
||||
const routes: IRoute[] = [
|
||||
{
|
||||
name: 'Basic',
|
||||
path: 'basic',
|
||||
component: Basic,
|
||||
},
|
||||
{
|
||||
name: 'Backgrounds',
|
||||
path: 'backgrounds',
|
||||
component: Backgrounds,
|
||||
},
|
||||
{
|
||||
name: 'Cancel Connection',
|
||||
path: 'cancel-connection',
|
||||
component: CancelConnection,
|
||||
},
|
||||
{
|
||||
name: 'Controlled/Uncontrolled',
|
||||
path: 'controlled-uncontrolled',
|
||||
component: ControlledUncontrolled,
|
||||
},
|
||||
{
|
||||
name: 'Controlled Viewport',
|
||||
path: 'controlled-viewport',
|
||||
component: ControlledViewport,
|
||||
},
|
||||
{
|
||||
name: 'Custom Connection Line',
|
||||
path: 'custom-connectionline',
|
||||
component: CustomConnectionLine,
|
||||
},
|
||||
{
|
||||
name: 'Custom Minimap Node',
|
||||
path: 'custom-minimap-node',
|
||||
component: CustomMiniMapNode,
|
||||
},
|
||||
{
|
||||
name: 'Custom Node',
|
||||
path: 'custom-node',
|
||||
component: CustomNode,
|
||||
},
|
||||
{
|
||||
name: 'Default Nodes',
|
||||
path: 'default-nodes',
|
||||
component: DefaultNodes,
|
||||
},
|
||||
{
|
||||
name: 'Drag Handle',
|
||||
path: 'draghandle',
|
||||
component: DragHandle,
|
||||
},
|
||||
{
|
||||
name: 'Drag and Drop',
|
||||
path: 'dragndrop',
|
||||
component: DragNDrop,
|
||||
},
|
||||
{
|
||||
name: 'EasyConnect',
|
||||
path: 'easy-connect',
|
||||
component: EasyConnect,
|
||||
},
|
||||
{
|
||||
name: 'Edges',
|
||||
path: 'edges',
|
||||
component: Edges,
|
||||
},
|
||||
{
|
||||
name: 'Edge Renderer',
|
||||
path: 'edge-renderer',
|
||||
component: EdgeRenderer,
|
||||
},
|
||||
{
|
||||
name: 'Edge Types',
|
||||
path: 'edge-types',
|
||||
component: EdgeTypes,
|
||||
},
|
||||
{
|
||||
name: 'Edge Routing',
|
||||
path: 'edge-routing',
|
||||
component: EdgeRouting,
|
||||
},
|
||||
{
|
||||
name: 'Empty',
|
||||
path: 'empty',
|
||||
component: Empty,
|
||||
},
|
||||
{
|
||||
name: 'Figma',
|
||||
path: 'figma',
|
||||
component: Figma,
|
||||
},
|
||||
{
|
||||
name: 'Floating Edges',
|
||||
path: 'floating-edges',
|
||||
component: FloatingEdges,
|
||||
},
|
||||
{
|
||||
name: 'Hidden',
|
||||
path: 'hidden',
|
||||
component: Hidden,
|
||||
},
|
||||
{
|
||||
name: 'Interaction',
|
||||
path: 'interaction',
|
||||
component: Interaction,
|
||||
},
|
||||
{
|
||||
name: 'Intersection',
|
||||
path: 'intersection',
|
||||
component: Intersection,
|
||||
},
|
||||
{
|
||||
name: 'Interactive Minimap',
|
||||
path: 'interactive-minimap',
|
||||
component: InteractiveMinimap,
|
||||
},
|
||||
{
|
||||
name: 'Layouting',
|
||||
path: 'layouting',
|
||||
component: Layouting,
|
||||
},
|
||||
{
|
||||
name: 'Multi Flows',
|
||||
path: 'multiflows',
|
||||
component: MultiFlows,
|
||||
},
|
||||
{
|
||||
name: 'Nested Nodes',
|
||||
path: 'nested-nodes',
|
||||
component: NestedNodes,
|
||||
},
|
||||
{
|
||||
name: 'Node Type Change',
|
||||
path: 'nodetype-change',
|
||||
component: NodeTypeChange,
|
||||
},
|
||||
{
|
||||
name: 'nodeTypes Object Change',
|
||||
path: 'nodetypesobject-change',
|
||||
component: NodeTypesObjectChange,
|
||||
},
|
||||
{
|
||||
name: 'NodeToolbar',
|
||||
path: 'node-toolbar',
|
||||
component: NodeToolbar,
|
||||
},
|
||||
{
|
||||
name: 'NodeResizer',
|
||||
path: 'node-resizer',
|
||||
component: NodeResizer,
|
||||
},
|
||||
{
|
||||
name: 'Overview',
|
||||
path: 'overview',
|
||||
component: Overview,
|
||||
},
|
||||
{
|
||||
name: 'Provider',
|
||||
path: 'provider',
|
||||
component: Provider,
|
||||
},
|
||||
{
|
||||
name: 'Save/Restore',
|
||||
path: 'save-restore',
|
||||
component: SaveRestore,
|
||||
},
|
||||
{
|
||||
name: 'Stress',
|
||||
path: 'stress',
|
||||
component: Stress,
|
||||
},
|
||||
{
|
||||
name: 'Subflow',
|
||||
path: 'subflow',
|
||||
component: Subflow,
|
||||
},
|
||||
{
|
||||
name: 'Switch Flow',
|
||||
path: 'switch',
|
||||
component: SwitchFlow,
|
||||
},
|
||||
{
|
||||
name: 'Touch Device',
|
||||
path: 'touch-device',
|
||||
component: TouchDevice,
|
||||
},
|
||||
{
|
||||
name: 'Undirectional',
|
||||
path: 'undirectional',
|
||||
component: Undirectional,
|
||||
},
|
||||
{
|
||||
name: 'Updatable Edge',
|
||||
path: 'updatable-edge',
|
||||
component: UpdatableEdge,
|
||||
},
|
||||
{
|
||||
name: 'Update Node',
|
||||
path: 'update-node',
|
||||
component: UpdateNode,
|
||||
},
|
||||
{
|
||||
name: 'useNodesInitialized',
|
||||
path: 'use-nodes-initialized',
|
||||
component: useNodesInitialized,
|
||||
},
|
||||
{
|
||||
name: 'useOnSelectionChange',
|
||||
path: 'use-on-selection-change',
|
||||
component: UseOnSelectionChange,
|
||||
},
|
||||
{
|
||||
name: 'useReactFlow',
|
||||
path: 'usereactflow',
|
||||
component: UseReactFlow,
|
||||
},
|
||||
{
|
||||
name: 'useUpdateNodeInternals',
|
||||
path: 'useupdatenodeinternals',
|
||||
component: UseUpdateNodeInternals,
|
||||
},
|
||||
{
|
||||
name: 'Validation',
|
||||
path: 'validation',
|
||||
component: Validation,
|
||||
},
|
||||
{
|
||||
name: 'useKeyPress',
|
||||
path: 'use-key-press',
|
||||
component: UseKeyPress,
|
||||
},
|
||||
];
|
||||
|
||||
export default routes;
|
||||
Vendored
+1
-1
@@ -1,7 +1,7 @@
|
||||
import { Edge, Node, ReactFlowProps } from '@xyflow/react';
|
||||
|
||||
declare global {
|
||||
interface GenericTestCase {
|
||||
interface FlowConfig {
|
||||
flowProps: Omit<ReactFlowProps, 'nodes' | 'edges'> & { nodes: Node[]; edges: Edge[] };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,27 +1,30 @@
|
||||
import { useState, useCallback } from 'react';
|
||||
import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react';
|
||||
import {
|
||||
ReactFlow,
|
||||
applyNodeChanges,
|
||||
applyEdgeChanges,
|
||||
addEdge,
|
||||
OnNodesChange,
|
||||
OnEdgesChange,
|
||||
OnConnect,
|
||||
} from '@xyflow/react';
|
||||
|
||||
type FlowProps = {
|
||||
generics: GenericTestCase;
|
||||
flowConfig: FlowConfig;
|
||||
};
|
||||
|
||||
export default ({ generics }: FlowProps) => {
|
||||
const [nodes, setNodes] = useState(generics.flowProps.nodes);
|
||||
const [edges, setEdges] = useState(generics.flowProps.edges);
|
||||
export default ({ flowConfig }: FlowProps) => {
|
||||
const [nodes, setNodes] = useState(flowConfig.flowProps.nodes);
|
||||
const [edges, setEdges] = useState(flowConfig.flowProps.edges);
|
||||
const props = { ...flowConfig.flowProps, nodes, edges };
|
||||
|
||||
const onNodesChange: OnNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
|
||||
const onEdgesChange: OnEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
|
||||
const onConnect: OnConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []);
|
||||
|
||||
const onNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
|
||||
const onEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
|
||||
const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []);
|
||||
return (
|
||||
<div style={{ height: '100%' }}>
|
||||
<ReactFlow
|
||||
{...generics.flowProps}
|
||||
nodes={nodes}
|
||||
onNodesChange={onNodesChange}
|
||||
edges={edges}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect={onConnect}
|
||||
></ReactFlow>
|
||||
<ReactFlow {...props} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -160,4 +160,4 @@ export default {
|
||||
// },
|
||||
],
|
||||
},
|
||||
} satisfies GenericTestCase;
|
||||
} satisfies FlowConfig;
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
import Flow from './Flow';
|
||||
|
||||
const flowConfigs = import.meta.glob<FlowConfig>('./**/*.ts', { eager: true, import: 'default' });
|
||||
|
||||
export default () => {
|
||||
const location = useLocation();
|
||||
const files = import.meta.glob<GenericTestCase>('./**/*.ts', { eager: true, import: 'default' });
|
||||
const path = `.${location.pathname.replace('/tests/generic', '')}.ts`;
|
||||
const flowConfig = flowConfigs[path];
|
||||
|
||||
const testCasePath = `.${location.pathname.replace('/tests/generic', '')}.ts`;
|
||||
|
||||
const testCase = files[testCasePath];
|
||||
|
||||
if (!testCase) {
|
||||
return <div></div>;
|
||||
if (!flowConfig) {
|
||||
return `404: This route doesn't exists.`;
|
||||
}
|
||||
|
||||
return <Flow generics={testCase} />;
|
||||
return <Flow flowConfig={flowConfig} />;
|
||||
};
|
||||
|
||||
@@ -88,4 +88,4 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
} satisfies GenericTestCase;
|
||||
} satisfies FlowConfig;
|
||||
|
||||
@@ -34,4 +34,4 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
} satisfies GenericTestCase;
|
||||
} satisfies FlowConfig;
|
||||
|
||||
@@ -35,4 +35,4 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
} satisfies GenericTestCase;
|
||||
} satisfies FlowConfig;
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
|
||||
import App from './App';
|
||||
|
||||
import './index.css';
|
||||
import '@xyflow/react/dist/style.css';
|
||||
import './index.css';
|
||||
|
||||
createRoot(document.getElementById('root') as HTMLElement).render(
|
||||
<StrictMode>
|
||||
|
||||
Reference in New Issue
Block a user