From b23ad7c37bc65bc8cf3237af68c53f027d906ab7 Mon Sep 17 00:00:00 2001 From: David Briglio Date: Mon, 8 Jun 2020 14:49:45 -0400 Subject: [PATCH 1/2] Moved target for touch events to the component --- src/index.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index b1c89e5..2f102fa 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,8 @@ class Pullable extends React.Component { this.clearTouchStatus(); + this.componentId = `pull-div-${Date.now() + Math.floor(Math.random() * 10000)}`; + this.state = { status: 'ready', height: 0 @@ -15,15 +17,17 @@ class Pullable extends React.Component { } componentDidMount() { - window.addEventListener('touchstart', this.onTouchStart); - window.addEventListener('touchmove', this.onTouchMove, { passive: false }); - window.addEventListener('touchend', this.onTouchEnd); + let element = document.getElementById(this.componentId); + element.addEventListener('touchstart', this.onTouchStart); + element.addEventListener('touchmove', this.onTouchMove, { passive: false }); + element.addEventListener('touchend', this.onTouchEnd); } componentWillUnmount() { - window.removeEventListener('touchstart', this.onTouchStart); - window.removeEventListener('touchmove', this.onTouchMove, { passive: false }); - window.removeEventListener('touchend', this.onTouchEnd); + let element = document.getElementById(this.componentId); + element.removeEventListener('touchstart', this.onTouchStart); + element.removeEventListener('touchmove', this.onTouchMove, { passive: false }); + element.removeEventListener('touchend', this.onTouchEnd); clearTimeout(this.refreshCompletedTimeout); clearTimeout(this.resetTimeout); @@ -142,7 +146,9 @@ class Pullable extends React.Component { - {this.props.children} +
+ {this.props.children} +
); } From 952ed4337f312443ca247f78d0afcb70903a4631 Mon Sep 17 00:00:00 2001 From: David Briglio Date: Tue, 9 Jun 2020 14:45:26 -0400 Subject: [PATCH 2/2] Added option to enable new behaviour --- README.md | 1 + src/index.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d694ee9..7b52eee 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,7 @@ To prevent Chrome overscroll set `overscroll-behavior-y: contain [or] none;` on | resetEase | String | `cubic-bezier(0.215, 0.61, 0.355, 1)` | Ease when resetting | | shouldPullToRefresh | Function | `() => window.scrollY <= 0` | When to allow pulling | | disabled | Boolean | | Disables all functionality | +| targetComponent | Boolean | `false` | Enable to only handle touch events on the wrapped component, otherwise all window touch events will be handled | ## Examples diff --git a/src/index.js b/src/index.js index 2f102fa..fb55385 100644 --- a/src/index.js +++ b/src/index.js @@ -17,14 +17,14 @@ class Pullable extends React.Component { } componentDidMount() { - let element = document.getElementById(this.componentId); + let element = this.props.targetComponent ? document.getElementById(this.componentId) : window; element.addEventListener('touchstart', this.onTouchStart); element.addEventListener('touchmove', this.onTouchMove, { passive: false }); element.addEventListener('touchend', this.onTouchEnd); } componentWillUnmount() { - let element = document.getElementById(this.componentId); + let element = this.props.targetComponent ? document.getElementById(this.componentId) : window; element.removeEventListener('touchstart', this.onTouchStart); element.removeEventListener('touchmove', this.onTouchMove, { passive: false }); element.removeEventListener('touchend', this.onTouchEnd);