@reykjavik/hanna-react 0.10.61 → 0.10.62

package/CHANGELOG.md

@@ -4,6 +4,12 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.62
+
+_2022-08-23_
+
+- feat: Add `diff` object to `FileInput`'s `onFilesUpdated` callback signature
+
 ## 0.10.61
 
 _2022-08-11_

package/FileInput.d.ts

@@ -9,7 +9,22 @@ export declare type FileInputProps = {
     showFileSize?: boolean;
     showImagePreviews?: boolean;
     removeFileText: string;
-    onFilesUpdated?: (files: Array<File>) => void;
+    onFilesUpdated?: (
+    /** Updated, full list of Files. */
+    files: Array<File>, 
+    /** Information about which Files were added or removed during with this update.
+     *
+     * NOTE: When a diff contains both added and deleted files, this indicates a
+     * name-conflict occurred — i.e. one of the added files has a name that
+     * existed in the old file list.
+     * In such cases the deletion is more implicit than explicit, and depending
+     * on the circumstances, you MIGHT wish to either warn the user, rename
+     * one of the files, instead of overwriting/deleting the older file, etc.
+     */
+    diff: {
+        deleted?: Array<File>;
+        added?: Array<File>;
+    }) => void;
     name?: string;
     value?: ReadonlyArray<File>;
 } & FormFieldWrappingProps;

package/FileInput.js

@@ -32,20 +32,6 @@ const arrayToFileList = (arr) => {
     });
     return fileList.files;
 };
-const dedupeFilesArray = (files) => {
-    const newArray = [];
-    const found = {};
-    files.forEach((file) => {
-        if (!(file.name in found)) {
-            newArray.push(file);
-            found[file.name] = true;
-        }
-        else {
-            releasePreview(file);
-        }
-    });
-    return newArray;
-};
 const formatBytes = (bytes, decimals = 2) => {
     if (bytes === 0) {
         return '0 Bytes';
@@ -97,23 +83,36 @@ const FileInput = (props) => {
     }, [files]);
     const removeFile = (name) => {
         if (fileInput.current) {
+            const deleted = [];
             const newFileList = files.filter((file) => {
                 if (file.name !== name) {
                     return true;
                 }
+                deleted.push(file);
                 releasePreview(file);
+                return false;
             });
             fileInput.current.files = arrayToFileList(newFileList);
-            onFilesUpdated(newFileList);
+            onFilesUpdated(newFileList, { deleted });
         }
     };
-    const addFiles = (filelist) => {
+    const addFiles = (added) => {
         if (fileInput.current) {
-            const newFileList = dropzoneProps.multiple
-                ? dedupeFilesArray(files.concat(filelist))
-                : filelist;
+            const deleted = [];
+            const retained = [];
+            const oldFiles = dropzoneProps.multiple ? files : [];
+            oldFiles.forEach((oldFile) => {
+                if (added.find(({ name }) => name === oldFile.name)) {
+                    deleted.push(oldFile);
+                }
+                else {
+                    retained.push(oldFile);
+                }
+            });
+            const newFileList = retained.concat(added);
             fileInput.current.files = arrayToFileList(newFileList);
-            onFilesUpdated(newFileList);
+            const diff = deleted.length ? { added, deleted } : { added };
+            onFilesUpdated(newFileList, diff);
         }
         if (inputRef.current) {
             // Empty on every add

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.61",
+	"version": "0.10.62",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",