Skip to content
This repository has been archived by the owner on May 21, 2020. It is now read-only.

Wrapped drawer in div to prevent scroll and click underneath it. #51

Closed
wants to merge 14 commits into from
Closed

Wrapped drawer in div to prevent scroll and click underneath it. #51

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b928980
Container div added to prevent click underneath drawer
pc9 Jun 7, 2018
65548b6
package-lock commit
pc9 Jun 7, 2018
d969fbb
prevent body scroll when drawer is open
pc9 Jun 7, 2018
e62cd26
change width property rather than display.
pc9 Jun 7, 2018
a889f17
rely on opacity to set width of container
pc9 Jun 7, 2018
8c20cf4
install release-it
pc9 Jun 8, 2018
72fc4a9
release it npm command
pc9 Jun 8, 2018
3a1f179
Release 3.1.1
pc9 Jun 8, 2018
465f429
package name update
pc9 Jul 11, 2018
905a34a
3.1.2
pc9 Jul 11, 2018
dcccaae
3.1.3
pc9 Jul 11, 2018
d4d1d2a
publish config modified
pc9 Jul 11, 2018
4c6342b
3.1.4
pc9 Jul 11, 2018
0e749a3
fix(package): added config to push package on github
pc9 Sep 26, 2019
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
50 changes: 25 additions & 25 deletions lib/drawer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,39 +193,39 @@ export default class Drawer extends React.Component {
return (
<Motion style={{ myProp: spring(Math.min(x + offset || 0, this.calculateWidth()), config) }}>
{interpolated => {
const { drawer, transform, overlay } = styles(
const { drawer, transform, overlay, container } = styles(
interpolated.myProp,
this.props
);

let computedStyle = {...drawer, ...drawerStyle };
if (interpolated.myProp > 0) computedStyle.display = "block";
else computedStyle.display = "none";

return (
<Hammer
onPress={this.onPress}
onPressUp={this.onPressUp}
onPan={this.onPan}
direction={Hammer.DIRECTION_HORIZONTAL}
>
<div style={transform}>
<div className={className} style={computedStyle}>
{isFunction(children)
? children(interpolated.myProp)
: children}

{!this.isClosed() &&
<Hammer
style={overlay}
className={overlayClassName}
onTap={this.onOverlayTap}
>
<span />
</Hammer>}
<div style={container}>
<Hammer
onPress={this.onPress}
onPressUp={this.onPressUp}
onPan={this.onPan}
direction={Hammer.DIRECTION_HORIZONTAL}
>
<div style={transform}>
<div className={className} style={computedStyle}>
{isFunction(children)
? children(interpolated.myProp)
: children}

{!this.isClosed() &&
<Hammer
style={overlay}
className={overlayClassName}
onTap={this.onOverlayTap}
>
<span />
</Hammer>}
</div>
</div>
</div>
</Hammer>
</Hammer>
</div>
);
}}
</Motion>
Expand Down
17 changes: 15 additions & 2 deletions lib/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ export default function(val, props) {
handleWidth,
overlayColor,
fadeOut,
offset
offset,
open,
} = props;

let clientWidth = 1000;
Expand All @@ -17,6 +18,11 @@ export default function(val, props) {
clientWidth = document.body.clientWidth;
if (/\D/.test(width))
width = document.body.clientWidth * (width.match(/\d*/) / 100);
if (open) {
document.body.style.overflowY = 'hidden';
} else {
document.body.style.overflowY = 'auto';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a fan of modifying the overflow styles of body. This is a very invasive way to go about this. Can you think of any alternatives to this? I'll try and do some testing this week to this regard as well...

}
}

const opacity = (val - offset) / width;
Expand All @@ -31,6 +37,13 @@ export default function(val, props) {
overflow: "auto"
};

const container = {
position: "fixed",
zIndex: zIndex,
width: opacity > 0 ? '100%' : '0px',
height: "100%",
};

const transform = {
boxSizing: "content-box",
pointer: "cursor",
Expand Down Expand Up @@ -65,5 +78,5 @@ export default function(val, props) {
WebkitTransform: `translate3d(${overlayTransform}px, 0, 0)`
};

return { drawer, transform, overlay };
return { drawer, transform, overlay, container };
}
Loading