avoid whitespace and expand all matching section when filtering

src/components/structures/RoomSubList.js

@@ -84,7 +84,7 @@ const RoomSubList = React.createClass({
     // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
     isCollapsableOnClick: function() {
         const stuck = this.refs.header.dataset.stuck;
-        if (this.state.hidden || stuck === undefined || stuck === "none") {
+        if (!this.props.forceExpand && (this.state.hidden || stuck === undefined || stuck === "none")) {
             return true;
         } else {
             return false;
@@ -238,7 +238,7 @@ const RoomSubList = React.createClass({
         }
     },
 
-    _getHeaderJsx: function() {
+    _getHeaderJsx: function(isCollapsed) {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const subListNotifications = this.roomNotificationCount();
         const subListNotifCount = subListNotifications[0];
@@ -287,8 +287,8 @@ const RoomSubList = React.createClass({
         if (len) {
             const chevronClasses = classNames({
                 'mx_RoomSubList_chevron': true,
-                'mx_RoomSubList_chevronRight': this.state.hidden,
+                'mx_RoomSubList_chevronRight': isCollapsed,
-                'mx_RoomSubList_chevronDown': !this.state.hidden,
+                'mx_RoomSubList_chevronDown': !isCollapsed,
             });
             chevron = (<div className={chevronClasses}></div>);
         }
@@ -321,21 +321,23 @@ const RoomSubList = React.createClass({
 
     render: function() {
         const len = this.props.list.length + this.props.extraTiles.length;
+        const isCollapsed = this.state.hidden && !this.props.forceExpand;
         if (len) {
             const subListClasses = classNames({
                 "mx_RoomSubList": true,
-                "mx_RoomSubList_hidden": this.state.hidden,
+                "mx_RoomSubList_hidden": isCollapsed,
-                "mx_RoomSubList_nonEmpty": len && !this.state.hidden,
+                "mx_RoomSubList_nonEmpty": len && !isCollapsed,
             });
-            if (this.state.hidden) {
+
+            if (isCollapsed) {
                 return <div ref="subList" className={subListClasses}>
-                    {this._getHeaderJsx()}
+                    {this._getHeaderJsx(isCollapsed)}
                 </div>;
             } else {
                 const tiles = this.makeRoomTiles();
                 tiles.push(...this.props.extraTiles);
                 return <div ref="subList" className={subListClasses}>
-                    {this._getHeaderJsx()}
+                    {this._getHeaderJsx(isCollapsed)}
                     <IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll">
                         { tiles }
                     </IndicatorScrollbar>
@@ -344,13 +346,13 @@ const RoomSubList = React.createClass({
         } else {
             const Loader = sdk.getComponent("elements.Spinner");
             let content;
-            if (this.props.showSpinner && !this.state.hidden) {
+            if (this.props.showSpinner && !isCollapsed) {
                 content = <Loader />;
             }
 
             return (
                 <div ref="subList" className="mx_RoomSubList">
-                    { this._getHeaderJsx() }
+                    { this._getHeaderJsx(isCollapsed) }
                     { content }
                 </div>
             );

src/components/views/rooms/RoomList.js

@@ -82,11 +82,11 @@ module.exports = React.createClass({
         this.collapsedState = collapsedJson ? JSON.parse(collapsedJson) : {};
         this._layoutSections = [];
 
-        const options = {
+        const unfilteredOptions = {
-            allowWhitespace: false,
+            allowWhitespace: true,
             handleHeight: 1,
         };
-        this._layout = new Layout((key, size) => {
+        this._unfilteredlayout = new Layout((key, size) => {
             const subList = this._subListRefs[key];
             if (subList) {
                 subList.setHeight(size);
@@ -99,7 +99,19 @@ module.exports = React.createClass({
                 window.localStorage.setItem("mx_roomlist_sizes",
                     JSON.stringify(this.subListSizes));
             }
-        }, this.subListSizes, this.collapsedState, options);
+        }, this.subListSizes, this.collapsedState, unfilteredOptions);
+
+        this._filteredLayout = new Layout((key, size) => {
+            const subList = this._subListRefs[key];
+            if (subList) {
+                subList.setHeight(size);
+            }
+        }, null, null, {
+            allowWhitespace: false,
+            handleHeight: 0,
+        });
+
+        this._layout = this._unfilteredlayout;
 
         return {
             isLoadingLeftRooms: false,
@@ -191,15 +203,21 @@ module.exports = React.createClass({
     },
 
     componentDidUpdate: function(prevProps) {
+        let forceLayoutUpdate = false;
         this._repositionIncomingCallBox(undefined, false);
-        // if (this.props.searchFilter !== prevProps.searchFilter) {
+        if (!this.props.searchFilter && prevProps.searchFilter) {
-        //     this._checkSubListsOverflow();
+            this._layout = this._unfilteredlayout;
-        // }
+            forceLayoutUpdate = true;
+        } else if (this.props.searchFilter && !prevProps.searchFilter) {
+            this._layout = this._filteredLayout;
+            forceLayoutUpdate = true;
+        }
         this._layout.update(
             this._layoutSections,
             this.resizeContainer && this.resizeContainer.clientHeight,
+            forceLayoutUpdate,
         );
-        // TODO: call layout.setAvailableHeight, window height was changed when bannerShown prop was changed
+        this._checkSubListsOverflow();
     },
 
     onAction: function(payload) {
@@ -621,7 +639,7 @@ module.exports = React.createClass({
                     onHeaderClick(collapsed);
                 }
             };
-            const startAsHidden = props.startAsHidden || this.collapsedState[chosenKey];
+            let startAsHidden = props.startAsHidden || this.collapsedState[chosenKey];
             this._layoutSections.push({
                 id: chosenKey,
                 count: len,
@@ -629,6 +647,7 @@ module.exports = React.createClass({
             let subList = (<RoomSubList
                 ref={this._subListRef.bind(this, chosenKey)}
                 startAsHidden={startAsHidden}
+                forceExpand={!!this.props.searchFilter}
                 onHeaderClick={onSubListHeaderClick}
                 key={chosenKey}
                 label={label}

src/resizer/distributors/roomsublist2.js

@@ -68,7 +68,7 @@ export class Layout {
         this._applyNewSize();
     }
 
-    update(sections, availableHeight) {
+    update(sections, availableHeight, force = false) {
         let heightChanged = false;
 
         if (Number.isFinite(availableHeight) && availableHeight !== this._availableHeight) {
@@ -83,7 +83,7 @@ export class Layout {
                 return a.id !== b.id || a.count !== b.count;
             });
 
-        if (!heightChanged && !sectionsChanged) {
+        if (!heightChanged && !sectionsChanged && !force) {
             return;
         }