1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Asyncronously recompute the placement of an open <Menu> (#2631)

* Asyncronously recompute the placement of an open <Menu>

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix refreshPosition

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2021-04-27 04:27:37 -04:00 committed by GitHub
parent 6a702ad19c
commit 9dad08c45f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -5,7 +5,6 @@ import { createPortal } from "react-dom";
import { autobind, cssNames, noop } from "../../utils"; import { autobind, cssNames, noop } from "../../utils";
import { Animate } from "../animate"; import { Animate } from "../animate";
import { Icon, IconProps } from "../icon"; import { Icon, IconProps } from "../icon";
import debounce from "lodash/debounce";
export const MenuContext = React.createContext<MenuContextValue>(null); export const MenuContext = React.createContext<MenuContextValue>(null);
export type MenuContextValue = Menu; export type MenuContextValue = Menu;
@ -122,8 +121,11 @@ export class Menu extends React.Component<MenuProps, State> {
} }
} }
refreshPosition = debounce(() => { refreshPosition = () => {
if (!this.props.usePortal || !this.opener) return; if (!this.props.usePortal || !this.opener || !this.elem) {
return;
}
const { width, height } = this.opener.getBoundingClientRect(); const { width, height } = this.opener.getBoundingClientRect();
let { left, top, bottom, right } = this.opener.getBoundingClientRect(); let { left, top, bottom, right } = this.opener.getBoundingClientRect();
const withScroll = window.getComputedStyle(this.elem).position !== "fixed"; const withScroll = window.getComputedStyle(this.elem).position !== "fixed";
@ -157,7 +159,7 @@ export class Menu extends React.Component<MenuProps, State> {
delete position.bottom; delete position.bottom;
} }
this.setState({ position }); this.setState({ position });
}, Animate.VISIBILITY_DELAY_MS); };
open() { open() {
if (this.isOpen) return; if (this.isOpen) return;
@ -248,6 +250,10 @@ export class Menu extends React.Component<MenuProps, State> {
} }
render() { render() {
if (this.isOpen) {
setImmediate(() => this.refreshPosition());
}
const { position, id } = this.props; const { position, id } = this.props;
let { className, usePortal } = this.props; let { className, usePortal } = this.props;