From 39ac734edd705d8fc28be584606c8dc6431ba8a4 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 27 Mar 2024 10:21:26 +0100
Subject: [PATCH] Clean components

---
 .../grid/cells/AttachmentCell.svelte          | 24 ++++---------------
 .../grid/cells/AttachmentSingleCell.svelte    | 20 ++++++++++++++++
 .../src/components/grid/lib/renderers.js      |  3 ++-
 3 files changed, 27 insertions(+), 20 deletions(-)
 create mode 100644 packages/frontend-core/src/components/grid/cells/AttachmentSingleCell.svelte

diff --git a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
index 6ed6aa0b82..3a1f165b6e 100644
--- a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
@@ -1,7 +1,6 @@
 <script>
   import { onMount, getContext } from "svelte"
   import { Dropzone } from "@budibase/bbui"
-  import { FieldType } from "@budibase/types"
 
   export let value
   export let focused = false
@@ -11,17 +10,13 @@
   export let invertX = false
   export let invertY = false
   export let schema
+  export let maximum
 
   const { API, notifications } = getContext("grid")
   const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
 
   let isOpen = false
 
-  $: isSingle = schema?.type === FieldType.ATTACHMENT_SINGLE
-  $: arrayValue = (value && !Array.isArray(value) ? [value] : value) || []
-
-  $: maximum = isSingle ? 1 : schema.constraints?.length?.maximum
-
   $: editable = focused && !readonly
   $: {
     if (!focused) {
@@ -74,15 +69,6 @@
     }
   }
 
-  const onFileChange = e => {
-    let value = e.detail
-    if (isSingle) {
-      value = value[0] || null
-    }
-
-    onChange(value)
-  }
-
   onMount(() => {
     api = {
       focus: () => open(),
@@ -96,7 +82,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="attachment-cell" class:editable on:click={editable ? open : null}>
-  {#each arrayValue as attachment}
+  {#each value || [] as attachment}
     {#if isImage(attachment.extension)}
       <img src={attachment.url} alt={attachment.extension} />
     {:else}
@@ -110,10 +96,10 @@
 {#if isOpen}
   <div class="dropzone" class:invertX class:invertY>
     <Dropzone
-      value={arrayValue}
+      {value}
       compact
-      on:change={onFileChange}
-      {maximum}
+      on:change={e => onChange(e.detail)}
+      maximum={maximum || schema.constraints?.length?.maximum}
       {processFiles}
       {deleteAttachments}
       {handleFileTooLarge}
diff --git a/packages/frontend-core/src/components/grid/cells/AttachmentSingleCell.svelte b/packages/frontend-core/src/components/grid/cells/AttachmentSingleCell.svelte
new file mode 100644
index 0000000000..c2e29b6ede
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/AttachmentSingleCell.svelte
@@ -0,0 +1,20 @@
+<script>
+  import AttachmentCell from "./AttachmentCell.svelte"
+
+  export let value
+  export let onChange
+
+  $: arrayValue = (!Array.isArray(value) && value ? [value] : value) || []
+
+  $: onFileChange = value => {
+    value = value[0] || null
+    onChange(value)
+  }
+</script>
+
+<AttachmentCell
+  {...$$restProps}
+  maximum={1}
+  value={arrayValue}
+  onChange={onFileChange}
+/>
diff --git a/packages/frontend-core/src/components/grid/lib/renderers.js b/packages/frontend-core/src/components/grid/lib/renderers.js
index d4ac8b86ec..6d94d16c2d 100644
--- a/packages/frontend-core/src/components/grid/lib/renderers.js
+++ b/packages/frontend-core/src/components/grid/lib/renderers.js
@@ -11,6 +11,7 @@ import BooleanCell from "../cells/BooleanCell.svelte"
 import FormulaCell from "../cells/FormulaCell.svelte"
 import JSONCell from "../cells/JSONCell.svelte"
 import AttachmentCell from "../cells/AttachmentCell.svelte"
+import AttachmentSingleCell from "../cells/AttachmentSingleCell.svelte"
 import BBReferenceCell from "../cells/BBReferenceCell.svelte"
 
 const TypeComponentMap = {
@@ -23,7 +24,7 @@ const TypeComponentMap = {
   [FieldType.NUMBER]: NumberCell,
   [FieldType.BOOLEAN]: BooleanCell,
   [FieldType.ATTACHMENT]: AttachmentCell,
-  [FieldType.ATTACHMENT_SINGLE]: AttachmentCell,
+  [FieldType.ATTACHMENT_SINGLE]: AttachmentSingleCell,
   [FieldType.LINK]: RelationshipCell,
   [FieldType.FORMULA]: FormulaCell,
   [FieldType.JSON]: JSONCell,