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 <Animate/> and <Tooltip/>

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2022-04-06 15:12:00 +03:00
parent 68ec65f8b4
commit cd0ac45ef5
2 changed files with 22 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/renderer/components/animate/animate.tsx
View File

@ -83,23 +83,23 @@ export class Animate extends React.Component<AnimateProps> {
}
render() {
const { name, enterDuration, leaveDuration } = this.props;
const contentElem = this.contentElem;
const durations = {
"--enter-duration": `${enterDuration}ms`,
"--leave-duration": `${leaveDuration}ms`,
} as React.CSSProperties;
if (!this.isVisible) {
return null;
}
const { name, enterDuration, leaveDuration } = this.props;
const contentElem = this.contentElem;
const cssVarsForAnimation = {
"--enter-duration": `${enterDuration}ms`,
"--leave-duration": `${leaveDuration}ms`,
} as React.CSSProperties;
return React.cloneElement(contentElem, {
className: cssNames("Animate", name, contentElem.props.className, this.statusClassName),
children: contentElem.props.children,
style: {
...contentElem.props.style,
...durations,
...cssVarsForAnimation,
},
});
}

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

@ -9,7 +9,7 @@ import React from "react";
import { createPortal } from "react-dom";
import { observer } from "mobx-react";
import { boundMethod, cssNames, IClassName } from "../../utils";
import { observable, makeObservable } from "mobx";
import { observable, makeObservable, action } from "mobx";
export enum TooltipPosition {
TOP = "top",
@ -54,18 +54,14 @@ export class Tooltip extends React.Component<TooltipProps> {
@observable.ref elem: HTMLElement;
@observable activePosition: TooltipPosition;
@observable isDomNodeRendered = false;
@observable isVisible = false;
@observable isVisible = this.props.visible ?? false;
@observable isContentVisible = false; // animation manager
constructor(props: TooltipProps) {
super(props);
makeObservable(this);
}
get visible() {
return this.isVisible || this.props.visible;
}
get targetElem(): HTMLElement {
return document.getElementById(this.props.targetId);
}
@ -85,10 +81,6 @@ 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() {
@ -96,14 +88,16 @@ export class Tooltip extends React.Component<TooltipProps> {
this.hoverTarget.removeEventListener("mouseleave", this.onLeaveTarget);
}
@boundMethod
@action.bound
protected onEnterTarget() {
this.isDomNodeRendered = true;
this.isVisible = true;
requestAnimationFrame(action(() => this.isContentVisible = true));
}
@boundMethod
@action.bound
protected onLeaveTarget() {
this.isDomNodeRendered = false;
this.isVisible = false;
this.isContentVisible = false;
}
@boundMethod
@ -230,9 +224,13 @@ export class Tooltip extends React.Component<TooltipProps> {
}
render() {
if (!this.isVisible) {
return null;
}
const { style, formatters, usePortal, children } = this.props;
const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
visible: this.visible,
visible: this.isContentVisible,
formatter: !!formatters,
});
const tooltip = (
@ -241,10 +239,6 @@ export class Tooltip extends React.Component<TooltipProps> {
</div>
);
if (!this.isDomNodeRendered) {
return null;
}
if (usePortal) {
return createPortal(tooltip, document.body);
}