feat(drawer): Add responder negotiate function & update readme & add …

…gif examples

Drawer/index.js

@@ -40,7 +40,9 @@ export default class Drawer extends Component {
     type: types.Default,
     showMask: true,
     maskAlpha: 0.4,
-    customStyles: {}
+    customStyles: {},
+    startCapture: false,
+    moveCapture: false
   }
   static propTypes = {
     drawerContent: PropTypes.object,
@@ -50,7 +52,12 @@ export default class Drawer extends Component {
     type: PropTypes.oneOf(Object.values(types)),
     showMask: PropTypes.bool,
     maskAlpha: PropTypes.number,
-    customStyles: PropTypes.object
+    customStyles: PropTypes.object,
+    onDrawerClose: PropTypes.func,
+    onDrawerOpen: PropTypes.func,
+    startCapture: PropTypes.bool,
+    moveCapture: PropTypes.bool,
+    responderNegotiate: PropTypes.func
   }
   componentWillMount() {
     const {
@@ -88,9 +95,9 @@ export default class Drawer extends Component {
     this.isOpen = false;
     this._pan = PanResponder.create({
       onStartShouldSetPanResponder: this._onStartShouldSetPanResponder.bind(this),
-      onStartShouldSetPanResponderCapture: (evt, gestureState) => false,
+      onStartShouldSetPanResponderCapture: (evt, gestureState) => this.props.startCapture,
       onMoveShouldSetPanResponder: this._onMoveShouldSetPanResponder.bind(this),
-      onMoveShouldSetPanResponderCapture: (evt, gestureState) => false,
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) => this.props.moveCapture,
       onPanResponderTerminationRequest: (evt, gestureState) => true,
       onPanResponderGrant: this._handlePanResponderGrant.bind(this),
       onPanResponderMove: this._handlePanResponderMove.bind(this),
@@ -114,9 +121,11 @@ export default class Drawer extends Component {
     return false;
   }
   _onMoveShouldSetPanResponder (evt, gestureState) {
+    // custom pan responder condition function
+    if (this.props.responderNegotiate && this.props.responderNegotiate(evt, gestureState) === false) return false;
     if (this._touchPositionCheck(gestureState)) {
       this.props.showMask && !this.state.showMask && this.setState({showMask: true});
-      this.props.onDrawerStartOpen && this.props.onDrawerStartOpen();
+      // this.props.onDrawerStartOpen && this.props.onDrawerStartOpen();
       return true;
     }
     return false;

README.md

@@ -2,6 +2,22 @@
 
 A drawer component for React Native Application (ios / android)
 
+Similar to drawer menu component of QQ mobile.
+
+### Examples
+
+#### iOS Platform
+
+<a href="#ios-left" id="ios-left"><img src="./GIF/ios-left-default.gif"  align="left" width="200"></a>
+
+<a href="#ios-right" id="ios-right"><img src="./GIF/ios-right-overlay.gif" width="200"/></a>
+
+#### Android Platform
+
+<a href="#android-left" id="android-left"><img src="./GIF/android-left-default.gif"  align="left" width="200"></a>
+
+<a href="#android-right" id="android-right"><img src="./GIF/android-right-overlay.gif"  width="200"></a>
+
 ### Usage
 
 **install from npm**
@@ -70,5 +86,10 @@ render() {
 | maskAlpha | Number | 0.4 | Maximum value is 0.5, the opactiy value of the mask over the main board when drawer is open. Mask can be disabled with `showMask` property. |
 | showMask | Bool | true | Whether show the mask when drawer is open. |
 | customStyles | Object | {} | Customize drawer styles. You can customize main / mask / drawer. |
+| onDrawerOpen | function | null | Triggers when drawer is totally opened. |
+| onDrawerClose | function | null | Triggers when drawer is totally closed. |
+| startCapture | Bool | false | Whether to capture touch events while clicking on screen. |
+| moveCapture | Bool | false | Whether to capture touch events while swiping over the screen. |
+| responderNegotiate | function | null | Customize conditions to set pan responder, `evt` & `gestureState` will be passed as arguments. Default condition is left 20% area on screen in `left` Drawer, or right 20% area on screen in `right` Drawer. |
 
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-drawer-menu",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"scripts": {
 		"start": "react-native start",
 		"ios": "react-native run-ios",