split dialog, dropdown and tooltip into separate components
Ryukemeister
parent
c517d4dacd
commit
1bdb75a363
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
|
export function EventTypeDialog({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
content,
|
||||||
|
}: {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: () => void;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
content?: ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>{title}</DialogTitle>
|
||||||
|
<DialogDescription>{description}</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
{!!content && content}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import { MoreHorizontal, Copy, Code, Trash } from "lucide-react";
|
||||||
|
|
||||||
|
import { EventTypeEmbedButton } from "@calcom/features/embed/EventTypeEmbed";
|
||||||
|
|
||||||
|
export function EventTypeDropdown({
|
||||||
|
group,
|
||||||
|
isReadOnly,
|
||||||
|
id,
|
||||||
|
isManagedEventType,
|
||||||
|
isChildrenManagedEventType,
|
||||||
|
embedLink,
|
||||||
|
onEdit,
|
||||||
|
onDuplicate,
|
||||||
|
}: {
|
||||||
|
group: any;
|
||||||
|
isReadOnly: boolean;
|
||||||
|
isManagedEventType: boolean;
|
||||||
|
isChildrenManagedEventType: boolean;
|
||||||
|
id: any;
|
||||||
|
embedLink: string;
|
||||||
|
onEdit: (id: string) => void;
|
||||||
|
onDuplicate: (id: string) => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
className="bg-secondary text-secondary ltr:radix-state-open:rounded-r-md rtl:radix-state-open:rounded-l-md">
|
||||||
|
<MoreHorizontal />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent>
|
||||||
|
{!isReadOnly && (
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
data-testid={`event-type-edit-${id}`}
|
||||||
|
onClick={() => {
|
||||||
|
onEdit(id);
|
||||||
|
}}>
|
||||||
|
Edit
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
{!isManagedEventType && !isChildrenManagedEventType && (
|
||||||
|
<DropdownMenuItem className="outline-none">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
data-testid={`event-type-duplicate-${id}`}
|
||||||
|
onClick={() => {
|
||||||
|
onDuplicate(id);
|
||||||
|
}}>
|
||||||
|
<Copy />
|
||||||
|
Duplicate
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
{!isManagedEventType && (
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<EventTypeEmbedButton
|
||||||
|
className="w-full rounded-none"
|
||||||
|
eventId={id}
|
||||||
|
type="button"
|
||||||
|
StartIcon={Code}
|
||||||
|
embedUrl={encodeURIComponent(embedLink)}>
|
||||||
|
Embed
|
||||||
|
</EventTypeEmbedButton>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
{(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
|
||||||
|
!isChildrenManagedEventType && (
|
||||||
|
<>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
onClick={() => {
|
||||||
|
// Add appropriate handler for destruction
|
||||||
|
}}
|
||||||
|
className="w-full rounded-none">
|
||||||
|
<Trash /> Delete
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
|
export function EventTypeTooltip({
|
||||||
|
trigger,
|
||||||
|
content,
|
||||||
|
}: {
|
||||||
|
trigger: ReactNode | string;
|
||||||
|
content: ReactNode | string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>{trigger}</TooltipTrigger>
|
||||||
|
<TooltipContent>{content}</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { EmptyScreen } from "EventTypeList/components/empty-screen";
|
||||||
|
import { LinkIcon } from "lucide-react";
|
||||||
|
|
||||||
|
export function CreateFirstEventTypeView({ slug }: { slug: string }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<EmptyScreen
|
||||||
|
Icon={LinkIcon}
|
||||||
|
className="mb-16"
|
||||||
|
headline="Create your first event type"
|
||||||
|
description="Event types enable you to share links that show available times on your calendar and allow people to make bookings with you."
|
||||||
|
buttonRaw={
|
||||||
|
<Button>
|
||||||
|
<a href={`?dialog=new&eventPage=${slug}`}>Create</a>
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { EmptyScreen } from "EventTypeList/components/empty-screen";
|
||||||
|
|
||||||
|
export function EmptyEventTypeList({ group }: { group: any }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<EmptyScreen
|
||||||
|
headline="This team has no event types"
|
||||||
|
buttonRaw={
|
||||||
|
<Button type="button" className="mt-5">
|
||||||
|
<a href={`?dialog=new&eventPage=${group.profile.slug}&teamId=${group.teamId}`}>Create</a>
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import type { LucideIcon as IconType } from "lucide-react";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import type { SVGComponent } from "@calcom/types/SVGComponent";
|
||||||
|
|
||||||
|
type EmptyScreenProps = {
|
||||||
|
Icon?: SVGComponent | IconType;
|
||||||
|
avatar?: React.ReactElement;
|
||||||
|
headline: string | React.ReactElement;
|
||||||
|
description?: string | React.ReactElement;
|
||||||
|
buttonText?: string;
|
||||||
|
buttonOnClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
||||||
|
buttonRaw?: ReactNode; // Used incase you want to provide your own button.
|
||||||
|
border?: boolean;
|
||||||
|
dashedBorder?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function EmptyScreen({
|
||||||
|
Icon,
|
||||||
|
avatar,
|
||||||
|
headline,
|
||||||
|
description,
|
||||||
|
buttonText,
|
||||||
|
buttonOnClick,
|
||||||
|
buttonRaw,
|
||||||
|
border = true,
|
||||||
|
dashedBorder = true,
|
||||||
|
className,
|
||||||
|
}: EmptyScreenProps & React.HTMLAttributes<HTMLDivElement>) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
data-testid="empty-screen"
|
||||||
|
className={cn(
|
||||||
|
"flex w-full select-none flex-col items-center justify-center rounded-lg p-7 lg:p-20",
|
||||||
|
border && "border-subtle border",
|
||||||
|
dashedBorder && "border-dashed",
|
||||||
|
className
|
||||||
|
)}>
|
||||||
|
{!avatar ? null : (
|
||||||
|
<div className="flex h-[72px] w-[72px] items-center justify-center rounded-full">{avatar}</div>
|
||||||
|
)}
|
||||||
|
{!Icon ? null : (
|
||||||
|
<div className="bg-emphasis flex h-[72px] w-[72px] items-center justify-center rounded-full ">
|
||||||
|
<Icon className="text-default inline-block h-10 w-10 stroke-[1.3px]" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex max-w-[420px] flex-col items-center">
|
||||||
|
<h2 className={cn("text-semibold font-cal text-emphasis text-center text-xl", !!Icon && "mt-6")}>
|
||||||
|
{headline}
|
||||||
|
</h2>
|
||||||
|
{!!description && (
|
||||||
|
<div className="text-default mb-8 mt-3 text-center text-sm font-normal leading-6">
|
||||||
|
{description}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!!buttonOnClick && !!buttonText && <Button onClick={(e) => buttonOnClick(e)}>{buttonText}</Button>}
|
||||||
|
{buttonRaw}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue