mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Removing headlessui used in menus (#2127)

Browse source
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>

77
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}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95">
<Menu.Items
static
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 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} href={action.href}
onClick={action.onClick} StartIcon={action.icon}
className={classNames( onClick={action.onClick}>
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} {action.label}
</Element> </Button>
)} </DropdownMenuItem>
</Menu.Item> ))}
); </DropdownMenuContent>
})} </Dropdown>
</div> </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",

118
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,72 +199,44 @@ 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">
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95">
<Menu.Items
static
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">
<div className="py-1">
<Menu.Item>
{({ active }) => (
<a
href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}
target="_blank"
rel="noreferrer"
className={classNames(
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
"group flex items-center px-4 py-2 text-sm font-medium"
)}>
<ExternalLinkIcon
className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
{t("preview")} {t("preview")}
</Button>
</a> </a>
)} </Link>
</Menu.Item> </DropdownMenuItem>
<Menu.Item> <DropdownMenuItem>
{({ active }) => ( <Button
<button type="button"
color="minimal"
className="w-full font-normal"
data-testid={"event-type-duplicate-" + type.id}
StartIcon={ClipboardCopyIcon}
onClick={() => { onClick={() => {
navigator.clipboard.writeText( navigator.clipboard.writeText(
`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}` `${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
); );
showToast(t("link_copied"), "success"); showToast(t("link_copied"), "success");
}} }}>
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"
)}>
<ClipboardCopyIcon
className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
{t("copy_link")} {t("copy_link")}
</button> </Button>
)} </DropdownMenuItem>
</Menu.Item>
{isNativeShare ? ( {isNativeShare ? (
<Menu.Item> <DropdownMenuItem>
{({ active }) => ( <Button
<button type="button"
color="minimal"
className="w-full font-normal"
data-testid={"event-type-duplicate-" + type.id}
StartIcon={UploadIcon}
onClick={() => { onClick={() => {
navigator navigator
.share({ .share({
@ -269,26 +246,13 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
}) })
.then(() => showToast(t("link_shared"), "success")) .then(() => showToast(t("link_shared"), "success"))
.catch(() => showToast(t("failed"), "error")); .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")} {t("share")}
</button> </Button>
)} </DropdownMenuItem>
</Menu.Item>
) : null} ) : null}
</div> </DropdownMenuContent>
</Menu.Items> </Dropdown>
</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"