From 17ca21e1f4bf39a72ab7aa7b88418f014de7df1f Mon Sep 17 00:00:00 2001 From: Mark Rickert Date: Fri, 7 Feb 2020 12:36:20 -0700 Subject: [PATCH 1/6] Remove .bind(this) in favor of ES6,7,8 property initializers. --- index.js | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/index.js b/index.js index 6bd630b..1583180 100644 --- a/index.js +++ b/index.js @@ -129,12 +129,12 @@ class SwipeableView extends Component { componentWillMount() { this._panResponder = PanResponder.create({ - onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponderCapture.bind(this), - onPanResponderGrant: this._handlePanResponderGrant.bind(this), - onPanResponderMove: this._handlePanResponderMove.bind(this), - onPanResponderRelease: this._handlePanResponderEnd.bind(this), - onPanResponderTerminationRequest: this._onPanResponderTerminationRequest.bind(this), - onPanResponderTerminate: this._handlePanResponderEnd.bind(this), + onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponderCapture, + onPanResponderGrant: this._handlePanResponderGrant, + onPanResponderMove: this._handlePanResponderMove, + onPanResponderRelease: this._handlePanResponderEnd, + onPanResponderTerminationRequest: this._onPanResponderTerminationRequest, + onPanResponderTerminate: this._handlePanResponderEnd, onShouldBlockNativeResponder: () => false, }); } @@ -152,7 +152,7 @@ class SwipeableView extends Component { }, ON_MOUNT_BOUNCE_DELAY); } - setTimeout(this._measureSwipeout.bind(this)); + setTimeout(this._measureSwipeout); } componentWillUnmount() { @@ -183,7 +183,7 @@ class SwipeableView extends Component { return true; } - _onPanResponderTerminationRequest() { + _onPanResponderTerminationRequest = () => { return false; } @@ -204,7 +204,7 @@ class SwipeableView extends Component { this._animateTo(CLOSED_LEFT_POSITION, duration); } - _animateToClosedPositionDuringBounce() { + _animateToClosedPositionDuringBounce = () => { this._animateToClosedPosition(RIGHT_SWIPE_BOUNCE_BACK_DURATION); } @@ -246,7 +246,7 @@ class SwipeableView extends Component { this._animateTo( -swipeBounceBackDistance, duration, - this._animateToClosedPositionDuringBounce.bind(this), + this._animateToClosedPositionDuringBounce, ); } @@ -261,7 +261,7 @@ class SwipeableView extends Component { ); } - _handlePanResponderEnd(event, gestureState) { + _handlePanResponderEnd = (event, gestureState) => { const { onOpen, onClose, onSwipeEnd, isRTL } = this.props; const horizontalDistance = isRTL ? -gestureState.dx : gestureState.dx; @@ -319,7 +319,7 @@ class SwipeableView extends Component { ); } - _handlePanResponderMove(event, gestureState) { + _handlePanResponderMove = (event, gestureState) => { const { onSwipeStart } = this.props; if (this._isSwipingExcessivelyRightFromClosedPosition(gestureState)) { @@ -335,10 +335,10 @@ class SwipeableView extends Component { } } - _handlePanResponderGrant() { + _handlePanResponderGrant = () => { } - _handleMoveShouldSetPanResponderCapture(event, gestureState) { + _handleMoveShouldSetPanResponderCapture = (event, gestureState) => { // Decides whether a swipe is responded to by this component or its child return gestureState.dy < 10 && this._isValidSwipe(gestureState); } @@ -392,7 +392,7 @@ class SwipeableView extends Component { } } - _measureSwipeout() { + _measureSwipeout = () => { if (this._swipeoutRef) { this._swipeoutRef.measure((a, b, width, height) => { const { btnsArray } = this.props; @@ -417,7 +417,7 @@ class SwipeableView extends Component { }; } - _onSwipeableViewLayout(event) { + _onSwipeableViewLayout = (event) => { this.setState({ isSwipeableViewRendered: true, rowHeight: event.nativeEvent.layout.height, @@ -464,7 +464,7 @@ class SwipeableView extends Component { // The swipeable item const swipeableView = ( {this.props.children} From ad39b99377c07d2749d7d0125f1047b6dc988899 Mon Sep 17 00:00:00 2001 From: Mark Rickert Date: Fri, 7 Feb 2020 12:45:58 -0700 Subject: [PATCH 2/6] Move PanResponder creation to the constructor method. componentWillMount is deprecated. --- index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/index.js b/index.js index 1583180..eb8630c 100644 --- a/index.js +++ b/index.js @@ -125,9 +125,7 @@ class SwipeableView extends Component { }; this._swipeoutRef = null; - } - componentWillMount() { this._panResponder = PanResponder.create({ onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponderCapture, onPanResponderGrant: this._handlePanResponderGrant, From 27b7bb3bf866fe4a36a2eba213bb9d60e145c8c3 Mon Sep 17 00:00:00 2001 From: Mark Rickert Date: Fri, 7 Feb 2020 13:13:41 -0700 Subject: [PATCH 3/6] Switch from the deprecatred componentWillReceiveProps to componentDidUpdate --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index eb8630c..7227e78 100644 --- a/index.js +++ b/index.js @@ -159,13 +159,13 @@ class SwipeableView extends Component { } } - componentWillReceiveProps(nextProps) { + componentDidUpdate(prevProps) { const { isOpen } = this.props; /** * We do not need an "animateOpen(noCallback)" because this animation is * handled internally by this component. */ - if (isOpen && !nextProps.isOpen) { + if (prevProps.isOpen && !isOpen) { this._animateToClosedPosition(); } } From feeb3489151cd616f6ee4d9c804c311fe85e4450 Mon Sep 17 00:00:00 2001 From: Mark Rickert Date: Fri, 7 Feb 2020 13:14:16 -0700 Subject: [PATCH 4/6] Handle changes to isOpen prop to also allow opening, not just closing. --- index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.js b/index.js index 7227e78..a9cdfff 100644 --- a/index.js +++ b/index.js @@ -167,6 +167,8 @@ class SwipeableView extends Component { */ if (prevProps.isOpen && !isOpen) { this._animateToClosedPosition(); + } else if (!prevProps.isOpen && isOpen) { + this._animateToOpenPosition(); } } From 6cec611f3d3e058741a08f57ff45a3f575afbbf9 Mon Sep 17 00:00:00 2001 From: Mark Rickert Date: Fri, 7 Feb 2020 13:17:39 -0700 Subject: [PATCH 5/6] Update readme. --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 30c3eb5..65ed85d 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,8 @@ The code is based on the experimental SwipeableListView of react-native. npm install --save react-native-swipeable-view ``` +If using React Native < 0.54, you must stay at <= 1.0.0. + ## Usage example ``` @@ -36,7 +38,7 @@ var btnsArray = [ Prop | Type | Optional | Default | Description ------------------- | ------ | -------- | --------- | ----------- -isOpen         | bool   | Yes | false | Swipeout is open or not +isOpen         | bool   | Yes | false | Swipeout is open or not. CHanging this value will animate the Swipeout open or closed. autoClose       | bool   | Yes     | false   | Auto-Close on button press btnsArray | array | No | [] | Swipe buttons array onOpen | func | Yes | | Callback when swipe is opened From 4189fb08c5e8b641fc404b3d0a56229a92c07c85 Mon Sep 17 00:00:00 2001 From: Mark Rickert Date: Thu, 20 Feb 2020 14:46:31 -0500 Subject: [PATCH 6/6] Make sure this._measureSwipeout is only called after everythign is laid out. --- index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/index.js b/index.js index a9cdfff..4b9686b 100644 --- a/index.js +++ b/index.js @@ -149,8 +149,6 @@ class SwipeableView extends Component { this._animateBounceBack(ON_MOUNT_BOUNCE_DURATION); }, ON_MOUNT_BOUNCE_DELAY); } - - setTimeout(this._measureSwipeout); } componentWillUnmount() { @@ -473,6 +471,7 @@ class SwipeableView extends Component { return ( (this._swipeoutRef = ref) } + onLayout={this._measureSwipeout} {...this._panResponder.panHandlers} collapsable={false}> {btnsArray}