Skip to content

Commit 45be2c8

Browse files
Its-SatyajitIts-Satyajit
committed
Removes usages of forwardRef.
1 parent a2500c0 commit 45be2c8

File tree

8 files changed

+457
-351
lines changed

8 files changed

+457
-351
lines changed

‎src/components/ui/avatar.tsx‎

Lines changed: 45 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,46 +5,55 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
55

66
import { cn } from "@/lib/utils";
77

8-
const Avatar = React.forwardRef<
9-
React.ElementRef<typeof AvatarPrimitive.Root>,
10-
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11-
>(({ className, ...props }, ref) => (
12-
<AvatarPrimitive.Root
13-
ref={ref}
14-
className={cn(
15-
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16-
className,
17-
)}
18-
{...props}
19-
/>
20-
));
8+
const Avatar = (
9+
{
10+
ref,
11+
className,
12+
...props
13+
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
14+
ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Root>>;
15+
}
16+
) => (<AvatarPrimitive.Root
17+
ref={ref}
18+
className={cn(
19+
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
20+
className,
21+
)}
22+
{...props}
23+
/>);
2124
Avatar.displayName = AvatarPrimitive.Root.displayName;
2225

23-
const AvatarImage = React.forwardRef<
24-
React.ElementRef<typeof AvatarPrimitive.Image>,
25-
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26-
>(({ className, ...props }, ref) => (
27-
<AvatarPrimitive.Image
28-
ref={ref}
29-
className={cn("aspect-square h-full w-full", className)}
30-
{...props}
31-
/>
32-
));
26+
const AvatarImage = (
27+
{
28+
ref,
29+
className,
30+
...props
31+
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
32+
ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Image>>;
33+
}
34+
) => (<AvatarPrimitive.Image
35+
ref={ref}
36+
className={cn("aspect-square h-full w-full", className)}
37+
{...props}
38+
/>);
3339
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
3440

35-
const AvatarFallback = React.forwardRef<
36-
React.ElementRef<typeof AvatarPrimitive.Fallback>,
37-
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38-
>(({ className, ...props }, ref) => (
39-
<AvatarPrimitive.Fallback
40-
ref={ref}
41-
className={cn(
42-
"flex h-full w-full items-center justify-center rounded-full bg-muted",
43-
className,
44-
)}
45-
{...props}
46-
/>
47-
));
41+
const AvatarFallback = (
42+
{
43+
ref,
44+
className,
45+
...props
46+
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
47+
ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
48+
}
49+
) => (<AvatarPrimitive.Fallback
50+
ref={ref}
51+
className={cn(
52+
"flex h-full w-full items-center justify-center rounded-full bg-muted",
53+
className,
54+
)}
55+
{...props}
56+
/>);
4857
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
4958

5059
export { Avatar, AvatarImage, AvatarFallback };

‎src/components/ui/button.tsx‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,27 @@ export interface ButtonProps
4040
asChild?: boolean;
4141
}
4242

43-
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44-
({ className, variant, size, asChild = false, ...props }, ref) => {
45-
const Comp = asChild ? Slot : "button";
46-
return (
47-
<Comp
48-
className={cn(buttonVariants({ variant, size, className }))}
49-
ref={ref}
50-
{...props}
51-
/>
52-
);
53-
},
54-
);
43+
const Button = (
44+
{
45+
ref,
46+
className,
47+
variant,
48+
size,
49+
asChild = false,
50+
...props
51+
}: ButtonProps & {
52+
ref: React.RefObject<HTMLButtonElement>;
53+
}
54+
) => {
55+
const Comp = asChild ? Slot : "button";
56+
return (
57+
<Comp
58+
className={cn(buttonVariants({ variant, size, className }))}
59+
ref={ref}
60+
{...props}
61+
/>
62+
);
63+
};
5564
Button.displayName = "Button";
5665

5766
export { Button, buttonVariants };

‎src/components/ui/card.tsx‎

Lines changed: 77 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,75 +2,93 @@ import * as React from "react";
22

33
import { cn } from "@/lib/utils";
44

