From 1a600b0674da34ff515c785b8c779779ec248301 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 27 Jul 2016 11:38:04 +0100
Subject: [PATCH] Stop the Avatar classes setting properties on <span>s

React apparently now checks the properties which are set on DOM elements, and
grumbles noisily about unexpected ones. Update BaseAvatar and RoomAvatar so
that they don't set unrelated properties on the DOM elements.
---
 src/components/views/avatars/BaseAvatar.js | 26 ++++++++++++----------
 src/components/views/avatars/RoomAvatar.js |  8 ++++---
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js
index 66f8e27b88..08d7965455 100644
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.js
@@ -133,32 +133,34 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var name = this.props.name;
-
         var imageUrl = this.state.imageUrls[this.state.urlsIndex];
 
+        const {name, idName, title, url, urls, width, height, resizeMethod,
+               defaultToInitialLetter,
+               ...otherProps} = this.props;
+
         if (imageUrl === this.state.defaultImageUrl) {
-            var initialLetter = emojifyText(this._getInitialLetter(this.props.name));
+            var initialLetter = emojifyText(this._getInitialLetter(name));
             return (
-                <span className="mx_BaseAvatar" {...this.props}>
+                <span className="mx_BaseAvatar" {...otherProps}>
                     <span className="mx_BaseAvatar_initial" aria-hidden="true"
-                            style={{ fontSize: (this.props.width * 0.65) + "px",
-                                    width: this.props.width + "px",
-                                    lineHeight: this.props.height + "px" }}
+                            style={{ fontSize: (width * 0.65) + "px",
+                                    width: width + "px",
+                                    lineHeight: height + "px" }}
                             dangerouslySetInnerHTML={initialLetter}>
                     </span>
                     <img className="mx_BaseAvatar_image" src={imageUrl}
-                        alt="" title={this.props.title} onError={this.onError}
-                        width={this.props.width} height={this.props.height} />
+                        alt="" title={title} onError={this.onError}
+                        width={width} height={height} />
                 </span>
             );
         }
         return (
             <img className="mx_BaseAvatar mx_BaseAvatar_image" src={imageUrl}
                 onError={this.onError}
-                width={this.props.width} height={this.props.height}
-                title={this.props.title} alt=""
-                {...this.props} />
+                width={width} height={height}
+                title={title} alt=""
+                {...otherProps} />
         );
     }
 });
diff --git a/src/components/views/avatars/RoomAvatar.js b/src/components/views/avatars/RoomAvatar.js
index 129c68ff1b..dcb25eff61 100644
--- a/src/components/views/avatars/RoomAvatar.js
+++ b/src/components/views/avatars/RoomAvatar.js
@@ -126,11 +126,13 @@ module.exports = React.createClass({
     render: function() {
         var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
-        var roomName = this.props.room ? this.props.room.name : this.props.oobData.name;
+        var {room, oobData, ...otherProps} = this.props;
+
+        var roomName = room ? room.name : oobData.name;
 
         return (
-            <BaseAvatar {...this.props} name={roomName}
-                idName={this.props.room ? this.props.room.roomId : null}
+            <BaseAvatar {...otherProps} name={roomName}
+                idName={room ? room.roomId : null}
                 urls={this.state.urls} />
         );
     }