packages/drive-store/components/modals/CreateFolderModal.tsx

   1 import type { ChangeEvent, FocusEvent } from 'react';
   2 import React, { useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { Button } from '@proton/atoms';
   7 import type { ModalStateProps } from '@proton/components';
   8 import {
   9     InputFieldTwo,
  10     ModalTwo,
  11     ModalTwoContent,
  12     ModalTwoFooter,
  13     ModalTwoHeader,
  14     PrimaryButton,
  15     useFormErrors,
  16     useModalTwoStatic,
  17 } from '@proton/components';
  18 import { useLoading } from '@proton/hooks';
  19 import noop from '@proton/utils/noop';
  20
  21 import useActiveShare from '../../hooks/drive/useActiveShare';
  22 import { formatLinkName, useActions, validateLinkNameField } from '../../store';
  23
  24 interface Props {
  25     onClose?: () => void;
  26     onCreateDone?: (folderId: string) => void;
  27     folder?: { shareId: string; linkId: string };
  28 }
  29
  30 const CreateFolderModal = ({ onClose, folder, onCreateDone, ...modalProps }: Props & ModalStateProps) => {
  31     const { activeFolder } = useActiveShare();
  32     const { createFolder } = useActions();
  33     const [folderName, setFolderName] = useState('');
  34     const [loading, withLoading] = useLoading();
  35     const { validator, onFormSubmit } = useFormErrors();
  36
  37     const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => {
  38         setFolderName(formatLinkName(target.value));
  39     };
  40
  41     const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
  42         setFolderName(target.value);
  43     };
  44
  45     const handleSubmit = async (e: React.FormEvent) => {
  46         e.preventDefault();
  47
  48         if (!onFormSubmit()) {
  49             return;
  50         }
  51
  52         const formattedName = formatLinkName(folderName);
  53         setFolderName(formattedName);
  54
  55         const parentFolder = folder || activeFolder;
  56         if (!parentFolder) {
  57             return;
  58         }
  59
  60         const folderId = await createFolder(
  61             new AbortController().signal,
  62             parentFolder.shareId,
  63             parentFolder.linkId,
  64             formattedName
  65         );
  66         onCreateDone?.(folderId);
  67         onClose?.();
  68     };
  69
  70     return (
  71         <ModalTwo
  72             as="form"
  73             disableCloseOnEscape={loading}
  74             onClose={onClose}
  75             onSubmit={(e: React.FormEvent) => withLoading(handleSubmit(e)).catch(noop)}
  76             size="large"
  77             {...modalProps}
  78         >
  79             <ModalTwoHeader closeButtonProps={{ disabled: loading }} title={c('Title').t`Create a new folder`} />
  80             <ModalTwoContent>
  81                 <InputFieldTwo
  82                     id="folder-name"
  83                     autoFocus
  84                     value={folderName}
  85                     label={c('Label').t`Folder name`}
  86                     placeholder={c('Placeholder').t`Enter a new folder name`}
  87                     onChange={handleChange}
  88                     onBlur={handleBlur}
  89                     error={validator([validateLinkNameField(folderName) || ''])}
  90                     data-testid="input-new-folder-name"
  91                     required
  92                 />
  93             </ModalTwoContent>
  94             <ModalTwoFooter>
  95                 <Button type="button" onClick={onClose} disabled={loading}>
  96                     {c('Action').t`Cancel`}
  97                 </Button>
  98                 <PrimaryButton type="submit" loading={loading}>
  99                     {c('Action').t`Create`}
 100                 </PrimaryButton>
 101             </ModalTwoFooter>
 102         </ModalTwo>
 103     );
 104 };
 105
 106 export default CreateFolderModal;
 107 export const useCreateFolderModal = () => {
 108     return useModalTwoStatic(CreateFolderModal);
 109 };