WIP on persisting height across collapse/expand

src/components/views/rooms/RoomList.js

@@ -87,11 +87,14 @@ module.exports = React.createClass({
             if (subList) {
                 subList.setHeight(size);
             }
-            this.subListSizes[key] = size;
-            window.localStorage.setItem("mx_roomlist_sizes",
-                JSON.stringify(this.subListSizes));
             // update overflow indicators
             this._checkSubListsOverflow();
+            // don't store height for collapsed sublists
+            if(!this.collapsedState[key]) {
+                this.subListSizes[key] = size;
+                window.localStorage.setItem("mx_roomlist_sizes",
+                    JSON.stringify(this.subListSizes));
+            }
         }, this.subListSizes, this.collapsedState);
 
         return {
@@ -161,23 +164,6 @@ module.exports = React.createClass({
         this._delayedRefreshRoomListLoopCount = 0;
     },
 
-    _onSubListResize: function(newSize, id) {
-        if (!id) {
-            return;
-        }
-        if (typeof newSize === "string") {
-            newSize = Number.MAX_SAFE_INTEGER;
-        }
-        if (newSize === null) {
-            delete this.subListSizes[id];
-        } else {
-            this.subListSizes[id] = newSize;
-        }
-        window.localStorage.setItem("mx_roomlist_sizes", JSON.stringify(this.subListSizes));
-        // update overflow indicators
-        this._checkSubListsOverflow();
-    },
-
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
         const cfg = {
@@ -202,13 +188,9 @@ module.exports = React.createClass({
 
     componentDidUpdate: function(prevProps) {
         this._repositionIncomingCallBox(undefined, false);
-        if (this.props.searchFilter !== prevProps.searchFilter) {
+        // if (this.props.searchFilter !== prevProps.searchFilter) {
-            // restore sizes
+        //     this._checkSubListsOverflow();
-            Object.keys(this.subListSizes).forEach((key) => {
+        // }
-                this._restoreSubListSize(key);
-            });
-            this._checkSubListsOverflow();
-        }
         this._layout.update(
             this._layoutSections,
             this.resizeContainer && this.resizeContainer.clientHeight,
@@ -583,20 +565,16 @@ module.exports = React.createClass({
         this.collapsedState[key] = collapsed;
         window.localStorage.setItem("mx_roomlist_collapsed", JSON.stringify(this.collapsedState));
         // load the persisted size configuration of the expanded sub list
-        this._layout.setCollapsed(key, collapsed);
+        if (collapsed) {
+            this._layout.collapseSection(key);
+        } else {
+            this._layout.expandSection(key, this.subListSizes[key]);
+        }
         // check overflow, as sub lists sizes have changed
         // important this happens after calling resize above
         this._checkSubListsOverflow();
     },
 
-    _restoreSubListSize(key) {
-        const size = this.subListSizes[key];
-        const handle = this.resizer.forHandleWithId(key);
-        if (handle) {
-            handle.resize(size);
-        }
-    },
-
     // check overflow for scroll indicator gradient
     _checkSubListsOverflow() {
         Object.values(this._subListRefs).forEach(l => l.checkOverflow());

src/resizer/distributors/roomsublist2.js

@@ -34,11 +34,11 @@ export class Layout {
     constructor(applyHeight, initialSizes, collapsedState) {
         this._applyHeight = applyHeight;
         this._sections = [];
-        this._collapsedState = collapsedState || {};
+        this._collapsedState = Object.assign({}, collapsedState);
         this._availableHeight = 0;
         // need to store heights by id so it doesn't get
         // assigned to wrong section when a section gets added?
-        this._sectionHeights = initialSizes || {};
+        this._sectionHeights = Object.assign({}, initialSizes);
         this._originalHeights = [];
         this._heights = [];
     }
@@ -49,10 +49,17 @@ export class Layout {
         this._applyNewSize();
     }
 
-    setCollapsed(id, collapsed) {
+    expandSection(id, height) {
-        this._collapsedState[id] = collapsed;
+        this._collapsedState[id] = false;
+        this._applyNewSize();
+        this.openHandle(id).setHeight(height).finish();
+    }
+
+    collapseSection(id) {
+        this._collapsedState[id] = true;
         this._applyNewSize();
     }
+
     // [{id, count}]
     update(sections, availableHeight) {
         if (Number.isFinite(availableHeight)) {
@@ -98,7 +105,7 @@ export class Layout {
         this._heights = this._originalHeights.slice(0);
         this._applyOverflow(-offset, sections, true);
         this._applyHeights();
-        this._originalHeights = this._heights;
+        this._commitHeights();
         this._sections.forEach((section, i) => {
             this._sectionHeights[section.id] = this._originalHeights[i];
         });
@@ -163,7 +170,7 @@ export class Layout {
 
         if (Math.abs(overflow) > 1.0 && unclampedSections.length > 0) {
             // we weren't able to distribute all the overflow so recurse and try again
-            log("recursing with", overflow, unclampedSections);
+            // log("recursing with", overflow, unclampedSections);
             overflow = this._applyOverflow(overflow, unclampedSections, blend);
         }
 
@@ -275,10 +282,12 @@ class Handle {
 
     setHeight(height) {
         this._layout._relayout(this._anchor, height - this._initialHeight);
+        return this;
     }
 
     finish() {
         this._layout._commitHeights();
+        return this;
     }
 }