From e980eeec3d15f34475d244b0e8489bf482009f54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Mon, 17 Feb 2025 09:44:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=A6=81=E7=94=A8=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E9=A1=B5=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Tab.module.css |  4 ++++
 src/components/Tab.tsx        | 34 ++++++++++++++++++++++++----------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/Tab.module.css b/src/components/Tab.module.css
index d2d0581..986d03e 100644
--- a/src/components/Tab.module.css
+++ b/src/components/Tab.module.css
@@ -18,5 +18,9 @@
     &:hover {
       color: var(--color-primary-hover);
     }
+    &.disabled {
+      color: var(--color-primary-disabled);
+      cursor: not-allowed;
+    }
   }
 }
diff --git a/src/components/Tab.tsx b/src/components/Tab.tsx
index 38a4b02..00a1ae6 100644
--- a/src/components/Tab.tsx
+++ b/src/components/Tab.tsx
@@ -3,20 +3,30 @@ import { isEqual, isNil } from 'lodash-es';
 import { useCallback, useEffect, useState } from 'react';
 import styles from './Tab.module.css';
 
-type TabProps = {
-  tabs: { title: string; id: unknown }[];
-  activeTab?: unknown;
-  onActive?: (id: unknown) => void;
+type TabOption = {
+  title: string;
+  id: unknown;
 };
 
-export function Tab({ tabs = [], activeTab, onActive }: TabProps) {
+type TabProps = {
+  tabs: TabOption[];
+  activeTab?: unknown;
+  onActive?: (id: TabOption['id']) => void;
+  disabled?: { [d: keyof TabOption['id']]: boolean };
+};
+
+export function Tab({ tabs = [], activeTab, onActive, disabled }: TabProps) {
   const [active, setActive] = useState(() =>
     isNil(activeTab) ? 0 : tabs.findIndex((tab) => isEqual(tab.id, activeTab)),
   );
-  const handleActivate = useCallback((index: number) => {
-    setActive(index);
-    onActive?.(tabs[index].id);
-  }, []);
+  const handleActivate = useCallback(
+    (index: number) => {
+      if (disabled?.[tabs[index].id] ?? false) return;
+      setActive(index);
+      onActive?.(tabs[index].id);
+    },
+    [tabs, onActive, disabled],
+  );
 
   useEffect(() => {
     const activeIndex = tabs.findIndex((tab) => isEqual(tab.id, activeTab));
@@ -30,7 +40,11 @@ export function Tab({ tabs = [], activeTab, onActive }: TabProps) {
       {tabs.map((tab, index) => (
         <div
           key={`tab_${index}_${tab.id}`}
-          className={cx(styles.tab, isEqual(index, active) && styles.actived)}
+          className={cx(
+            styles.tab,
+            isEqual(index, active) && styles.actived,
+            (disabled?.[tab.id] ?? false) && styles.disabled,
+          )}
           onClick={() => handleActivate(index)}>
           {tab.title}
         </div>