Skip to content

Commit 07db592

Browse files
spautzspautz
committed
Organize and polish stories
1 parent 0dfaf2d commit 07db592

File tree

2 files changed

+95
-86
lines changed

2 files changed

+95
-86
lines changed

‎stories/index.stories.js‎ renamed to ‎stories/html.stories.js‎

Lines changed: 0 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -226,92 +226,6 @@ storiesOf('Portals', module)
226226
<Parent />
227227
</div>;
228228
})
229-
.add('works with SVGs', () => {
230-
const portalNode = createSvgPortalNode();
231-
232-
// From https://github.com/httptoolkit/react-reverse-portal/issues/2
233-
return <div>
234-
<svg>
235-
<rect x={0} y={0} width={300} height={50} fill="gray"></rect>
236-
<rect x={0} y={50} width={300} height={50} fill="lightblue"></rect>
237-
<svg x={30} y={10}>
238-
<InPortal node={portalNode}>
239-
<text alignmentBaseline="text-before-edge" dominantBaseline="hanging" fill="red">
240-
test
241-
</text>
242-
</InPortal>
243-
</svg>
244-
<svg x={30} y={70}>
245-
<OutPortal node={portalNode} />
246-
</svg>
247-
</svg>
248-
</div>
249-
250-
})
251-
.add('can move content around within SVGs', () => {
252-
const portalNode = createSvgPortalNode();
253-
254-
return React.createElement(() => {
255-
const [inFirstSvg, setSvgToUse] = React.useState(false);
256-
257-
return <div>
258-
<button onClick={() => setSvgToUse(!inFirstSvg)}>
259-
Click to move the OutPortal within the SVG
260-
</button>
261-
262-
<svg>
263-
<InPortal node={portalNode}>
264-
<text alignmentBaseline="text-before-edge" dominantBaseline="hanging" fill="red">
265-
test
266-
</text>
267-
</InPortal>
268-
269-
<rect x={0} y={0} width={300} height={50} fill="gray"></rect>
270-
<rect x={0} y={50} width={300} height={50} fill="lightblue"></rect>
271-
272-
<svg x={30} y={10}>
273-
{ inFirstSvg && <OutPortal node={portalNode} /> }
274-
</svg>
275-
<svg x={30} y={70}>
276-
{ !inFirstSvg && <OutPortal node={portalNode} /> }
277-
</svg>
278-
</svg>
279-
</div>
280-
});
281-
})
282-
.add('persist DOM while moving within SVGs', () => {
283-
const portalNode = createSvgPortalNode();
284-
285-
return React.createElement(() => {
286-
const [inFirstSvg, setSvgToUse] = React.useState(false);
287-
288-
return <div>
289-
<button onClick={() => setSvgToUse(!inFirstSvg)}>
290-
Click to move the OutPortal within the SVG
291-
</button>
292-
293-
<div>
294-
<svg width={600} height={800}>
295-
<InPortal node={portalNode}>
296-
<foreignObject width="500" height="400">
297-
<video src="https://media.giphy.com/media/l0HlKghz8IvrQ8TYY/giphy.mp4" controls loop />
298-
</foreignObject>
299-
</InPortal>
300-
301-
<rect x={0} y={0} width={600} height={400} fill="gray"></rect>
302-
<rect x={0} y={400} width={600} height={400} fill="lightblue"></rect>
303-
304-
<svg x={30} y={10}>
305-
{ inFirstSvg && <OutPortal node={portalNode} /> }
306-
</svg>
307-
<svg x={30} y={410}>
308-
{ !inFirstSvg && <OutPortal node={portalNode} /> }
309-
</svg>
310-
</svg>
311-
</div>
312-
</div>
313-
})
314-
})
315229
.add('Example from README', () => {
316230
const MyExpensiveComponent = () => 'expensive!';
317231

‎stories/svg.stories.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React from 'react';
2+
3+
import { storiesOf } from '@storybook/react';
4+
5+
import { createHtmlPortalNode, createSvgPortalNode, InPortal, OutPortal } from '..';
6+
7+
storiesOf('SVG Portals', module)
8+
.add('works with SVGs', () => {
9+
const portalNode = createSvgPortalNode();
10+
11+
// From https://github.com/httptoolkit/react-reverse-portal/issues/2
12+
return <div>
13+
<svg>
14+
<rect x={0} y={0} width={300} height={50} fill="gray"></rect>
15+
<rect x={0} y={50} width={300} height={50} fill="lightblue"></rect>
16+
<svg x={30} y={10}>
17+
<InPortal node={portalNode}>
18+
<text alignmentBaseline="text-before-edge" dominantBaseline="hanging" fill="red">
19+
test
20+
</text>
21+
</InPortal>
22+
</svg>
23+
<svg x={30} y={70}>
24+
<OutPortal node={portalNode} />
25+
</svg>
26+
</svg>
27+
</div>
28+
29+
})
30+
.add('can move content around within SVGs', () => {
31+
const portalNode = createSvgPortalNode();
32+
33+
return React.createElement(() => {
34+
const [inFirstSvg, setSvgToUse] = React.useState(false);
35+
36+
return <div>
37+
<button onClick={() => setSvgToUse(!inFirstSvg)}>
38+
Click to move the OutPortal within the SVG
39+
</button>
40+
41+
<hr/>
42+
43+
<svg>
44+
<InPortal node={portalNode}>
45+
<text alignmentBaseline="text-before-edge" dominantBaseline="hanging" fill="red">
46+
test
47+
</text>
48+
</InPortal>
49+
50+
<rect x={0} y={0} width={300} height={50} fill="gray"></rect>
51+
<rect x={0} y={50} width={300} height={50} fill="lightblue"></rect>
52+
53+
<svg x={30} y={10}>
54+
{ inFirstSvg && <OutPortal node={portalNode} /> }
55+
</svg>
56+
<svg x={30} y={70}>
57+
{ !inFirstSvg && <OutPortal node={portalNode} /> }
58+
</svg>
59+
</svg>
60+
</div>
61+
});
62+
})
63+
.add('persist DOM while moving within SVGs', () => {
64+
const portalNode = createSvgPortalNode();
65+
66+
return React.createElement(() => {
67+
const [inFirstSvg, setSvgToUse] = React.useState(false);
68+
69+
return <div>
70+
<button onClick={() => setSvgToUse(!inFirstSvg)}>
71+
Click to move the OutPortal within the SVG
72+
</button>
73+
74+
<hr/>
75+
76+
<svg width={500} height={800}>
77+
<InPortal node={portalNode}>
78+
<foreignObject width="480" height="360">
79+
<video src="https://media.giphy.com/media/l0HlKghz8IvrQ8TYY/giphy.mp4" controls loop />
80+
</foreignObject>
81+
</InPortal>
82+
83+
<rect x={0} y={0} width={500} height={380} fill="gray"></rect>
84+
<rect x={0} y={380} width={500} height={380} fill="lightblue"></rect>
85+
86+
<svg x={10} y={10}>
87+
{ inFirstSvg && <OutPortal node={portalNode} /> }
88+
</svg>
89+
<svg x={10} y={410}>
90+
{ !inFirstSvg && <OutPortal node={portalNode} /> }
91+
</svg>
92+
</svg>
93+
</div>
94+
})
95+
});

0 commit comments

Comments
 (0)