hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Clean up Tooltip DOM

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-04-01 15:20:37 +03:00
parent 0c325f3b36
commit 71834e9fb2
1 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/renderer/components/tooltip/tooltip.tsx
View File

@ -54,6 +54,7 @@ export class Tooltip extends React.Component<TooltipProps> {
@observable.ref elem: HTMLElement;
@observable activePosition: TooltipPosition;
@observable isDomNodeRendered = false;
@observable isVisible = false;
constructor(props: TooltipProps) {
@ -61,6 +62,10 @@ export class Tooltip extends React.Component<TooltipProps> {
makeObservable(this);
}
get visible() {
return this.isVisible || this.props.visible;
}
get targetElem(): HTMLElement {
return document.getElementById(this.props.targetId);
}
@ -80,6 +85,10 @@ export class Tooltip extends React.Component<TooltipProps> {
componentDidUpdate() {
this.refreshPosition();
// this.isVisible should be updated after Tooltip DOM node rendered
// to show opening animation by adding classname
this.isVisible = this.isDomNodeRendered;
}
componentWillUnmount() {
@ -89,13 +98,12 @@ export class Tooltip extends React.Component<TooltipProps> {
@boundMethod
protected onEnterTarget() {
this.isVisible = true;
this.refreshPosition();
this.isDomNodeRendered = true;
}
@boundMethod
protected onLeaveTarget() {
this.isVisible = false;
this.isDomNodeRendered = false;
}
@boundMethod
@ -103,6 +111,10 @@ export class Tooltip extends React.Component<TooltipProps> {
const { preferredPositions } = this.props;
const { elem, targetElem } = this;
if (!elem) {
return;
}
let positions = new Set<TooltipPosition>([
TooltipPosition.RIGHT,
TooltipPosition.BOTTOM,
@ -150,6 +162,10 @@ export class Tooltip extends React.Component<TooltipProps> {
}
protected setPosition(pos: { left: number; top: number }) {
if (!this.elem) {
return;
}
const elemStyle = this.elem.style;
elemStyle.left = `${pos.left}px`;
@ -214,17 +230,21 @@ export class Tooltip extends React.Component<TooltipProps> {
}
render() {
const { style, formatters, usePortal, children, visible } = this.props;
const { style, formatters, usePortal, children } = this.props;
const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
visible: visible ?? this.isVisible,
visible: this.visible,
formatter: !!formatters,
});
const tooltip = (
<div className={className} style={style} ref={this.bindRef}>
<div className={className} style={style} ref={this.bindRef} role="tooltip">
{children}
</div>
);
if (!this.isDomNodeRendered) {
return null;
}
if (usePortal) {
return createPortal(tooltip, document.body);
}