From c049341fcd6a4bb9112e9bfec8eac7a296c4aa26 Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Fri, 14 Feb 2025 22:48:56 +0100 Subject: [PATCH] fix: remove radix tabs --- package.json | 1 - src/components/ui/tabs.tsx | 148 ++++++++++++++++++++++++++++--------- yarn.lock | 125 ------------------------------- 3 files changed, 112 insertions(+), 162 deletions(-) diff --git a/package.json b/package.json index aa1e521..ec5c9b6 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "@radix-ui/react-dialog": "1.0.5", "@radix-ui/react-dropdown-menu": "2.0.6", "@radix-ui/react-slot": "1.0.2", - "@radix-ui/react-tabs": "1.0.3", "@radix-ui/react-toast": "1.1.5", "@types/mongoose": "5.11.97", "class-variance-authority": "0.7.0", diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx index 9651cac..ac60b17 100644 --- a/src/components/ui/tabs.tsx +++ b/src/components/ui/tabs.tsx @@ -1,16 +1,64 @@ "use client"; import * as React from "react"; -import * as TabsPrimitive from "@radix-ui/react-tabs"; import { cn } from "@/lib/utils"; -const Tabs = TabsPrimitive.Root; +interface TabsProps extends React.HTMLAttributes { + defaultValue?: string; + value?: string; + onValueChange?: (value: string) => void; +} -const TabsList = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - {} + +interface TabsTriggerProps extends React.ButtonHTMLAttributes { + value: string; +} + +interface TabsContentProps extends React.HTMLAttributes { + value: string; +} + +const TabsContext = React.createContext<{ + value: string; + onValueChange: (value: string) => void; +} | null>(null); + +const Tabs = React.forwardRef( + ({ className, defaultValue, value, onValueChange, children, ...props }, ref) => { + const [selectedValue, setSelectedValue] = React.useState(value || defaultValue || ""); + + const handleValueChange = React.useCallback( + (newValue: string) => { + if (value === undefined) { + setSelectedValue(newValue); + } + onValueChange?.(newValue); + }, + [value, onValueChange] + ); + + const contextValue = React.useMemo( + () => ({ + value: value ?? selectedValue, + onValueChange: handleValueChange, + }), + [value, selectedValue, handleValueChange] + ); + + return ( + +
+ {children} +
+ + ); + } +); +Tabs.displayName = "Tabs"; + +const TabsList = React.forwardRef(({ className, ...props }, ref) => ( +
)); -TabsList.displayName = TabsPrimitive.List.displayName; +TabsList.displayName = "TabsList"; -const TabsTrigger = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -TabsTrigger.displayName = TabsPrimitive.Trigger.displayName; +const TabsTrigger = React.forwardRef( + ({ className, value, ...props }, ref) => { + const context = React.useContext(TabsContext); + if (!context) { + throw new Error("TabsTrigger must be used within a Tabs component"); + } -const TabsContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -TabsContent.displayName = TabsPrimitive.Content.displayName; + const { value: selectedValue, onValueChange } = context; + const isSelected = selectedValue === value; + + return ( +