mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 04:21:57 +03:00
Code Issues Projects Releases Packages Wiki Activity

AppsDrawer watch ResizeNotifier isResizing

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-10-19 13:08:11 +01:00
parent da7a02b545
commit 73489b7c6d
2 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/views/rooms/AppsDrawer.js
View file

@ -56,6 +56,8 @@ export default class AppsDrawer extends React.Component {
this._resizeContainer = null; this._resizeContainer = null;
this.resizer = this._createResizer(); this.resizer = this._createResizer();
this.props.resizeNotifier.on("isResizing", this.onIsResizing);
} }
componentDidMount() { componentDidMount() {
@ -71,6 +73,7 @@ export default class AppsDrawer extends React.Component {
if (this._resizeContainer) { if (this._resizeContainer) {
this.resizer.detach(); this.resizer.detach();
} }
this.props.resizeNotifier.off("isResizing", this.onIsResizing);
} }
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
@ -80,6 +83,13 @@ export default class AppsDrawer extends React.Component {
this._updateApps(); this._updateApps();
} }
onIsResizing = (resizing) => {
this.setState({ resizing });
if (!resizing) {
this._relaxResizer();
}
};
_createResizer() { _createResizer() {
const classNames = { const classNames = {
handle: "mx_ResizeHandle", 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 = () => { _loadResizerPreferences = () => {
console.log("@@ _loadResizerPreferences"); console.log("@@ _loadResizerPreferences");
try { try {
@ -191,10 +209,6 @@ export default class AppsDrawer extends React.Component {
} }
} }
setResizing = (resizing) => {
this.setState({ resizing });
};
render() { render() {
if (!this.props.showApps) return <div />; if (!this.props.showApps) return <div />;
@ -247,7 +261,6 @@ export default class AppsDrawer extends React.Component {
handleClass="mx_AppsContainer_resizerHandle" handleClass="mx_AppsContainer_resizerHandle"
className="mx_AppsContainer_resizer" className="mx_AppsContainer_resizer"
resizeNotifier={this.props.resizeNotifier} resizeNotifier={this.props.resizeNotifier}
setResizing={this.setResizing}
> >
<div className="mx_AppsContainer" ref={this._collectResizer}> <div className="mx_AppsContainer" ref={this._collectResizer}>
{ apps.map((app, i) => { { apps.map((app, i) => {
@ -273,7 +286,6 @@ const PersistentVResizer = ({
handleWrapperClass, handleWrapperClass,
handleClass, handleClass,
resizeNotifier, resizeNotifier,
setResizing,
children, children,
}) => { }) => {
const [height, setHeight] = useLocalStorageState("pvr_" + id, 280); // old fixed height was 273px const [height, setHeight] = useLocalStorageState("pvr_" + id, 280); // old fixed height was 273px
@ -283,7 +295,6 @@ const PersistentVResizer = ({
minHeight={minHeight} minHeight={minHeight}
maxHeight={maxHeight} maxHeight={maxHeight}
onResizeStart={() => { onResizeStart={() => {
setResizing(true);
resizeNotifier.startResizing(); resizeNotifier.startResizing();
}} }}
onResize={() => { onResize={() => {
@ -291,7 +302,6 @@ const PersistentVResizer = ({
}} }}
onResizeStop={(e, dir, ref, d) => { onResizeStop={(e, dir, ref, d) => {
setHeight(height + d.height); setHeight(height + d.height);
setResizing(false);
resizeNotifier.stopResizing(); resizeNotifier.stopResizing();
}} }}
handleWrapperClass={handleWrapperClass} handleWrapperClass={handleWrapperClass}

2
src/utils/ResizeNotifier.js
View file

@ -40,10 +40,12 @@ export default class ResizeNotifier extends EventEmitter {
startResizing() { startResizing() {
this._isResizing = true; this._isResizing = true;
this.emit("isResizing", true);
} }
stopResizing() { stopResizing() {
this._isResizing = false; this._isResizing = false;
this.emit("isResizing", false);
} }
_noisyMiddlePanel() { _noisyMiddlePanel() {