cal.pub0.org/packages/ui/components/createButton/CreateButton.tsx

141 lines
3.8 KiB
TypeScript
Raw Normal View History

import { useRouter } from "next/router";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import {
Avatar,
Button,
Dropdown,
DropdownItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@calcom/ui";
import { Plus } from "@calcom/ui/components/icon";
export interface Option {
teamId: number | null | undefined; // if undefined, then it's a profile
label: string | null;
image?: string | null;
slug: string | null;
}
export type CreateBtnProps = {
options: Option[];
createDialog?: () => JSX.Element;
createFunction?: (teamId?: number) => void;
subtitle?: string;
buttonText?: string;
isLoading?: boolean;
disableMobileButton?: boolean;
"data-testid"?: string;
};
/**
* @deprecated use CreateButtonWithTeamsList instead
*/
export function CreateButton(props: CreateBtnProps) {
const { t } = useLocale();
const router = useRouter();
const {
createDialog,
options,
isLoading,
createFunction,
buttonText,
disableMobileButton,
subtitle,
...restProps
} = props;
const CreateDialog = createDialog ? createDialog() : null;
const hasTeams = !!options.find((option) => option.teamId);
// inject selection data into url for correct router history
const openModal = (option: Option) => {
const query = {
...router.query,
dialog: "new",
eventPage: option.slug,
teamId: option.teamId,
};
if (!option.teamId) {
delete query.teamId;
}
router.push(
{
pathname: router.pathname,
query,
},
undefined,
{ shallow: true }
);
};
return (
<>
{!hasTeams ? (
<Button
onClick={() =>
!!CreateDialog
? openModal(options[0])
: createFunction
? createFunction(options[0].teamId || undefined)
: null
}
StartIcon={Plus}
loading={isLoading}
variant={disableMobileButton ? "button" : "fab"}
{...restProps}>
{buttonText ? buttonText : t("new")}
</Button>
) : (
<Dropdown>
<DropdownMenuTrigger asChild>
<Button
variant={disableMobileButton ? "button" : "fab"}
StartIcon={Plus}
loading={isLoading}
{...restProps}>
{buttonText ? buttonText : t("new")}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent sideOffset={14} align="end">
<DropdownMenuLabel>
<div className="w-48 text-left text-xs">{subtitle}</div>
</DropdownMenuLabel>
{options.map((option, idx) => (
<DropdownMenuItem key={option.label}>
<DropdownItem
type="button"
Managed event-types (#6876) * WIP * Locked fields manager * Leftovers * Bad merge fix * Type import fix * Moving away from classes * Progress refactoring locked logic * Covering apps, webhooks and workflows * Supporting webhooks and workflows (TBT) * Restoring yarn.lock * Progress * Refactoring code, adding default values * Fixing CRUD for children * Connect app link and case-sensitive lib renaming * Translation missing * Locked indicators, empty screens, locations * Member card and hidden status + missing i18n * Missing existent children shown * Showing preview for already created children * Email notification almost in place * Making progress over notif email * Fixing nodemailer by mixed FE/BE mixup * Delete dialog * Adding tests * New test * Reverting unneeded change * Removed console.log * Tweaking email * Reverting not applicable webhook changes * Reverting dev email api * Fixing last changes due to tests * Changing user-evType relationship * Availability and slug replacement tweaks * Fixing event type delete * Sometimes slug is not there... * Removing old webhooks references Changed slug hint * Fixing types * Fixing hiding event types actions * Changing delete dialog text * Removing unneeded code * Applying feedback * Update yarn.lock * Making sure locked fields values are static * Applying feedback * Feedback + relying on children list, not users * Removing console.log * PR Feedback * Telemetry for slug replacement action * More unit tests * Relying on schedule and editor tweaks * Fixing conteiner classname * PR Feedback * PR Feedback * Updating unit tests * Moving stuff to ee, added feature flag * type fix * Including e2e * Reverting unneeded changes in EmptyScreen * Fixing some UI issues after merging tokens * Fixing missing disabled locked fields * Theme fixes + e2e potential fix * Fixing e2e * Fixing login relying on network * Tweaking e2e * Removing unneeded code --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: zomars <zomars@me.com>
2023-04-13 02:10:23 +00:00
data-testid={`option${option.teamId ? "-team" : ""}-${idx}`}
StartIcon={(props) => (
<Avatar
alt={option.label || ""}
imageSrc={option.image || `${WEBAPP_URL}/${option.label}/avatar.png`} // if no image, use default avatar
size="sm"
{...props}
/>
)}
onClick={() =>
!!CreateDialog
? openModal(option)
: createFunction
? createFunction(option.teamId || undefined)
: null
}>
{" "}
{/*improve this code */}
<span>{option.label}</span>
</DropdownItem>
</DropdownMenuItem>
))}
</DropdownMenuContent>
</Dropdown>
)}
{router.query.dialog === "new" && CreateDialog}
</>
);
}