|
1 | 1 | import React, { FC, useCallback, useEffect, useState } from "react"; |
2 | | -import { Background, BackgroundVariant, Elements, FlowElement } from "react-flow-renderer"; |
3 | | -import { OverlaysProvider } from "@blueprintjs/core"; |
| 2 | +import { Background, BackgroundVariant, Elements } from "react-flow-renderer"; |
4 | 3 | import { Meta, StoryFn } from "@storybook/react"; |
5 | 4 |
|
6 | 5 | import { Default as ReactFlowExample } from "../../../cmem/react-flow/ReactFlow/ReactFlow.stories"; |
7 | 6 |
|
8 | | -import { MiniMap as MiniMapElement, MiniMapProps, ReactFlow, ReactFlowProps } from "./../../../../index"; |
| 7 | +import { ApplicationContainer, MiniMap, MiniMapProps, ReactFlowExtended } from "./../../../index"; |
9 | 8 |
|
10 | 9 | export default { |
11 | 10 | title: "Extensions/React Flow/MiniMap", |
12 | | - component: MiniMapElement, |
| 11 | + component: MiniMap, |
13 | 12 | argTypes: {}, |
14 | | -} as Meta<typeof MiniMapElement>; |
| 13 | +} as Meta<typeof MiniMap>; |
15 | 14 |
|
16 | 15 | const MiniMapExample: FC<MiniMapProps> = (args) => { |
17 | 16 | const [reactflowInstance, setReactflowInstance] = useState(undefined); |
18 | 17 | const [elements, setElements] = useState([] as Elements); |
19 | | - const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>); |
20 | 18 | const nodeExamples = ReactFlowExample.nodeExamples.workflow; |
21 | 19 |
|
22 | 20 | useEffect(() => { |
23 | | - setElements(nodeExamples as Elements); |
| 21 | + setElements([...nodeExamples.nodes, ...nodeExamples.edges] as Elements); |
24 | 22 | }, [args]); |
25 | 23 |
|
26 | | - // Helper methods for nodes and edges |
27 | | - const isNode = (element: FlowElement & { source?: string }): boolean => !element.source; |
28 | | - const isEdge = (element: FlowElement & { source?: string }): boolean => !isNode(element); |
29 | | - |
30 | 24 | const onLoad = useCallback((rfi) => { |
31 | 25 | if (!reactflowInstance) { |
32 | 26 | setReactflowInstance(rfi); |
33 | 27 | } |
34 | 28 | }, []); |
35 | 29 |
|
36 | 30 | return ( |
37 | | - <OverlaysProvider> |
38 | | - <ReactFlow |
| 31 | + <ApplicationContainer style={{ background: "white" }}> |
| 32 | + <ReactFlowExtended |
39 | 33 | configuration={"workflow"} |
40 | 34 | elements={elements} |
41 | 35 | style={{ height: "400px" }} |
42 | 36 | onLoad={onLoad} |
43 | 37 | defaultZoom={1} |
44 | 38 | > |
45 | | - <MiniMapElement flowInstance={reactflowInstance} {...args} /> |
| 39 | + <MiniMap flowInstance={reactflowInstance} {...args} /> |
46 | 40 | <Background variant={BackgroundVariant.Lines} gap={16} /> |
47 | | - </ReactFlow> |
48 | | - {edgeTools} |
49 | | - </OverlaysProvider> |
| 41 | + </ReactFlowExtended> |
| 42 | + </ApplicationContainer> |
50 | 43 | ); |
51 | 44 | }; |
52 | 45 |
|
53 | | -const Template: StoryFn<typeof MiniMapExample> = (args) => <MiniMapExample {...args} />; |
| 46 | +let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856 |
| 47 | +const Template: StoryFn<MiniMapProps> = (args) => <MiniMapExample {...args} key={++forcedUpdateKey} />; |
54 | 48 |
|
55 | 49 | export const Default = Template.bind({}); |
56 | 50 | Default.args = { |
|
0 commit comments