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