From cd0ac45ef56197e575c8ae169f25a1d0666a4e9c Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Wed, 6 Apr 2022 15:12:00 +0300
Subject: [PATCH] clean up <Animate/> and <Tooltip/>

Signed-off-by: Roman <ixrock@gmail.com>
---
 src/renderer/components/animate/animate.tsx | 16 +++++-----
 src/renderer/components/tooltip/tooltip.tsx | 34 +++++++++------------
 2 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/renderer/components/animate/animate.tsx b/src/renderer/components/animate/animate.tsx
index b988f0d219..df160883fb 100644
--- a/src/renderer/components/animate/animate.tsx
+++ b/src/renderer/components/animate/animate.tsx
@@ -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,
       },
     });
   }
diff --git a/src/renderer/components/tooltip/tooltip.tsx b/src/renderer/components/tooltip/tooltip.tsx
index 8c74c915dc..4a8b0c30ca 100644
--- a/src/renderer/components/tooltip/tooltip.tsx
+++ b/src/renderer/components/tooltip/tooltip.tsx
@@ -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);
     }