└── AddFiles.jsx


/AddFiles.jsx:
--------------------------------------------------------------------------------
 1 | import { useMemo } from 'react';
 2 | import { getFileTypeLabels, validateFiles } from './AddFiles.service';
 3 | import classes from './AddFiles.module.css';
 4 | import { TooltipBox } from '../TooltipBox/TooltipBox';
 5 | import { TiDeleteOutline } from 'react-icons/ti';
 6 | import { shrinkString } from '../../utils/global.services';
 7 | import { TooltipPlacement } from '../TooltipBox/TooltipBox.service';
 8 | 
 9 | export const AddFiles = ({
10 |   files,
11 |   setAttachments,
12 |   setAlert,
13 |   loading,
14 |   filesLimit = 1,
15 |   fileTypes = ['jpg', 'jpeg', 'gif', 'png', 'pdf', 'csv'],
16 |   id,
17 |   containerClassName = '',
18 |   children
19 | }) => {
20 |   const acceptedTypes = useMemo(() => `.${fileTypes.join(', .')}`, [fileTypes]);
21 | 
22 |   const getFile = (e) => {
23 |     if (!e.target?.files?.length) return;
24 | 
25 |     validateFiles({
26 |       addedFiles: e.target.files,
27 |       files,
28 |       setAlert,
29 |       setAttachments,
30 |       fileTypes,
31 |       filesLimit
32 |     });
33 |     e.target.value = '';
34 |   };
35 | 
36 |   return (
37 |     <div className={containerClassName}>
38 |       <input
39 |         onChange={getFile}
40 |         type="file"
41 |         multiple
42 |         id={id}
43 |         accept={acceptedTypes}
44 |         disabled={loading}
45 |         className={classes.uploadInput}
46 |       />
47 |       <label htmlFor={id} className={classes.uploadLabel}>
48 |         <TooltipBox
49 |           text={`You can attach ${filesLimit} file${
50 |             filesLimit > 1 ? 's' : ''
51 |           }: ${getFileTypeLabels(fileTypes)} up to 5 Mb.`}
52 |           placement={TooltipPlacement.TOP}
53 |         >
54 |           <span>{children}</span>
55 |         </TooltipBox>
56 |       </label>
57 |     </div>
58 |   );
59 | };
60 | 
61 | export const AddFilesList = ({
62 |   files,
63 |   setAttachments,
64 |   containerClassName = ''
65 | }) => {
66 |   const deleteFile = (e) => {
67 |     const fileIndex = +e.currentTarget.getAttribute('data-index');
68 |     setAttachments(files.filter((file, i) => i !== fileIndex));
69 |   };
70 | 
71 |   return (
72 |     <div className={containerClassName}>
73 |       <div className={classes.attachedBox}>
74 |         {files.map((file, i) => (
75 |           <p className={classes.attachedFile} key={`attachment-${i}`}>
76 |             {file.name.length > 20 ? (
77 |               <TooltipBox text={file.name}>
78 |                 <span>{shrinkString(file.name, 16)}</span>
79 |               </TooltipBox>
80 |             ) : (
81 |               shrinkString(file.name, 16)
82 |             )}
83 |             <TiDeleteOutline
84 |               data-index={i}
85 |               onClick={deleteFile}
86 |               className={classes.attachedDeleteIcon}
87 |             />
88 |           </p>
89 |         ))}
90 |       </div>
91 |     </div>
92 |   );
93 | };
94 | 


--------------------------------------------------------------------------------