pass instance to all callbacks; add item closing to example (jshanson7#7)

Author: Jeff Hanson

Makefile

@@ -1,11 +1,12 @@
 BIN = ./node_modules/.bin
 SRC = $(shell find ./src -name '*.js')
 LIB = $(SRC:./src/%=lib/%)
+EXAMPLE = $(shell find ./example/*.js)
 
 build:: $(LIB)
 
 lint::
-	@$(BIN)/eslint $(SRC)
+	@$(BIN)/eslint $(SRC) $(EXAMPLE)
 
 release-patch: build lint
 	@$(call release,patch)

example/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "react/no-multi-comp": 0,
+    "react/prop-types": 0
+  }
+}

example/package.json

@@ -3,7 +3,8 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "start": "node node_modules/react-native/local-cli/cli.js start"
+    "start": "node node_modules/react-native/local-cli/cli.js start",
+    "update-lib": "rm -r node_modules/react-native-swipeable && cd ../ && npm run build && cd example && npm install"
   },
   "dependencies": {
     "react": "15.4.1",

example/swipeable-example.js

@@ -2,17 +2,44 @@ import React, {Component} from 'react';
 import {ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import Swipeable from 'react-native-swipeable';
 
-export default function SwipeableExample() {
-  return (
-    <ScrollView style={styles.container}>
-      <Example1/>
-      <Example2/>
-      <Example3/>
-    </ScrollView>
-  );
+export default class SwipeableExample extends Component {
+
+  state = {
+    currentlyOpenSwipeable: null
+  };
+
+  handleScroll = () => {
+    const {currentlyOpenSwipeable} = this.state;
+
+    if (currentlyOpenSwipeable) {
+      currentlyOpenSwipeable.recenter();
+    }
+  };
+
+  render() {
+    const {currentlyOpenSwipeable} = this.state;
+    const itemProps = {
+      onOpen: (event, gestureState, swipeable) => {
+        if (currentlyOpenSwipeable && currentlyOpenSwipeable !== swipeable) {
+          currentlyOpenSwipeable.recenter();
+        }
+
+        this.setState({currentlyOpenSwipeable: swipeable});
+      },
+      onClose: () => this.setState({currentlyOpenSwipeable: null})
+    };
+
+    return (
+      <ScrollView onScroll={this.handleScroll} style={styles.container}>
+        <Example1 {...itemProps}/>
+        <Example2 {...itemProps}/>
+        <Example3 {...itemProps}/>
+      </ScrollView>
+    );
+  }
 }
 
-function Example1() {
+function Example1({onOpen, onClose}) {
   return (
     <Swipeable
       leftContent={(
@@ -28,6 +55,8 @@ function Example1() {
           <Text>2</Text>
         </TouchableOpacity>
       ]}
+      onRightButtonsOpenRelease={onOpen}
+      onRightButtonsCloseRelease={onClose}
     >
       <View style={[styles.listItem, {backgroundColor: 'salmon'}]}>
         <Text>Example 1</Text>
@@ -36,7 +65,7 @@ function Example1() {
   );
 }
 
-function Example2() {
+function Example2({onOpen, onClose}) {
   return (
     <Swipeable
       leftButtonWidth={45}
@@ -65,6 +94,8 @@ function Example2() {
           <Text>Pull action</Text>
         </View>
       )}
+      onLeftButtonsOpenRelease={onOpen}
+      onLeftButtonsCloseRelease={onClose}
     >
       <View style={[styles.listItem, {backgroundColor: 'paleturquoise'}]}>
         <Text>Example 2</Text>
@@ -85,9 +116,6 @@ class Example3 extends Component {
 
     return (
       <Swipeable
-        onLeftActionActivate={() => this.setState({leftActionActivated: true})}
-        onLeftActionDeactivate={() => this.setState({leftActionActivated: false})}
-        onLeftActionComplete={() => this.setState({toggle: !toggle})}
         leftActionActivationDistance={200}
         leftContent={(
           <View style={[styles.leftSwipeItem, {backgroundColor: leftActionActivated ? 'lightgoldenrodyellow' : 'steelblue'}]}>
@@ -96,6 +124,9 @@ class Example3 extends Component {
               <Text>keep pulling!</Text>}
           </View>
         )}
+        onLeftActionActivate={() => this.setState({leftActionActivated: true})}
+        onLeftActionDeactivate={() => this.setState({leftActionActivated: false})}
+        onLeftActionComplete={() => this.setState({toggle: !toggle})}
       >
         <View style={[styles.listItem, {backgroundColor: toggle ? 'thistle' : 'darkseagreen'}]}>
           <Text>Example 3</Text>

src/index.js

@@ -217,7 +217,7 @@ export default class Swipeable extends PureComponent {
     const {lastOffset, pan} = this.state;
 
     pan.setOffset(lastOffset);
-    this.props.onSwipeStart(event, gestureState);
+    this.props.onSwipeStart(event, gestureState, this);
   };
 
   _handlePanResponderMove = (event, gestureState) => {
@@ -257,46 +257,46 @@ export default class Swipeable extends PureComponent {
     let nextRightButtonsActivated = rightButtonsActivated;
 
     this._handlePan(event, gestureState);
-    onSwipeMove(event, gestureState);
+    onSwipeMove(event, gestureState, this);
 
     if (!leftActionActivated && canSwipeRight && x >= leftActionActivationDistance) {
       nextLeftActionActivated = true;
-      onLeftActionActivate(event, gestureState);
+      onLeftActionActivate(event, gestureState, this);
     }
 
     if (leftActionActivated && canSwipeRight && x < leftActionActivationDistance) {
       nextLeftActionActivated = false;
-      onLeftActionDeactivate(event, gestureState);
+      onLeftActionDeactivate(event, gestureState, this);
     }
 
     if (!rightActionActivated && canSwipeLeft && x <= -rightActionActivationDistance) {
       nextRightActionActivated = true;
-      onRightActionActivate(event, gestureState);
+      onRightActionActivate(event, gestureState, this);
     }
 
     if (rightActionActivated && canSwipeLeft && x > -rightActionActivationDistance) {
       nextRightActionActivated = false;
-      onRightActionDeactivate(event, gestureState);
+      onRightActionDeactivate(event, gestureState, this);
     }
 
     if (!leftButtonsActivated && hasLeftButtons && !isSwipingLeft && x >= leftButtonsActivationDistance) {
       nextLeftButtonsActivated = true;
-      onLeftButtonsActivate(event, gestureState);
+      onLeftButtonsActivate(event, gestureState, this);
     }
 
     if (leftButtonsActivated && hasLeftButtons && isSwipingLeft) {
       nextLeftButtonsActivated = false;
-      onLeftButtonsDeactivate(event, gestureState);
+      onLeftButtonsDeactivate(event, gestureState, this);
     }
 
     if (!rightButtonsActivated && hasRightButtons && !isSwipingRight && x <= -rightButtonsActivationDistance) {
       nextRightButtonsActivated = true;
-      onRightButtonsActivate(event, gestureState);
+      onRightButtonsActivate(event, gestureState, this);
     }
 
     if (rightButtonsActivated && hasRightButtons && isSwipingRight) {
       nextRightButtonsActivated = false;
-      onRightButtonsDeactivate(event, gestureState);
+      onRightButtonsDeactivate(event, gestureState, this);
     }
 
     const needsUpdate =
@@ -339,30 +339,30 @@ export default class Swipeable extends PureComponent {
     const animationFn = this._getReleaseAnimationFn();
     const animationConfig = this._getReleaseAnimationConfig();
 
-    onSwipeRelease(event, gestureState);
+    onSwipeRelease(event, gestureState, this);
 
     if (leftActionActivated) {
-      onLeftActionRelease(event, gestureState);
+      onLeftActionRelease(event, gestureState, this);
     }
 
     if (rightActionActivated) {
-      onRightActionRelease(event, gestureState);
+      onRightActionRelease(event, gestureState, this);
     }
 
     if (leftButtonsActivated && !leftButtonsOpen) {
-      onLeftButtonsOpenRelease(event, gestureState);
+      onLeftButtonsOpenRelease(event, gestureState, this);
     }
 
     if (!leftButtonsActivated && leftButtonsOpen) {
-      onLeftButtonsCloseRelease(event, gestureState);
+      onLeftButtonsCloseRelease(event, gestureState, this);
     }
 
     if (rightButtonsActivated && !rightButtonsOpen) {
-      onRightButtonsOpenRelease(event, gestureState);
+      onRightButtonsOpenRelease(event, gestureState, this);
     }
 
     if (!rightButtonsActivated && rightButtonsOpen) {
-      onRightButtonsCloseRelease(event, gestureState);
+      onRightButtonsCloseRelease(event, gestureState, this);
     }
 
     this.setState({
@@ -390,32 +390,32 @@ export default class Swipeable extends PureComponent {
         onSwipeComplete
       } = this.props;
 
-      onSwipeComplete(event, gestureState);
+      onSwipeComplete(event, gestureState, this);
 
       if (leftActionActivated) {
-        onLeftActionComplete(event, gestureState);
-        onLeftActionDeactivate(event, gestureState);
+        onLeftActionComplete(event, gestureState, this);
+        onLeftActionDeactivate(event, gestureState, this);
       }
 
       if (rightActionActivated) {
-        onRightActionComplete(event, gestureState);
-        onRightActionDeactivate(event, gestureState);
+        onRightActionComplete(event, gestureState, this);
+        onRightActionDeactivate(event, gestureState, this);
       }
 
       if (leftButtonsActivated && !leftButtonsOpen) {
-        onLeftButtonsOpenComplete(event, gestureState);
+        onLeftButtonsOpenComplete(event, gestureState, this);
       }
 
       if (!leftButtonsActivated && leftButtonsOpen) {
-        onLeftButtonsCloseComplete(event, gestureState);
+        onLeftButtonsCloseComplete(event, gestureState, this);
       }
 
       if (rightButtonsActivated && !rightButtonsOpen) {
-        onRightButtonsOpenComplete(event, gestureState);
+        onRightButtonsOpenComplete(event, gestureState, this);
       }
 
       if (!rightButtonsActivated && rightButtonsOpen) {
-        onRightButtonsCloseComplete(event, gestureState);
+        onRightButtonsCloseComplete(event, gestureState, this);
       }
     });
   };