feat: updated tabs

gluestack · Dec 6, 2023 · 7d2b4f0 · 7d2b4f0
1 parent 2854c5a
commit 7d2b4f0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/packages/unstyled/tabs/src/Tabs.tsx b/packages/unstyled/tabs/src/Tabs.tsx
@@ -1,23 +1,39 @@
 import React, { memo } from 'react';
 import { forwardRef } from 'react';
 import { TabProvider } from './TabProvider';
+import { useControllableState } from '@gluestack-ui/hooks';
 
 export const Tabs = <StyledTabs,>(
   StyledTabs: React.ComponentType<StyledTabs>
 ) =>
   memo(
     forwardRef(
-      ({ value, ...props }: StyledTabs & { value?: string }, ref?: any) => {
-        const DEFAULT_TAB = 'tab-0';
-        const [currentActiveTab, setCurrentActiveTab] = React.useState(
-          value ?? DEFAULT_TAB
-        );
-
-        const onChange = (currentValue: string) =>
-          setCurrentActiveTab(currentValue);
+      (
+        {
+          value,
+          onChange,
+          defaultValue,
+          ...props
+        }: StyledTabs & {
+          value?: string;
+          defaultValue: string;
+          onChange: (value: string) => void;
+        },
+        ref?: any
+      ) => {
+        const [currentActiveTab, setCurrentActiveTab] = useControllableState({
+          value,
+          defaultValue,
+          onChange: (val) => {
+            onChange && onChange(val);
+          },
+        });
 
         return (
-          <TabProvider currentActiveTab={currentActiveTab} onChange={onChange}>
+          <TabProvider
+            currentActiveTab={currentActiveTab}
+            onChange={setCurrentActiveTab}
+          >
             <StyledTabs {...(props as StyledTabs)} ref={ref} />
           </TabProvider>
         );

diff --git a/packages/unstyled/tabs/src/types.ts b/packages/unstyled/tabs/src/types.ts
@@ -7,6 +7,8 @@ export interface ITabListProps {
 }
 export interface ITabsProps {
   value?: string;
+  defaultValue: string;
+  onChange?: (value: string) => void;
 }
 export interface ITabPanelProps {
   value?: string;