feat: added remove button for selected files (#234)

* feat: added remove button for seleted files * feat: added remove button for selected files
HemmeligOrg · Nov 6, 2023 · be4cc93 · be4cc93
1 parent fb9bffd
commit be4cc93
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/src/client/routes/home/index.jsx b/src/client/routes/home/index.jsx
@@ -43,6 +43,8 @@ import { createSecret, burnSecret } from '../../api/secret';
 import { generateKey, encrypt } from '../../../shared/helpers/crypto';
 import { useTranslation } from 'react-i18next';
 
+import style from './style.module.css';
+
 const DEFAULT_TTL = 259200; // 3 days - 72 hours
 
 const Home = () => {
@@ -215,6 +217,12 @@ const Home = () => {
         }
     };
 
+    const removeFile = (index) => {
+        const updatedFiles = [...form.values.files];
+        updatedFiles.splice(index, 1);
+        form.setFieldValue('files', updatedFiles);
+    };
+
     const handleFocus = (event) => event.target.select();
 
     const getSecretURL = (withEncryptionKey = true) => {
@@ -399,8 +407,18 @@ const Home = () => {
 
                     {form.values.files?.length > 0 && (
                         <Group>
-                            {form.values.files.map((file) => (
-                                <Badge color="orange" key={file.name}>
+                            {form.values.files.map((file, index) => (
+                                <Badge
+                                    className={style['file-badge']}
+                                    color="orange"
+                                    key={file.name}
+                                >
+                                    <Badge
+                                        className={style['file-remove']}
+                                        onClick={() => removeFile(index)}
+                                    >
+                                        &times;
+                                    </Badge>
                                     {file.name}
                                 </Badge>
                             ))}

diff --git a/src/client/routes/home/style.module.css b/src/client/routes/home/style.module.css
@@ -0,0 +1,17 @@
+.file-badge {
+    padding-left: 0;
+}
+
+.file-remove {
+    background: none;
+    color: red;
+    cursor: pointer;
+    padding: 0 5px;
+    margin-right: 5px;
+}
+
+.file-remove:hover {
+    /* background: #602e12; */
+    background: red;
+    color: white;
+}