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 2e5a70e

Browse files
allow custom props on ParallaxBanner layers jscottsmith#81 
1 parent 23b1dfa commit 2e5a70e

File tree

3 files changed

+122
-23
lines changed

3 files changed

+122
-23
lines changed

‎__tests__/ParallaxBanner.test.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,4 +134,31 @@ describe('Expect the <ParallaxBanner> component', () => {
134134

135135
expect(childFn).toBeCalled();
136136
});
137+
138+
it('to render layers with custom props', () => {
139+
const tree = renderer
140+
.create(
141+
<ParallaxProvider>
142+
<ParallaxBanner
143+
layers={[
144+
{
145+
amount: 0.2,
146+
props: {
147+
style: {
148+
backgroundColor: 'red',
149+
},
150+
className: 'my-custom-class',
151+
id: 'my-id',
152+
},
153+
},
154+
]}
155+
/>
156+
</ParallaxProvider>,
157+
{
158+
createNodeMock,
159+
}
160+
)
161+
.toJSON();
162+
expect(tree).toMatchSnapshot();
163+
});
137164
});

‎__tests__/__snapshots__/ParallaxBanner.test.js.snap‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,61 @@ exports[`Expect the <ParallaxBanner> component to render image banners correctly
122122
</div>
123123
`;
124124
125+
exports[`Expect the <ParallaxBanner> component to render layers with custom props 1`] = `
126+
<div
127+
className="parallax-banner"
128+
style={
129+
Object {
130+
"height": "50vh",
131+
"overflow": "hidden",
132+
"position": "relative",
133+
"width": "100%",
134+
}
135+
}
136+
>
137+
<div
138+
className="parallax-outer"
139+
style={
140+
Object {
141+
"bottom": 0,
142+
"left": 0,
143+
"position": "absolute",
144+
"right": 0,
145+
"top": 0,
146+
}
147+
}
148+
>
149+
<div
150+
className="parallax-inner"
151+
style={
152+
Object {
153+
"bottom": 0,
154+
"left": 0,
155+
"position": "absolute",
156+
"right": 0,
157+
"top": 0,
158+
}
159+
}
160+
>
161+
<div
162+
className="parallax-banner-layer-0 my-custom-class"
163+
id="my-id"
164+
style={
165+
Object {
166+
"backgroundColor": "red",
167+
"bottom": "-20%",
168+
"left": 0,
169+
"position": "absolute",
170+
"right": 0,
171+
"top": "-20%",
172+
}
173+
}
174+
/>
175+
</div>
176+
</div>
177+
</div>
178+
`;
179+
125180
exports[`Expect the <ParallaxBanner> component to render without expanded margins 1`] = `
126181
<div
127182
className="parallax-banner"

‎src/components/ParallaxBanner.js‎

Lines changed: 40 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,42 @@ const ParallaxBanner = ({ children, className, layers, style, disabled }) => {
2525
>
2626
{layers.map(
2727
(
28-
{ image, amount, children: layerChildren, expanded = true },
28+
{
29+
amount,
30+
children: layerChildren,
31+
expanded = true,
32+
image,
33+
props = {},
34+
},
2935
i
3036
) => {
37+
// save props to be merged
38+
const layerStyle = props.style || {};
39+
const layerClass = props.className || '';
40+
41+
// remove from pass through props
42+
delete props.style;
43+
delete props.className;
44+
45+
const layerClassMerged = `parallax-banner-layer-${i}${
46+
layerClass ? ` ${layerClass}` : ''
47+
}`;
48+
3149
// if this is an expanded layer overwrite the top/bottom styles with negative margins
3250
const expandedStyle = expanded
3351
? {
3452
top: Math.abs(amount) * 100 * -1 + '%',
3553
bottom: Math.abs(amount) * 100 * -1 + '%',
3654
}
3755
: {};
56+
// optional image styles
57+
const imageStyle = image
58+
? {
59+
backgroundImage: `url(${image})`,
60+
backgroundPosition: 'center',
61+
backgroundSize: 'cover',
62+
}
63+
: {};
3864

3965
return (
4066
<Parallax
@@ -44,28 +70,18 @@ const ParallaxBanner = ({ children, className, layers, style, disabled }) => {
4470
styleOuter={absoluteStyle}
4571
disabled={disabled}
4672
>
47-
{image ? (
48-
<div
49-
className={`parallax-banner-layer-${i}`}
50-
style={{
51-
backgroundImage: `url(${image})`,
52-
backgroundPosition: 'center',
53-
backgroundSize: 'cover',
54-
...absoluteStyle,
55-
...expandedStyle,
56-
}}
57-
/>
58-
) : (
59-
<div
60-
className={`parallax-banner-layer-${i}`}
61-
style={{
62-
...absoluteStyle,
63-
...expandedStyle,
64-
}}
65-
>
66-
{layerChildren}
67-
</div>
68-
)}
73+
<div
74+
className={layerClassMerged}
75+
style={{
76+
...imageStyle,
77+
...absoluteStyle,
78+
...expandedStyle,
79+
...layerStyle,
80+
}}
81+
{...props}
82+
>
83+
{layerChildren}
84+
</div>
6985
</Parallax>
7086
);
7187
}
@@ -89,6 +105,7 @@ ParallaxBanner.propTypes = {
89105
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
90106
expanded: PropTypes.bool,
91107
image: PropTypes.string,
108+
props: PropTypes.object,
92109
})
93110
),
94111
style: PropTypes.object,

0 commit comments

Comments
(0)

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