From aeec68b0d775364be3a00df27c550d43686d7427 Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Thu, 21 Dec 2023 08:09:37 +0000
Subject: [PATCH] fix(core): onboading tooltip next button always shows (#5363)

---
 .../affine/onboarding/animate-in-tooltip.tsx   | 18 ++++++++++++++----
 .../affine/onboarding/onboarding.tsx           |  9 ++++++---
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/onboarding/animate-in-tooltip.tsx b/packages/frontend/core/src/components/affine/onboarding/animate-in-tooltip.tsx
index 85fe7640f9..8cfe73f02f 100644
--- a/packages/frontend/core/src/components/affine/onboarding/animate-in-tooltip.tsx
+++ b/packages/frontend/core/src/components/affine/onboarding/animate-in-tooltip.tsx
@@ -2,7 +2,15 @@ import { Button } from '@affine/component';
 
 import * as styles from './animate-in-tooltip.css';
 
-export const AnimateInTooltip = ({ onNext }: { onNext: () => void }) => {
+interface AnimateInTooltipProps {
+  onNext: () => void;
+  visible?: boolean;
+}
+
+export const AnimateInTooltip = ({
+  onNext,
+  visible,
+}: AnimateInTooltipProps) => {
   return (
     <>
       <div className={styles.tooltip}>
@@ -10,9 +18,11 @@ export const AnimateInTooltip = ({ onNext }: { onNext: () => void }) => {
         whiteboards and databases
       </div>
       <div className={styles.next}>
-        <Button type="primary" size="extraLarge" onClick={onNext}>
-          Next
-        </Button>
+        {visible ? (
+          <Button type="primary" size="extraLarge" onClick={onNext}>
+            Next
+          </Button>
+        ) : null}
       </div>
     </>
   );
diff --git a/packages/frontend/core/src/components/affine/onboarding/onboarding.tsx b/packages/frontend/core/src/components/affine/onboarding/onboarding.tsx
index 1c48e0af86..9a0751c5ab 100644
--- a/packages/frontend/core/src/components/affine/onboarding/onboarding.tsx
+++ b/packages/frontend/core/src/components/affine/onboarding/onboarding.tsx
@@ -34,6 +34,11 @@ export const Onboarding = ({ onOpenApp }: OnboardingProps) => {
     });
   }, []);
 
+  const onTooltipNext = useCallback(() => {
+    if (status.activeId) return;
+    setStatus({ activeId: null, unfoldingId: '4' });
+  }, [status.activeId]);
+
   return (
     <div
       className={styles.onboarding}
@@ -80,9 +85,7 @@ export const Onboarding = ({ onOpenApp }: OnboardingProps) => {
         )}
 
         <div className={styles.tipsWrapper} data-visible={!status.activeId}>
-          <AnimateInTooltip
-            onNext={() => setStatus({ activeId: null, unfoldingId: '4' })}
-          />
+          <AnimateInTooltip onNext={onTooltipNext} visible={!status.activeId} />
         </div>
       </div>
     </div>