maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Removing headlessui used in menus (#2127)

This commit is contained in:
Leo Giovanetti 2022-03-13 19:09:39 -03:00 committed by GitHub
parent f0b1767b3c
commit 424482646f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 95 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/components/team/TeamListItem.tsx
View File

@ -99,7 +99,7 @@ export default function TeamListItem(props: Props) {
</> </>
)} )}
{!isInvitee && ( {!isInvitee && (
<div className="flex space-x-2 rtl:space-x-reverse"> <div className="flex rtl:space-x-reverse">
<TeamRole role={team.role} /> <TeamRole role={team.role} />
<Tooltip content={t("copy_link_team")}> <Tooltip content={t("copy_link_team")}>

5
apps/web/components/ui/Dropdown.tsx
View File

@ -25,8 +25,11 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
({ children, ...props }, forwardedRef) => { ({ children, ...props }, forwardedRef) => {
return ( return (
<DropdownMenuPrimitive.Content <DropdownMenuPrimitive.Content
portalled={false}
{...props} {...props}
className="z-10 mt-1 w-48 origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" className={`${
props.portalled ? `` : `md:-ml-[55px]`
} z-10 mt-1 -ml-0 w-48 origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none lg:-ml-56`}
ref={forwardedRef}> ref={forwardedRef}>
{children} {children}
</DropdownMenuPrimitive.Content> </DropdownMenuPrimitive.Content>

83
apps/web/components/ui/TableActions.tsx
View File

@ -1,11 +1,15 @@
import { Menu, Transition } from "@headlessui/react";
import { DotsHorizontalIcon } from "@heroicons/react/solid"; import { DotsHorizontalIcon } from "@heroicons/react/solid";
import React, { FC, Fragment } from "react"; import React, { FC } from "react";
import classNames from "@lib/classNames";
import { useLocale } from "@lib/hooks/useLocale"; import { useLocale } from "@lib/hooks/useLocale";
import { SVGComponent } from "@lib/types/SVGComponent"; import { SVGComponent } from "@lib/types/SVGComponent";
import Dropdown, {
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
} from "@components/ui/Dropdown";
import Button from "./Button"; import Button from "./Button";
export type ActionType = { export type ActionType = {
@ -38,57 +42,28 @@ const TableActions: FC<Props> = ({ actions }) => {
</Button> </Button>
))} ))}
</div> </div>
<Menu as="div" className="inline-block text-left lg:hidden "> <div className="inline-block text-left lg:hidden">
{({ open }) => ( <Dropdown>
<> <DropdownMenuTrigger className="h-[38px] w-[38px] cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
<div> <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
<Menu.Button className="mt-1 border border-transparent p-2 text-neutral-400 hover:border-gray-200"> </DropdownMenuTrigger>
<span className="sr-only">{t("open_options")}</span> <DropdownMenuContent portalled>
<DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" /> {actions.map((action) => (
</Menu.Button> <DropdownMenuItem key={action.id}>
</div> <Button
type="button"
<Transition color="minimal"
show={open} className="w-full font-normal"
as={Fragment} href={action.href}
enter="transition ease-out duration-100" StartIcon={action.icon}
enterFrom="transform opacity-0 scale-95" onClick={action.onClick}>
enterTo="transform opacity-100 scale-100" {action.label}
leave="transition ease-in duration-75" </Button>
leaveFrom="transform opacity-100 scale-100" </DropdownMenuItem>
leaveTo="transform opacity-0 scale-95"> ))}
<Menu.Items </DropdownMenuContent>
static </Dropdown>
className="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-neutral-100 rounded-sm bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"> </div>
<div className="py-1">
{actions.map((action) => {
const Element = typeof action.onClick === "function" ? "span" : "a";
return (
<Menu.Item key={action.id} disabled={action.disabled}>
{({ active }) => (
<Element
href={action.href}
onClick={action.onClick}
className={classNames(
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
"group flex items-center px-4 py-2 text-sm font-medium"
)}>
<action.icon
className="h-5 w-5 text-neutral-400 group-hover:text-neutral-500 ltr:mr-3"
aria-hidden="true"
/>
{action.label}
</Element>
)}
</Menu.Item>
);
})}
</div>
</Menu.Items>
</Transition>
</>
)}
</Menu>
</> </>
); );
}; };

1
apps/web/package.json
View File

@ -34,7 +34,6 @@
"@calcom/tsconfig": "*", "@calcom/tsconfig": "*",
"@calcom/ui": "*", "@calcom/ui": "*",
"@daily-co/daily-js": "^0.21.0", "@daily-co/daily-js": "^0.21.0",
"@headlessui/react": "^1.4.2",
"@heroicons/react": "^1.0.5", "@heroicons/react": "^1.0.5",
"@hookform/error-message": "^2.0.0", "@hookform/error-message": "^2.0.0",
"@hookform/resolvers": "^2.8.5", "@hookform/resolvers": "^2.8.5",

158
apps/web/pages/event-types/index.tsx
View File

