Skip to content

Commit a703e65

Browse files
committed
fix story
1 parent 3b4412b commit a703e65

1 file changed

Lines changed: 12 additions & 18 deletions

File tree

src/extensions/react-flow/minimap/MiniMap.stories.tsx

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,50 @@
11
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";
43
import { Meta, StoryFn } from "@storybook/react";
54

65
import { Default as ReactFlowExample } from "../../../cmem/react-flow/ReactFlow/ReactFlow.stories";
76

8-
import { MiniMap as MiniMapElement, MiniMapProps, ReactFlow, ReactFlowProps } from "./../../../../index";
7+
import { ApplicationContainer, MiniMap, MiniMapProps, ReactFlowExtended } from "./../../../index";
98

109
export default {
1110
title: "Extensions/React Flow/MiniMap",
12-
component: MiniMapElement,
11+
component: MiniMap,
1312
argTypes: {},
14-
} as Meta<typeof MiniMapElement>;
13+
} as Meta<typeof MiniMap>;
1514

1615
const MiniMapExample: FC<MiniMapProps> = (args) => {
1716
const [reactflowInstance, setReactflowInstance] = useState(undefined);
1817
const [elements, setElements] = useState([] as Elements);
19-
const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
2018
const nodeExamples = ReactFlowExample.nodeExamples.workflow;
2119

2220
useEffect(() => {
23-
setElements(nodeExamples as Elements);
21+
setElements([...nodeExamples.nodes, ...nodeExamples.edges] as Elements);
2422
}, [args]);
2523

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-
3024
const onLoad = useCallback((rfi) => {
3125
if (!reactflowInstance) {
3226
setReactflowInstance(rfi);
3327
}
3428
}, []);
3529

3630
return (
37-
<OverlaysProvider>
38-
<ReactFlow
31+
<ApplicationContainer style={{ background: "white" }}>
32+
<ReactFlowExtended
3933
configuration={"workflow"}
4034
elements={elements}
4135
style={{ height: "400px" }}
4236
onLoad={onLoad}
4337
defaultZoom={1}
4438
>
45-
<MiniMapElement flowInstance={reactflowInstance} {...args} />
39+
<MiniMap flowInstance={reactflowInstance} {...args} />
4640
<Background variant={BackgroundVariant.Lines} gap={16} />
47-
</ReactFlow>
48-
{edgeTools}
49-
</OverlaysProvider>
41+
</ReactFlowExtended>
42+
</ApplicationContainer>
5043
);
5144
};
5245

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} />;
5448

5549
export const Default = Template.bind({});
5650
Default.args = {

0 commit comments

Comments
 (0)