Allow TruncatedList to get children via a callback

And update MemberList to use it as such. This means that the parent
only needs to make react elements for the elements that will
actually be rendered, rather than all of them.

In practive this doesn't make a huge difference as making React
elements is fairly fast, but experimentally (with all profiling
turned on), MemberList went from 25ms in the constructor and
81ms in render to 38ms in constructor but sub 1ms render for
Matrix HQ.

src/components/views/elements/TruncatedList.js

@@ -27,6 +27,16 @@ module.exports = React.createClass({
         truncateAt: PropTypes.number,
         // The className to apply to the wrapping div
         className: PropTypes.string,
+        // A function that returns the children to be rendered into the element.
+        // Takes two integers which define the range of child indices to return.
+        // The start element is included, the end is not (as in `slice`).
+        // Returns an array.
+        // If omitted, the React child elements will be used. This parameter can be used
+        // to avoid creating unnecessary React elements.
+        getChildren: PropTypes.func,
+        // A function that should return the total number of child element available.
+        // Required if getChildren is supplied.
+        getChildCount: PropTypes.func,
         // A function which will be invoked when an overflow element is required.
         // This will be inserted after the children.
         createOverflowElement: PropTypes.func,
@@ -43,33 +53,50 @@ module.exports = React.createClass({
         };
     },
 
+    _getChildren: function(min, max) {
+        if (this.props.getChildren && this.props.getChildCount) {
+            return this.props.getChildren(min, max);
+        } else {
+            // XXX: I'm not sure why anything would pass null into this, it seems
+            // like a bizzare case to handle, but I'm preserving the behaviour.
+            // (see commit 38d5c7d5c5d5a34dc16ef5d46278315f5c57f542)
+            return React.Children.toArray(this.props.children).filter((c) => {
+                return c != null;
+            }).slice(min, max);
+        }
+    },
+
+    _getChildCount: function() {
+        if (this.props.getChildren && this.props.getChildCount) {
+            return this.props.getChildCount();
+        } else {
+            return React.Children.toArray(this.props.children).filter((c) => {
+                return c != null;
+            }).length;
+        }
+    },
+
     render: function() {
-        let childsJsx = this.props.children;
-        let overflowJsx;
-        const childArray = React.Children.toArray(this.props.children).filter((c) => {
-            return c != null;
-        });
-
-        const childCount = childArray.length;
+        let childNodes;
+        let overflowNode = null;
 
+        const totalChildren = this._getChildCount();
+        let upperBound = totalChildren;
         if (this.props.truncateAt >= 0) {
-            const overflowCount = childCount - this.props.truncateAt;
-
+            const overflowCount = totalChildren - this.props.truncateAt;
             if (overflowCount > 1) {
-                overflowJsx = this.props.createOverflowElement(
-                    overflowCount, childCount,
+                overflowNode = this.props.createOverflowElement(
+                    overflowCount, totalChildren,
                 );
-
-                // cut out the overflow elements
-                childArray.splice(childCount - overflowCount, overflowCount);
-                childsJsx = childArray; // use what is left
+                upperBound = this.props.truncateAt;
             }
         }
+        childNodes = this._getChildren(0, upperBound);
 
         return (
             <div className={this.props.className}>
-                {childsJsx}
-                {overflowJsx}
+                {childNodes}
+                {overflowNode}
             </div>
         );
     },