diff options
| -rw-r--r-- | src/client/views/ContextMenu.tsx | 30 |
1 files changed, 11 insertions, 19 deletions
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index c9908b4b0..6a530e3ae 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -118,27 +118,11 @@ export class ContextMenu extends React.Component { static readonly buffer = 20; get pageX() { - const x = this._pageX; - if (x < 0) { - return 0; - } - const width = this._width; - if (x + width > window.innerWidth - ContextMenu.buffer) { - return window.innerWidth - ContextMenu.buffer - width; - } - return x; + return this._pageX + this._width > window.innerWidth - ContextMenu.buffer ? window.innerWidth - ContextMenu.buffer - this._width : Math.max(0, this._pageX); } get pageY() { - const y = this._pageY; - if (y < 0) { - return 0; - } - const height = this._height; - if (y + height > window.innerHeight - ContextMenu.buffer) { - return window.innerHeight - ContextMenu.buffer - height; - } - return y; + return this._pageY + this._height > window.innerHeight - ContextMenu.buffer ? window.innerHeight - ContextMenu.buffer - this._height : Math.max(0, this._pageY); } _onDisplay?: () => void = undefined; @@ -223,7 +207,15 @@ export class ContextMenu extends React.Component { render() { return !this._display ? null : ( - <div className="contextMenu-cont" style={{ left: this.pageX, ...(this._yRelativeToTop ? { top: this.pageY } : { bottom: this.pageY }) }}> + <div + className="contextMenu-cont" + ref={action((r: any) => { + if (r) { + this._width = Number(getComputedStyle(r).width.replace('px', '')); + this._height = Number(getComputedStyle(r).height.replace('px', '')); + } + })} + style={{ left: this.pageX, ...(this._yRelativeToTop ? { top: this.pageY } : { bottom: this.pageY }) }}> {!this.itemsNeedSearch ? null : ( <span className={'search-icon'}> <span className="icon-background"> |