packages/pass/components/Layout/Dropdown/DropdownMenuBase.tsx

   1 import type { FC, PropsWithChildren } from 'react';
   2
   3 import { Dropdown, DropdownButton, DropdownMenu, DropdownMenuButton, usePopperAnchor } from '@proton/components';
   4 import clsx from '@proton/utils/clsx';
   5
   6 type DropdownMenuBaseProps = PropsWithChildren & {
   7     className?: string;
   8     dropdownMenuButtonClassname?: string;
   9     dropdownOptions: {
  10         label: string;
  11         value: string;
  12         onClick: () => void;
  13     }[];
  14     hasCaret?: boolean;
  15 };
  16
  17 export const DropdownMenuBase: FC<DropdownMenuBaseProps> = ({
  18     children,
  19     dropdownOptions,
  20     className,
  21     dropdownMenuButtonClassname,
  22     hasCaret,
  23 }) => {
  24     const { anchorRef, isOpen, toggle, close } = usePopperAnchor<HTMLButtonElement>();
  25
  26     return (
  27         <>
  28             <DropdownButton
  29                 className={clsx('rounded-full', className)}
  30                 ref={anchorRef}
  31                 isOpen={isOpen}
  32                 onClick={toggle}
  33                 hasCaret={hasCaret}
  34                 color="weak"
  35                 shape="solid"
  36                 pill
  37             >
  38                 {children}
  39             </DropdownButton>
  40             <Dropdown isOpen={isOpen} anchorRef={anchorRef} onClose={close} originalPlacement="top">
  41                 <DropdownMenu>
  42                     {dropdownOptions.map((option, index) => (
  43                         <DropdownMenuButton
  44                             key={`${option.value}${index}`}
  45                             className={clsx('text-left', dropdownMenuButtonClassname)}
  46                             onClick={option.onClick}
  47                         >
  48                             {option.label}
  49                         </DropdownMenuButton>
  50                     ))}
  51                 </DropdownMenu>
  52             </Dropdown>
  53         </>
  54     );
  55 };