💄 354 removed watcher from filedropzone and reformated (#355)

* removed watcher and clearing property, changed function name and defined function as exposed

* temporary addition

* removed story

* removed unused import

* formated comments and if statements

* renamed function - we are not using lowdash here

* formated template

* used typescript way of defining emits

* oops - missed the type delcaration

* added description to exposed function

---------

Co-authored-by: langehm <langehm@users.noreply.github.com>
Co-authored-by: jannik.lange <jannik.lange@muenchen.de>
Co-authored-by: Fabian Wilms <10800158+FabianWilms@users.noreply.github.com>

Author: 3 people

src/components/FileDropzone/MucFileDropzone.stories.ts

@@ -13,6 +13,8 @@ export default {
   },
 };
 
+export const Default = {};
+
 export const Example = {
   args: {
     buttonText: "Dokument hochladen",
@@ -26,4 +28,3 @@ export const Example = {
       "Die Dateien haben zusammen mehr als 10 MB und können nicht angefügt werden.",
   },
 };
-export const Default = {};

src/components/FileDropzone/MucFileDropzone.vue

@@ -18,9 +18,9 @@
     >
       {{ buttonText }}
     </MucButton>
-    <span class="drop-zone-additional-information">{{
-      additionalInformation
-    }}</span>
+    <span class="drop-zone-additional-information">
+      {{ additionalInformation }}
+    </span>
   </div>
 
   <form-error-message v-if="!validFileSizes && maxFileSizeWarning">
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUpdated, ref, watch } from "vue";
+import { onMounted, onUpdated, ref } from "vue";
 
 import { MucButton } from "../Button";
 import FormErrorMessage from "../Form/FormErrorMessage.vue";
@@ -53,7 +53,6 @@ const {
   maxFileSizeWarning,
   maxTotalFileSize = 0,
   maxTotalFileSizeWarning,
-  showWarning = false,
 } = defineProps<{
   /**
    * Text on the upload button
@@ -91,22 +90,19 @@ const {
    * Warning for invalid file size sum
    */
   maxTotalFileSizeWarning?: string;
-  /**
-   * Clears warnings when changes from 'true' to 'false'.
-   */
-  showWarning?: boolean;
 }>();
 
-const emit = defineEmits([
+const emit = defineEmits<{
   /**
    * Dropped files as {@link File[]} array
    */
-  "files",
+  files: [files: File[]];
+
   /**
    * Event that signals when warnings are displayed.
    */
-  "warning",
-]);
+  warning: [];
+}>();
 
 /** Flag signals if file size is valid */
 const validFileSizes = ref(true);
@@ -133,7 +129,7 @@ onMounted(() => {
     const target = event.target as HTMLInputElement;
     if (target?.files && target.files.length > 0) {
       const filesArray = Array.from(target.files);
-      _emitFiles(filesArray);
+      emitFiles(filesArray);
     }
   };
 });
@@ -153,9 +149,13 @@ const selectFiles = () => {
   fileInput.click();
 };
 
-/** Sets flag {@link isDragOver} true. */
+/**
+ * Sets flag {@link isDragOver} true.
+ */
 const onDragOver = (event: DragEvent) => {
-  if (disabled) return;
+  if (disabled) {
+    return;
+  }
   if (!fileInput?.multiple) {
     const dataTransfer: DataTransfer = event.dataTransfer as DataTransfer;
     if (dataTransfer?.items?.length > 1) {
@@ -166,7 +166,9 @@ const onDragOver = (event: DragEvent) => {
   isDragOver.value = true;
 };
 
-/** Sets flag {@link isDragOver} false. */
+/**
+ * Sets flag {@link isDragOver} false.
+ */
 const onDragLeave = () => {
   isDragOver.value = false;
   validFilesAmount.value = true;
@@ -177,54 +179,55 @@ const onDragLeave = () => {
  * @param {DragEvent} event dropped files
  */
 const onDrop = (event: DragEvent) => {
-  if (disabled) return;
+  if (disabled) {
+    return;
+  }
   if (!validFilesAmount.value) {
     /*
     user drops files with invalid amount
     -> warning disappears
      */
     validFilesAmount.value = true;
-    return;
-  }
-  isDragOver.value = false;
-  const dataTransfer: DataTransfer = event.dataTransfer as DataTransfer;
-  if (dataTransfer?.files?.length > 0) {
-    const filesArray = Array.from(dataTransfer.files);
-    _emitFiles(filesArray);
+  } else {
+    isDragOver.value = false;
+    const dataTransfer: DataTransfer = event.dataTransfer as DataTransfer;
+    if (dataTransfer?.files?.length > 0) {
+      const filesArray = Array.from(dataTransfer.files);
+      emitFiles(filesArray);
+    }
   }
 };
 
 /**
  * Emits the files to upload to the surrounding element.
  * @param {File[]} files array of dropped or chosen files to upload
  */
-const _emitFiles = (files: File[]) => {
-  validFileSizes.value = _areFilesValid(files);
-  validTotalFileSizes.value = _isTotalFilesSumValid(files);
+const emitFiles = (files: File[]) => {
+  validFileSizes.value = areFilesValid(files);
+  validTotalFileSizes.value = isTotalFilesSumValid(files);
 
   if (!validFileSizes.value || !validTotalFileSizes.value) {
     emit("warning");
-    return;
+  } else {
+    emit("files", files);
   }
-
-  emit("files", files);
 };
 
 /**
  * Checks if all files are inside the allowed file size range that is given by {@link Props#maxFileSize}.
  * @param {File[]} files array files
  */
-const _areFilesValid = (files: File[]) => {
-  if (maxFileSize)
-    return !files.some((file) => file.size > maxFileSize * 1024 * 1024);
-  return true;
+const areFilesValid = (files: File[]) => {
+  return maxFileSize
+    ? !files.some((file) => file.size > maxFileSize * 1024 * 1024)
+    : true;
 };
 
 /**
  * Checks if the sum of all files is inside the allowed range that is given by {@link Props#maxTotalFileSize}.
  * @param {File[]} files array files
  */
-const _isTotalFilesSumValid = (files: File[]) => {
+const isTotalFilesSumValid = (files: File[]) => {
   if (maxTotalFileSize)
     return (
       files.reduce((acc, file) => acc + (file.size || 0), 0) <=
@@ -233,26 +236,24 @@ const _isTotalFilesSumValid = (files: File[]) => {
   return true;
 };
 
-/**
- * Watches for changes in {@link Props#showWarning} and clears all warnings if it switches to 'false'.
- */
-watch(
-  () => showWarning,
-  (isShowWarning: boolean) => {
-    if (!isShowWarning) {
-      _clearWarnings();
-    }
-  }
-);
-
 /**
  * Clears all warnings.
  */
-const _clearWarnings = () => {
+const clearWarnings = () => {
   validFileSizes.value = true;
   validTotalFileSizes.value = true;
   validFilesAmount.value = true;
 };
+
+/**
+ * Expose function to be called via ref
+ */
+defineExpose({
+  /**
+   * Exposed function to clear all warnings
+   */
+  clearWarnings,
+});
 </script>
 
 <style scoped>