Skip to content

Commit cb67ad7

Browse files
jscottsmithjscottsmith
committed
update the controller scroll container in ParallaxProvider when the element changes
1 parent 1b73300 commit cb67ad7

File tree

5 files changed

+155
-117
lines changed

5 files changed

+155
-117
lines changed

‎__tests__/ParallaxProvider.test.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,39 @@ describe('A <ParallaxProvider>', () => {
6969
expect(spy).toBeCalled();
7070
});
7171

72+
it('to update the scroll container when receiving a new container el', () => {
73+
const node = document.createElement('div');
74+
let instance;
75+
let providerInstance;
76+
77+
class StateChanger extends React.Component {
78+
state = { el: null };
79+
render() {
80+
return (
81+
<ParallaxProvider
82+
scrollContainer={this.state.el}
83+
ref={ref => (providerInstance = ref)}
84+
>
85+
<div />
86+
</ParallaxProvider>
87+
);
88+
}
89+
}
90+
91+
ReactDOM.render(<StateChanger ref={ref => (instance = ref)} />, node);
92+
93+
const el = document.createElement('div');
94+
95+
providerInstance.controller.updateScrollContainer = jest.fn();
96+
const spy = providerInstance.controller.updateScrollContainer;
97+
98+
instance.setState({ el });
99+
100+
ReactDOM.unmountComponentAtNode(node);
101+
102+
expect(spy).toBeCalledWith(el);
103+
});
104+
72105
it('to always create a new instance when re-mounting', () => {
73106
// the provider isn't gauranteed to be destroyed before re-instantiated
74107
// in a route change.

‎src/classes/ParallaxController.js‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,40 +21,40 @@ function ParallaxController({ scrollAxis = VERTICAL, scrollContainer }) {
2121
// All parallax elements to be updated
2222
let elements = [];
2323

24-
const hasScrollContainer = !!scrollContainer;
25-
const viewEl = scrollContainer || window;
24+
let hasScrollContainer = !!scrollContainer;
25+
let viewEl = scrollContainer || window;
2626

2727
// Scroll and View
2828
const x = hasScrollContainer ? viewEl.scrollLeft : window.pageXOffset;
2929
const y = hasScrollContainer ? viewEl.scrollTop : window.pageYOffset;
3030
const scroll = new Scroll(x, y);
31-
const view = new View({ width: 0, height: 0, scrollContainer });
31+
let view = new View({ width: 0, height: 0, scrollContainer });
3232

3333
// Ticking
3434
let ticking = false;
3535

3636
// Passive support
3737
const supportsPassive = testForPassiveScroll();
3838

39-
function _addListeners() {
40-
viewEl.addEventListener(
39+
function _addListeners(el) {
40+
el.addEventListener(
4141
'scroll',
4242
_handleScroll,
4343
supportsPassive ? { passive: true } : false
4444
);
4545
window.addEventListener('resize', _handleResize, false);
4646
}
4747

48-
function _removeListeners() {
49-
viewEl.removeEventListener(
48+
function _removeListeners(el) {
49+
el.removeEventListener(
5050
'scroll',
5151
_handleScroll,
5252
supportsPassive ? { passive: true } : false
5353
);
5454
window.removeEventListener('resize', _handleResize, false);
5555
}
5656

57-
_addListeners();
57+
_addListeners(viewEl);
5858
_setViewSize();
5959

6060
/**
@@ -197,11 +197,23 @@ function ParallaxController({ scrollAxis = VERTICAL, scrollContainer }) {
197197
_updateAllElements();
198198
};
199199

200+
this.updateScrollContainer = function(el) {
201+
// remove existing listeners with current el first
202+
_removeListeners(viewEl);
203+
204+
viewEl = el;
205+
hasScrollContainer = !!el;
206+
view = new View({ width: 0, height: 0, scrollContainer: el });
207+
_setViewSize();
208+
_addListeners(viewEl);
209+
_updateAllElements({ updateCache: true });
210+
};
211+
200212
/**
201213
* Removes listeners, reset all styles then nullifies the global ParallaxController.
202214
*/
203215
this.destroy = function() {
204-
_removeListeners();
216+
_removeListeners(viewEl);
205217
elements.forEach(element => resetStyles(element));
206218
elements = undefined;
207219
};

‎src/components/ParallaxProvider.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,12 @@ export default class ParallaxProvider extends Component {
3636
});
3737
}
3838

39+
componentDidUpdate(prevProps) {
40+
if (prevProps.scrollContainer !== this.props.scrollContainer) {
41+
this.controller.updateScrollContainer(this.props.scrollContainer);
42+
}
43+
}
44+
3945
componentWillUnmount() {
4046
this.controller = this.controller.destroy();
4147
}

‎stories/Parallax/3_ParallaxInADiv.stories.js‎

Lines changed: 79 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { text, number } from '@storybook/addon-knobs';
33
import { storiesOf } from '@storybook/react';
4-
import { Parallax, ParallaxProvider } from 'react-scroll-parallax';
4+
import { Parallax } from 'react-scroll-parallax';
55
import Element from '../Element/Element';
66
import ScrollContainer from '../ScrollContainer';
77
import styles from './Parallax.scss';
@@ -16,29 +16,25 @@ storiesOf('<Parallax> in a <div>', module)
1616
const elements = new Array(amount * 2 + 1).fill(null).map((x, i) => i);
1717
return (
1818
<ScrollContainer>
19-
{scrollContainer => (
20-
<ParallaxProvider scrollContainer={scrollContainer}>
21-
<div className="vertical">
22-
<div className="elements linear">
23-
{elements.map((_, i) => {
24-
const n = i - amount;
25-
return (
26-
<Parallax
27-
key={n}
28-
className={styles.smallLinear}
29-
x={[
30-
`${offA * n}${unit}`,
31-
`${offB * n}${unit}`,
32-
]}
33-
>
34-
<Element name={n * -1} />
35-
</Parallax>
36-
);
37-
})}
38-
</div>
39-
</div>
40-
</ParallaxProvider>
41-
)}
19+
<div className="vertical">
20+
<div className="elements linear">
21+
{elements.map((_, i) => {
22+
const n = i - amount;
23+
return (
24+
<Parallax
25+
key={n}
26+
className={styles.smallLinear}
27+
x={[
28+
`${offA * n}${unit}`,
29+
`${offB * n}${unit}`,
30+
]}
31+
>
32+
<Element name={n * -1} />
33+
</Parallax>
34+
);
35+
})}
36+
</div>
37+
</div>
4238
</ScrollContainer>
4339
);
4440
})
@@ -50,29 +46,25 @@ storiesOf('<Parallax> in a <div>', module)
5046
const elements = new Array(amount * 2 + 1).fill(null).map((x, i) => i);
5147
return (
5248
<ScrollContainer>
53-
{scrollContainer => (
54-
<ParallaxProvider scrollContainer={scrollContainer}>
55-
<div className="vertical">
56-
<div className="elements linear">
57-
{elements.map((_, i) => {
58-
const n = i - amount;
59-
return (
60-
<Parallax
61-
key={n}
62-
className={styles.smallLinear}
63-
y={[
64-
`${offA * n}${unit}`,
65-
`${offB * n}${unit}`,
66-
]}
67-
>
68-
<Element name={n * -1} />
69-
</Parallax>
70-
);
71-
})}
72-
</div>
73-
</div>
74-
</ParallaxProvider>
75-
)}
49+
<div className="vertical">
50+
<div className="elements linear">
51+
{elements.map((_, i) => {
52+
const n = i - amount;
53+
return (
54+
<Parallax
55+
key={n}
56+
className={styles.smallLinear}
57+
y={[
58+
`${offA * n}${unit}`,
59+
`${offB * n}${unit}`,
60+
]}
61+
>
62+
<Element name={n * -1} />
63+
</Parallax>
64+
);
65+
})}
66+
</div>
67+
</div>
7668
</ScrollContainer>
7769
);
7870
})
@@ -83,33 +75,26 @@ storiesOf('<Parallax> in a <div>', module)
8375
const unit = text('Offset Unit', '%');
8476
const elements = new Array(amount * 2 + 1).fill(null).map((x, i) => i);
8577
return (
86-
<ScrollContainer>
87-
{scrollContainer => (
88-
<ParallaxProvider
89-
scrollContainer={scrollContainer}
90-
scrollAxis="horizontal"
91-
>
92-
<div className="horizontal">
93-
<div className="elements linear">
94-
{elements.map((_, i) => {
95-
const n = i - amount;
96-
return (
97-
<Parallax
98-
key={n}
99-
className={styles.smallLinear}
100-
x={[
101-
`${offA * n}${unit}`,
102-
`${offB * n}${unit}`,
103-
]}
104-
>
105-
<Element name={n * -1} />
106-
</Parallax>
107-
);
108-
})}
109-
</div>
110-
</div>
111-
</ParallaxProvider>
112-
)}
78+
<ScrollContainer scrollAxis="horizontal">
79+
<div className="horizontal">
80+
<div className="elements linear">
81+
{elements.map((_, i) => {
82+
const n = i - amount;
83+
return (
84+
<Parallax
85+
key={n}
86+
className={styles.smallLinear}
87+
x={[
88+
`${offA * n}${unit}`,
89+
`${offB * n}${unit}`,
90+
]}
91+
>
92+
<Element name={n * -1} />
93+
</Parallax>
94+
);
95+
})}
96+
</div>
97+
</div>
11398
</ScrollContainer>
11499
);
115100
})
@@ -120,33 +105,26 @@ storiesOf('<Parallax> in a <div>', module)
120105
const unit = text('Offset Unit', '%');
121106
const elements = new Array(amount * 2 + 1).fill(null).map((x, i) => i);
122107
return (
123-
<ScrollContainer>
124-
{scrollContainer => (
125-
<ParallaxProvider
126-
scrollContainer={scrollContainer}
127-
scrollAxis="horizontal"
128-
>
129-
<div className="horizontal">
130-
<div className="elements linear">
131-
{elements.map((_, i) => {
132-
const n = i - amount;
133-
return (
134-
<Parallax
135-
key={n}
136-
className={styles.smallLinear}
137-
y={[
138-
`${offA * n}${unit}`,
139-
`${offB * n}${unit}`,
140-
]}
141-
>
142-
<Element name={n * -1} />
143-
</Parallax>
144-
);
145-
})}
146-
</div>
147-
</div>
148-
</ParallaxProvider>
149-
)}
108+
<ScrollContainer scrollAxis="horizontal">
109+
<div className="horizontal">
110+
<div className="elements linear">
111+
{elements.map((_, i) => {
112+
const n = i - amount;
113+
return (
114+
<Parallax
115+
key={n}
116+
className={styles.smallLinear}
117+
y={[
118+
`${offA * n}${unit}`,
119+
`${offB * n}${unit}`,
120+
]}
121+
>
122+
<Element name={n * -1} />
123+
</Parallax>
124+
);
125+
})}
126+
</div>
127+
</div>
150128
</ScrollContainer>
151129
);
152130
});

‎stories/ScrollContainer.js‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,32 @@
11
import React from 'react';
2+
import { ParallaxProvider } from 'react-scroll-parallax';
23

34
export default class ScrollContainer extends React.Component {
5+
static defaultProps = {
6+
scrollAxis: 'vertical',
7+
};
8+
49
constructor() {
510
super();
6-
this.scrollContainer = React.createRef();
711
this.state = {
8-
mounted: false,
12+
scrollContainer: null,
913
};
14+
this.scrollContainer = React.createRef();
1015
}
1116

12-
componentDidMount = () => {
13-
this.setState({ mounted: true });
14-
};
17+
componentDidMount() {
18+
this.setState({ scrollContainer: this.scrollContainer.current });
19+
}
1520

1621
render() {
17-
const ref = this.scrollContainer.current;
1822
return (
1923
<div className="scroll-container" ref={this.scrollContainer}>
20-
{this.state.mounted ? this.props.children(ref) : null}
24+
<ParallaxProvider
25+
scrollContainer={this.state.scrollContainer}
26+
scrollAxis={this.props.scrollAxis}
27+
>
28+
{this.props.children}
29+
</ParallaxProvider>
2130
</div>
2231
);
2332
}

0 commit comments

Comments
 (0)