From 0c8932a8d8ce61be7223b26605003d2e2ed0744a Mon Sep 17 00:00:00 2001 From: Andrea Cresta Date: Tue, 3 May 2016 17:04:39 +0200 Subject: [PATCH 1/8] added maxDraggingOffset property to set the maximum value for the dragging gesture --- README.md | 1 + index.js | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/README.md b/README.md index b94f860..8393710 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,7 @@ class Application extends React.Component { - `menu` (React.Component) - Menu component - `isOpen` (Boolean) - Props driven control over menu open state - `openMenuOffset` (Number) - Content view left margin if menu is opened, defaults to 2/3 of device screen width +- `maxDraggingOffset` (Number) - Maximum dragging possible in addiction to the menu size, default 0 that means that the user can drag only until the full menu is shown, to change if a different behaviour is wanted - `hiddenMenuOffset` (Number) - Content view left margin if menu is hidden - `edgeHitWidth` (Number) - Edge distance on content view to open side menu, defaults to 60 - `toleranceX` (Number) - X axis tolerance diff --git a/index.js b/index.js index c3d2963..e9b03e8 100644 --- a/index.js +++ b/index.js @@ -120,6 +120,10 @@ class SideMenu extends Component { if (this.state.left.__getValue() * this.menuPositionMultiplier() >= 0) { let newLeft = this.prevLeft + gestureState.dx; + if (newLeft > this.props.openMenuOffset + this.props.maxDraggingOffset) { + newLeft = this.props.openMenuOffset + this.props.maxDraggingOffset; + } + if (!this.props.bounceBackOnOverdraw && Math.abs(newLeft) > this.props.openMenuOffset) { newLeft = this.menuPositionMultiplier() * this.props.openMenuOffset; } @@ -236,6 +240,7 @@ SideMenu.propTypes = { menuPosition: React.PropTypes.oneOf(['left', 'right', ]), onChange: React.PropTypes.func, openMenuOffset: React.PropTypes.number, + maxDraggingOffset: React.PropTypes.number, hiddenMenuOffset: React.PropTypes.number, disableGestures: React.PropTypes.oneOfType([React.PropTypes.func, React.PropTypes.bool, ]), animationFunction: React.PropTypes.func, @@ -249,6 +254,7 @@ SideMenu.defaultProps = { toleranceX: 10, edgeHitWidth: 60, openMenuOffset: deviceScreen.width * 2 / 3, + maxDraggingOffset: 0, hiddenMenuOffset: 0, onStartShouldSetResponderCapture: () => true, onChange: () => {}, From d96b70990db8281abc44504165ee2eca24f9a3e7 Mon Sep 17 00:00:00 2001 From: Andrea Cresta Date: Fri, 7 Oct 2016 19:37:11 +0200 Subject: [PATCH 2/8] bugfix --- index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index ffe5511..d48b7d6 100644 --- a/index.js +++ b/index.js @@ -132,7 +132,8 @@ class SideMenu extends React.Component { if (!this.props.bounceBackOnOverdraw && Math.abs(newLeft) > this.props.openMenuOffset) { newLeft = this.menuPositionMultiplier() * this.props.openMenuOffset; - + } + this.props.onMove(newLeft); this.state.left.setValue(newLeft); } From 72ecb993e8e1e15474940f3eaabfde74050d87b4 Mon Sep 17 00:00:00 2001 From: Andrea Cresta Date: Thu, 8 Dec 2016 15:59:04 +0100 Subject: [PATCH 3/8] forcing the menu to re-calculate the percentage --- index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index d48b7d6..e84e0dd 100644 --- a/index.js +++ b/index.js @@ -216,9 +216,11 @@ class SideMenu extends React.Component { onLayoutChange(e) { const { width, height, } = e.nativeEvent.layout; - const openMenuOffset = width * this.state.openOffsetMenuPercentage; + + const openOffsetMenuPercentage = props.openMenuOffset / deviceScreen.width; + const openMenuOffset = width * openOffsetMenuPercentage; const hiddenMenuOffset = width * this.state.hiddenMenuOffsetPercentage; - this.setState({ width, height, openMenuOffset, hiddenMenuOffset }); + this.setState({ width, height, openMenuOffset, hiddenMenuOffset, openOffsetMenuPercentage }); } /** From e013059b6e70ba2020b6bb7e8933869a6639f165 Mon Sep 17 00:00:00 2001 From: Andrea Cresta Date: Thu, 8 Dec 2016 16:01:12 +0100 Subject: [PATCH 4/8] bug fix --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index e84e0dd..92f5266 100644 --- a/index.js +++ b/index.js @@ -217,7 +217,7 @@ class SideMenu extends React.Component { onLayoutChange(e) { const { width, height, } = e.nativeEvent.layout; - const openOffsetMenuPercentage = props.openMenuOffset / deviceScreen.width; + const openOffsetMenuPercentage = this.props.openMenuOffset / deviceScreen.width; const openMenuOffset = width * openOffsetMenuPercentage; const hiddenMenuOffset = width * this.state.hiddenMenuOffsetPercentage; this.setState({ width, height, openMenuOffset, hiddenMenuOffset, openOffsetMenuPercentage }); From 2d6f1802c6d9f895050effc12773324e39a7dd99 Mon Sep 17 00:00:00 2001 From: Andrea Cresta Date: Thu, 8 Dec 2016 16:05:15 +0100 Subject: [PATCH 5/8] fixing bug with offset --- index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/index.js b/index.js index 92f5266..d620b06 100644 --- a/index.js +++ b/index.js @@ -217,8 +217,7 @@ class SideMenu extends React.Component { onLayoutChange(e) { const { width, height, } = e.nativeEvent.layout; - const openOffsetMenuPercentage = this.props.openMenuOffset / deviceScreen.width; - const openMenuOffset = width * openOffsetMenuPercentage; + const openMenuOffset = this.props.openMenuOffset === undefined ? width * openOffsetMenuPercentage : this.props.openMenuOffset; const hiddenMenuOffset = width * this.state.hiddenMenuOffsetPercentage; this.setState({ width, height, openMenuOffset, hiddenMenuOffset, openOffsetMenuPercentage }); } From 07cb12db6d6e2c873a9bfbdd530782759bb46745 Mon Sep 17 00:00:00 2001 From: Andrea Cresta Date: Thu, 8 Dec 2016 16:07:02 +0100 Subject: [PATCH 6/8] bug fix --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index d620b06..1126c11 100644 --- a/index.js +++ b/index.js @@ -217,7 +217,7 @@ class SideMenu extends React.Component { onLayoutChange(e) { const { width, height, } = e.nativeEvent.layout; - const openMenuOffset = this.props.openMenuOffset === undefined ? width * openOffsetMenuPercentage : this.props.openMenuOffset; + const openMenuOffset = this.props.openMenuOffset === undefined ? width * this.state.openOffsetMenuPercentage : this.props.openMenuOffset; const hiddenMenuOffset = width * this.state.hiddenMenuOffsetPercentage; this.setState({ width, height, openMenuOffset, hiddenMenuOffset, openOffsetMenuPercentage }); } From dcb9c0718ae3e62e800d6bc6798cb25832a6ecc0 Mon Sep 17 00:00:00 2001 From: Andrea Cresta Date: Thu, 8 Dec 2016 16:16:07 +0100 Subject: [PATCH 7/8] bugfix --- index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/index.js b/index.js index d48b7d6..31ecf26 100644 --- a/index.js +++ b/index.js @@ -216,6 +216,7 @@ class SideMenu extends React.Component { onLayoutChange(e) { const { width, height, } = e.nativeEvent.layout; + const openOffsetMenuPercentage = openMenuOffset * width; const openMenuOffset = width * this.state.openOffsetMenuPercentage; const hiddenMenuOffset = width * this.state.hiddenMenuOffsetPercentage; this.setState({ width, height, openMenuOffset, hiddenMenuOffset }); From 7e1b240fddca1a49e0f563b79e31b83cf826a9e1 Mon Sep 17 00:00:00 2001 From: Andrea Cresta Date: Thu, 8 Dec 2016 16:16:54 +0100 Subject: [PATCH 8/8] bug fix --- index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 31ecf26..8f4225c 100644 --- a/index.js +++ b/index.js @@ -217,9 +217,10 @@ class SideMenu extends React.Component { onLayoutChange(e) { const { width, height, } = e.nativeEvent.layout; const openOffsetMenuPercentage = openMenuOffset * width; - const openMenuOffset = width * this.state.openOffsetMenuPercentage; + const openMenuOffset = this.props.openMenuOffset === undefined ? width * this.state.openOffsetMenuPercentage : this.props.openMenuOffset; const hiddenMenuOffset = width * this.state.hiddenMenuOffsetPercentage; - this.setState({ width, height, openMenuOffset, hiddenMenuOffset }); + this.setState({ width, height, openMenuOffset, hiddenMenuOffset, openOffsetMenuPercentage }); + } /**