refactor: made tab panel optional

deriv-com · Jan 23, 2024 · a806974 · a806974
1 parent 1c5f650
commit a806974
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/lib/components/Tabs/Tab.tsx b/lib/components/Tabs/Tab.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 
 type TabProps = {
-    children: ReactNode;
+    children?: ReactNode;
     icon?: ReactNode;
     title: string;
 };

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

diff --git a/lib/components/Tabs/Tabs.tsx b/lib/components/Tabs/Tabs.tsx
@@ -9,9 +9,10 @@ type TabsProps = {
     wrapperClassName?: string;
     className?: string;
     variant?: 'primary' | 'secondary';
+    onClickHandler?: () => void;
 };
 
-const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'primary' }: TabsProps): JSX.Element => {
+const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'primary', onClickHandler }: TabsProps): JSX.Element => {
     const [selectedTab, setSelectedTab] = useState(activeTab || children[0].props.title);
 
     return (
@@ -27,6 +28,7 @@ const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'pri
                             setSelectedTab={setSelectedTab}
                             title={item.props.title}
                             variant={variant}
+                            onClickHandler={onClickHandler}
                         />
                     )
                 })}