Expand the list when the overflow element is clicked

Negative truncateAt values means "do not truncate".

src/components/views/elements/TruncatedList.js

@@ -19,7 +19,7 @@ module.exports = React.createClass({
     displayName: 'TruncatedList',
 
     propTypes: {
-        // The number of elements to show before truncating
+        // The number of elements to show before truncating. If negative, no truncation is done.
         truncateAt: React.PropTypes.number,
         // The className to apply to the wrapping div
         className: React.PropTypes.string,
@@ -43,6 +43,8 @@ module.exports = React.createClass({
         var childsJsx = this.props.children;
         var overflowJsx;
         var childCount = React.Children.count(this.props.children);
+
+        if (this.props.truncateAt >= 0) {
             var overflowCount = childCount - this.props.truncateAt;
 
             if (overflowCount > 0) {
@@ -54,6 +56,7 @@ module.exports = React.createClass({
                 childArray.splice(childCount - overflowCount, overflowCount);
                 childsJsx = childArray; // use what is left
             }
+        }
 
         return (
             <div className={this.props.className}>

src/components/views/rooms/EntityTile.js

@@ -45,7 +45,7 @@ module.exports = React.createClass({
 
     getDefaultProps: function() {
         return {
-            shouldComponentUpdate: function(nextProps, nextState) { return false; },
+            shouldComponentUpdate: function(nextProps, nextState) { return true; },
             onClick: function() {},
             presenceState: "offline",
             presenceActiveAgo: -1,

src/components/views/rooms/MemberList.js

@@ -42,7 +42,8 @@ module.exports = React.createClass({
 
         var members = this.roomMembers(INITIAL_LOAD_NUM_MEMBERS);
         return {
-            members: members
+            members: members,
+            truncateAt: 3
         };
     },
 
@@ -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.
@@ -264,16 +262,19 @@ module.exports = React.createClass({
         // 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} />
-            } key="overflow" name={`and ${overflowCount} more`} presenceState="online"
+            } name={text} presenceState="online" suppressOnHover={true}
-            suppressOnHover={true} onClick={this._showFullMemberList} />
+            onClick={this._showFullMemberList} />
         );
     },
 
     _showFullMemberList: function() {
-        console.log("TODO");
+        this.setState({
+            truncateAt: -1
+        });
     },
 
     memberSort: function(userIdA, userIdB) {
@@ -341,8 +342,7 @@ module.exports = React.createClass({
                         return;
                     }
                     memberList.push(
-                        <EntityTile key={e.getStateKey()} ref={e.getStateKey()}
+                        <EntityTile key={e.getStateKey()} name={e.getContent().display_name} />
-                            name={e.getContent().display_name} />
                     )
                 })
             }
@@ -387,7 +387,7 @@ module.exports = React.createClass({
             <div className="mx_MemberList">
                     {this.inviteTile()}
                     <GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
-                        <TruncatedList className="mx_MemberList_wrapper"
+                        <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
                                 createOverflowElement={this._createOverflowTile}>
                             {this.makeMemberTiles('join', this.state.searchQuery)}
                         </TruncatedList>