Skip to content

Commit 594b734

Browse files
theoribbitheoribbi
committed
refactor(tabs): reorganize imports and improve component structure
- Adjust import order in Tabs component for better readability. - Update Tabs component's structure to enhance consistency and maintainability. - Ensure proper export order for Tabs components in the module.
1 parent 7302aed commit 594b734

File tree

2 files changed

+96
-96
lines changed

2 files changed

+96
-96
lines changed

‎app/(site)/docs/components/tabs/page.tsx‎

Lines changed: 95 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -13,140 +13,140 @@ export default function TabsPage() {
1313
"language": "tsx"
1414
}
1515
]}
16-
componentCode={`import * as React from "react";
17-
import { View, Text, Pressable, Platform } from "react-native";
18-
import { cn } from "@/lib/utils";
16+
componentCode={`import { cn } from "@/lib/utils";
17+
import * as React from "react";
18+
import { Platform, Pressable, Text, View } from "react-native";
1919
2020
interface TabsProps {
21-
defaultValue?: string;
22-
value?: string;
23-
onValueChange?: (value: string) => void;
24-
children: React.ReactNode;
25-
className?: string;
21+
defaultValue?: string;
22+
value?: string;
23+
onValueChange?: (value: string) => void;
24+
children: React.ReactNode;
25+
className?: string;
2626
}
2727
2828
interface TabsListProps {
29-
children: React.ReactNode;
30-
className?: string;
29+
children: React.ReactNode;
30+
className?: string;
3131
}
3232
3333
interface TabsTriggerProps {
34-
value: string;
35-
children: React.ReactNode;
36-
className?: string;
34+
value: string;
35+
children: React.ReactNode;
36+
className?: string;
3737
}
3838
3939
interface TabsContentProps {
40-
value: string;
41-
children: React.ReactNode;
42-
className?: string;
40+
value: string;
41+
children: React.ReactNode;
42+
className?: string;
4343
}
4444
4545
const TabsContext = React.createContext<{
46-
value: string;
47-
onValueChange: (value: string) => void;
46+
value: string;
47+
onValueChange: (value: string) => void;
4848
}>({
49-
value: "",
50-
onValueChange: () => { },
49+
value: "",
50+
onValueChange: () => {},
5151
});
5252
5353
const Tabs = React.forwardRef<View, TabsProps>(
54-
({ defaultValue, value, onValueChange, children, className }, ref) => {
55-
const [selectedValue, setSelectedValue] = React.useState(
56-
value || defaultValue || ""
57-
);
54+
({ defaultValue, value, onValueChange, children, className }, ref) => {
55+
const [selectedValue, setSelectedValue] = React.useState(
56+
value || defaultValue || "",
57+
);
5858
59-
const handleValueChange = React.useCallback(
60-
(newValue: string) => {
61-
setSelectedValue(newValue);
62-
onValueChange?.(newValue);
63-
},
64-
[onValueChange]
65-
);
59+
const handleValueChange = React.useCallback(
60+
(newValue: string) => {
61+
setSelectedValue(newValue);
62+
onValueChange?.(newValue);
63+
},
64+
[onValueChange],
65+
);
6666
67-
return (
68-
<TabsContext.Provider
69-
value={{
70-
value: selectedValue,
71-
onValueChange: handleValueChange,
72-
}}
73-
>
74-
<View ref={ref} className={cn("w-full", className)}>
75-
{children}
76-
</View>
77-
</TabsContext.Provider>
78-
);
79-
}
67+
return (
68+
<TabsContext.Provider
69+
value={{
70+
value: selectedValue,
71+
onValueChange: handleValueChange,
72+
}}
73+
>
74+
<View ref={ref} className={cn("flex-1 w-full", className)}>
75+
{children}
76+
</View>
77+
</TabsContext.Provider>
78+
);
79+
},
8080
);
8181
8282
const TabsList = React.forwardRef<View, TabsListProps>(
83-
({ children, className }, ref) => {
84-
return (
85-
<View
86-
ref={ref}
87-
className={cn(
88-
"flex-row items-center justify-center rounded-xl bg-muted p-1",
89-
Platform.OS === "ios" ? "h-12" : "h-14",
90-
className
91-
)}
92-
>
93-
{children}
94-
</View>
95-
);
96-
}
83+
({ children, className }, ref) => {
84+
return (
85+
<View
86+
ref={ref}
87+
className={cn(
88+
"flex-row items-center justify-center rounded-xl bg-muted p-1",
89+
Platform.OS === "ios" ? "h-12" : "h-14",
90+
className,
91+
)}
92+
>
93+
{children}
94+
</View>
95+
);
96+
},
9797
);
9898
9999
const TabsTrigger = React.forwardRef<View, TabsTriggerProps>(
100-
({ value, children, className }, ref) => {
101-
const { value: selectedValue, onValueChange } =
102-
React.useContext(TabsContext);
103-
const isSelected = selectedValue === value;
100+
({ value, children, className }, ref) => {
101+
const { value: selectedValue, onValueChange } =
102+
React.useContext(TabsContext);
103+
const isSelected = selectedValue === value;
104104
105-
return (
106-
<Pressable
107-
ref={ref}
108-
onPress={() => onValueChange(value)}
109-
className={cn(
110-
"flex-1 items-center justify-center rounded-lg px-4 py-2",
111-
Platform.OS === "ios" ? "h-10" : "h-12",
112-
isSelected ? "bg-background" : "bg-transparent",
113-
className
114-
)}
115-
>
116-
<Text
117-
className={cn(
118-
"text-base font-medium",
119-
isSelected ? "text-foreground" : "text-muted-foreground"
120-
)}
121-
>
122-
{children}
123-
</Text>
124-
</Pressable>
125-
);
126-
}
105+
return (
106+
<Pressable
107+
ref={ref}
108+
onPress={() => onValueChange(value)}
109+
className={cn(
110+
"flex-1 items-center justify-center rounded-lg px-4 py-2",
111+
Platform.OS === "ios" ? "h-10" : "h-12",
112+
isSelected ? "bg-background" : "bg-transparent",
113+
className,
114+
)}
115+
>
116+
<Text
117+
className={cn(
118+
"text-base font-medium",
119+
isSelected ? "text-foreground" : "text-muted-foreground",
120+
)}
121+
>
122+
{children}
123+
</Text>
124+
</Pressable>
125+
);
126+
},
127127
);
128128
129129
const TabsContent = React.forwardRef<View, TabsContentProps>(
130-
({ value, children, className }, ref) => {
131-
const { value: selectedValue } = React.useContext(TabsContext);
132-
const isSelected = selectedValue === value;
130+
({ value, children, className }, ref) => {
131+
const { value: selectedValue } = React.useContext(TabsContext);
132+
const isSelected = selectedValue === value;
133133
134-
if (!isSelected) return null;
134+
if (!isSelected) return null;
135135
136-
return (
137-
<View ref={ref} className={cn("mt-4", className)}>
138-
{children}
139-
</View>
140-
);
141-
}
136+
return (
137+
<View ref={ref} className={cn("flex-1 mt-4", className)}>
138+
{children}
139+
</View>
140+
);
141+
},
142142
);
143143
144144
Tabs.displayName = "Tabs";
145145
TabsList.displayName = "TabsList";
146146
TabsTrigger.displayName = "TabsTrigger";
147147
TabsContent.displayName = "TabsContent";
148148
149-
export { Tabs, TabsList, TabsTrigger, TabsContent };
149+
export { Tabs, TabsContent, TabsList, TabsTrigger };
150150
`}
151151
previewCode={`import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
152152
import * as React from "react";

‎public/r/tabs.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"files": [
1010
{
1111
"path": "registry/tabs/tabs.tsx",
12-
"content": "import * as React from \"react\";\nimport { View, Text, Pressable, Platform } from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TabsProps {\n defaultValue?: string;\n value?: string;\n onValueChange?: (value: string) => void;\n children: React.ReactNode;\n className?: string;\n}\n\ninterface TabsListProps {\n children: React.ReactNode;\n className?: string;\n}\n\ninterface TabsTriggerProps {\n value: string;\n children: React.ReactNode;\n className?: string;\n}\n\ninterface TabsContentProps {\n value: string;\n children: React.ReactNode;\n className?: string;\n}\n\nconst TabsContext = React.createContext<{\n value: string;\n onValueChange: (value: string) => void;\n}>({\n value: \"\",\n onValueChange: () => { },\n});\n\nconst Tabs = React.forwardRef<View, TabsProps>(\n ({ defaultValue, value, onValueChange, children, className }, ref) => {\n const [selectedValue, setSelectedValue] = React.useState(\n value || defaultValue || \"\"\n );\n\n const handleValueChange = React.useCallback(\n (newValue: string) => {\n setSelectedValue(newValue);\n onValueChange?.(newValue);\n },\n [onValueChange]\n );\n\n return (\n <TabsContext.Provider\n value={{\n value: selectedValue,\n onValueChange: handleValueChange,\n }}\n >\n <View ref={ref} className={cn(\"w-full\", className)}>\n {children}\n </View>\n </TabsContext.Provider>\n );\n }\n);\n\nconst TabsList = React.forwardRef<View, TabsListProps>(\n ({ children, className }, ref) => {\n return (\n <View\n ref={ref}\n className={cn(\n \"flex-row items-center justify-center rounded-xl bg-muted p-1\",\n Platform.OS === \"ios\" ? \"h-12\" : \"h-14\",\n className\n )}\n >\n {children}\n </View>\n );\n }\n);\n\nconst TabsTrigger = React.forwardRef<View, TabsTriggerProps>(\n ({ value, children, className }, ref) => {\n const { value: selectedValue, onValueChange } =\n React.useContext(TabsContext);\n const isSelected = selectedValue === value;\n\n return (\n <Pressable\n ref={ref}\n onPress={() => onValueChange(value)}\n className={cn(\n \"flex-1 items-center justify-center rounded-lg px-4 py-2\",\n Platform.OS === \"ios\" ? \"h-10\" : \"h-12\",\n isSelected ? \"bg-background\" : \"bg-transparent\",\n className\n )}\n >\n <Text\n className={cn(\n \"text-base font-medium\",\n isSelected ? \"text-foreground\" : \"text-muted-foreground\"\n )}\n >\n {children}\n </Text>\n </Pressable>\n );\n }\n);\n\nconst TabsContent = React.forwardRef<View, TabsContentProps>(\n ({ value, children, className }, ref) => {\n const { value: selectedValue } = React.useContext(TabsContext);\n const isSelected = selectedValue === value;\n\n if (!isSelected) return null;\n\n return (\n <View ref={ref} className={cn(\"mt-4\", className)}>\n {children}\n </View>\n );\n }\n);\n\nTabs.displayName = \"Tabs\";\nTabsList.displayName = \"TabsList\";\nTabsTrigger.displayName = \"TabsTrigger\";\nTabsContent.displayName = \"TabsContent\";\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n",
12+
"content": "import { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\nimport { Platform, Pressable, Text, View } from \"react-native\";\n\ninterface TabsProps {\n\tdefaultValue?: string;\n\tvalue?: string;\n\tonValueChange?: (value: string) => void;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\ninterface TabsListProps {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\ninterface TabsTriggerProps {\n\tvalue: string;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\ninterface TabsContentProps {\n\tvalue: string;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\nconst TabsContext = React.createContext<{\n\tvalue: string;\n\tonValueChange: (value: string) => void;\n}>({\n\tvalue: \"\",\n\tonValueChange: () => {},\n});\n\nconst Tabs = React.forwardRef<View, TabsProps>(\n\t({ defaultValue, value, onValueChange, children, className }, ref) => {\n\t\tconst [selectedValue, setSelectedValue] = React.useState(\n\t\t\tvalue || defaultValue || \"\",\n\t\t);\n\n\t\tconst handleValueChange = React.useCallback(\n\t\t\t(newValue: string) => {\n\t\t\t\tsetSelectedValue(newValue);\n\t\t\t\tonValueChange?.(newValue);\n\t\t\t},\n\t\t\t[onValueChange],\n\t\t);\n\n\t\treturn (\n\t\t\t<TabsContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tvalue: selectedValue,\n\t\t\t\t\tonValueChange: handleValueChange,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<View ref={ref} className={cn(\"flex-1 w-full\", className)}>\n\t\t\t\t\t{children}\n\t\t\t\t</View>\n\t\t\t</TabsContext.Provider>\n\t\t);\n\t},\n);\n\nconst TabsList = React.forwardRef<View, TabsListProps>(\n\t({ children, className }, ref) => {\n\t\treturn (\n\t\t\t<View\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex-row items-center justify-center rounded-xl bg-muted p-1\",\n\t\t\t\t\tPlatform.OS === \"ios\" ? \"h-12\" : \"h-14\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</View>\n\t\t);\n\t},\n);\n\nconst TabsTrigger = React.forwardRef<View, TabsTriggerProps>(\n\t({ value, children, className }, ref) => {\n\t\tconst { value: selectedValue, onValueChange } =\n\t\t\tReact.useContext(TabsContext);\n\t\tconst isSelected = selectedValue === value;\n\n\t\treturn (\n\t\t\t<Pressable\n\t\t\t\tref={ref}\n\t\t\t\tonPress={() => onValueChange(value)}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex-1 items-center justify-center rounded-lg px-4 py-2\",\n\t\t\t\t\tPlatform.OS === \"ios\" ? \"h-10\" : \"h-12\",\n\t\t\t\t\tisSelected ? \"bg-background\" : \"bg-transparent\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<Text\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"text-base font-medium\",\n\t\t\t\t\t\tisSelected ? \"text-foreground\" : \"text-muted-foreground\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</Text>\n\t\t\t</Pressable>\n\t\t);\n\t},\n);\n\nconst TabsContent = React.forwardRef<View, TabsContentProps>(\n\t({ value, children, className }, ref) => {\n\t\tconst { value: selectedValue } = React.useContext(TabsContext);\n\t\tconst isSelected = selectedValue === value;\n\n\t\tif (!isSelected) return null;\n\n\t\treturn (\n\t\t\t<View ref={ref} className={cn(\"flex-1 mt-4\", className)}>\n\t\t\t\t{children}\n\t\t\t</View>\n\t\t);\n\t},\n);\n\nTabs.displayName = \"Tabs\";\nTabsList.displayName = \"TabsList\";\nTabsTrigger.displayName = \"TabsTrigger\";\nTabsContent.displayName = \"TabsContent\";\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n",
1313
"type": "registry:ui"
1414
}
1515
],

0 commit comments

Comments
 (0)