PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Stop the Avatar classes setting properties on <span>s

Browse source 
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.
This commit is contained in:
Richard van der Hoff 2016-07-27 11:38:04 +01:00
parent 4d1afd70da
commit 1a600b0674
2 changed files with 19 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/views/avatars/BaseAvatar.js
View file

@ -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} />
);
}
});

8
src/components/views/avatars/RoomAvatar.js
View file

@ -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} />
);
}