Skip to content

allow custom props on ParallaxBanner layers #81 #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 12, 2020
Merged

allow custom props on ParallaxBanner layers #81 #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions __tests__/ParallaxBanner.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,4 +134,31 @@ describe('Expect the <ParallaxBanner> component', () => {

expect(childFn).toBeCalled();
});

it('to render layers with custom props', () => {
const tree = renderer
.create(
<ParallaxProvider>
<ParallaxBanner
layers={[
{
amount: 0.2,
props: {
style: {
backgroundColor: 'red',
},
className: 'my-custom-class',
id: 'my-id',
},
},
]}
/>
</ParallaxProvider>,
{
createNodeMock,
}
)
.toJSON();
expect(tree).toMatchSnapshot();
});
});
55 changes: 55 additions & 0 deletions __tests__/__snapshots__/ParallaxBanner.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,61 @@ exports[`Expect the <ParallaxBanner> component to render image banners correctly
</div>
`;

exports[`Expect the <ParallaxBanner> component to render layers with custom props 1`] = `
<div
className="parallax-banner"
style={
Object {
"height": "50vh",
"overflow": "hidden",
"position": "relative",
"width": "100%",
}
}
>
<div
className="parallax-outer"
style={
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<div
className="parallax-inner"
style={
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<div
className="parallax-banner-layer-0 my-custom-class"
id="my-id"
style={
Object {
"backgroundColor": "red",
"bottom": "-20%",
"left": 0,
"position": "absolute",
"right": 0,
"top": "-20%",
}
}
/>
</div>
</div>
</div>
`;

exports[`Expect the <ParallaxBanner> component to render without expanded margins 1`] = `
<div
className="parallax-banner"
Expand Down
63 changes: 40 additions & 23 deletions src/components/ParallaxBanner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,42 @@ const ParallaxBanner = ({ children, className, layers, style, disabled }) => {
>
{layers.map(
(
{ image, amount, children: layerChildren, expanded = true },
{
amount,
children: layerChildren,
expanded = true,
image,
props = {},
},
i
) => {
// save props to be merged
const layerStyle = props.style || {};
const layerClass = props.className || '';

// remove from pass through props
delete props.style;
delete props.className;

const layerClassMerged = `parallax-banner-layer-${i}${
layerClass ? ` ${layerClass}` : ''
}`;

// if this is an expanded layer overwrite the top/bottom styles with negative margins
const expandedStyle = expanded
? {
top: Math.abs(amount) * 100 * -1 + '%',
bottom: Math.abs(amount) * 100 * -1 + '%',
}
: {};
// optional image styles
const imageStyle = image
? {
backgroundImage: `url(${image})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
}
: {};

return (
<Parallax
Expand All @@ -44,28 +70,18 @@ const ParallaxBanner = ({ children, className, layers, style, disabled }) => {
styleOuter={absoluteStyle}
disabled={disabled}
>
{image ? (
<div
className={`parallax-banner-layer-${i}`}
style={{
backgroundImage: `url(${image})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
...absoluteStyle,
...expandedStyle,
}}
/>
) : (
<div
className={`parallax-banner-layer-${i}`}
style={{
...absoluteStyle,
...expandedStyle,
}}
>
{layerChildren}
</div>
)}
<div
className={layerClassMerged}
style={{
...imageStyle,
...absoluteStyle,
...expandedStyle,
...layerStyle,
}}
{...props}
>
{layerChildren}
</div>
</Parallax>
);
}
Expand All @@ -89,6 +105,7 @@ ParallaxBanner.propTypes = {
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
expanded: PropTypes.bool,
image: PropTypes.string,
props: PropTypes.object,
})
),
style: PropTypes.object,
Expand Down