Skip to content

Commit 94ea29f

Browse files
spautzspautz
committed
Use createHtmlPortalNode/createSvgPortalNode style of imports
1 parent 7dd15ed commit 94ea29f

File tree

2 files changed

+41
-67
lines changed

2 files changed

+41
-67
lines changed

‎src/index.tsx‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -216,19 +216,6 @@ class OutPortal<C extends Component<any>> extends React.PureComponent<OutPortalP
216216
const createHtmlPortalNode = createPortalNode.bind(null, ELEMENT_TYPE_HTML) as () => HtmlPortalNode;
217217
const createSvgPortalNode = createPortalNode.bind(null, ELEMENT_TYPE_SVG) as () => SvgPortalNode;
218218

219-
// Option A: Export a self-contained namespace for each type, including Portal components
220-
export const html = {
221-
createPortalNode: createHtmlPortalNode,
222-
InPortal,
223-
OutPortal,
224-
};
225-
export const svg = {
226-
createPortalNode: createSvgPortalNode,
227-
InPortal,
228-
OutPortal,
229-
};
230-
231-
// Option B: Export a createPortalNode for each type, with shared Portal components
232219
export {
233220
createHtmlPortalNode,
234221
createSvgPortalNode,

‎stories/index.stories.js‎

Lines changed: 41 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,7 @@ import React from 'react';
22

33
import { storiesOf } from '@storybook/react';
44

5-
// @FIXME: Need to update this based on whichever export style is preferred
6-
// For now it's a mixed-up hybrid which should be easy to find/replace with either option
7-
import { html, svg } from '..';
8-
9-
const {
10-
createPortalNode: createHtmlPortalNode,
11-
InPortal: HtmlInPortal,
12-
OutPortal: HtmlOutPortal,
13-
} = html;
14-
const {
15-
createPortalNode: createSvgPortalNode,
16-
InPortal: SvgInPortal,
17-
OutPortal: SvgOutPortal,
18-
} = svg;
5+
import { createHtmlPortalNode, createSvgPortalNode, InPortal, OutPortal } from '..';
196

207
const Container = (props) =>
218
<div style={{ "border": "1px solid #222", "padding": "10px" }}>
@@ -29,14 +16,14 @@ storiesOf('Portals', module)
2916
return <div>
3017
<div>
3118
Portal defined here:
32-
<HtmlInPortal node={portalNode}>
19+
<InPortal node={portalNode}>
3320
Hi!
34-
</HtmlInPortal>
21+
</InPortal>
3522
</div>
3623

3724
<div>
3825
Portal renders here:
39-
<HtmlOutPortal node={portalNode} />
26+
<OutPortal node={portalNode} />
4027
</div>
4128
</div>;
4229
})
@@ -47,9 +34,9 @@ storiesOf('Portals', module)
4734
const [useOuterDiv, setDivToUse] = React.useState(false);
4835

4936
return <div>
50-
<HtmlInPortal node={portalNode}>
37+
<InPortal node={portalNode}>
5138
<video src="https://media.giphy.com/media/l0HlKghz8IvrQ8TYY/giphy.mp4" controls loop />
52-
</HtmlInPortal>
39+
</InPortal>
5340

5441
<button onClick={() => setDivToUse(!useOuterDiv)}>
5542
Click to move the OutPortal
@@ -59,12 +46,12 @@ storiesOf('Portals', module)
5946

6047
<div>
6148
<p>Outer OutPortal:</p>
62-
{ useOuterDiv === true && <HtmlOutPortal node={portalNode} /> }
49+
{ useOuterDiv === true && <OutPortal node={portalNode} /> }
6350
<Container>
6451
<Container>
6552
<Container>
6653
<p>Inner OutPortal:</p>
67-
{ useOuterDiv === false && <HtmlOutPortal node={portalNode} /> }
54+
{ useOuterDiv === false && <OutPortal node={portalNode} /> }
6855
</Container>
6956
</Container>
7057
</Container>
@@ -90,9 +77,9 @@ storiesOf('Portals', module)
9077
const [useOuterDiv, setDivToUse] = React.useState(false);
9178

