From ecb7b5ee074c79da23b8fbdc651113a06005b810 Mon Sep 17 00:00:00 2001 From: Micasso Date: Tue, 15 Sep 2020 09:15:51 +0300 Subject: [PATCH 01/10] remove default tap alert msg --- SwipeCards.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/SwipeCards.js b/SwipeCards.js index fd8029f..f657cc7 100644 --- a/SwipeCards.js +++ b/SwipeCards.js @@ -127,7 +127,7 @@ export default class SwipeCards extends Component { nopeText: "Nope!", maybeText: "Maybe!", yupText: "Yup!", - onClickHandler: () => { alert('tap') }, + onClickHandler: () => { }, onDragStart: () => {}, onDragRelease: () => {}, cardRemoved: (ix) => null, From b38e100bb2c135817f196fd3683016ee52835358 Mon Sep 17 00:00:00 2001 From: Micasso Date: Tue, 15 Sep 2020 09:17:19 +0300 Subject: [PATCH 02/10] rename noView to nopeView --- SwipeCards.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/SwipeCards.js b/SwipeCards.js index f657cc7..e26c6e5 100644 --- a/SwipeCards.js +++ b/SwipeCards.js @@ -99,7 +99,7 @@ export default class SwipeCards extends Component { maybeText: PropTypes.string, maybeView: PropTypes.element, nopeText: PropTypes.string, - noView: PropTypes.element, + nopeView: PropTypes.element, onClickHandler: PropTypes.func, renderCard: PropTypes.func, cardRemoved: PropTypes.func, From c0632162229fd7ac56d0e118eb2cd6ba8fac92f3 Mon Sep 17 00:00:00 2001 From: Micasso Date: Tue, 15 Sep 2020 09:19:57 +0300 Subject: [PATCH 03/10] noView/Text -> nopeView/Text --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f197737..1b52f44 100644 --- a/README.md +++ b/README.md @@ -271,8 +271,8 @@ const styles = StyleSheet.create({ | maybeTextStyle | style | Override default style | | | yupView | element | React component to render on a Yes vote | | | yupText | string | Text to render on Yes vote | `Yep` | -| noView | element | React component to render on a No vote | | -| noText | string | Text to render on No vote | `Nope` | +| nopeView | element | React component to render on a No vote | | +| nopeText | string | Text to render on No vote | `Nope` | | maybeView | element | React component to render on a Maybe vote | | | maybeText | string | Text to render on Maybe vote | `Maybe` | | smoothTransition | Boolean | Disables a slow transition fading the current card out | `false` | From bb444435fda490563076f80243dab0e73c675f80 Mon Sep 17 00:00:00 2001 From: Micasso Date: Tue, 15 Sep 2020 09:22:55 +0300 Subject: [PATCH 04/10] remove image dep --- SwipeCards.js | 1 - 1 file changed, 1 deletion(-) diff --git a/SwipeCards.js b/SwipeCards.js index e26c6e5..aeffae4 100644 --- a/SwipeCards.js +++ b/SwipeCards.js @@ -11,7 +11,6 @@ import { Animated, PanResponder, Dimensions, - Image } from 'react-native'; import clamp from 'clamp'; From 740221e4b77293905bc1b4fb0ebb437cd7c9111f Mon Sep 17 00:00:00 2001 From: Micasso Date: Tue, 15 Sep 2020 09:24:17 +0300 Subject: [PATCH 05/10] add missing render props --- SwipeCards.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/SwipeCards.js b/SwipeCards.js index aeffae4..ed7f585 100644 --- a/SwipeCards.js +++ b/SwipeCards.js @@ -95,10 +95,13 @@ export default class SwipeCards extends Component { handleNope: PropTypes.func, yupText: PropTypes.string, yupView: PropTypes.element, + renderYup: PropTypes.func, maybeText: PropTypes.string, maybeView: PropTypes.element, + renderMaybe: PropTypes.func, nopeText: PropTypes.string, nopeView: PropTypes.element, + renderNope: PropTypes.func, onClickHandler: PropTypes.func, renderCard: PropTypes.func, cardRemoved: PropTypes.func, From 5590501f0c24c56eee637e4e68524582bc99716e Mon Sep 17 00:00:00 2001 From: Micasso Date: Tue, 15 Sep 2020 09:32:55 +0300 Subject: [PATCH 06/10] add missing prop declerations --- SwipeCards.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/SwipeCards.js b/SwipeCards.js index ed7f585..99710a1 100644 --- a/SwipeCards.js +++ b/SwipeCards.js @@ -11,6 +11,7 @@ import { Animated, PanResponder, Dimensions, + ViewPropTypes, } from 'react-native'; import clamp from 'clamp'; @@ -103,8 +104,11 @@ export default class SwipeCards extends Component { nopeView: PropTypes.element, renderNope: PropTypes.func, onClickHandler: PropTypes.func, - renderCard: PropTypes.func, + onDragStart: PropTypes.func, + onDragRelease: PropTypes.func, cardRemoved: PropTypes.func, + renderCard: PropTypes.func, + style: ViewPropTypes.style, dragY: PropTypes.bool, smoothTransition: PropTypes.bool }; From 7c8f455c8ebb6c021ffd9a5dc52558d7ea64bc55 Mon Sep 17 00:00:00 2001 From: Micasso Date: Tue, 15 Sep 2020 09:57:37 +0300 Subject: [PATCH 07/10] add yup/nope/maybe style props --- SwipeCards.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/SwipeCards.js b/SwipeCards.js index 99710a1..939ee53 100644 --- a/SwipeCards.js +++ b/SwipeCards.js @@ -96,12 +96,15 @@ export default class SwipeCards extends Component { handleNope: PropTypes.func, yupText: PropTypes.string, yupView: PropTypes.element, + yupStyle: ViewPropTypes.style, renderYup: PropTypes.func, maybeText: PropTypes.string, maybeView: PropTypes.element, + maybeStyle: ViewPropTypes.style, renderMaybe: PropTypes.func, nopeText: PropTypes.string, nopeView: PropTypes.element, + nopeStyle: ViewPropTypes.style, renderNope: PropTypes.func, onClickHandler: PropTypes.func, onDragStart: PropTypes.func, From e299a7b4aaadee43667ce9afc87e42da66f17120 Mon Sep 17 00:00:00 2001 From: Micasso Date: Tue, 15 Sep 2020 10:05:33 +0300 Subject: [PATCH 08/10] noView -> nopeView --- SwipeCards.js | 335 ++++++++++++++++++++++++++++++++++---------------- 1 file changed, 227 insertions(+), 108 deletions(-) diff --git a/SwipeCards.js b/SwipeCards.js index 939ee53..5740815 100644 --- a/SwipeCards.js +++ b/SwipeCards.js @@ -74,7 +74,6 @@ let currentIndex = {}; let guid = 0; export default class SwipeCards extends Component { - static propTypes = { cards: PropTypes.array, cardKey: PropTypes.string, @@ -113,12 +112,12 @@ export default class SwipeCards extends Component { renderCard: PropTypes.func, style: ViewPropTypes.style, dragY: PropTypes.bool, - smoothTransition: PropTypes.bool + smoothTransition: PropTypes.bool, }; static defaultProps = { cards: [], - cardKey: 'key', + cardKey: "key", hasMaybeAction: false, loop: false, onLoop: () => null, @@ -136,14 +135,14 @@ export default class SwipeCards extends Component { nopeText: "Nope!", maybeText: "Maybe!", yupText: "Yup!", - onClickHandler: () => { }, + onClickHandler: () => {}, onDragStart: () => {}, onDragRelease: () => {}, cardRemoved: (ix) => null, renderCard: (card) => null, style: styles.container, dragY: true, - smoothTransition: false + smoothTransition: false, }; constructor(props) { @@ -175,23 +174,28 @@ export default class SwipeCards extends Component { }, onPanResponderGrant: (e, gestureState) => { - this.state.pan.setOffset({ x: this.state.pan.x._value, y: this.state.pan.y._value }); + this.state.pan.setOffset({ + x: this.state.pan.x._value, + y: this.state.pan.y._value, + }); this.state.pan.setValue({ x: 0, y: 0 }); }, - onPanResponderTerminationRequest: (evt, gestureState) => this.props.allowGestureTermination, + onPanResponderTerminationRequest: (evt, gestureState) => + this.props.allowGestureTermination, onPanResponderMove: Animated.event([ - null, { dx: this.state.pan.x, dy: this.props.dragY ? this.state.pan.y : 0 }, + null, + { dx: this.state.pan.x, dy: this.props.dragY ? this.state.pan.y : 0 }, ]), - onPanResponderRelease: (e, {vx, vy, dx, dy}) => { - this.props.onDragRelease() + onPanResponderRelease: (e, { vx, vy, dx, dy }) => { + this.props.onDragRelease(); this.state.pan.flattenOffset(); let velocity; - if (Math.abs(dx) <= 5 && Math.abs(dy) <= 5) //meaning the gesture did not cover any distance - { - this.props.onClickHandler(this.state.card) + if (Math.abs(dx) <= 5 && Math.abs(dy) <= 5) { + //meaning the gesture did not cover any distance + this.props.onClickHandler(this.state.card); } if (vx > 0) { @@ -202,15 +206,21 @@ export default class SwipeCards extends Component { velocity = dx < 0 ? -3 : 3; } - const hasSwipedHorizontally = Math.abs(this.state.pan.x._value) > SWIPE_THRESHOLD - const hasSwipedVertically = Math.abs(this.state.pan.y._value) > SWIPE_THRESHOLD - if (hasSwipedHorizontally || (hasSwipedVertically && this.props.hasMaybeAction)) { - + const hasSwipedHorizontally = + Math.abs(this.state.pan.x._value) > SWIPE_THRESHOLD; + const hasSwipedVertically = + Math.abs(this.state.pan.y._value) > SWIPE_THRESHOLD; + if ( + hasSwipedHorizontally || + (hasSwipedVertically && this.props.hasMaybeAction) + ) { let cancelled = false; - const hasMovedRight = hasSwipedHorizontally && this.state.pan.x._value > 0 - const hasMovedLeft = hasSwipedHorizontally && this.state.pan.x._value < 0 - const hasMovedUp = hasSwipedVertically && this.state.pan.y._value < 0 + const hasMovedRight = + hasSwipedHorizontally && this.state.pan.x._value > 0; + const hasMovedLeft = + hasSwipedHorizontally && this.state.pan.x._value < 0; + const hasMovedUp = hasSwipedVertically && this.state.pan.y._value < 0; if (hasMovedRight) { cancelled = this.props.handleYup(this.state.card); @@ -219,14 +229,14 @@ export default class SwipeCards extends Component { } else if (hasMovedUp && this.props.hasMaybeAction) { cancelled = this.props.handleMaybe(this.state.card); } else { - cancelled = true + cancelled = true; } //Yup or nope was cancelled, return the card to normal. if (cancelled) { this._resetPan(); return; - }; + } this.props.cardRemoved(currentIndex[this.guid]); @@ -235,60 +245,55 @@ export default class SwipeCards extends Component { } else { this.cardAnimation = Animated.decay(this.state.pan, { velocity: { x: velocity, y: vy }, - deceleration: 0.98 + deceleration: 0.98, }); - this.cardAnimation.start(status => { + this.cardAnimation.start((status) => { if (status.finished) this._advanceState(); else this._resetState(); this.cardAnimation = null; - } - ); + }); } - } else { this._resetPan(); } - } + }, }); } _forceLeftSwipe() { this.cardAnimation = Animated.timing(this.state.pan, { toValue: { x: -500, y: 0 }, - }).start(status => { + }).start((status) => { if (status.finished) this._advanceState(); else this._resetState(); this.cardAnimation = null; - } - ); + }); this.props.cardRemoved(currentIndex[this.guid]); } _forceUpSwipe() { this.cardAnimation = Animated.timing(this.state.pan, { toValue: { x: 0, y: 500 }, - }).start(status => { + }).start((status) => { if (status.finished) this._advanceState(); else this._resetState(); this.cardAnimation = null; - } - ); + }); this.props.cardRemoved(currentIndex[this.guid]); } _forceRightSwipe() { this.cardAnimation = Animated.timing(this.state.pan, { toValue: { x: 500, y: 0 }, - }).start(status => { + }).start((status) => { if (status.finished) this._advanceState(); else this._resetState(); this.cardAnimation = null; - } - ); + }); this.props.cardRemoved(currentIndex[this.guid]); } @@ -297,13 +302,16 @@ export default class SwipeCards extends Component { // Checks to see if last card. // If props.loop=true, will start again from the first card. - if (currentIndex[this.guid] > this.state.cards.length - 1 && this.props.loop) { + if ( + currentIndex[this.guid] > this.state.cards.length - 1 && + this.props.loop + ) { this.props.onLoop(); currentIndex[this.guid] = 0; } this.setState({ - card: this.state.cards[currentIndex[this.guid]] + card: this.state.cards[currentIndex[this.guid]], }); } @@ -319,7 +327,7 @@ export default class SwipeCards extends Component { } this.setState({ - card: this.state.cards[currentIndex[this.guid]] + card: this.state.cards[currentIndex[this.guid]], }); } @@ -328,15 +336,11 @@ export default class SwipeCards extends Component { } _animateEntrance() { - Animated.spring( - this.state.enter, - { toValue: 1, friction: 8 } - ).start(); + Animated.spring(this.state.enter, { toValue: 1, friction: 8 }).start(); } componentWillReceiveProps(nextProps) { if (nextProps.cards !== this.props.cards) { - if (this.cardAnimation) { this.cardAnimation.stop(); this.cardAnimation = null; @@ -345,7 +349,7 @@ export default class SwipeCards extends Component { currentIndex[this.guid] = 0; this.setState({ cards: [].concat(nextProps.cards), - card: nextProps.cards[0] + card: nextProps.cards[0], }); } } @@ -353,7 +357,7 @@ export default class SwipeCards extends Component { _resetPan() { Animated.spring(this.state.pan, { toValue: { x: 0, y: 0 }, - friction: 4 + friction: 4, }).start(); } @@ -374,7 +378,7 @@ export default class SwipeCards extends Component { * Returns current card object */ getCurrentCard() { - return this.state.cards[currentIndex[this.guid]]; + return this.state.cards[currentIndex[this.guid]]; } renderNoMoreCards() { @@ -394,14 +398,20 @@ export default class SwipeCards extends Component { } //Get the next stack of cards to render. - let cards = this.state.cards.slice(currentIndex[this.guid], currentIndex[this.guid] + this.props.stackDepth).reverse(); + let cards = this.state.cards + .slice( + currentIndex[this.guid], + currentIndex[this.guid] + this.props.stackDepth + ) + .reverse(); return cards.map((card, i) => { - - let offsetX = this.props.stackOffsetX * cards.length - i * this.props.stackOffsetX; + let offsetX = + this.props.stackOffsetX * cards.length - i * this.props.stackOffsetX; let lastOffsetX = offsetX + this.props.stackOffsetX; - let offsetY = this.props.stackOffsetY * cards.length - i * this.props.stackOffsetY; + let offsetY = + this.props.stackOffsetY * cards.length - i * this.props.stackOffsetY; let lastOffsetY = offsetY + this.props.stackOffsetY; let opacity = 0.25 + (0.75 / cards.length) * (i + 1); @@ -411,21 +421,47 @@ export default class SwipeCards extends Component { let lastScale = 0.85 + (0.15 / cards.length) * i; let style = { - position: 'absolute', - top: this.state.enter.interpolate({ inputRange: [0, 1], outputRange: [lastOffsetY, offsetY] }), - left: this.state.enter.interpolate({ inputRange: [0, 1], outputRange: [lastOffsetX, offsetX] }), - opacity: this.props.smoothTransition ? 1 : this.state.enter.interpolate({ inputRange: [0, 1], outputRange: [lastOpacity, opacity] }), - transform: [{ scale: this.state.enter.interpolate({ inputRange: [0, 1], outputRange: [lastScale, scale] }) }], - elevation: i * 10 + position: "absolute", + top: this.state.enter.interpolate({ + inputRange: [0, 1], + outputRange: [lastOffsetY, offsetY], + }), + left: this.state.enter.interpolate({ + inputRange: [0, 1], + outputRange: [lastOffsetX, offsetX], + }), + opacity: this.props.smoothTransition + ? 1 + : this.state.enter.interpolate({ + inputRange: [0, 1], + outputRange: [lastOpacity, opacity], + }), + transform: [ + { + scale: this.state.enter.interpolate({ + inputRange: [0, 1], + outputRange: [lastScale, scale], + }), + }, + ], + elevation: i * 10, }; //Is this the top card? If so animate it and hook up the pan handlers. if (i + 1 === cards.length) { - let {pan} = this.state; + let { pan } = this.state; let [translateX, translateY] = [pan.x, pan.y]; - let rotate = pan.x.interpolate({ inputRange: [-200, 0, 200], outputRange: ["-30deg", "0deg", "30deg"] }); - let opacity = this.props.smoothTransition ? 1 : pan.x.interpolate({ inputRange: [-200, 0, 200], outputRange: [0.5, 1, 0.5] }); + let rotate = pan.x.interpolate({ + inputRange: [-200, 0, 200], + outputRange: ["-30deg", "0deg", "30deg"], + }); + let opacity = this.props.smoothTransition + ? 1 + : pan.x.interpolate({ + inputRange: [-200, 0, 200], + outputRange: [0.5, 1, 0.5], + }); let animatedCardStyles = { ...style, @@ -433,16 +469,31 @@ export default class SwipeCards extends Component { { translateX: translateX }, { translateY: translateY }, { rotate: rotate }, - { scale: this.state.enter.interpolate({ inputRange: [0, 1], outputRange: [lastScale, scale] }) } - ] + { + scale: this.state.enter.interpolate({ + inputRange: [0, 1], + outputRange: [lastScale, scale], + }), + }, + ], }; - return - {this.props.renderCard(this.state.card)} - ; + return ( + + {this.props.renderCard(this.state.card)} + + ); } - return {this.props.renderCard(card)}; + return ( + + {this.props.renderCard(card)} + + ); }); } @@ -451,41 +502,74 @@ export default class SwipeCards extends Component { return this.renderNoMoreCards(); } - let {pan, enter} = this.state; + let { pan, enter } = this.state; let [translateX, translateY] = [pan.x, pan.y]; - let rotate = pan.x.interpolate({ inputRange: [-200, 0, 200], outputRange: ["-30deg", "0deg", "30deg"] }); - let opacity = pan.x.interpolate({ inputRange: [-200, 0, 200], outputRange: [0.5, 1, 0.5] }); + let rotate = pan.x.interpolate({ + inputRange: [-200, 0, 200], + outputRange: ["-30deg", "0deg", "30deg"], + }); + let opacity = pan.x.interpolate({ + inputRange: [-200, 0, 200], + outputRange: [0.5, 1, 0.5], + }); let scale = enter; - let animatedCardStyles = { transform: [{ translateX }, { translateY }, { rotate }, { scale }], opacity }; + let animatedCardStyles = { + transform: [{ translateX }, { translateY }, { rotate }, { scale }], + opacity, + }; - return - {this.props.renderCard(this.state.card)} - ; + return ( + + {this.props.renderCard(this.state.card)} + + ); } renderNope() { - let {pan} = this.state; + let { pan } = this.state; - let nopeOpacity = pan.x.interpolate({ inputRange: [-SWIPE_THRESHOLD, -(SWIPE_THRESHOLD/2)], outputRange: [1, 0], extrapolate: 'clamp' }); - let nopeScale = pan.x.interpolate({ inputRange: [-SWIPE_THRESHOLD, 0], outputRange: [1, 0], extrapolate: 'clamp' }); - let animatedNopeStyles = { transform: [{ scale: nopeScale }], opacity: nopeOpacity }; + let nopeOpacity = pan.x.interpolate({ + inputRange: [-SWIPE_THRESHOLD, -(SWIPE_THRESHOLD / 2)], + outputRange: [1, 0], + extrapolate: "clamp", + }); + let nopeScale = pan.x.interpolate({ + inputRange: [-SWIPE_THRESHOLD, 0], + outputRange: [1, 0], + extrapolate: "clamp", + }); + let animatedNopeStyles = { + transform: [{ scale: nopeScale }], + opacity: nopeOpacity, + }; if (this.props.renderNope) { return this.props.renderNope(pan); } if (this.props.showNope) { + const inner = this.props.nopeView ? ( + this.props.nopeView + ) : ( + + {this.props.nopeText} + + ); - const inner = this.props.noView - ? this.props.noView - : {this.props.nopeText} - - return - {inner} - ; + return ( + + {inner} + + ); } return null; @@ -494,51 +578,86 @@ export default class SwipeCards extends Component { renderMaybe() { if (!this.props.hasMaybeAction) return null; - let {pan} = this.state; + let { pan } = this.state; - let maybeOpacity = pan.y.interpolate({ inputRange: [-SWIPE_THRESHOLD, -(SWIPE_THRESHOLD/2)], outputRange: [1, 0], extrapolate: 'clamp' }); - let maybeScale = pan.x.interpolate({ inputRange: [-SWIPE_THRESHOLD, 0, SWIPE_THRESHOLD], outputRange: [0, 1, 0], extrapolate: 'clamp' }); - let animatedMaybeStyles = { transform: [{ scale: maybeScale }], opacity: maybeOpacity }; + let maybeOpacity = pan.y.interpolate({ + inputRange: [-SWIPE_THRESHOLD, -(SWIPE_THRESHOLD / 2)], + outputRange: [1, 0], + extrapolate: "clamp", + }); + let maybeScale = pan.x.interpolate({ + inputRange: [-SWIPE_THRESHOLD, 0, SWIPE_THRESHOLD], + outputRange: [0, 1, 0], + extrapolate: "clamp", + }); + let animatedMaybeStyles = { + transform: [{ scale: maybeScale }], + opacity: maybeOpacity, + }; if (this.props.renderMaybe) { return this.props.renderMaybe(pan); } - if (this.props.showMaybe) { + const inner = this.props.maybeView ? ( + this.props.maybeView + ) : ( + + {this.props.maybeText} + + ); - const inner = this.props.maybeView - ? this.props.maybeView - : {this.props.maybeText} - - return - {inner} - ; + return ( + + {inner} + + ); } return null; } renderYup() { - let {pan} = this.state; + let { pan } = this.state; - let yupOpacity = pan.x.interpolate({ inputRange: [(SWIPE_THRESHOLD/2), SWIPE_THRESHOLD], outputRange: [0, 1], extrapolate: 'clamp' }); - let yupScale = pan.x.interpolate({ inputRange: [0, SWIPE_THRESHOLD], outputRange: [0.5, 1], extrapolate: 'clamp' }); - let animatedYupStyles = { transform: [{ scale: yupScale }], opacity: yupOpacity }; + let yupOpacity = pan.x.interpolate({ + inputRange: [SWIPE_THRESHOLD / 2, SWIPE_THRESHOLD], + outputRange: [0, 1], + extrapolate: "clamp", + }); + let yupScale = pan.x.interpolate({ + inputRange: [0, SWIPE_THRESHOLD], + outputRange: [0.5, 1], + extrapolate: "clamp", + }); + let animatedYupStyles = { + transform: [{ scale: yupScale }], + opacity: yupOpacity, + }; if (this.props.renderYup) { return this.props.renderYup(pan); } if (this.props.showYup) { + const inner = this.props.yupView ? ( + this.props.yupView + ) : ( + + {this.props.yupText} + + ); - const inner = this.props.yupView - ? this.props.yupView - : {this.props.yupText}; - - return - {inner} - ; + return ( + + {inner} + + ); } return null; From 3ff74697f7c6ec10963e22b2cff05036a1b42b58 Mon Sep 17 00:00:00 2001 From: Micasso Date: Tue, 15 Sep 2020 10:08:12 +0300 Subject: [PATCH 09/10] Revert "noView -> nopeView" This reverts commit e299a7b4aaadee43667ce9afc87e42da66f17120. --- SwipeCards.js | 335 ++++++++++++++++---------------------------------- 1 file changed, 108 insertions(+), 227 deletions(-) diff --git a/SwipeCards.js b/SwipeCards.js index 5740815..939ee53 100644 --- a/SwipeCards.js +++ b/SwipeCards.js @@ -74,6 +74,7 @@ let currentIndex = {}; let guid = 0; export default class SwipeCards extends Component { + static propTypes = { cards: PropTypes.array, cardKey: PropTypes.string, @@ -112,12 +113,12 @@ export default class SwipeCards extends Component { renderCard: PropTypes.func, style: ViewPropTypes.style, dragY: PropTypes.bool, - smoothTransition: PropTypes.bool, + smoothTransition: PropTypes.bool }; static defaultProps = { cards: [], - cardKey: "key", + cardKey: 'key', hasMaybeAction: false, loop: false, onLoop: () => null, @@ -135,14 +136,14 @@ export default class SwipeCards extends Component { nopeText: "Nope!", maybeText: "Maybe!", yupText: "Yup!", - onClickHandler: () => {}, + onClickHandler: () => { }, onDragStart: () => {}, onDragRelease: () => {}, cardRemoved: (ix) => null, renderCard: (card) => null, style: styles.container, dragY: true, - smoothTransition: false, + smoothTransition: false }; constructor(props) { @@ -174,28 +175,23 @@ export default class SwipeCards extends Component { }, onPanResponderGrant: (e, gestureState) => { - this.state.pan.setOffset({ - x: this.state.pan.x._value, - y: this.state.pan.y._value, - }); + this.state.pan.setOffset({ x: this.state.pan.x._value, y: this.state.pan.y._value }); this.state.pan.setValue({ x: 0, y: 0 }); }, - onPanResponderTerminationRequest: (evt, gestureState) => - this.props.allowGestureTermination, + onPanResponderTerminationRequest: (evt, gestureState) => this.props.allowGestureTermination, onPanResponderMove: Animated.event([ - null, - { dx: this.state.pan.x, dy: this.props.dragY ? this.state.pan.y : 0 }, + null, { dx: this.state.pan.x, dy: this.props.dragY ? this.state.pan.y : 0 }, ]), - onPanResponderRelease: (e, { vx, vy, dx, dy }) => { - this.props.onDragRelease(); + onPanResponderRelease: (e, {vx, vy, dx, dy}) => { + this.props.onDragRelease() this.state.pan.flattenOffset(); let velocity; - if (Math.abs(dx) <= 5 && Math.abs(dy) <= 5) { - //meaning the gesture did not cover any distance - this.props.onClickHandler(this.state.card); + if (Math.abs(dx) <= 5 && Math.abs(dy) <= 5) //meaning the gesture did not cover any distance + { + this.props.onClickHandler(this.state.card) } if (vx > 0) { @@ -206,21 +202,15 @@ export default class SwipeCards extends Component { velocity = dx < 0 ? -3 : 3; } - const hasSwipedHorizontally = - Math.abs(this.state.pan.x._value) > SWIPE_THRESHOLD; - const hasSwipedVertically = - Math.abs(this.state.pan.y._value) > SWIPE_THRESHOLD; - if ( - hasSwipedHorizontally || - (hasSwipedVertically && this.props.hasMaybeAction) - ) { + const hasSwipedHorizontally = Math.abs(this.state.pan.x._value) > SWIPE_THRESHOLD + const hasSwipedVertically = Math.abs(this.state.pan.y._value) > SWIPE_THRESHOLD + if (hasSwipedHorizontally || (hasSwipedVertically && this.props.hasMaybeAction)) { + let cancelled = false; - const hasMovedRight = - hasSwipedHorizontally && this.state.pan.x._value > 0; - const hasMovedLeft = - hasSwipedHorizontally && this.state.pan.x._value < 0; - const hasMovedUp = hasSwipedVertically && this.state.pan.y._value < 0; + const hasMovedRight = hasSwipedHorizontally && this.state.pan.x._value > 0 + const hasMovedLeft = hasSwipedHorizontally && this.state.pan.x._value < 0 + const hasMovedUp = hasSwipedVertically && this.state.pan.y._value < 0 if (hasMovedRight) { cancelled = this.props.handleYup(this.state.card); @@ -229,14 +219,14 @@ export default class SwipeCards extends Component { } else if (hasMovedUp && this.props.hasMaybeAction) { cancelled = this.props.handleMaybe(this.state.card); } else { - cancelled = true; + cancelled = true } //Yup or nope was cancelled, return the card to normal. if (cancelled) { this._resetPan(); return; - } + }; this.props.cardRemoved(currentIndex[this.guid]); @@ -245,55 +235,60 @@ export default class SwipeCards extends Component { } else { this.cardAnimation = Animated.decay(this.state.pan, { velocity: { x: velocity, y: vy }, - deceleration: 0.98, + deceleration: 0.98 }); - this.cardAnimation.start((status) => { + this.cardAnimation.start(status => { if (status.finished) this._advanceState(); else this._resetState(); this.cardAnimation = null; - }); + } + ); } + } else { this._resetPan(); } - }, + } }); } _forceLeftSwipe() { this.cardAnimation = Animated.timing(this.state.pan, { toValue: { x: -500, y: 0 }, - }).start((status) => { + }).start(status => { if (status.finished) this._advanceState(); else this._resetState(); this.cardAnimation = null; - }); + } + ); this.props.cardRemoved(currentIndex[this.guid]); } _forceUpSwipe() { this.cardAnimation = Animated.timing(this.state.pan, { toValue: { x: 0, y: 500 }, - }).start((status) => { + }).start(status => { if (status.finished) this._advanceState(); else this._resetState(); this.cardAnimation = null; - }); + } + ); this.props.cardRemoved(currentIndex[this.guid]); } _forceRightSwipe() { this.cardAnimation = Animated.timing(this.state.pan, { toValue: { x: 500, y: 0 }, - }).start((status) => { + }).start(status => { if (status.finished) this._advanceState(); else this._resetState(); this.cardAnimation = null; - }); + } + ); this.props.cardRemoved(currentIndex[this.guid]); } @@ -302,16 +297,13 @@ export default class SwipeCards extends Component { // Checks to see if last card. // If props.loop=true, will start again from the first card. - if ( - currentIndex[this.guid] > this.state.cards.length - 1 && - this.props.loop - ) { + if (currentIndex[this.guid] > this.state.cards.length - 1 && this.props.loop) { this.props.onLoop(); currentIndex[this.guid] = 0; } this.setState({ - card: this.state.cards[currentIndex[this.guid]], + card: this.state.cards[currentIndex[this.guid]] }); } @@ -327,7 +319,7 @@ export default class SwipeCards extends Component { } this.setState({ - card: this.state.cards[currentIndex[this.guid]], + card: this.state.cards[currentIndex[this.guid]] }); } @@ -336,11 +328,15 @@ export default class SwipeCards extends Component { } _animateEntrance() { - Animated.spring(this.state.enter, { toValue: 1, friction: 8 }).start(); + Animated.spring( + this.state.enter, + { toValue: 1, friction: 8 } + ).start(); } componentWillReceiveProps(nextProps) { if (nextProps.cards !== this.props.cards) { + if (this.cardAnimation) { this.cardAnimation.stop(); this.cardAnimation = null; @@ -349,7 +345,7 @@ export default class SwipeCards extends Component { currentIndex[this.guid] = 0; this.setState({ cards: [].concat(nextProps.cards), - card: nextProps.cards[0], + card: nextProps.cards[0] }); } } @@ -357,7 +353,7 @@ export default class SwipeCards extends Component { _resetPan() { Animated.spring(this.state.pan, { toValue: { x: 0, y: 0 }, - friction: 4, + friction: 4 }).start(); } @@ -378,7 +374,7 @@ export default class SwipeCards extends Component { * Returns current card object */ getCurrentCard() { - return this.state.cards[currentIndex[this.guid]]; + return this.state.cards[currentIndex[this.guid]]; } renderNoMoreCards() { @@ -398,20 +394,14 @@ export default class SwipeCards extends Component { } //Get the next stack of cards to render. - let cards = this.state.cards - .slice( - currentIndex[this.guid], - currentIndex[this.guid] + this.props.stackDepth - ) - .reverse(); + let cards = this.state.cards.slice(currentIndex[this.guid], currentIndex[this.guid] + this.props.stackDepth).reverse(); return cards.map((card, i) => { - let offsetX = - this.props.stackOffsetX * cards.length - i * this.props.stackOffsetX; + + let offsetX = this.props.stackOffsetX * cards.length - i * this.props.stackOffsetX; let lastOffsetX = offsetX + this.props.stackOffsetX; - let offsetY = - this.props.stackOffsetY * cards.length - i * this.props.stackOffsetY; + let offsetY = this.props.stackOffsetY * cards.length - i * this.props.stackOffsetY; let lastOffsetY = offsetY + this.props.stackOffsetY; let opacity = 0.25 + (0.75 / cards.length) * (i + 1); @@ -421,47 +411,21 @@ export default class SwipeCards extends Component { let lastScale = 0.85 + (0.15 / cards.length) * i; let style = { - position: "absolute", - top: this.state.enter.interpolate({ - inputRange: [0, 1], - outputRange: [lastOffsetY, offsetY], - }), - left: this.state.enter.interpolate({ - inputRange: [0, 1], - outputRange: [lastOffsetX, offsetX], - }), - opacity: this.props.smoothTransition - ? 1 - : this.state.enter.interpolate({ - inputRange: [0, 1], - outputRange: [lastOpacity, opacity], - }), - transform: [ - { - scale: this.state.enter.interpolate({ - inputRange: [0, 1], - outputRange: [lastScale, scale], - }), - }, - ], - elevation: i * 10, + position: 'absolute', + top: this.state.enter.interpolate({ inputRange: [0, 1], outputRange: [lastOffsetY, offsetY] }), + left: this.state.enter.interpolate({ inputRange: [0, 1], outputRange: [lastOffsetX, offsetX] }), + opacity: this.props.smoothTransition ? 1 : this.state.enter.interpolate({ inputRange: [0, 1], outputRange: [lastOpacity, opacity] }), + transform: [{ scale: this.state.enter.interpolate({ inputRange: [0, 1], outputRange: [lastScale, scale] }) }], + elevation: i * 10 }; //Is this the top card? If so animate it and hook up the pan handlers. if (i + 1 === cards.length) { - let { pan } = this.state; + let {pan} = this.state; let [translateX, translateY] = [pan.x, pan.y]; - let rotate = pan.x.interpolate({ - inputRange: [-200, 0, 200], - outputRange: ["-30deg", "0deg", "30deg"], - }); - let opacity = this.props.smoothTransition - ? 1 - : pan.x.interpolate({ - inputRange: [-200, 0, 200], - outputRange: [0.5, 1, 0.5], - }); + let rotate = pan.x.interpolate({ inputRange: [-200, 0, 200], outputRange: ["-30deg", "0deg", "30deg"] }); + let opacity = this.props.smoothTransition ? 1 : pan.x.interpolate({ inputRange: [-200, 0, 200], outputRange: [0.5, 1, 0.5] }); let animatedCardStyles = { ...style, @@ -469,31 +433,16 @@ export default class SwipeCards extends Component { { translateX: translateX }, { translateY: translateY }, { rotate: rotate }, - { - scale: this.state.enter.interpolate({ - inputRange: [0, 1], - outputRange: [lastScale, scale], - }), - }, - ], + { scale: this.state.enter.interpolate({ inputRange: [0, 1], outputRange: [lastScale, scale] }) } + ] }; - return ( - - {this.props.renderCard(this.state.card)} - - ); + return + {this.props.renderCard(this.state.card)} + ; } - return ( - - {this.props.renderCard(card)} - - ); + return {this.props.renderCard(card)}; }); } @@ -502,74 +451,41 @@ export default class SwipeCards extends Component { return this.renderNoMoreCards(); } - let { pan, enter } = this.state; + let {pan, enter} = this.state; let [translateX, translateY] = [pan.x, pan.y]; - let rotate = pan.x.interpolate({ - inputRange: [-200, 0, 200], - outputRange: ["-30deg", "0deg", "30deg"], - }); - let opacity = pan.x.interpolate({ - inputRange: [-200, 0, 200], - outputRange: [0.5, 1, 0.5], - }); + let rotate = pan.x.interpolate({ inputRange: [-200, 0, 200], outputRange: ["-30deg", "0deg", "30deg"] }); + let opacity = pan.x.interpolate({ inputRange: [-200, 0, 200], outputRange: [0.5, 1, 0.5] }); let scale = enter; - let animatedCardStyles = { - transform: [{ translateX }, { translateY }, { rotate }, { scale }], - opacity, - }; + let animatedCardStyles = { transform: [{ translateX }, { translateY }, { rotate }, { scale }], opacity }; - return ( - - {this.props.renderCard(this.state.card)} - - ); + return + {this.props.renderCard(this.state.card)} + ; } renderNope() { - let { pan } = this.state; + let {pan} = this.state; - let nopeOpacity = pan.x.interpolate({ - inputRange: [-SWIPE_THRESHOLD, -(SWIPE_THRESHOLD / 2)], - outputRange: [1, 0], - extrapolate: "clamp", - }); - let nopeScale = pan.x.interpolate({ - inputRange: [-SWIPE_THRESHOLD, 0], - outputRange: [1, 0], - extrapolate: "clamp", - }); - let animatedNopeStyles = { - transform: [{ scale: nopeScale }], - opacity: nopeOpacity, - }; + let nopeOpacity = pan.x.interpolate({ inputRange: [-SWIPE_THRESHOLD, -(SWIPE_THRESHOLD/2)], outputRange: [1, 0], extrapolate: 'clamp' }); + let nopeScale = pan.x.interpolate({ inputRange: [-SWIPE_THRESHOLD, 0], outputRange: [1, 0], extrapolate: 'clamp' }); + let animatedNopeStyles = { transform: [{ scale: nopeScale }], opacity: nopeOpacity }; if (this.props.renderNope) { return this.props.renderNope(pan); } if (this.props.showNope) { - const inner = this.props.nopeView ? ( - this.props.nopeView - ) : ( - - {this.props.nopeText} - - ); - return ( - - {inner} - - ); + const inner = this.props.noView + ? this.props.noView + : {this.props.nopeText} + + return + {inner} + ; } return null; @@ -578,86 +494,51 @@ export default class SwipeCards extends Component { renderMaybe() { if (!this.props.hasMaybeAction) return null; - let { pan } = this.state; + let {pan} = this.state; - let maybeOpacity = pan.y.interpolate({ - inputRange: [-SWIPE_THRESHOLD, -(SWIPE_THRESHOLD / 2)], - outputRange: [1, 0], - extrapolate: "clamp", - }); - let maybeScale = pan.x.interpolate({ - inputRange: [-SWIPE_THRESHOLD, 0, SWIPE_THRESHOLD], - outputRange: [0, 1, 0], - extrapolate: "clamp", - }); - let animatedMaybeStyles = { - transform: [{ scale: maybeScale }], - opacity: maybeOpacity, - }; + let maybeOpacity = pan.y.interpolate({ inputRange: [-SWIPE_THRESHOLD, -(SWIPE_THRESHOLD/2)], outputRange: [1, 0], extrapolate: 'clamp' }); + let maybeScale = pan.x.interpolate({ inputRange: [-SWIPE_THRESHOLD, 0, SWIPE_THRESHOLD], outputRange: [0, 1, 0], extrapolate: 'clamp' }); + let animatedMaybeStyles = { transform: [{ scale: maybeScale }], opacity: maybeOpacity }; if (this.props.renderMaybe) { return this.props.renderMaybe(pan); } + if (this.props.showMaybe) { - const inner = this.props.maybeView ? ( - this.props.maybeView - ) : ( - - {this.props.maybeText} - - ); - return ( - - {inner} - - ); + const inner = this.props.maybeView + ? this.props.maybeView + : {this.props.maybeText} + + return + {inner} + ; } return null; } renderYup() { - let { pan } = this.state; + let {pan} = this.state; - let yupOpacity = pan.x.interpolate({ - inputRange: [SWIPE_THRESHOLD / 2, SWIPE_THRESHOLD], - outputRange: [0, 1], - extrapolate: "clamp", - }); - let yupScale = pan.x.interpolate({ - inputRange: [0, SWIPE_THRESHOLD], - outputRange: [0.5, 1], - extrapolate: "clamp", - }); - let animatedYupStyles = { - transform: [{ scale: yupScale }], - opacity: yupOpacity, - }; + let yupOpacity = pan.x.interpolate({ inputRange: [(SWIPE_THRESHOLD/2), SWIPE_THRESHOLD], outputRange: [0, 1], extrapolate: 'clamp' }); + let yupScale = pan.x.interpolate({ inputRange: [0, SWIPE_THRESHOLD], outputRange: [0.5, 1], extrapolate: 'clamp' }); + let animatedYupStyles = { transform: [{ scale: yupScale }], opacity: yupOpacity }; if (this.props.renderYup) { return this.props.renderYup(pan); } if (this.props.showYup) { - const inner = this.props.yupView ? ( - this.props.yupView - ) : ( - - {this.props.yupText} - - ); - return ( - - {inner} - - ); + const inner = this.props.yupView + ? this.props.yupView + : {this.props.yupText}; + + return + {inner} + ; } return null; From e88b1941b3779b97ecca56067529bdc6717f4b5a Mon Sep 17 00:00:00 2001 From: Micasso Date: Tue, 15 Sep 2020 10:08:40 +0300 Subject: [PATCH 10/10] noView->nopeView --- SwipeCards.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/SwipeCards.js b/SwipeCards.js index 939ee53..9c07e9e 100644 --- a/SwipeCards.js +++ b/SwipeCards.js @@ -479,8 +479,8 @@ export default class SwipeCards extends Component { if (this.props.showNope) { - const inner = this.props.noView - ? this.props.noView + const inner = this.props.nopeView + ? this.props.nopeView : {this.props.nopeText} return