5-
const Card = React.forwardRef<
6-
HTMLDivElement,
7-
React.HTMLAttributes<HTMLDivElement>
8-
>(({ className, ...props }, ref) => (
9-
<div
10-
ref={ref}
11-
className={cn(
12-
"rounded-xl border bg-card text-card-foreground shadow",
13-
className,
14-
)}
15-
{...props}
16-
/>
17-
));
5+
const Card = (
6+
{
7+
ref,
8+
className,
9+
...props
10+
}: React.HTMLAttributes<HTMLDivElement> & {
11+
ref: React.RefObject<HTMLDivElement>;
12+
}
13+
) => (<div
14+
ref={ref}
15+
className={cn(
16+
"rounded-xl border bg-card text-card-foreground shadow",
17+
className,
18+
)}
19+
{...props}
20+
/>);
1821
Card.displayName = "Card";
1922

20-
const CardHeader = React.forwardRef<
21-
HTMLDivElement,
22-
React.HTMLAttributes<HTMLDivElement>
23-
>(({ className, ...props }, ref) => (
24-
<div
25-
ref={ref}
26-
className={cn("flex flex-col space-y-1.5 p-6", className)}
27-
{...props}
28-
/>
29-
));
23+
const CardHeader = (
24+
{
25+
ref,
26+
className,
27+
...props
28+
}: React.HTMLAttributes<HTMLDivElement> & {
29+
ref: React.RefObject<HTMLDivElement>;
30+
}
31+
) => (<div
32+
ref={ref}
33+
className={cn("flex flex-col space-y-1.5 p-6", className)}
34+
{...props}
35+
/>);
3036
CardHeader.displayName = "CardHeader";
3137

32-
const CardTitle = React.forwardRef<
33-
HTMLDivElement,
34-
React.HTMLAttributes<HTMLDivElement>
35-
>(({ className, ...props }, ref) => (
36-
<div
37-
ref={ref}
38-
className={cn("font-semibold leading-none tracking-tight", className)}
39-
{...props}
40-
/>
41-
));
38+
const CardTitle = (
39+
{
40+
ref,
41+
className,
42+
...props
43+
}: React.HTMLAttributes<HTMLDivElement> & {
44+
ref: React.RefObject<HTMLDivElement>;
45+
}
46+
) => (<div
47+
ref={ref}
48+
className={cn("font-semibold leading-none tracking-tight", className)}
49+
{...props}
50+
/>);
4251
CardTitle.displayName = "CardTitle";
4352

44-
const CardDescription = React.forwardRef<
45-
HTMLDivElement,
46-
React.HTMLAttributes<HTMLDivElement>
47-
>(({ className, ...props }, ref) => (
48-
<div
49-
ref={ref}
50-
className={cn("text-sm text-muted-foreground", className)}
51-
{...props}
52-
/>
53-
));
53+
const CardDescription = (
54+
{
55+
ref,
56+
className,
57+
...props
58+
}: React.HTMLAttributes<HTMLDivElement> & {
59+
ref: React.RefObject<HTMLDivElement>;
60+
}
61+
) => (<div
62+
ref={ref}
63+
className={cn("text-sm text-muted-foreground", className)}
64+
{...props}
65+
/>);
5466
CardDescription.displayName = "CardDescription";
5567

56-
const CardContent = React.forwardRef<
57-
HTMLDivElement,
58-
React.HTMLAttributes<HTMLDivElement>
59-
>(({ className, ...props }, ref) => (
60-
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61-
));
68+
const CardContent = (
69+
{
70+
ref,
71+
className,
72+
...props
73+
}: React.HTMLAttributes<HTMLDivElement> & {
74+
ref: React.RefObject<HTMLDivElement>;
75+
}
76+
) => (<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />);
6277
CardContent.displayName = "CardContent";
6378

64-
const CardFooter = React.forwardRef<
65-
HTMLDivElement,
66-
React.HTMLAttributes<HTMLDivElement>
67-
>(({ className, ...props }, ref) => (
68-
<div
69-
ref={ref}
70-
className={cn("flex items-center p-6 pt-0", className)}
71-
{...props}
72-
/>
73-
));
79+
const CardFooter = (
80+
{
81+
ref,
82+
className,
83+
...props
84+
}: React.HTMLAttributes<HTMLDivElement> & {
85+
ref: React.RefObject<HTMLDivElement>;
86+
}
87+
) => (<div
88+
ref={ref}
89+
className={cn("flex items-center p-6 pt-0", className)}
90+
{...props}
91+
/>);
7492
CardFooter.displayName = "CardFooter";
7593

7694
export {

0 commit comments

Comments
 (0)