From 0d4842f3d071da90d5c5c0f667ef36b255c5befd Mon Sep 17 00:00:00 2001 From: dabit1 Date: Tue, 17 Jan 2017 21:14:22 +0100 Subject: [PATCH 1/4] Send direction information to success callback If you set "slideDirection" with "SlideDirection.BOTH" you may need to know which direction was slided. --- SlideButton.js | 60 ++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 43 insertions(+), 17 deletions(-) diff --git a/SlideButton.js b/SlideButton.js index de1e7b2..c4745e9 100644 --- a/SlideButton.js +++ b/SlideButton.js @@ -11,6 +11,10 @@ import { Animated } from 'react-native'; +var Dimensions = require('Dimensions'); +var SCREEN_WIDTH = Dimensions.get('window').width; +var SCREEN_HEIGHT = Dimensions.get('window').height; + export var SlideDirection = { LEFT: "left", RIGHT: "right", @@ -50,7 +54,12 @@ export class SlideButton extends Component { } } + componentWillUnmount() { + this.mounted = false + } + componentWillMount() { + this.mounted = true var self = this; // TODO: Raise error if slideDirection prop is invalid. @@ -76,17 +85,19 @@ export class SlideButton extends Component { // Move the button out this.moveButtonOut(() => { self.setState({ swiped: true }); - self.props.onSlideSuccess(); + self.onSlideSuccess(); }); // Slide it back in after 1 sec setTimeout(() => { - self.moveButtonIn(() => { - self.setState({ - released: false, - dx: self.state.initialX + if (self.mounted) { + self.moveButtonIn(() => { + self.setState({ + released: false, + dx: self.state.initialX + }); }); - }); + } }, 1000); } else { @@ -121,10 +132,31 @@ export class SlideButton extends Component { onSlideSuccess() { if (this.props.onSlideSuccess !== undefined) { - this.props.onSlideSuccess(); + + var direction = null + + if (this.props.slideDirection === SlideDirection.BOTH) { + if (this.state.dx > (this.buttonWidth * 0.4)) { + direction = SlideDirection.RIGHT + } else { + direction = SlideDirection.LEFT + } + } + + this.props.onSlideSuccess(direction); } } + measureButton() { + var self = this; + this.refs.button.measure((ox, oy, width, height) => { + self.setState({ + initialX: ox, + buttonWidth: width + }); + }); + } + moveButtonIn(onCompleteCallback) { var self = this; var startPos = this.state.dx < 0 ? this.state.initialX + this.buttonWidth : @@ -185,7 +217,7 @@ export class SlideButton extends Component { var style = [styles.button, this.props.style, {left: this.state.dx}]; if (this.state.released) { - style = [styles.button, this.props.style, {left: this.state.animatedX}]; + style = [styles.button, this.props.style, { left: this.state.animatedX }]; var button = ( {this.props.children} @@ -195,27 +227,21 @@ export class SlideButton extends Component { var button = ( - {this.props.children} + {this.props.children} ); } return ( - - + { button } - ); } } -SlideButton.propTypes = { - width: React.PropTypes.number.isRequired, - height: React.PropTypes.number.isRequired -}; - const styles = StyleSheet.create({ container: { position: 'relative' From d488347f3d2d0b80a79fa4d1f358ebbc6cb03ba9 Mon Sep 17 00:00:00 2001 From: David Escalera Date: Sat, 13 Jan 2018 20:11:33 +0100 Subject: [PATCH 2/4] PropTypes is now a separated package --- SlideButton.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/SlideButton.js b/SlideButton.js index df40639..e516e64 100644 --- a/SlideButton.js +++ b/SlideButton.js @@ -10,6 +10,7 @@ import { PanResponder, Animated } from 'react-native'; +import PropTypes from 'prop-types'; export var SlideDirection = { LEFT: "left", @@ -241,9 +242,9 @@ export class SlideButton extends Component { } SlideButton.propTypes = { - width: React.PropTypes.number.isRequired, - height: React.PropTypes.number.isRequired, - successfulSlidePercent: React.PropTypes.number + width: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, + successfulSlidePercent: PropTypes.number }; const styles = StyleSheet.create({ From e73149f16d659b340e4ab761de566ba1b809f05a Mon Sep 17 00:00:00 2001 From: David Escalera Date: Sat, 13 Jan 2018 20:52:13 +0100 Subject: [PATCH 3/4] width and height must not be required --- SlideButton.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/SlideButton.js b/SlideButton.js index e516e64..9b65323 100644 --- a/SlideButton.js +++ b/SlideButton.js @@ -242,8 +242,6 @@ export class SlideButton extends Component { } SlideButton.propTypes = { - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, successfulSlidePercent: PropTypes.number }; From 8d8d43c45995b8fb987d8f43e352468ae8279c32 Mon Sep 17 00:00:00 2001 From: David Escalera Date: Sat, 13 Jan 2018 21:09:04 +0100 Subject: [PATCH 4/4] bug fixed --- SlideButton.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/SlideButton.js b/SlideButton.js index 9b65323..72ac815 100644 --- a/SlideButton.js +++ b/SlideButton.js @@ -10,7 +10,7 @@ import { PanResponder, Animated } from 'react-native'; -import PropTypes from 'prop-types'; +import PropTypes from 'prop-types' export var SlideDirection = { LEFT: "left", @@ -37,13 +37,13 @@ export class SlideButton extends Component { var slidePercent = this.props.successfulSlidePercent || 40; var successfulSlideWidth = this.buttonWidth * slidePercent / 100; if (!this.props.slideDirection) { - return this.state.dx > this.props.successfulSlideWidth; // Defaults to right slide + return this.state.dx > successfulSlideWidth; // Defaults to right slide } else if (this.props.slideDirection === SlideDirection.RIGHT) { - return this.state.dx > this.props.successfulSlideWidth; + return this.state.dx > successfulSlideWidth; } else if (this.props.slideDirection === SlideDirection.LEFT) { - return this.state.dx < (-1 * this.props.successfulSlideWidth); + return this.state.dx < (-1 * successfulSlideWidth); } else if (this.props.slideDirection === SlideDirection.BOTH) { - return Math.abs(this.state.dx) > this.props.successfulSlideWidth; + return Math.abs(this.state.dx) > successfulSlideWidth; } }