From 0791cac5728010023e4d1d1474cc053e38c4db05 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 9 Oct 2015 11:54:46 +0100
Subject: [PATCH] Add method to Modal to create dialog with instantiated React
 elements as well as Classes.

---
 src/Modal.js                                  | 23 +++++++++++++++++++
 src/controllers/molecules/ChangeAvatar.js     |  7 ------
 .../molecules/ChangeDisplayName.js            |  7 ++++--
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/Modal.js b/src/Modal.js
index f34ef65d59..8566022060 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -34,6 +34,29 @@ module.exports = {
         return container;
     },
 
+    createDialogWithElement: function(element, props) {
+        var self = this;
+
+        var closeDialog = function() {
+            React.unmountComponentAtNode(self.getOrCreateContainer());
+
+            if (props && props.onFinished) props.onFinished.apply(null, arguments);
+        };
+
+        var dialog = (
+            <div className="mx_Dialog_wrapper">
+                <div className="mx_Dialog">
+                    {element}
+                </div>
+                <div className="mx_Dialog_background" onClick={closeDialog}></div>
+            </div>
+        );
+
+        React.render(dialog, this.getOrCreateContainer());
+
+        return {close: closeDialog};
+    },
+
     createDialog: function (Element, props) {
         var self = this;
 
diff --git a/src/controllers/molecules/ChangeAvatar.js b/src/controllers/molecules/ChangeAvatar.js
index 0df93b02fd..d1ee1396cb 100644
--- a/src/controllers/molecules/ChangeAvatar.js
+++ b/src/controllers/molecules/ChangeAvatar.js
@@ -19,7 +19,6 @@ var MatrixClientPeg = require("../../MatrixClientPeg");
 
 module.exports = {
     propTypes: {
-        onFinished: React.PropTypes.func,
         initialAvatarUrl: React.PropTypes.string.isRequired,
     },
 
@@ -29,12 +28,6 @@ module.exports = {
         Error: "error",
     },
 
-    getDefaultProps: function() {
-        return {
-            onFinished: function() {},
-        };
-    },
-
     getInitialState: function() {
         return {
             avatarUrl: this.props.initialAvatarUrl,
diff --git a/src/controllers/molecules/ChangeDisplayName.js b/src/controllers/molecules/ChangeDisplayName.js
index c62f7925ac..700661f9ca 100644
--- a/src/controllers/molecules/ChangeDisplayName.js
+++ b/src/controllers/molecules/ChangeDisplayName.js
@@ -39,7 +39,7 @@ module.exports = {
         var self = this;
         cli.getProfileInfo(cli.credentials.userId).done(function(result) {
             self.setState({
-                displayname: result.displayname,
+                displayName: result.displayname,
                 busy: false
             });
         }, function(error) {
@@ -60,7 +60,10 @@ module.exports = {
 
         var self = this;
         MatrixClientPeg.get().setDisplayName(new_displayname).then(function() {
-            self.setState({busy: false});
+            self.setState({
+                busy: false,
+                displayName: new_displayname
+            });
         }, function(error) {
             self.setState({
                 busy: false,