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