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

Do not create tooltip div until it's to be shown

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-03-24 13:39:49 +03:00
parent ec66744ca3
commit c2dcb06d23
1 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
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 isNodeRendered = false;
@observable isVisible = false;
constructor(props: TooltipProps) {
@ -80,6 +81,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.isNodeRendered;
}
componentWillUnmount() {
@ -89,13 +94,12 @@ export class Tooltip extends React.Component<TooltipProps> {
@boundMethod
protected onEnterTarget() {
this.isVisible = true;
this.refreshPosition();
this.isNodeRendered = true;
}
@boundMethod
protected onLeaveTarget() {
this.isVisible = false;
this.isNodeRendered = false;
}
@boundMethod
@ -103,6 +107,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 +158,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`;
@ -216,11 +228,16 @@ export class Tooltip extends React.Component<TooltipProps> {
render() {
const { style, formatters, usePortal, children, visible } = this.props;
const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
visible: visible ?? this.isVisible,
visible: this.isVisible || visible,
formatter: !!formatters,
});
if (!visible && !this.isNodeRendered) {
return null;
}
const tooltip = (
<div className={className} style={style} ref={this.bindRef}>
<div className={className} style={style} ref={this.bindRef} role="tooltip">
{children}
</div>
);