9279
return <div>
93-
<HtmlInPortal node={portalNode}>
80+
<InPortal node={portalNode}>
9481
<Counter />
95-
</HtmlInPortal>
82+
</InPortal>
9683

9784
<button onClick={() => setDivToUse(!useOuterDiv)}>
9885
Click to move the OutPortal
@@ -101,12 +88,12 @@ storiesOf('Portals', module)
10188
<hr/>
10289

10390
<p>Outer OutPortal:</p>
104-
{ useOuterDiv === true && <HtmlOutPortal node={portalNode} /> }
91+
{ useOuterDiv === true && <OutPortal node={portalNode} /> }
10592
<Container>
10693
<Container>
10794
<Container>
10895
<p>Inner OutPortal:</p>
109-
{ useOuterDiv === false && <HtmlOutPortal node={portalNode} /> }
96+
{ useOuterDiv === false && <OutPortal node={portalNode} /> }
11097
</Container>
11198
</Container>
11299
</Container>
@@ -131,9 +118,9 @@ storiesOf('Portals', module)
131118
const [useOuterDiv, setDivToUse] = React.useState(false);
132119

133120
return <div>
134-
<HtmlInPortal node={portalNode}>
121+
<InPortal node={portalNode}>
135122
<Counter bgColor="#faa" />
136-
</HtmlInPortal>
123+
</InPortal>
137124

138125
<button onClick={() => setDivToUse(!useOuterDiv)}>
139126
Click to move the OutPortal
@@ -143,14 +130,14 @@ storiesOf('Portals', module)
143130

144131
<p>Outer OutPortal:</p>
145132
{ useOuterDiv === true &&
146-
<HtmlOutPortal node={portalNode} bgColor="#aaf" />
133+
<OutPortal node={portalNode} bgColor="#aaf" />
147134
}
148135
<Container>
149136
<Container>
150137
<Container>
151138
<p>Inner OutPortal:</p>
152139
{ useOuterDiv === false &&
153-
<HtmlOutPortal node={portalNode} bgColor="#afa" />
140+
<OutPortal node={portalNode} bgColor="#afa" />
154141
}
155142
</Container>
156143
</Container>
@@ -179,12 +166,12 @@ storiesOf('Portals', module)
179166
let portalNode = isPortalSwitched ? portalNode2 : portalNode1;
180167

181168
return <div>
182-
<HtmlInPortal node={portalNode1}>
169+
<InPortal node={portalNode1}>
183170
<Counter />
184-
</HtmlInPortal>
185-
<HtmlInPortal node={portalNode2}>
171+
</InPortal>
172+
<InPortal node={portalNode2}>
186173
<Counter />
187-
</HtmlInPortal>
174+
</InPortal>
188175

189176
<button onClick={() => switchPortal(!isPortalSwitched)}>
190177
Click to swap the portal shown
@@ -193,7 +180,7 @@ storiesOf('Portals', module)
193180
<hr/>
194181

195182
<p>Inner OutPortal:</p>
196-
<HtmlOutPortal node={portalNode} />
183+
<OutPortal node={portalNode} />
197184
</div>
198185
});
199186
})
@@ -217,12 +204,12 @@ storiesOf('Portals', module)
217204
{ state
218205
// What happens if you render the same portal twice?
219206
? <>
220-
<HtmlOutPortal node={portalNode} value={1} />
221-
<HtmlOutPortal node={portalNode} value={2} />
207+
<OutPortal node={portalNode} value={1} />
208+
<OutPortal node={portalNode} value={2} />
222209
</>
223210
// What happens if you switch from 2 portals to 1, to 2 to zero, at random?
224211
: Math.random() > 0.5
225-
? <HtmlOutPortal node={portalNode} value={3} />
212+
? <OutPortal node={portalNode} value={3} />
226213
: null
227214
}
228215
</div>;
@@ -231,9 +218,9 @@ storiesOf('Portals', module)
231218
return <div>
232219
<div>
233220
Portal defined here:
234-
<HtmlInPortal node={portalNode}>
221+
<InPortal node={portalNode}>
235222
<Target value='unmounted' />
236-
</HtmlInPortal>
223+
</InPortal>
237224
</div>
238225

