Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 61069d0

Browse files
Merge branch 'master' into develop
2 parents 1b73300 + 49f954b commit 61069d0

File tree

6 files changed

+157
-119
lines changed

6 files changed

+157
-119
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.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-scroll-parallax",
3-
"version": "2.0.6",
3+
"version": "2.1.1",
44
"description": "React components to create parallax scroll effects for banners, images or any other DOM elements.",
55
"repository": {
66
"type": "git",

‎src/classes/ParallaxController.js‎

Lines changed: 22 additions & 10 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
/**
@@ -194,14 +194,26 @@ function ParallaxController({ scrollAxis = VERTICAL, scrollContainer }) {
194194
*/
195195
this.update = function() {
196196
_setViewSize();
197-
_updateAllElements();
197+
_updateAllElements({ updateCache: true });
198+
};
199+
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 });
198210
};
199211

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
}
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)

AltStyle によって変換されたページ (->オリジナル) /