packages/drive-store/components/modals/CreateFileModal.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     folder?: { shareId: string; linkId: string };
  27 }
  28
  29 const CreateFileModal = ({ onClose, folder, ...modalProps }: Props & ModalStateProps) => {
  30     const { activeFolder } = useActiveShare();
  31     const { createFile } = useActions();
  32     const [fileName, setFileName] = useState('');
  33     const [loading, withLoading] = useLoading();
  34     const { validator, onFormSubmit } = useFormErrors();
  35
  36     const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => {
  37         setFileName(formatLinkName(target.value));
  38     };
  39
  40     const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
  41         setFileName(target.value);
  42     };
  43
  44     const handleSubmit = async (e: React.FormEvent) => {
  45         e.preventDefault();
  46
  47         if (!onFormSubmit()) {
  48             return;
  49         }
  50
  51         let formattedName = formatLinkName(fileName);
  52         if (!formattedName.includes('.')) {
  53             formattedName = `${formattedName}.txt`;
  54         }
  55
  56         const parentFolder = folder || activeFolder;
  57         if (!parentFolder) {
  58             return;
  59         }
  60
  61         await createFile(parentFolder.shareId, parentFolder.linkId, formattedName);
  62         onClose?.();
  63     };
  64
  65     return (
  66         <ModalTwo
  67             as="form"
  68             disableCloseOnEscape={loading}
  69             onClose={onClose}
  70             onSubmit={(e: React.FormEvent) => withLoading(handleSubmit(e)).catch(noop)}
  71             size="large"
  72             {...modalProps}
  73         >
  74             <ModalTwoHeader closeButtonProps={{ disabled: loading }} title={c('Title').t`Create a new file`} />
  75             <ModalTwoContent>
  76                 <InputFieldTwo
  77                     id="file-name"
  78                     autoFocus
  79                     value={fileName}
  80                     label={c('Label').t`File name`}
  81                     placeholder={c('Placeholder').t`Enter a new file name`}
  82                     onChange={handleChange}
  83                     onBlur={handleBlur}
  84                     error={validator([validateLinkNameField(fileName) || ''])}
  85                     required
  86                 />
  87             </ModalTwoContent>
  88             <ModalTwoFooter>
  89                 <Button type="button" onClick={onClose} disabled={loading}>
  90                     {c('Action').t`Cancel`}
  91                 </Button>
  92                 <PrimaryButton type="submit" loading={loading}>
  93                     {c('Action').t`Create`}
  94                 </PrimaryButton>
  95             </ModalTwoFooter>
  96         </ModalTwo>
  97     );
  98 };
  99
 100 export default CreateFileModal;
 101 export const useCreateFileModal = () => {
 102     return useModalTwoStatic(CreateFileModal);
 103 };