239226
<Parent />
@@ -248,14 +235,14 @@ storiesOf('Portals', module)
248235
<rect x={0} y={0} width={300} height={50} fill="gray"></rect>
249236
<rect x={0} y={50} width={300} height={50} fill="lightblue"></rect>
250237
<svg x={30} y={10}>
251-
<SvgInPortal node={portalNode}>
238+
<InPortal node={portalNode}>
252239
<text alignmentBaseline="text-before-edge" dominantBaseline="hanging" fill="red">
253240
test
254241
</text>
255-
</SvgInPortal>
242+
</InPortal>
256243
</svg>
257244
<svg x={30} y={70}>
258-
<SvgOutPortal node={portalNode} />
245+
<OutPortal node={portalNode} />
259246
</svg>
260247
</svg>
261248
</div>
@@ -273,20 +260,20 @@ storiesOf('Portals', module)
273260
</button>
274261

275262
<svg>
276-
<SvgInPortal node={portalNode}>
263+
<InPortal node={portalNode}>
277264
<text alignmentBaseline="text-before-edge" dominantBaseline="hanging" fill="red">
278265
test
279266
</text>
280-
</SvgInPortal>
267+
</InPortal>
281268

282269
<rect x={0} y={0} width={300} height={50} fill="gray"></rect>
283270
<rect x={0} y={50} width={300} height={50} fill="lightblue"></rect>
284271

285272
<svg x={30} y={10}>
286-
{ inFirstSvg && <SvgOutPortal node={portalNode} /> }
273+
{ inFirstSvg && <OutPortal node={portalNode} /> }
287274
</svg>
288275
<svg x={30} y={70}>
289-
{ !inFirstSvg && <SvgOutPortal node={portalNode} /> }
276+
{ !inFirstSvg && <OutPortal node={portalNode} /> }
290277
</svg>
291278
</svg>
292279
</div>
@@ -305,20 +292,20 @@ storiesOf('Portals', module)
305292

306293
<div>
307294
<svg width={600} height={800}>
308-
<SvgInPortal node={portalNode}>
295+
<InPortal node={portalNode}>
309296
<foreignObject width="500" height="400">
310297
<video src="https://media.giphy.com/media/l0HlKghz8IvrQ8TYY/giphy.mp4" controls loop />
311298
</foreignObject>
312-
</SvgInPortal>
299+
</InPortal>
313300

314301
<rect x={0} y={0} width={600} height={400} fill="gray"></rect>
315302
<rect x={0} y={400} width={600} height={400} fill="lightblue"></rect>
316303

317304
<svg x={30} y={10}>
318-
{ inFirstSvg && <SvgOutPortal node={portalNode} /> }
305+
{ inFirstSvg && <OutPortal node={portalNode} /> }
319306
</svg>
320307
<svg x={30} y={410}>
321-
{ !inFirstSvg && <SvgOutPortal node={portalNode} /> }
308+
{ !inFirstSvg && <OutPortal node={portalNode} /> }
322309
</svg>
323310
</svg>
324311
</div>
@@ -338,12 +325,12 @@ storiesOf('Portals', module)
338325
Until this is used MyExpensiveComponent will not
339326
appear anywhere in the page.
340327
*/}
341-
<HtmlInPortal node={portalNode}>
328+
<InPortal node={portalNode}>
342329
<MyExpensiveComponent
343330
// Optionally provide props to use before this enters the DOM
344331
myProp={"defaultValue"}
345332
/>
346-
</HtmlInPortal>
333+
</InPortal>
347334

348335
{/* ... The rest of your UI ... */}
349336

@@ -360,7 +347,7 @@ storiesOf('Portals', module)
360347

361348
A:
362349

363-
<HtmlOutPortal
350+
<OutPortal
364351
node={props.portalNode} // Show the content from this node here
365352
/>
366353
</div>;
@@ -372,7 +359,7 @@ storiesOf('Portals', module)
372359

373360
B:
374361

375-
<HtmlOutPortal
362+
<OutPortal
376363
node={props.portalNode} // Pull in the content from this node
377364

378365
myProp={"newValue"} // Optionally, override default values

0 commit comments

Comments
 (0)