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

   1 import type { CSSProperties, FC, PropsWithChildren } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import type { ButtonLikeShape, ButtonLikeSize } from '@proton/atoms';
   6 import { Button, NotificationDot } from '@proton/atoms';
   7 import {
   8     Dropdown,
   9     DropdownMenu,
  10     Icon,
  11     type IconName,
  12     type IconSize,
  13     type PopperPlacement,
  14     usePopperAnchor,
  15 } from '@proton/components';
  16 import type { DropdownSize } from '@proton/components/components/dropdown/utils';
  17 import clsx from '@proton/utils/clsx';
  18
  19 export type QuickActionsDropdownProps = {
  20     className?: string;
  21     color?: 'weak' | 'norm';
  22     disabled?: boolean;
  23     dropdownClassname?: string;
  24     dropdownHeader?: string;
  25     dropdownSize?: DropdownSize;
  26     icon?: IconName;
  27     iconSize?: IconSize;
  28     menuClassName?: string;
  29     offset?: number;
  30     originalPlacement?: PopperPlacement;
  31     pill?: boolean;
  32     shape?: ButtonLikeShape;
  33     signaled?: boolean;
  34     size?: ButtonLikeSize;
  35     style?: CSSProperties;
  36 };
  37
  38 export const QuickActionsDropdown: FC<PropsWithChildren<QuickActionsDropdownProps>> = ({
  39     children,
  40     className,
  41     color,
  42     disabled,
  43     dropdownClassname,
  44     dropdownHeader,
  45     dropdownSize,
  46     icon = 'three-dots-vertical',
  47     iconSize = 5,
  48     menuClassName,
  49     offset,
  50     originalPlacement,
  51     pill = true,
  52     shape,
  53     signaled = false,
  54     size = 'medium',
  55     style,
  56 }) => {
  57     const { anchorRef, isOpen, toggle, close } = usePopperAnchor<HTMLButtonElement>();
  58
  59     return (
  60         <>
  61             <Button
  62                 className={clsx(className, signaled && 'relative')}
  63                 color={color}
  64                 disabled={disabled}
  65                 icon
  66                 onClick={(evt) => {
  67                     evt.stopPropagation();
  68                     toggle();
  69                 }}
  70                 pill={pill}
  71                 ref={anchorRef}
  72                 shape={shape}
  73                 size={size}
  74                 style={style}
  75                 title={dropdownHeader ?? c('Action').t`More options`}
  76             >
  77                 <Icon name={icon} size={iconSize} />
  78                 {signaled && <NotificationDot className="absolute top-0 right-0 w-2 h-2" />}
  79             </Button>
  80
  81             <Dropdown
  82                 isOpen={isOpen}
  83                 anchorRef={anchorRef}
  84                 onClose={close}
  85                 originalPlacement={originalPlacement}
  86                 offset={offset}
  87                 contentProps={{ className: dropdownClassname }}
  88                 size={dropdownSize}
  89             >
  90                 {dropdownHeader && <div className="text-bold px-4 my-2">{dropdownHeader}</div>}
  91                 <DropdownMenu className={menuClassName}>{children}</DropdownMenu>
  92             </Dropdown>
  93         </>
  94     );
  95 };