Merge pull request #223 from studiobakers/fix/tab-generic-type-id

fix(tab):generic id type added to TabItem
studiobakers · Mar 26, 2024 · 1cbf0cf · 1cbf0cf
2 parents 6a6ab09 + 4559441
commit 1cbf0cf
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 22 deletions.
diff --git a/src/tab/Tab.tsx b/src/tab/Tab.tsx
@@ -6,15 +6,15 @@ import classNames from "classnames";
 import TabHeaderItem from "./header/item/TabHeaderItem";
 import List from "../list/List";
 
-export type TabItem = {
-  id: string;
+export type TabItem<ID extends string | number = string | number> = {
+  id: ID;
   content: React.ReactNode;
   icon?: React.ReactNode;
   isDisabled?: boolean;
 };
 
-interface UncontrolledTabProps {
-  items: TabItem[];
+interface UncontrolledTabProps<ID extends string | number = string | number> {
+  items: TabItem<ID>[];
   children: React.ReactNode[];
   testid?: string;
   initialActiveTabIndex?: number;
@@ -27,16 +27,16 @@ interface UncontrolledTabProps {
 // and initialActiveTabIndex should be undefined
 type ControlledTabProps =
   | {
-      activeTabIndex: number;
-      onTabChange: (index: number) => void;
-      initialActiveTabIndex?: number;
-    }
+    activeTabIndex: number;
+    onTabChange: (index: number) => void;
+    initialActiveTabIndex?: number;
+  }
   | {
-      activeTabIndex?: number;
-      onTabChange?: (index: number) => void;
-    };
+    activeTabIndex?: number;
+    onTabChange?: (index: number) => void;
+  };
 
-export type TabProps = ControlledTabProps & UncontrolledTabProps;
+export type TabProps = ControlledTabProps & UncontrolledTabProps<string | number>;
 
 function Tab({
   testid,
@@ -72,9 +72,9 @@ function Tab({
       <div className={"tab__body"} data-testid={`${testid}.body`}>
         {
           children[
-            activeTabIndexFromProps === undefined
-              ? activeTabIndex
-              : activeTabIndexFromProps
+          activeTabIndexFromProps === undefined
+            ? activeTabIndex
+            : activeTabIndexFromProps
           ]
         }
       </div>

diff --git a/src/tab/header/item/TabHeaderItem.tsx b/src/tab/header/item/TabHeaderItem.tsx
@@ -7,7 +7,7 @@ import {TabItem} from "../../Tab";
 import ListItem from "../../../list/item/ListItem";
 
 type TabHeaderItemProps = {
-  tab: TabItem;
+  tab: TabItem<string | number>;
   onClick: (index: number) => void;
   isActive: boolean;
   index: number;

diff --git a/stories/12-Tab.stories.tsx b/stories/12-Tab.stories.tsx
@@ -36,7 +36,7 @@ storiesOf("Tab", module).add("Tab", () => (
 
     <br />
     <br />
-    <StateProvider initialState={0}>
+    <StateProvider initialState={{index: 0}}>
       {(state, setState) => (
         <div>
           <p>
@@ -45,21 +45,21 @@ storiesOf("Tab", module).add("Tab", () => (
 
           <div style={{display: "flex"}}>
             <Button
-              onClick={() => setState(Math.max(0, (state - 1) % 2))}
-              isDisabled={state === 0}>
+              onClick={() => setState({index: Math.max(0, (state.index - 1) % 2)})}
+              isDisabled={state.index === 0}>
               Previous Tab
             </Button>
-            <Button onClick={() => setState((state + 1) % 2)} isDisabled={state === 1}>
+            <Button onClick={() => setState({index: (state.index + 1) % 2})} isDisabled={state.index === 1}>
               Next Tab
             </Button>
           </div>
 
           <Tab
             items={tabItems}
-            activeTabIndex={state}
+            activeTabIndex={state.index}
             onTabChange={(index) => {
               console.log("tab changed to index: ", index);
-              setState(index);
+              setState({index: index});
             }}>
             {[<div key={0}>{"Home tab"}</div>, <div key={1}>{"Following tab"}</div>]}
           </Tab>