|
1 | | -import React, { useState, createContext, useContext, isValidElement, ReactNode, useId } from 'react'; |
| 1 | +import React, { isValidElement, ReactNode } from 'react'; |
| 2 | +import * as RadixTabs from '@radix-ui/react-tabs'; |
2 | 3 | import cn from '@ably/ui/core/utils/cn'; |
3 | 4 |
|
4 | | -type TabsContextType = { |
5 | | - activeTab: string; |
6 | | - tabsId: string; |
7 | | -}; |
8 | | - |
9 | | -const TabsContext = createContext<TabsContextType | undefined>(undefined); |
10 | | - |
11 | 5 | interface TabProps { |
12 | 6 | value: string; |
13 | 7 | label: string; |
14 | 8 | children: ReactNode; |
15 | 9 | } |
16 | 10 |
|
17 | | -export const Tab: React.FC<TabProps> = ({ value, children }) => { |
18 | | - const context = useContext(TabsContext); |
19 | | - if (!context) { |
20 | | - return null; |
21 | | - } |
22 | | - return context.activeTab === value ? ( |
23 | | - <div role="tabpanel" id={`${context.tabsId}-panel-${value}`} aria-labelledby={`${context.tabsId}-tab-${value}`}> |
24 | | - {children} |
25 | | - </div> |
26 | | - ) : null; |
| 11 | +export const Tab: React.FC<TabProps> = () => { |
| 12 | + // Tab is only used declaratively — Tabs reads its props and renders RadixTabs.Content. |
| 13 | + // When used outside of Tabs, render nothing. |
| 14 | + return null; |
27 | 15 | }; |
28 | 16 |
|
29 | 17 | interface TabsProps { |
30 | 18 | children: ReactNode; |
31 | 19 | } |
32 | 20 |
|
33 | 21 | export const Tabs: React.FC<TabsProps> = ({ children }) => { |
34 | | - const tabsId = useId(); |
35 | | - |
36 | 22 | const tabs: { value: string; label: string }[] = []; |
| 23 | + const contentByValue: Record<string, ReactNode> = {}; |
| 24 | + |
37 | 25 | React.Children.forEach(children, (child) => { |
38 | 26 | if (isValidElement<TabProps>(child) && child.props.value) { |
39 | 27 | tabs.push({ value: child.props.value, label: child.props.label ?? child.props.value }); |
| 28 | + contentByValue[child.props.value] = child.props.children; |
40 | 29 | } |
41 | 30 | }); |
42 | 31 |
|
43 | | - const [activeTab, setActiveTab] = useState(tabs[0]?.value ?? ''); |
44 | | - |
45 | 32 | return ( |
46 | | - <TabsContext.Provider value={{ activeTab, tabsId }}> |
47 | | - <div className="my-5 border border-neutral-300 dark:border-neutral-800 rounded-lg overflow-hidden"> |
48 | | - <div |
49 | | - className="flex gap-1 border-b border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-1100 px-2 pt-2" |
50 | | - role="tablist" |
51 | | - > |
52 | | - {tabs.map(({ value, label }) => ( |
53 | | - <button |
54 | | - key={value} |
55 | | - id={`${tabsId}-tab-${value}`} |
56 | | - role="tab" |
57 | | - aria-selected={activeTab === value} |
58 | | - aria-controls={`${tabsId}-panel-${value}`} |
59 | | - onClick={() => setActiveTab(value)} |
60 | | - className={cn( |
61 | | - 'px-4 py-2 text-sm font-medium rounded-t-md transition-colors cursor-pointer', |
62 | | - activeTab === value |
63 | | - ? 'bg-white dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 border border-neutral-300 dark:border-neutral-800 border-b-white dark:border-b-neutral-1300 -mb-px' |
64 | | - : 'text-neutral-700 dark:text-neutral-500 hover:text-neutral-1000 dark:hover:text-neutral-300', |
65 | | - )} |
66 | | - > |
67 | | - {label} |
68 | | - </button> |
69 | | - ))} |
70 | | - </div> |
71 | | - <div className="p-5">{children}</div> |
72 | | - </div> |
73 | | - </TabsContext.Provider> |
| 33 | + <RadixTabs.Root |
| 34 | + defaultValue={tabs[0]?.value} |
| 35 | + className="my-5 border border-neutral-300 dark:border-neutral-800 rounded-lg overflow-hidden" |
| 36 | + > |
| 37 | + <RadixTabs.List className="flex gap-1 border-b border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-1100 px-2 pt-2"> |
| 38 | + {tabs.map(({ value, label }) => ( |
| 39 | + <RadixTabs.Trigger |
| 40 | + key={value} |
| 41 | + value={value} |
| 42 | + style={{ outline: 'none', borderTopLeftRadius: '6px', borderTopRightRadius: '6px' }} |
| 43 | + className={cn( |
| 44 | + 'px-4 py-2 ui-text-label3 transition-colors cursor-pointer', |
| 45 | + 'border border-transparent', |
| 46 | + 'text-neutral-700 dark:text-neutral-500 hover:text-neutral-1000 dark:hover:text-neutral-300', |
| 47 | + 'data-[state=active]:bg-white data-[state=active]:dark:bg-neutral-1300 data-[state=active]:text-neutral-1300 data-[state=active]:dark:text-neutral-000', |
| 48 | + 'data-[state=active]:border-neutral-300 data-[state=active]:dark:border-neutral-800', |
| 49 | + 'data-[state=active]:border-b-white data-[state=active]:dark:border-b-neutral-1300 data-[state=active]:-mb-px', |
| 50 | + )} |
| 51 | + > |
| 52 | + {label} |
| 53 | + </RadixTabs.Trigger> |
| 54 | + ))} |
| 55 | + </RadixTabs.List> |
| 56 | + {tabs.map(({ value }) => ( |
| 57 | + <RadixTabs.Content key={value} value={value} className="px-5 pt-5 pb-2.5"> |
| 58 | + {contentByValue[value]} |
| 59 | + </RadixTabs.Content> |
| 60 | + ))} |
| 61 | + </RadixTabs.Root> |
74 | 62 | ); |
75 | 63 | }; |
0 commit comments