One Calendar is a privacy-first calendar web app built with Next.js. It has modern security features, including e2ee, password-protected sharing, and self-destructing share links 📅
calendar.xyehr.cn
ui: restore sheet component
authored by
Evan Huang
and committed by
GitHub
188db30f
c699d4f1
+117
-118
+117
-118
components/ui/sheet.tsx
+117
-118
components/ui/sheet.tsx
···
1
-
"use client"
1
+
"use client";
2
2
3
-
import * as React from "react"
4
-
import { XIcon } from "lucide-react"
5
-
import { Dialog as SheetPrimitive } from "radix-ui"
3
+
import { cva, type VariantProps } from "class-variance-authority";
4
+
import * as SheetPrimitive from "@radix-ui/react-dialog";
5
+
import { X } from "lucide-react";
6
+
import * as React from "react";
6
7
7
-
import { cn } from "@/lib/utils"
8
-
import { Button } from "@/components/ui/button"
8
+
import { cn } from "@/lib/utils";
9
9
10
-
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
11
-
return <SheetPrimitive.Root data-slot="sheet" {...props} />
12
-
}
10
+
const Sheet = SheetPrimitive.Root;
13
11
14
-
function SheetTrigger({
15
-
...props
16
-
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
17
-
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
18
-
}
12
+
const SheetTrigger = SheetPrimitive.Trigger;
19
13
20
-
function SheetClose({
21
-
...props
22
-
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
23
-
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
24
-
}
14
+
const SheetClose = SheetPrimitive.Close;
25
15
26
-
function SheetPortal({
27
-
...props
28
-
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
29
-
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
30
-
}
31
-
32
-
function SheetOverlay({
16
+
const SheetPortal = ({
33
17
className,
34
18
...props
35
-
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
36
-
return (
37
-
<SheetPrimitive.Overlay
38
-
data-slot="sheet-overlay"
39
-
className={cn(
40
-
"fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
41
-
className
42
-
)}
43
-
{...props}
44
-
/>
45
-
)
46
-
}
19
+
}: SheetPrimitive.DialogPortalProps) => (
20
+
<SheetPrimitive.Portal className={cn(className)} {...props} />
21
+
);
22
+
SheetPortal.displayName = SheetPrimitive.Portal.displayName;
47
23
48
-
function SheetContent({
49
-
className,
50
-
children,
51
-
side = "right",
52
-
showCloseButton = true,
53
-
...props
54
-
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
55
-
side?: "top" | "right" | "bottom" | "left"
56
-
showCloseButton?: boolean
57
-
}) {
58
-
return (
59
-
<SheetPortal>
60
-
<SheetOverlay />
61
-
<SheetPrimitive.Content
62
-
data-slot="sheet-content"
63
-
data-side={side}
64
-
className={cn(
65
-
"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
66
-
className
67
-
)}
68
-
{...props}
69
-
>
70
-
{children}
71
-
{showCloseButton && (
72
-
<SheetPrimitive.Close data-slot="sheet-close" asChild>
73
-
<Button
74
-
variant="ghost"
75
-
className="absolute top-3 right-3"
76
-
size="icon-sm"
77
-
>
78
-
<XIcon />
79
-
<span className="sr-only">Close</span>
80
-
</Button>
81
-
</SheetPrimitive.Close>
82
-
)}
83
-
</SheetPrimitive.Content>
84
-
</SheetPortal>
85
-
)
86
-
}
24
+
const SheetOverlay = React.forwardRef<
25
+
React.ElementRef<typeof SheetPrimitive.Overlay>,
26
+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
27
+
>(({ className, ...props }, ref) => (
28
+
<SheetPrimitive.Overlay
29
+
className={cn(
30
+
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
31
+
className,
32
+
)}
33
+
{...props}
34
+
ref={ref}
35
+
/>
36
+
));
37
+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
38
+
39
+
const sheetVariants = cva(
40
+
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
41
+
{
42
+
variants: {
43
+
side: {
44
+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
45
+
bottom:
46
+
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
47
+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
48
+
right:
49
+
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
50
+
},
51
+
},
52
+
defaultVariants: {
53
+
side: "right",
54
+
},
55
+
},
56
+
);
87
57
88
-
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
89
-
return (
90
-
<div
91
-
data-slot="sheet-header"
92
-
className={cn("flex flex-col gap-0.5 p-4", className)}
93
-
{...props}
94
-
/>
95
-
)
96
-
}
58
+
interface SheetContentProps
59
+
extends
60
+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
61
+
VariantProps<typeof sheetVariants> {}
97
62
98
-
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
99
-
return (
100
-
<div
101
-
data-slot="sheet-footer"
102
-
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
63
+
const SheetContent = React.forwardRef<
64
+
React.ElementRef<typeof SheetPrimitive.Content>,
65
+
SheetContentProps
66
+
>(({ side = "right", className, children, ...props }, ref) => (
67
+
<SheetPortal>
68
+
<SheetOverlay />
69
+
<SheetPrimitive.Content
70
+
ref={ref}
71
+
className={cn(sheetVariants({ side }), className)}
103
72
{...props}
104
-
/>
105
-
)
106
-
}
73
+
>
74
+
{children}
75
+
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
76
+
<X className="h-4 w-4" />
77
+
<span className="sr-only">Close</span>
78
+
</SheetPrimitive.Close>
79
+
</SheetPrimitive.Content>
80
+
</SheetPortal>
81
+
));
82
+
SheetContent.displayName = SheetPrimitive.Content.displayName;
107
83
108
-
function SheetTitle({
84
+
const SheetHeader = ({
109
85
className,
110
86
...props
111
-
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
112
-
return (
113
-
<SheetPrimitive.Title
114
-
data-slot="sheet-title"
115
-
className={cn(
116
-
"cn-font-heading text-base font-medium text-foreground",
117
-
className
118
-
)}
119
-
{...props}
120
-
/>
121
-
)
122
-
}
87
+
}: React.HTMLAttributes<HTMLDivElement>) => (
88
+
<div
89
+
className={cn(
90
+
"flex flex-col space-y-2 text-center sm:text-left",
91
+
className,
92
+
)}
93
+
{...props}
94
+
/>
95
+
);
96
+
SheetHeader.displayName = "SheetHeader";
123
97
124
-
function SheetDescription({
98
+
const SheetFooter = ({
125
99
className,
126
100
...props
127
-
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
128
-
return (
129
-
<SheetPrimitive.Description
130
-
data-slot="sheet-description"
131
-
className={cn("text-sm text-muted-foreground", className)}
132
-
{...props}
133
-
/>
134
-
)
135
-
}
101
+
}: React.HTMLAttributes<HTMLDivElement>) => (
102
+
<div
103
+
className={cn(
104
+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
105
+
className,
106
+
)}
107
+
{...props}
108
+
/>
109
+
);
110
+
SheetFooter.displayName = "SheetFooter";
111
+
112
+
const SheetTitle = React.forwardRef<
113
+
React.ElementRef<typeof SheetPrimitive.Title>,
114
+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
115
+
>(({ className, ...props }, ref) => (
116
+
<SheetPrimitive.Title
117
+
ref={ref}
118
+
className={cn("text-lg font-semibold text-foreground", className)}
119
+
{...props}
120
+
/>
121
+
));
122
+
SheetTitle.displayName = SheetPrimitive.Title.displayName;
123
+
124
+
const SheetDescription = React.forwardRef<
125
+
React.ElementRef<typeof SheetPrimitive.Description>,
126
+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
127
+
>(({ className, ...props }, ref) => (
128
+
<SheetPrimitive.Description
129
+
ref={ref}
130
+
className={cn("text-sm text-muted-foreground", className)}
131
+
{...props}
132
+
/>
133
+
));
134
+
SheetDescription.displayName = SheetPrimitive.Description.displayName;
136
135
137
136
export {
138
137
Sheet,
···
143
142
SheetFooter,
144
143
SheetTitle,
145
144
SheetDescription,
146
-
}
145
+
};