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

   1 import type { ForwardRefRenderFunction } from 'react';
   2 import {
   3     Children,
   4     type FC,
   5     type MouseEvent,
   6     type ReactElement,
   7     type ReactNode,
   8     cloneElement,
   9     forwardRef,
  10     isValidElement,
  11 } from 'react';
  12
  13 import { c } from 'ttag';
  14
  15 import { Button } from '@proton/atoms';
  16 import type { IconName, PopperPlacement } from '@proton/components';
  17 import { Dropdown, DropdownMenu, Icon, usePopperAnchor } from '@proton/components';
  18 import type { Props as DropdownMenuButtonCoreProps } from '@proton/components/components/dropdown/DropdownMenuButton';
  19 import { default as DropdownMenuButtonCore } from '@proton/components/components/dropdown/DropdownMenuButton';
  20 import clsx from '@proton/utils/clsx';
  21
  22 type QuickActionChildProp = { onClick: (evt: MouseEvent) => void };
  23 type QuickActionChild = ReactElement<QuickActionChildProp>;
  24 type Props = { children: QuickActionChild[]; originalPlacement?: PopperPlacement };
  25
  26 const QuickActionsDropdown: FC<Props> = ({ children, originalPlacement }) => {
  27     const { anchorRef, isOpen, toggle, close } = usePopperAnchor<HTMLButtonElement>();
  28
  29     const handleClick = (evt: MouseEvent) => {
  30         evt.stopPropagation();
  31         toggle();
  32     };
  33
  34     return (
  35         <>
  36             <Button
  37                 icon
  38                 pill
  39                 size="small"
  40                 color="weak"
  41                 onClick={handleClick}
  42                 ref={anchorRef}
  43                 shape="ghost"
  44                 title={c('Action').t`More options`}
  45             >
  46                 <Icon name="three-dots-vertical" alt={c('Action').t`More options`} color="var(--text-weak)" />
  47             </Button>
  48
  49             <Dropdown isOpen={isOpen} anchorRef={anchorRef} onClose={close} originalPlacement={originalPlacement}>
  50                 <DropdownMenu>
  51                     {Children.toArray(children).map((child) =>
  52                         isValidElement<QuickActionChildProp>(child)
  53                             ? cloneElement<QuickActionChildProp>(child, {
  54                                   onClick: (evt: MouseEvent) => {
  55                                       child.props.onClick?.(evt);
  56                                       close();
  57                                   },
  58                               })
  59                             : null
  60                     )}
  61                 </DropdownMenu>
  62             </Dropdown>
  63         </>
  64     );
  65 };
  66
  67 type DropdownMenuButtonLabelProps = {
  68     label: ReactNode;
  69     labelClassname?: string;
  70     icon?: IconName | ReactElement;
  71     extra?: ReactNode;
  72     ellipsis?: boolean;
  73     danger?: boolean;
  74 };
  75
  76 export const DropdownMenuButtonLabel: FC<DropdownMenuButtonLabelProps> = ({
  77     label,
  78     labelClassname,
  79     icon,
  80     extra,
  81     ellipsis = true,
  82     danger = false,
  83 }) => {
  84     const strLabel = typeof label === 'string';
  85
  86     return (
  87         <div className="flex justify-space-between items-center flex-nowrap gap-2 max-h-custom">
  88             <div className={clsx(labelClassname, 'flex items-center flex-nowrap gap-2')}>
  89                 {typeof icon === 'string' ? (
  90                     <Icon name={icon} className={clsx(danger ? 'color-danger' : 'color-weak', 'shrink-0')} />
  91                 ) : (
  92                     icon
  93                 )}
  94                 <div className={clsx('flex flex-nowrap flex-auto gap-1', danger && 'color-danger')}>
  95                     {strLabel ? <span className={clsx(ellipsis && 'text-ellipsis')}>{label}</span> : label}
  96                 </div>
  97             </div>
  98             {extra}
  99         </div>
 100     );
 101 };
 102
 103 interface DropdownMenuButtonProps extends DropdownMenuButtonCoreProps, DropdownMenuButtonLabelProps {
 104     children?: ReactNode;
 105     className?: string;
 106     isSelected?: boolean;
 107     parentClassName?: string;
 108     quickActions?: QuickActionChild[];
 109     quickActionsClassname?: string;
 110     quickActionsPlacement?: PopperPlacement;
 111     size?: 'small' | 'medium';
 112 }
 113
 114 const DropdownMenuButtonRender: ForwardRefRenderFunction<HTMLDivElement, DropdownMenuButtonProps> = (
 115     {
 116         children,
 117         className,
 118         danger,
 119         ellipsis = true,
 120         extra,
 121         icon,
 122         isSelected,
 123         label,
 124         labelClassname,
 125         parentClassName,
 126         quickActions,
 127         quickActionsClassname,
 128         quickActionsPlacement,
 129         size = 'medium',
 130         style,
 131         ...rest
 132     },
 133     ref
 134 ) => {
 135     const extraPadding = quickActions !== undefined ? 'pr-3' : '';
 136
 137     return (
 138         <div className={clsx('relative shrink-0', parentClassName)} style={style} ref={ref}>
 139             <DropdownMenuButtonCore
 140                 className={clsx(size === 'small' && 'text-sm', className)}
 141                 // translator : "Selected" is singular only
 142                 title={isSelected ? c('Label').t`Selected` : undefined}
 143                 {...rest}
 144             >
 145                 <DropdownMenuButtonLabel
 146                     icon={icon}
 147                     ellipsis={ellipsis}
 148                     danger={danger}
 149                     label={label}
 150                     labelClassname={clsx('text-left', labelClassname)}
 151                     extra={
 152                         <div className={clsx('flex items-center shrink-0 flex-nowrap color-weak', extraPadding)}>
 153                             {isSelected && (
 154                                 <div className={clsx('ml-auto')}>
 155                                     <Icon name="checkmark" color="var(--interaction-norm-major-1)" />
 156                                 </div>
 157                             )}
 158                             {extra}
 159                         </div>
 160                     }
 161                 />
 162             </DropdownMenuButtonCore>
 163
 164             <div className={clsx('absolute flex items-center h-full right-0 top-0', quickActionsClassname)}>
 165                 {quickActions && (
 166                     <QuickActionsDropdown originalPlacement={quickActionsPlacement}>
 167                         {quickActions}
 168                     </QuickActionsDropdown>
 169                 )}
 170             </div>
 171         </div>
 172     );
 173 };
 174
 175 export const DropdownMenuButton = forwardRef(DropdownMenuButtonRender);