packages/pass/components/Form/Field/ExtraFieldGroup/AddExtraFieldDropdown.tsx

   1 import { type FC } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import { Dropdown, DropdownMenu, Icon, usePopperAnchor } from '@proton/components';
   7 import { DropdownMenuButton } from '@proton/pass/components/Layout/Dropdown/DropdownMenuButton';
   8 import type { ExtraFieldType } from '@proton/pass/types';
   9
  10 import { getExtraFieldOptions } from './ExtraField';
  11
  12 type CustomFieldsDropdownProps = { onAdd: (type: ExtraFieldType) => void };
  13
  14 export const AddExtraFieldDropdown: FC<CustomFieldsDropdownProps> = ({ onAdd }) => {
  15     const { anchorRef, isOpen, close, toggle } = usePopperAnchor<HTMLButtonElement>();
  16
  17     const handleAddClick = (type: ExtraFieldType) => {
  18         onAdd(type);
  19         setTimeout(() => anchorRef?.current?.scrollIntoView({ behavior: 'smooth' }), 50);
  20     };
  21
  22     return (
  23         <>
  24             <Button pill className="flex items-center mb-2" color="norm" onClick={toggle} ref={anchorRef} shape="ghost">
  25                 <Icon className="mr-2" name="plus" />
  26                 <span className="line-height-1">{c('Action').t`Add more`}</span>
  27             </Button>
  28             <Dropdown anchorRef={anchorRef} isOpen={isOpen} onClose={close} originalPlacement="top-start">
  29                 <DropdownMenu>
  30                     {Object.entries(getExtraFieldOptions()).map(([type, { icon, label }]) => (
  31                         <DropdownMenuButton
  32                             key={type}
  33                             onClick={() => handleAddClick(type as ExtraFieldType)}
  34                             size="small"
  35                             icon={icon}
  36                             label={label}
  37                         />
  38                     ))}
  39                 </DropdownMenu>
  40             </Dropdown>
  41         </>
  42     );
  43 };