react-native-slide-button - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

package.json

 {
   "name": "react-native-slide-button",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Slide to proceed button for React Native",
@@ -5,0 +5,0 @@ "main": "SlideButton.js",

README.md

@@ -1,3 +0,3 @@
-# react-native-swipe-button
-Customizable swipe button component for React Native.
+# react-native-slide-button
+Customizable slide button component for React Native.
 
@@ -17,3 +17,3 @@ ![](http://i.imgur.com/Fue6MKo.gif)
 <View style={{height: 50, width: 500}}>       <!-- Outer wrapper -->
-  <SlideButton onSwipeSuccess={this.onSlide.bind(this}>
+  <SlideButton onSwipeSuccess={this.onSlide.bind(this)}>
     <View style={{height: 50, width: 500}}>   <!-- Inner wrapper -->
@@ -30,4 +30,4 @@ <Text>Slide Button</Text>
 ---
-- [ ] Implement onSlide prop to let components listen to slide events.
+- [x] Implement onSlide prop to let components listen to slide events.
 - [ ] Write testcases.
 - [ ] Write separate convenience component tailored to meet the most common usecase; button with text inside.

SlideButton.js

@@ -18,2 +18,7 @@ 'use strict';
 
+export var SlideDirection = {
+  LEFT: "left",
+  RIGHT: "right",
+  BOTH: "both"
+};
 
@@ -34,5 +39,26 @@ export class SlideButton extends Component {
 
+  /* Button movement of > 40% is considered a successful slide */
+  isSlideSuccessful() {
+    if (!this.props.slideDirection) {
+      return this.state.dx > (this.buttonWidth * 0.4);  // Defaults to right slide
+    } else if (this.props.slideDirection === SlideDirection.RIGHT) {
+      return this.state.dx > (this.buttonWidth * 0.4);
+    } else if (this.props.slideDirection === SlideDirection.LEFT) {
+      return this.state.dx < (this.buttonWidth * 0.4);
+    } else if (this.props.slideDirection === SlideDirection.BOTH) {
+      return Math.abs(this.state.dx) > (this.buttonWidth * 0.4);
+    }
+  }
+
+  onSlide(x) {
+    if (this.props.onSlide){
+      this.props.onSlide(x);
+    }
+  }
+
   componentWillMount() {
     var self = this;
 
+    // TODO: Raise error if slideDirection prop is invalid.
+
     this.panResponder = PanResponder.create({
@@ -51,11 +77,11 @@ onStartShouldSetPanResponder: (evt, gestureState) => true,
         });
+        self.onSlide(gestureState.dx);
       },
 
       onPanResponderRelease: (evt, gestureState) => {
-        // Button movement of > 40% is considered a successful slide
-        if (this.state.dx > (this.buttonWidth * 0.4)) {
+        if (this.isSlideSuccessful()) {
           // Move the button out
           this.moveButtonOut(() => {
             self.setState({ swiped: true });
-            self.onSwipeSuccess();
+            self.props.onSlideSuccess();
           });
@@ -121,3 +147,4 @@
     var self = this;
-    var startPos = this.state.initialX - this.buttonWidth;
+    var startPos = this.state.dx < 0 ? this.state.initialX + this.buttonWidth :
+        this.state.initialX - this.buttonWidth;
     var endPos = this.state.initialX;
@@ -139,3 +166,3 @@
     var startPos = this.state.initialX + this.state.dx;
-    var endPos = this.buttonWidth * 2;
+    var endPos = this.state.dx < 0 ? -this.buttonWidth : this.buttonWidth * 2;
 
@@ -178,16 +205,17 @@ this.setState({
     var style = [styles.button, this.props.style, {left: this.state.dx}];
-    var button = (
+
+    if (this.state.released) {
+      style = [styles.button, this.props.style, { left: this.state.animatedX }];
+      var button = (
+        <Animated.View style={style}>
+          {this.props.children}
+        </Animated.View>
+      );
+    } else {
+      var button = (
         <View style={style}>
           <View onLayout={this.onLayout.bind(this)}>
-            {this.props.children}
+          {this.props.children}
           </View>
         </View>
-    );
-
-    if (this.state.released) {
-      style = [styles.button, this.props.style, { left: this.state.animatedX }];
-      button = (
-          <Animated.View style={style}>
-            {this.props.children}
-          </Animated.View>
       );
@@ -194,0 +222,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

8738

increased by11.65%

Lines of code

206

increased by13.81%

No dependency changes