Merge pull request #17 from deriv-com/shayan/add-onchange-to-tab

Shayan/ fix: add onChange to Tabs component
deriv-com · Jan 24, 2024 · 929fbec · 929fbec
2 parents a8e785e + b147ab0
commit 929fbec
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/lib/components/Tabs/TabTitle.tsx b/lib/components/Tabs/TabTitle.tsx
@@ -10,13 +10,13 @@ export type TabTitleProps = {
     title: string;
     className?: string;
     variant: 'primary' | 'secondary';
-    onClickHandler?: () => void;
+    onChange?: () => void;
 };
 
-const TabTitle = ({ icon, activeTab, isActive, setSelectedTab, title,className,variant, onClickHandler }: TabTitleProps) => {
+const TabTitle = ({ icon, activeTab, isActive, setSelectedTab, title,className,variant, onChange }: TabTitleProps) => {
     const handleOnClick = useCallback((title: string) => {
         setSelectedTab(title);
-        onClickHandler?.();
+        onChange?.();
     }, [setSelectedTab, activeTab]);
 
     const classNameVariants: Record<TabTitleProps['variant'], string> = {

diff --git a/lib/components/Tabs/Tabs.tsx b/lib/components/Tabs/Tabs.tsx
@@ -9,16 +9,16 @@ type TabsProps = {
     wrapperClassName?: string;
     className?: string;
     variant?: 'primary' | 'secondary';
-    onClickHandler?: () => void;
+    onChange?: (index: number) => void;
 };
 
-const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'primary', onClickHandler }: TabsProps): JSX.Element => {
+const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'primary', onChange }: TabsProps): JSX.Element => {
     const [selectedTab, setSelectedTab] = useState(activeTab || children[0].props.title);
 
     return (
         <div className={wrapperClassName}>
             <div className={clsx(`derivs-${variant + '-'}tabs`, className)}>
-                {children.map((item) => {
+                {children.map((item, index) => {
                     return (
                         <TabTitle
                             icon={item.props.icon}
@@ -28,8 +28,9 @@ const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'pri
                             setSelectedTab={setSelectedTab}
                             title={item.props.title}
                             variant={variant}
-                            onClickHandler={onClickHandler}
+                            onChange={()=>onChange?.(index)}
                             className={item.props.className}
+
                         />
                     )
                 })}

diff --git a/src/main.tsx b/src/main.tsx
@@ -14,7 +14,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
       <Button> button </Button>
       <Text color='blue' size='lg'>this is a Text</Text>
 
-      <Tabs variant='primary' activeTab='primary tab 2' >
+      <Tabs variant='primary' activeTab='primary tab 2' onChange={(index)=>console.log(index)}  >
         <Tab title='primary tab 1'>
           test data for tab 1
         </Tab>