Skip to content

Commit

Permalink
fix(ViewportProvider): don't update children when provider is rerendered
Browse files Browse the repository at this point in the history
  • Loading branch information
Jannick Garthen committed Aug 18, 2019
1 parent 158dbef commit 46d3632
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 18 deletions.
15 changes: 15 additions & 0 deletions examples/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -168,3 +168,18 @@ render(
</ViewportProvider>,
document.getElementById('root'),
);

setInterval(() => {
render(
<ViewportProvider experimentalSchedulerEnabled>
<main role="main">
<Example />
<HooksExample />
<Placeholder />
<Placeholder />
<Placeholder />
</main>
</ViewportProvider>,
document.getElementById('root'),
)
}, 1000)
37 changes: 19 additions & 18 deletions lib/ViewportProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,11 @@ const getCurrentDefaultViewport = (): IViewport => {
};

export const ViewportContext = React.createContext({
removeViewportChangeListener: (handler: TViewportChangeHandler) => {},
removeViewportChangeListener: (handler: TViewportChangeHandler) => { },
addViewportChangeListener: (
handler: TViewportChangeHandler,
options: IViewportChangeOptions,
) => {},
) => { },
getCurrentViewport: getCurrentDefaultViewport,
hasRootProviderAsParent: false,
version: '__VERSION__',
Expand Down Expand Up @@ -78,7 +78,7 @@ const shouldSkipIteration = (
export default class ViewportProvider extends React.PureComponent<
IProps,
{ hasListeners: boolean }
> {
> {
static defaultProps: {
experimentalSchedulerEnabled: false;
};
Expand Down Expand Up @@ -190,35 +190,36 @@ export default class ViewportProvider extends React.PureComponent<
}, 0);
}

private collector = React.createRef<ViewportCollector>();
private contextValue = {
addViewportChangeListener: this.addViewportChangeListener,
removeViewportChangeListener: this.removeViewportChangeListener,
getCurrentViewport: () => {
if (!this.collector.current) {
return getCurrentDefaultViewport();
}
return this.collector.current.getPropsFromState();
},
hasRootProviderAsParent: true,
version: '__VERSION__',
};

renderChildren = (props: { hasRootProviderAsParent: boolean }) => {
if (props.hasRootProviderAsParent) {
return this.props.children;
}
const collector = React.createRef<ViewportCollector>();
const value = {
addViewportChangeListener: this.addViewportChangeListener,
removeViewportChangeListener: this.removeViewportChangeListener,
getCurrentViewport: () => {
if (!collector.current) {
return getCurrentDefaultViewport();
}
return collector.current.getPropsFromState();
},
hasRootProviderAsParent: true,
version: '__VERSION__',
};
return (
<React.Fragment>
{this.state.hasListeners && (
<ViewportCollector
ref={collector}
ref={this.collector}
onUpdate={this.triggerUpdateToListeners}
onIdledUpdate={(state, updates) =>
this.triggerUpdateToListeners(state, updates, { isIdle: true })
}
/>
)}
<ViewportContext.Provider value={value}>
<ViewportContext.Provider value={this.contextValue}>
{this.props.children}
</ViewportContext.Provider>
</React.Fragment>
Expand Down

0 comments on commit 46d3632

Please sign in to comment.