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