@ -1,5 +1,3 @@
// TODO: replace headlessui with radix-ui
import { Menu, Transition } from "@headlessui/react";
import { import {
ArrowDownIcon, ArrowDownIcon,
ArrowUpIcon, ArrowUpIcon,
@ -15,6 +13,8 @@ import Head from "next/head";
import Link from "next/link"; import Link from "next/link";
import React, { Fragment, useEffect, useState } from "react"; import React, { Fragment, useEffect, useState } from "react";
import { Button } from "@calcom/ui";
import { QueryCell } from "@lib/QueryCell"; import { QueryCell } from "@lib/QueryCell";
import classNames from "@lib/classNames"; import classNames from "@lib/classNames";
import { useLocale } from "@lib/hooks/useLocale"; import { useLocale } from "@lib/hooks/useLocale";
@ -29,6 +29,11 @@ import { Alert } from "@components/ui/Alert";
import Avatar from "@components/ui/Avatar"; import Avatar from "@components/ui/Avatar";
import AvatarGroup from "@components/ui/AvatarGroup"; import AvatarGroup from "@components/ui/AvatarGroup";
import Badge from "@components/ui/Badge"; import Badge from "@components/ui/Badge";
import Dropdown, {
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
} from "@components/ui/Dropdown";
import UserCalendarIllustration from "@components/ui/svg/UserCalendarIllustration"; import UserCalendarIllustration from "@components/ui/svg/UserCalendarIllustration";
type Profiles = inferQueryOutput<"viewer.eventTypes">["profiles"]; type Profiles = inferQueryOutput<"viewer.eventTypes">["profiles"];
@ -194,101 +199,60 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
</div> </div>
</div> </div>
<div className="mr-5 flex flex-shrink-0 sm:hidden"> <div className="mr-5 flex flex-shrink-0 sm:hidden">
<Menu as="div" className="inline-block text-left"> <Dropdown>
{({ open }) => ( <DropdownMenuTrigger className="h-[38px] w-[38px] cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
<> <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
<div> </DropdownMenuTrigger>
<Menu.Button className="mt-1 border border-transparent p-2 text-neutral-400 hover:border-gray-200"> <DropdownMenuContent portalled>
<span className="sr-only">{t("open_options")}</span> <DropdownMenuItem>
<DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" /> <Link href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}>
</Menu.Button> <a target="_blank">
</div> <Button color="minimal" StartIcon={ExternalLinkIcon} className="w-full font-normal">
{t("preview")}
<Transition </Button>
show={open} </a>
as={Fragment} </Link>
enter="transition ease-out duration-100" </DropdownMenuItem>
enterFrom="transform opacity-0 scale-95" <DropdownMenuItem>
enterTo="transform opacity-100 scale-100" <Button
leave="transition ease-in duration-75" type="button"
leaveFrom="transform opacity-100 scale-100" color="minimal"
leaveTo="transform opacity-0 scale-95"> className="w-full font-normal"
<Menu.Items data-testid={"event-type-duplicate-" + type.id}
static StartIcon={ClipboardCopyIcon}
className="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-neutral-100 rounded-sm bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"> onClick={() => {
<div className="py-1"> navigator.clipboard.writeText(
<Menu.Item> `${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
{({ active }) => ( );
<a showToast(t("link_copied"), "success");
href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`} }}>
target="_blank" {t("copy_link")}
rel="noreferrer" </Button>
className={classNames( </DropdownMenuItem>
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700", {isNativeShare ? (
"group flex items-center px-4 py-2 text-sm font-medium" <DropdownMenuItem>
)}> <Button
<ExternalLinkIcon type="button"
className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500" color="minimal"
aria-hidden="true" className="w-full font-normal"
/> data-testid={"event-type-duplicate-" + type.id}
{t("preview")} StartIcon={UploadIcon}
</a> onClick={() => {
)} navigator
</Menu.Item> .share({
<Menu.Item> title: t("share"),
{({ active }) => ( text: t("share_event"),
<button url: `${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`,
onClick={() => { })
navigator.clipboard.writeText( .then(() => showToast(t("link_shared"), "success"))
`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}` .catch(() => showToast(t("failed"), "error"));
); }}>
showToast(t("link_copied"), "success"); {t("share")}
}} </Button>
className={classNames( </DropdownMenuItem>
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700", ) : null}
"group flex w-full items-center px-4 py-2 text-sm font-medium" </DropdownMenuContent>
)}> </Dropdown>
<ClipboardCopyIcon
className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
{t("copy_link")}
</button>
)}
</Menu.Item>
{isNativeShare ? (
<Menu.Item>
{({ active }) => (
<button
onClick={() => {
navigator
.share({
title: t("share"),
text: t("share_event"),
url: `${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`,
})
.then(() => showToast(t("link_shared"), "success"))
.catch(() => showToast(t("failed"), "error"));
}}
className={classNames(
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
"group flex w-full items-center px-4 py-2 text-sm font-medium"
)}>
<UploadIcon
className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
{t("share")}
</button>
)}
</Menu.Item>
) : null}
</div>
</Menu.Items>
</Transition>
</>
)}
</Menu>
</div> </div>
</div> </div>
</li> </li>

5
yarn.lock
View File

@ -969,11 +969,6 @@
intl-messageformat "9.11.4" intl-messageformat "9.11.4"
tslib "^2.1.0" tslib "^2.1.0"
"@headlessui/react@^1.4.2":
version "1.4.3"
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.4.3.tgz#f77c6bb5cb4a614a5d730fb880cab502d48abf37"
integrity sha512-n2IQkaaw0aAAlQS5MEXsM4uRK+w18CrM72EqnGRl/UBOQeQajad8oiKXR9Nk15jOzTFQjpxzrZMf1NxHidFBiw==
"@heroicons/react@^1.0.5": "@heroicons/react@^1.0.5":
version "1.0.5" version "1.0.5"
resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.5.tgz#2fe4df9d33eb6ce6d5178a0f862e97b61c01e27d" resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.5.tgz#2fe4df9d33eb6ce6d5178a0f862e97b61c01e27d"