imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #108 from matrix-org/kegan/member-list-perf

Browse source 
Add "and X more" overflow tile to joined member list
This commit is contained in:
Kegsay 2016-01-21 16:15:12 +00:00
commit b45e5e6eb5
4 changed files with 101 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/views/rooms/EntityTile.js
View file

@ -39,16 +39,18 @@ module.exports = React.createClass({
presenceActiveAgo: React.PropTypes.number,
showInviteButton: React.PropTypes.bool,
shouldComponentUpdate: React.PropTypes.func,
onClick: React.PropTypes.func
onClick: React.PropTypes.func,
suppressOnHover: React.PropTypes.bool
},
getDefaultProps: function() {
return {
shouldComponentUpdate: function(nextProps, nextState) { return false; },
shouldComponentUpdate: function(nextProps, nextState) { return true; },
onClick: function() {},
presenceState: "offline",
presenceActiveAgo: -1,
showInviteButton: false,
suppressOnHover: false
};
},
@ -75,12 +77,10 @@ module.exports = React.createClass({
var presenceClass = PRESENCE_CLASS[this.props.presenceState] || "mx_EntityTile_offline";
var mainClassName = "mx_EntityTile ";
mainClassName += presenceClass;
if (this.state.hover) {
mainClassName += " mx_EntityTile_hover";
}
var nameEl;
if (this.state.hover) {
if (this.state.hover && !this.props.suppressOnHover) {
mainClassName += " mx_EntityTile_hover";
var PresenceLabel = sdk.getComponent("rooms.PresenceLabel");
nameEl = (
<div className="mx_EntityTile_details">

32
src/components/views/rooms/MemberList.js
View file

@ -42,7 +42,8 @@ module.exports = React.createClass({
var members = this.roomMembers(INITIAL_LOAD_NUM_MEMBERS);
return {
members: members
members: members,
truncateAt: 10
};
},
@ -75,9 +76,6 @@ module.exports = React.createClass({
self._loadUserList();
}, 50);
setTimeout
// Attach a SINGLE listener for global presence changes then locate the
// member tile and re-render it. This is more efficient than every tile
// evar attaching their own listener.
@ -260,7 +258,24 @@ module.exports = React.createClass({
return to_display;
},
_createOverflowTile: function(overflowCount, totalCount) {
// For now we'll pretend this is any entity. It should probably be a separate tile.
var EntityTile = sdk.getComponent("rooms.EntityTile");
var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
var text = "and " + overflowCount + " more";
return (
<EntityTile avatarJsx={
<BaseAvatar name="+" width={36} height={36} />
} name={text} presenceState="online" suppressOnHover={true}
onClick={this._showFullMemberList} />
);
},
_showFullMemberList: function() {
this.setState({
truncateAt: -1
});
},
memberSort: function(userIdA, userIdB) {
var userA = this.memberDict[userIdA].user;
@ -327,8 +342,7 @@ module.exports = React.createClass({
return;
}
memberList.push(
<EntityTile key={e.getStateKey()} ref={e.getStateKey()}
name={e.getContent().display_name} />
<EntityTile key={e.getStateKey()} name={e.getContent().display_name} />
)
})
}
@ -368,13 +382,15 @@ module.exports = React.createClass({
</div>
);
}
var TruncatedList = sdk.getComponent("elements.TruncatedList");
return (
<div className="mx_MemberList">
{this.inviteTile()}
<GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
<div className="mx_MemberList_wrapper">
<TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
createOverflowElement={this._createOverflowTile}>
{this.makeMemberTiles('join', this.state.searchQuery)}
</div>
</TruncatedList>
{invitedSection}
</GeminiScrollbar>
<div className="mx_MemberList_bottom">