Merge pull request #232 from matrix-org/matthew/fix-modals

Fix cancelling dialog boxes by clicking on the background

src/Modal.js

@@ -35,36 +35,13 @@ module.exports = {
         return container;
     },
 
-    createDialogWithElement: function(element, props, className) {
-        var self = this;
-
-        var closeDialog = function() {
-            ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
-
-            if (props && props.onFinished) props.onFinished.apply(null, arguments);
-        };
-
-        var dialog = (
-            <div className={"mx_Dialog_wrapper " + className}>
-                <div className="mx_Dialog">
-                    {element}
-                </div>
-                <div className="mx_Dialog_background" onClick={closeDialog}></div>
-            </div>
-        );
-
-        ReactDOM.render(dialog, this.getOrCreateContainer());
-
-        return {close: closeDialog};
-    },
-
     createDialog: function (Element, props, className) {
         var self = this;
 
+        // never call this via modal.close() from onFinished() otherwise it will loop
         var closeDialog = function() {
-            ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
-
             if (props && props.onFinished) props.onFinished.apply(null, arguments);
+            ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
         };
 
         // FIXME: If a dialog uses getDefaultProps it clobbers the onFinished
@@ -74,7 +51,7 @@ module.exports = {
                 <div className="mx_Dialog">
                     <Element {...props} onFinished={closeDialog}/>
                 </div>
-                <div className="mx_Dialog_background" onClick={closeDialog}></div>
+                <div className="mx_Dialog_background" onClick={ closeDialog.bind(this, false) }></div>
             </div>
         );
 

src/components/structures/RoomView.js

@@ -522,16 +522,22 @@ module.exports = React.createClass({
                     var SetDisplayNameDialog = sdk.getComponent('views.dialogs.SetDisplayNameDialog');
                     var dialog_defer = q.defer();
                     var dialog_ref;
-                    var modal;
+                    Modal.createDialog(SetDisplayNameDialog, {
-                    var dialog_instance = <SetDisplayNameDialog currentDisplayName={result.displayname} ref={(r) => {
+                        currentDisplayName: result.displayname,
+                        ref: (r) => {
                             dialog_ref = r;
-                    }} onFinished={() => {
+                        },
+                        onFinished: (submitted) => {
+                            if (submitted) {
                                 cli.setDisplayName(dialog_ref.getValue()).done(() => {
                                     dialog_defer.resolve();
                                 });
-                        modal.close();
+                            }
-                    }} />
+                            else {
-                    modal = Modal.createDialogWithElement(dialog_instance);
+                                dialog_defer.reject();
+                            }
+                        }
+                    });
                     return dialog_defer.promise;
                 }
             });
@@ -561,6 +567,8 @@ module.exports = React.createClass({
                 joining: false,
                 joinError: error
             });
+
+            if (!error) return;
             var msg = error.message ? error.message : JSON.stringify(error);
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {

src/components/structures/UserSettings.js

@@ -126,9 +126,7 @@ module.exports = React.createClass({
 
     onLogoutClicked: function(ev) {
         var LogoutPrompt = sdk.getComponent('dialogs.LogoutPrompt');
-        this.logoutModal = Modal.createDialog(
+        this.logoutModal = Modal.createDialog(LogoutPrompt);
-            LogoutPrompt, {onCancel: this.onLogoutPromptCancel}
-        );
     },
 
     onPasswordChangeError: function(err) {
@@ -162,10 +160,6 @@ module.exports = React.createClass({
         });
     },
 
-    onLogoutPromptCancel: function() {
-        this.logoutModal.closeDialog();
-    },
-
     onEnableNotificationsChange: function(event) {
         UserSettingsStore.setEnableNotifications(event.target.checked);
     },

src/components/views/dialogs/ErrorDialog.js

@@ -31,6 +31,10 @@ module.exports = React.createClass({
     displayName: 'ErrorDialog',
     propTypes: {
         title: React.PropTypes.string,
+        description: React.PropTypes.oneOfType([
+            React.PropTypes.element,
+            React.PropTypes.string,
+        ]),
         button: React.PropTypes.string,
         focus: React.PropTypes.bool,
         onFinished: React.PropTypes.func.isRequired,

src/components/views/dialogs/QuestionDialog.js

@@ -20,7 +20,10 @@ module.exports = React.createClass({
     displayName: 'QuestionDialog',
     propTypes: {
         title: React.PropTypes.string,
-        description: React.PropTypes.object,
+        description: React.PropTypes.oneOfType([
+            React.PropTypes.element,
+            React.PropTypes.string,
+        ]),
         button: React.PropTypes.string,
         focus: React.PropTypes.bool,
         onFinished: React.PropTypes.func.isRequired,

src/components/views/dialogs/SetDisplayNameDialog.js

@@ -54,7 +54,7 @@ module.exports = React.createClass({
 
     onFormSubmit: function(ev) {
         ev.preventDefault();
-        this.props.onFinished();
+        this.props.onFinished(true);
         return false;
     },
 

src/components/views/dialogs/TextInputDialog.js

@@ -20,7 +20,10 @@ module.exports = React.createClass({
     displayName: 'TextInputDialog',
     propTypes: {
         title: React.PropTypes.string,
-        description: React.PropTypes.string,
+        description: React.PropTypes.oneOfType([
+            React.PropTypes.element,
+            React.PropTypes.string,
+        ]),
         value: React.PropTypes.string,
         button: React.PropTypes.string,
         focus: React.PropTypes.bool,