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} >
{ apps.map((app, i) => { @@ -273,7 +286,6 @@ const PersistentVResizer = ({ handleWrapperClass, handleClass, resizeNotifier, - setResizing, children, }) => { const [height, setHeight] = useLocalStorageState("pvr_" + id, 280); // old fixed height was 273px @@ -283,7 +295,6 @@ const PersistentVResizer = ({ minHeight={minHeight} maxHeight={maxHeight} onResizeStart={() => { - setResizing(true); resizeNotifier.startResizing(); }} onResize={() => { @@ -291,7 +302,6 @@ const PersistentVResizer = ({ }} onResizeStop={(e, dir, ref, d) => { setHeight(height + d.height); - setResizing(false); resizeNotifier.stopResizing(); }} handleWrapperClass={handleWrapperClass} diff --git a/src/utils/ResizeNotifier.js b/src/utils/ResizeNotifier.js index 512946828b..fd12a454f6 100644 --- a/src/utils/ResizeNotifier.js +++ b/src/utils/ResizeNotifier.js @@ -40,10 +40,12 @@ export default class ResizeNotifier extends EventEmitter { startResizing() { this._isResizing = true; + this.emit("isResizing", true); } stopResizing() { this._isResizing = false; + this.emit("isResizing", false); } _noisyMiddlePanel() {