cal.pub0.org/apps/web/components/ui/TableActions.tsx

92 lines
2.8 KiB
TypeScript
Raw Normal View History

import { ChevronDownIcon, DotsHorizontalIcon } from "@heroicons/react/solid";
import React, { FC } from "react";
import Button from "@calcom/ui/Button";
2022-03-16 19:55:18 +00:00
import Dropdown, { DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@calcom/ui/Dropdown";
import { SVGComponent } from "@lib/types/SVGComponent";
export type ActionType = {
id: string;
icon?: SVGComponent;
label: string;
disabled?: boolean;
2021-09-30 10:46:39 +00:00
color?: "primary" | "secondary";
} & ({ href?: never; onClick: () => any } | { href?: string; onClick?: never }) & {
actions?: ActionType[];
};
interface Props {
actions: ActionType[];
}
const DropdownActions = ({ actions, actionTrigger }: { actions: ActionType[]; actionTrigger?: any }) => {
return (
<Dropdown>
{!actionTrigger ? (
<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" />
</DropdownMenuTrigger>
) : (
<DropdownMenuTrigger asChild>{actionTrigger}</DropdownMenuTrigger>
)}
<DropdownMenuContent portalled>
{actions.map((action) => (
<DropdownMenuItem key={action.id} className="focus-visible:outline-none">
<Button
type="button"
size="sm"
color="minimal"
className="w-full rounded-none font-normal"
href={action.href}
StartIcon={action.icon}
onClick={action.onClick}
data-testid={action.id}>
{action.label}
</Button>
</DropdownMenuItem>
))}
</DropdownMenuContent>
</Dropdown>
);
};
const TableActions: FC<Props> = ({ actions }) => {
2022-04-17 15:37:16 +00:00
const mobileActions = actions.flatMap((action) => {
if (action.actions) {
return action.actions;
}
return action;
});
return (
<>
<div className="hidden space-x-2 rtl:space-x-reverse lg:block">
{actions.map((action) => {
const button = (
<Button
key={action.id}
data-testid={action.id}
href={action.href}
onClick={action.onClick}
StartIcon={action.icon}
{...(action?.actions ? { EndIcon: ChevronDownIcon } : null)}
disabled={action.disabled}
color={action.color || "secondary"}>
{action.label}
</Button>
);
if (!action.actions) {
return button;
}
return <DropdownActions key={action.id} actions={action.actions} actionTrigger={button} />;
})}
</div>
<div className="inline-block text-left lg:hidden">
2022-04-17 15:37:16 +00:00
<DropdownActions actions={mobileActions} />
</div>
</>
);
};
export default TableActions;