Skip to content
Snippets Groups Projects
Unverified Commit c64c7cc9 authored by Uladzimir Havenchyk's avatar Uladzimir Havenchyk Committed by GitHub
Browse files

Rework Popover to avoid warnings from react (#33369)

parent d4bbb52b
No related branches found
No related tags found
No related merge requests found
......@@ -10,7 +10,7 @@ import { isCypressActive } from "metabase/env";
import "./Popover.css";
// space we should leave berween page edge and popover edge
// space we should leave between page edge and popover edge
const PAGE_PADDING = 10;
// Popover padding and border
const POPOVER_BODY_PADDING = 2;
......@@ -97,6 +97,7 @@ export default class Popover extends Component {
this._popoverElement.className = `PopoverContainer ${this.props.containerClassName}`;
this._popoverElement.dataset.testid = "popover";
document.body.appendChild(this._popoverElement);
this._timer = setInterval(() => {
const { width, height } = this._popoverElement.getBoundingClientRect();
if (this.state.width !== width || this.state.height !== height) {
......@@ -201,11 +202,12 @@ export default class Popover extends Component {
this._tether.destroy();
delete this._tether;
}
if (this._popoverElement) {
ReactDOM.unmountComponentAtNode(this._popoverElement);
if (this._popoverElement.parentNode) {
this._popoverElement.parentNode.removeChild(this._popoverElement);
}
delete this._popoverElement;
clearInterval(this._timer);
delete this._timer;
......@@ -350,14 +352,17 @@ export default class Popover extends Component {
_getTargetElement() {
let target;
if (this.props.targetEvent) {
// create a fake element at the event coordinates
target = document.getElementById("popover-event-target");
if (!target) {
target = document.createElement("div");
target.id = "popover-event-target";
document.body.appendChild(target);
}
target.style.left = this.props.targetEvent.clientX - 3 + "px";
target.style.top = this.props.targetEvent.clientY - 3 + "px";
} else if (this.props.target) {
......@@ -367,13 +372,33 @@ export default class Popover extends Component {
target = this.props.target;
}
}
if (target == null) {
target = this._popoverElement;
}
return target;
}
_renderPopover(isOpen) {
constrainPopoverToBetweenViewportAndTarget(tetherOptions, direction) {
const body = tetherOptions.element.querySelector(".PopoverBody");
const target = this._getTargetElement();
const bodyHeight = body.getBoundingClientRect().height;
const space =
direction === "top"
? target.getBoundingClientRect().top
: window.innerHeight - target.getBoundingClientRect().bottom;
const maxHeight = space - PAGE_PADDING;
if (bodyHeight > maxHeight) {
body.style.maxHeight = maxHeight + "px";
body.classList.add("scroll-y");
body.classList.add("scroll-show");
}
}
render() {
const isOpen = this.props.isOpen;
const popoverElement = this._getPopoverElement(isOpen);
if (popoverElement) {
if (isOpen) {
......@@ -392,28 +417,8 @@ export default class Popover extends Component {
<span>{isOpen ? this._popoverComponent() : null}</span>,
popoverElement,
);
} else {
return <span className="hide" />;
}
}
constrainPopoverToBetweenViewportAndTarget(tetherOptions, direction) {
const body = tetherOptions.element.querySelector(".PopoverBody");
const target = this._getTargetElement();
const bodyHeight = body.getBoundingClientRect().height;
const space =
direction === "top"
? target.getBoundingClientRect().top
: window.innerHeight - target.getBoundingClientRect().bottom;
const maxHeight = space - PAGE_PADDING;
if (bodyHeight > maxHeight) {
body.style.maxHeight = maxHeight + "px";
body.classList.add("scroll-y");
body.classList.add("scroll-show");
}
}
render() {
return this._renderPopover(this.props.isOpen);
return <span className="hide" />;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment