Skip to content

Commit c308e47

Browse files
spautzspautz
committed
Cleanup
1 parent c849a4c commit c308e47

File tree

2 files changed

+34
-67
lines changed

2 files changed

+34
-67
lines changed

‎src/index.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ type PortalNodeElement = HTMLElement | SVGElement;
1414
export interface PortalNode<C extends Component<any> = Component<any>> {
1515
// The dom element used for the React portal. Created on portal mount.
1616
element: PortalNodeElement | null,
17-
callbackFn: (() => void) | null,
17+
onReady: (() => void) | null,
1818
// Used by the out portal to send props back to the real element
1919
// Hooked by InPortal to become a state update (and thus rerender)
2020
setPortalProps(p: ComponentProps<C>): void;
@@ -41,7 +41,7 @@ export const createPortalNode = <C extends Component<any>>(): PortalNode<C> => {
4141

4242
const portalNode: PortalNode = {
4343
element: null,
44-
callbackFn: null,
44+
onReady: null,
4545
setPortalProps: (props: ComponentProps<C>) => {
4646
initialProps = props;
4747
},
@@ -95,13 +95,13 @@ export const createPortalNode = <C extends Component<any>>(): PortalNode<C> => {
9595
return portalNode;
9696
};
9797

98-
export class InPortal extends React.PureComponent<InPortalProps, { nodeProps: {}, outPortalCallback: boolean }> {
98+
export class InPortal extends React.PureComponent<InPortalProps, { nodeProps: {}, onReadyFired: boolean }> {
9999

100100
constructor(props: InPortalProps) {
101101
super(props);
102102
this.state = {
103103
nodeProps: this.props.node.getInitialPortalProps(),
104-
outPortalCallback: false,
104+
onReadyFired: false,
105105
};
106106
}
107107

@@ -127,9 +127,9 @@ export class InPortal extends React.PureComponent<InPortalProps, { nodeProps: {}
127127

128128
if (!node.element) {
129129
// The OutPortal has not yet determined whether or not we're in a special namespace like SVG:
130-
// delay our rendering for now, and attach a callbackFn which the OutPortal can use to
130+
// delay our rendering for now, and attach an onReady callback which the OutPortal can use to
131131
// trigger a rerender once we're ready
132-
node.callbackFn = () => this.setState({ outPortalCallback: true })
132+
node.onReady = () => this.setState({ onReadyFired: true })
133133
return null;
134134
}
135135

@@ -161,11 +161,11 @@ export class OutPortal<C extends Component<any>> extends React.PureComponent<Out
161161
const propsForTarget = Object.assign({}, this.props, { node: undefined });
162162
this.props.node.setPortalProps(propsForTarget);
163163

164-
if (this.props.node.callbackFn) {
164+
if (this.props.node.onReady) {
165165
// There's an InPortal which is waiting on this OutPortal:
166166
// rerender it now that the OutPortal and portalNode are ready
167-
this.props.node.callbackFn();
168-
this.props.node.callbackFn = null;
167+
this.props.node.onReady();
168+
this.props.node.onReady = null;
169169
}
170170
}
171171

‎stories/index.stories.js‎

Lines changed: 25 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -11,32 +11,19 @@ const Container = (props) =>
1111

1212
storiesOf('Portals', module)
1313
.add('render things in different places', () => {
14-
const portalNode1 = portals.createPortalNode();
15-
const portalNode2 = portals.createPortalNode();
14+
const portalNode = portals.createPortalNode();
1615

1716
return <div>
1817
<div>
19-
Portal 1 defined here:
20-
<portals.InPortal node={portalNode1}>
18+
Portal defined here:
19+
<portals.InPortal node={portalNode}>
2120
Hi!
2221
</portals.InPortal>
2322
</div>
2423

2524
<div>
26-
Portal 1 renders here:
27-
<portals.OutPortal node={portalNode1} />
28-
</div>
29-
30-
<div>
31-
Portal 2 renders here:
32-
<portals.OutPortal node={portalNode2} />
33-
</div>
34-
35-
<div>
36-
Portal 2 defined here:
37-
<portals.InPortal node={portalNode2}>
38-
Hi!
39-
</portals.InPortal>
25+
Portal renders here:
26+
<portals.OutPortal node={portalNode} />
4027
</div>
4128
</div>;
4229
})
@@ -179,7 +166,7 @@ storiesOf('Portals', module)
179166
let portalNode = isPortalSwitched ? portalNode2 : portalNode1;
180167

181168
return <div>
182-
<portals.InPortal node={portalNode1}>
169+
<portals.InPortal node={portalNode}>
183170
<Counter />
184171
</portals.InPortal>
185172
<portals.InPortal node={portalNode2}>
@@ -240,44 +227,24 @@ storiesOf('Portals', module)
240227
</div>;
241228
})
242229
.add('works with SVGs', () => {
243-
const portalNode1 = portals.createPortalNode();
244-
const portalNode2 = portals.createPortalNode();
230+
const portalNode = portals.createPortalNode();
245231

246232
// From https://github.com/httptoolkit/react-reverse-portal/issues/2
247233
return <div>
248-
<div>
249234
<svg>
250235
<rect x={0} y={0} width={300} height={50} fill="gray"></rect>
251236
<rect x={0} y={50} width={300} height={50} fill="lightblue"></rect>
252237
<svg x={30} y={10}>
253-
<portals.InPortal node={portalNode1}>
238+
<portals.InPortal node={portalNode}>
254239
<text alignmentBaseline="text-before-edge" dominantBaseline="hanging" fill="red">
255240
test
256241
</text>
257242
</portals.InPortal>
258243
</svg>
259244
<svg x={30} y={70}>
260-
<portals.OutPortal node={portalNode1} />
261-
</svg>
262-
</svg>
263-
264-
</div>
265-
<div>
266-
<svg>
267-
<rect x={0} y={0} width={300} height={50} fill="gray"></rect>
268-
<rect x={0} y={50} width={300} height={50} fill="lightblue"></rect>
269-
<svg x={30} y={70}>
270-
<portals.OutPortal node={portalNode2} />
271-
</svg>
272-
<svg x={30} y={10}>
273-
<portals.InPortal node={portalNode2}>
274-
<text alignmentBaseline="text-before-edge" dominantBaseline="hanging" fill="red">
275-
test
276-
</text>
277-
</portals.InPortal>
245+
<portals.OutPortal node={portalNode} />
278246
</svg>
279247
</svg>
280-
</div>
281248
</div>
282249

283250
})
@@ -324,23 +291,23 @@ storiesOf('Portals', module)
324291
</button>
325292

326293
<div>
327-
<svg width={600} height={800}>
328-
<portals.InPortal node={portalNode}>
329-
<foreignObject width="500" height="400">
330-
<video src="https://media.giphy.com/media/l0HlKghz8IvrQ8TYY/giphy.mp4" controls loop />
331-
</foreignObject>
332-
</portals.InPortal>
333-
334-
<rect x={0} y={0} width={600} height={400} fill="gray"></rect>
335-
<rect x={0} y={400} width={600} height={400} fill="lightblue"></rect>
336-
337-
<svg x={30} y={10}>
338-
{ inFirstSvg && <portals.OutPortal node={portalNode} /> }
294+
<svg width={600} height={800}>
295+
<portals.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+
</portals.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 && <portals.OutPortal node={portalNode} /> }
306+
</svg>
307+
<svg x={30} y={410}>
308+
{ !inFirstSvg && <portals.OutPortal node={portalNode} /> }
309+
</svg>
339310
</svg>
340-
<svg x={30} y={410}>
341-
{ !inFirstSvg && <portals.OutPortal node={portalNode} /> }
342-
</svg>
343-
</svg>
344311
</div>
345312
</div>
346313
})

0 commit comments

Comments
 (0)