packages/pass/components/Layout/Panel/ItemCreatePanel.tsx

   1 import type { ReactNode } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button, Kbd } from '@proton/atoms';
   6 import { Icon, Tooltip } from '@proton/components';
   7 import { itemTypeToSubThemeClassName } from '@proton/pass/components/Layout/Theme/types';
   8 import { useSaveShortcut } from '@proton/pass/hooks/useSaveShortcut';
   9 import type { ItemType, MaybeNull } from '@proton/pass/types';
  10 import { metaKey } from '@proton/shared/lib/helpers/browser';
  11
  12 import { DiscardableModalPanel, type DiscardableModalProps } from './DiscardableModalPanel';
  13 import { Panel } from './Panel';
  14 import { PanelHeader } from './PanelHeader';
  15
  16 type Props = {
  17     type: ItemType;
  18     formId: string;
  19     valid: boolean;
  20     handleCancelClick: () => void;
  21     submitButton?: ReactNode;
  22     actions?: ReactNode;
  23 } & Omit<DiscardableModalProps, 'onDiscard'>;
  24
  25 function getItemTypeSubmitButtonLabel(type: ItemType) {
  26     switch (type) {
  27         case 'login':
  28             return c('Action').t`Create login`;
  29         case 'alias':
  30             return c('Action').t`Create alias`;
  31         case 'note':
  32             return c('Action').t`Create note`;
  33         case 'creditCard':
  34             return c('Action').t`Create card`;
  35         case 'identity':
  36             return c('Action').t`Create identity`;
  37         default:
  38             return c('Action').t`Create`;
  39     }
  40 }
  41
  42 export const ItemCreatePanel = ({
  43     discardable,
  44     formId,
  45     submitButton,
  46     type,
  47     valid,
  48     children,
  49     handleCancelClick,
  50     actions,
  51 }: Props) => {
  52     useSaveShortcut(() => {
  53         if (valid && !discardable) {
  54             const form = document.getElementById(formId) as MaybeNull<HTMLFormElement>;
  55             form?.requestSubmit();
  56         }
  57     });
  58
  59     return (
  60         <DiscardableModalPanel onDiscard={handleCancelClick} discardable={discardable}>
  61             {(props) => (
  62                 <Panel
  63                     className={itemTypeToSubThemeClassName[type]}
  64                     header={
  65                         <PanelHeader
  66                             actions={[
  67                                 <Button
  68                                     key="cancel-button"
  69                                     className="shrink-0"
  70                                     icon
  71                                     pill
  72                                     shape="solid"
  73                                     color="weak"
  74                                     onClick={() => (discardable ? handleCancelClick() : props.confirm())}
  75                                     title={c('Action').t`Cancel`}
  76                                 >
  77                                     <Icon name="cross" alt={c('Action').t`Cancel`} />
  78                                 </Button>,
  79                                 <div key="actions" className="flex flex-nowrap gap-2">
  80                                     {actions}
  81                                     {submitButton || (
  82                                         <Tooltip
  83                                             key="submit-button"
  84                                             openDelay={500}
  85                                             originalPlacement={'bottom'}
  86                                             title={
  87                                                 <>
  88                                                     <Kbd shortcut={metaKey} /> + <Kbd shortcut="S" />
  89                                                 </>
  90                                             }
  91                                         >
  92                                             <Button
  93                                                 className="text-sm shrink-0"
  94                                                 pill
  95                                                 shape="solid"
  96                                                 color="norm"
  97                                                 type="submit"
  98                                                 form={formId}
  99                                                 disabled={!valid}
 100                                             >
 101                                                 {getItemTypeSubmitButtonLabel(type)}
 102                                             </Button>
 103                                         </Tooltip>
 104                                     )}
 105                                 </div>,
 106                             ]}
 107                         />
 108                     }
 109                 >
 110                     {children(props)}
 111                 </Panel>
 112             )}
 113         </DiscardableModalPanel>
 114     );
 115 };