From d72ab641d071ecccfcb06abf226b412417ca471c Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 21 Jan 2016 15:57:59 +0000
Subject: [PATCH] Expand the list when the overflow element is clicked

Negative truncateAt values means "do not truncate".
---
 .../views/elements/TruncatedList.js           | 23 +++++++++++--------
 src/components/views/rooms/EntityTile.js      |  2 +-
 src/components/views/rooms/MemberList.js      | 20 ++++++++--------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/views/elements/TruncatedList.js b/src/components/views/elements/TruncatedList.js
index 8007b9a428..7cc584a7c7 100644
--- a/src/components/views/elements/TruncatedList.js
+++ b/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,16 +43,19 @@ module.exports = React.createClass({
         var childsJsx = this.props.children;
         var overflowJsx;
         var childCount = React.Children.count(this.props.children);
-        var overflowCount = childCount - this.props.truncateAt;
 
-        if (overflowCount > 0) {
-            overflowJsx = this.props.createOverflowElement(
-                overflowCount, childCount
-            );
-            var childArray = React.Children.toArray(this.props.children);
-            // cut out the overflow elements
-            childArray.splice(childCount - overflowCount, overflowCount);
-            childsJsx = childArray; // use what is left
+        if (this.props.truncateAt >= 0) {
+            var overflowCount = childCount - this.props.truncateAt;
+
+            if (overflowCount > 0) {
+                overflowJsx = this.props.createOverflowElement(
+                    overflowCount, childCount
+                );
+                var childArray = React.Children.toArray(this.props.children);
+                // cut out the overflow elements
+                childArray.splice(childCount - overflowCount, overflowCount);
+                childsJsx = childArray; // use what is left
+            }
         }
 
         return (
diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js
index 6b320ce3ff..43b12006a6 100644
--- a/src/components/views/rooms/EntityTile.js
+++ b/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,
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index 57dcfa96d4..2dafe98494 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/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"
-            suppressOnHover={true} onClick={this._showFullMemberList} />
+            } name={text} presenceState="online" suppressOnHover={true}
+            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()}
-                            name={e.getContent().display_name} />
+                        <EntityTile key={e.getStateKey()} 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>