Merge pull request #367 from matrix-org/rav/remove_bad_props

Stop the Avatar classes setting properties on <span>s

src/components/views/avatars/BaseAvatar.js

@@ -133,32 +133,36 @@ 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",
+                            style={{ fontSize: (width * 0.65) + "px",
-                                    width: this.props.width + "px",
+                                    width: width + "px",
-                                    lineHeight: this.props.height + "px" }}
+                                    lineHeight: height + "px" }}
                             dangerouslySetInnerHTML={initialLetter}>
                     </span>
                     <img className="mx_BaseAvatar_image" src={imageUrl}
-                        alt="" title={this.props.title} onError={this.onError}
+                        alt="" title={title} onError={this.onError}
-                        width={this.props.width} height={this.props.height} />
+                        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}
+                width={width} height={height}
-                title={this.props.title} alt=""
+                title={title} alt=""
-                {...this.props} />
+                {...otherProps} />
         );
     }
 });

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}
+            <BaseAvatar {...otherProps} name={roomName}
-                idName={this.props.room ? this.props.room.roomId : null}
+                idName={room ? room.roomId : null}
                 urls={this.state.urls} />
         );
     }