diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js index e5f02730c5..1b0d5aaf90 100644 --- a/src/components/views/rooms/AppsDrawer.js +++ b/src/components/views/rooms/AppsDrawer.js @@ -56,6 +56,8 @@ export default class AppsDrawer extends React.Component { this._resizeContainer = null; this.resizer = this._createResizer(); + + this.props.resizeNotifier.on("isResizing", this.onIsResizing); } componentDidMount() { @@ -71,6 +73,7 @@ export default class AppsDrawer extends React.Component { if (this._resizeContainer) { this.resizer.detach(); } + this.props.resizeNotifier.off("isResizing", this.onIsResizing); } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event @@ -80,6 +83,13 @@ export default class AppsDrawer extends React.Component { this._updateApps(); } + onIsResizing = (resizing) => { + this.setState({ resizing }); + if (!resizing) { + this._relaxResizer(); + } + }; + _createResizer() { const classNames = { handle: "mx_ResizeHandle", @@ -130,6 +140,14 @@ export default class AppsDrawer extends React.Component { } } + _relaxResizer = () => { + const distributors = this.resizer.getDistributors(); + + // relax all items if they had any overconstrained flexboxes + distributors.forEach(d => d.start()); + distributors.forEach(d => d.finish()); + }; + _loadResizerPreferences = () => { console.log("@@ _loadResizerPreferences"); try { @@ -191,10 +209,6 @@ export default class AppsDrawer extends React.Component { } } - setResizing = (resizing) => { - this.setState({ resizing }); - }; - render() { if (!this.props.showApps) return
; @@ -247,7 +261,6 @@ export default class AppsDrawer extends React.Component { handleClass="mx_AppsContainer_resizerHandle" className="mx_AppsContainer_resizer" resizeNotifier={this.props.resizeNotifier} - setResizing={this.setResizing} >