Changes drawer button side according with drawer.props.side (#1584)

* Changes drawer button side according with drawer.props.side * Fixed CI warnings
aksonov · Mar 2, 2017 · 6b6a34f · 6b6a34f
1 parent 13405b0
commit 6b6a34f
Showing 1 changed file with 33 additions and 10 deletions.
diff --git a/src/NavBar.js b/src/NavBar.js
@@ -270,15 +270,21 @@ class NavBar extends React.Component {
 
   renderRightButton(navProps) {
     const self = this;
+    const drawer = this.context.drawer;
     function tryRender(state, wrapBy) {
       if (!state) {
         return null;
       }
-      const rightTitle = state.getRightTitle ? state.getRightTitle(navProps) : state.rightTitle;
 
+      let onPress = state.onRight;
+      let buttonImage = state.rightButtonImage;
+      let menuIcon = state.drawerIcon;
+      const style = [styles.rightButton, self.props.rightButtonStyle, state.rightButtonStyle];
       const textStyle = [styles.barRightButtonText, self.props.rightButtonTextStyle,
         state.rightButtonTextStyle];
-      const style = [styles.rightButton, self.props.rightButtonStyle, state.rightButtonStyle];
+      const rightButtonStyle = [styles.defaultImageStyle, state.rightButtonIconStyle];
+      const rightTitle = state.getRightTitle ? state.getRightTitle(navProps) : state.rightTitle;
+
       if (state.rightButton) {
         let Button = state.rightButton;
         if (wrapBy) {
@@ -295,8 +301,24 @@ class NavBar extends React.Component {
           />
         );
       }
-      if (state.onRight && (rightTitle || state.rightButtonImage)) {
-        const onPress = state.onRight.bind(null, state);
+
+      if (!onPress && !!drawer && typeof drawer.toggle === 'function' && drawer.props.side === 'right') {
+        buttonImage = state.drawerImage;
+        if (buttonImage || menuIcon) {
+          onPress = drawer.toggle;
+        }
+        if (!menuIcon) {
+          menuIcon = (
+            <Image
+              source={buttonImage}
+              style={rightButtonStyle}
+            />
+          );
+        }
+      }
+
+      if (onPress && (rightTitle || buttonImage)) {
+        onPress = onPress.bind(null, state);
         return (
           <TouchableOpacity
             key={'rightNavBarBtn'}
@@ -309,19 +331,20 @@ class NavBar extends React.Component {
                 {rightTitle}
               </Text>
             }
-            {state.rightButtonImage &&
+            {buttonImage &&
               <View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-end' }}>
-                <Image
-                  source={state.rightButtonImage}
-                  style={state.rightButtonIconStyle}
+                {menuIcon || <Image
+                  source={buttonImage}
+                  style={state.rightButtonIconStyle || styles.defaultImageStyle}
                 />
+                }
               </View>
             }
           </TouchableOpacity>
         );
       }
       if ((!!state.onRight ^ !!(typeof (rightTitle) !== 'undefined'
-        || typeof (state.rightButtonImage) !== 'undefined'))) {
+        || typeof (buttonImage) !== 'undefined'))) {
         console.warn(
           `Both onRight and rightTitle/rightButtonImage
             must be specified for the scene: ${state.name}`,
@@ -362,7 +385,7 @@ class NavBar extends React.Component {
         );
       }
 
-      if (!onPress && !!drawer && typeof drawer.toggle === 'function') {
+      if (!onPress && !!drawer && typeof drawer.toggle === 'function' && drawer.props.side === 'left') {
         buttonImage = state.drawerImage;
         if (buttonImage || menuIcon) {
           onPress = drawer.toggle;