Merge pull request #523 from Bit-Nation/fix/document-menu

[documents] Fixed Close Menu Modal Bug
Bit-Nation · Sep 14, 2018 · 07a77e5 · 07a77e5
2 parents 2b2ac7c + 0af17b5
commit 07a77e5
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 26 deletions.
diff --git a/src/screens/Documents/Modify/index.js b/src/screens/Documents/Modify/index.js
@@ -2,13 +2,7 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
-import {
-  View,
-  Image,
-  Text,
-  TextInput,
-  ScrollView,
-} from 'react-native';
+import { View, Image, Text, TextInput, ScrollView } from 'react-native';
 
 import type { Navigator } from '../../../types/ReactNativeNavigation';
 import NavigatorComponent from '../../../components/common/NavigatorComponent';
@@ -31,6 +25,10 @@ type Props = {
    * @desc React Native Navigation navigator object.
    */
   navigator: Navigator,
+  /**
+   * @desc Function to close menu modal.
+   */
+  onWillClose: () => void,
 };
 
 type Actions = {
@@ -48,19 +46,23 @@ type Actions = {
    * @param value New value of the field.
    */
   changeDocumentField: (field: string, value: any) => void,
-}
+};
 
-class DocumentsModifyScreen extends NavigatorComponent<Props & DocumentsState & Actions> {
+class DocumentsModifyScreen extends NavigatorComponent<
+  Props & DocumentsState & Actions,
+> {
   constructor(props) {
     super(props);
 
     this.props.navigator.setButtons({
-      leftButtons: [{
-        id: 'cancel',
-        icon: AssetsImages.closeIcon,
-        title: i18n.t('common.cancel'),
-        buttonColor: Colors.navigationButtonColor,
-      }],
+      leftButtons: [
+        {
+          id: 'cancel',
+          icon: AssetsImages.closeIcon,
+          title: i18n.t('common.cancel'),
+          buttonColor: Colors.navigationButtonColor,
+        },
+      ],
       rightButtons: [],
     });
 
@@ -75,13 +77,18 @@ class DocumentsModifyScreen extends NavigatorComponent<Props & DocumentsState &
   onNavBarButtonPress(id: string) {
     switch (id) {
       case 'cancel':
-        this.props.navigator.dismissModal();
+        this.closeModifyModal();
         break;
       default:
         break;
     }
   }
 
+  closeModifyModal = () => {
+    this.props.onWillClose();
+    this.props.navigator.dismissModal();
+  };
+
   onFinishModification = () => {
     this.props.finishDocumentModification();
     this.props.navigator.dismissModal();
@@ -94,34 +101,42 @@ class DocumentsModifyScreen extends NavigatorComponent<Props & DocumentsState &
 
     if (modification.initial === null) return true;
     if (modification.new.name !== modification.initial.name) return true;
-    if (modification.new.description !== modification.initial.description) return true;
+    if (modification.new.description !== modification.initial.description) { return true; }
 
     return false;
   };
 
   render() {
     const { modification } = this.props;
-    if (modification == null) return (<View />);
+    if (modification == null) return <View />;
 
     return (
       <View style={styles.screenContainer}>
-        <ScrollView contentContainerStyle={[styles.screenContainer, styles.noflex]}>
+        <ScrollView
+          contentContainerStyle={[styles.screenContainer, styles.noflex]}
+        >
           <View style={styles.metadataContainer}>
             <View style={styles.labeledTextInputContainer}>
-              <Text style={styles.textInputLabelText}>{i18n.t('screens.documentModify.fields.title')}</Text>
+              <Text style={styles.textInputLabelText}>
+                {i18n.t('screens.documentModify.fields.title')}
+              </Text>
               <TextInput
                 style={[styles.textInput, styles.bodyBlack]}
                 placeholder={i18n.t('screens.documentModify.placeholder.title')}
                 placeholderTextColor={Colors.placeholderTextColor}
                 keyboardType='default'
                 autoCapitalize='sentences'
                 autoCorrect
-                onChangeText={title => this.props.changeDocumentField('name', title)}
+                onChangeText={title =>
+                  this.props.changeDocumentField('name', title)
+                }
                 value={modification.new.name}
               />
             </View>
             <View style={styles.labeledTextInputContainer}>
-              <Text style={styles.textInputLabelText}>{i18n.t('screens.documentModify.fields.description')}</Text>
+              <Text style={styles.textInputLabelText}>
+                {i18n.t('screens.documentModify.fields.description')}
+              </Text>
               <TextInput
                 style={[styles.multilineTextInput]}
                 placeholder={i18n.t('screens.documentModify.placeholder.description')}
@@ -130,7 +145,9 @@ class DocumentsModifyScreen extends NavigatorComponent<Props & DocumentsState &
                 autoCapitalize='sentences'
                 autoCorrect
                 multiline
-                onChangeText={description => this.props.changeDocumentField('description', description)}
+                onChangeText={description =>
+                  this.props.changeDocumentField('description', description)
+                }
                 value={modification.new.description}
               />
             </View>
@@ -171,4 +188,7 @@ const mapDispatchToProps = dispatch => ({
   },
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(DocumentsModifyScreen);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(DocumentsModifyScreen);
diff --git a/src/screens/Documents/View/index.js b/src/screens/Documents/View/index.js
@@ -87,16 +87,22 @@ class DocumentsViewScreen extends NavigatorComponent<Props & DocumentsState & Ac
     }
   }
 
+  dismissModal = () => {
+    this.setState({ moreMenuVisible: false });
+  }
+
   onSelectEdit = () => {
     const { openedDocumentId } = this.props;
     if (openedDocumentId == null) return;
     const document = getOpenedDocument(this.props);
     if (document == null) return;
-
     this.props.startDocumentEditing(openedDocumentId);
     this.props.navigator.showModal({
       ...screen('DOCUMENT_MODIFY_SCREEN'),
       title: document.name,
+      passProps: {
+        onWillClose: this.dismissModal,
+      },
     });
   };
 
@@ -145,7 +151,7 @@ class DocumentsViewScreen extends NavigatorComponent<Props & DocumentsState & Ac
         </View>
         <MoreMenuModal
           visible={this.state.moreMenuVisible === true}
-          onCancel={() => this.setState({ moreMenuVisible: false })}
+          onCancel={this.dismissModal}
           options={[{
             text: i18n.t('screens.documentView.actions.edit'),
             onPress: this.onSelectEdit,