From 6e9c238054e0aa82e62c837fff0b2b87a6269671 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 24 Sep 2020 15:50:51 +0100
Subject: [PATCH] use bbui component for dropzone

---
 packages/builder/package.json                 |   2 +-
 .../src/components/common/Dropzone.svelte     | 284 +-----------------
 packages/builder/yarn.lock                    |   8 +-
 packages/standard-components/package.json     |   2 +-
 .../src/attachments/Dropzone.svelte           | 282 +----------------
 5 files changed, 22 insertions(+), 556 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 524025ba5b..33071aff67 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.33.0",
+    "@budibase/bbui": "^1.34.6",
     "@budibase/client": "^0.1.21",
     "@budibase/colorpicker": "^1.0.1",
     "@fortawesome/fontawesome-free": "^5.14.0",
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 0af4aa5ffd..53cd606143 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -1,40 +1,20 @@
 <script>
   import { notifier } from "builderStore/store/notifications"
-  import { Heading, Body, Button } from "@budibase/bbui"
-  import { FILE_TYPES } from "constants/backend"
+  import { Heading, Body, Button, Dropzone } from "@budibase/bbui"
   import api from "builderStore/api"
 
-  const BYTES_IN_KB = 1000
-  const BYTES_IN_MB = 1000000
-
   export let files = []
-  export let fileSizeLimit = BYTES_IN_MB * 20
 
-  let selectedImageIdx = 0
-  let fileDragged = false
-
-  $: selectedImage = files[selectedImageIdx]
-
-  function determineFileIcon(extension) {
-    const ext = extension.toLowerCase()
-
-    if (FILE_TYPES.IMAGE.includes(ext)) return "ri-image-2-line"
-    if (FILE_TYPES.CODE.includes(ext)) return "ri-terminal-box-line"
-
-    return "ri-file-line"
+  function handleFileTooLarge() {
+    notifier.danger(
+      `Files cannot exceed ${fileSizeLimit /
+        BYTES_IN_MB}MB. Please try again with smaller files.`
+    )
   }
 
   async function processFiles(fileList) {
     const fileArray = Array.from(fileList)
 
-    if (fileArray.some(file => file.size >= fileSizeLimit)) {
-      notifier.danger(
-        `Files cannot exceed ${fileSizeLimit /
-          BYTES_IN_MB}MB. Please try again with smaller files.`
-      )
-      return
-    }
-
     const filesToProcess = fileArray.map(({ name, path, size, type }) => ({
       name,
       path,
@@ -45,256 +25,8 @@
     const response = await api.post(`/api/attachments/process`, {
       files: filesToProcess,
     })
-    const processedFiles = await response.json()
-    files = [...processedFiles, ...files]
-    selectedImageIdx = 0
-  }
-
-  async function removeFile() {
-    files.splice(selectedImageIdx, 1)
-    files = files
-    selectedImageIdx = 0
-  }
-
-  function navigateLeft() {
-    selectedImageIdx -= 1
-  }
-
-  function navigateRight() {
-    selectedImageIdx += 1
-  }
-
-  function handleFile(evt) {
-    processFiles(evt.target.files)
-  }
-
-  function handleDragOver(evt) {
-    evt.preventDefault()
-    fileDragged = true
-  }
-
-  function handleDragLeave(evt) {
-    evt.preventDefault()
-    fileDragged = false
-  }
-
-  function handleDrop(evt) {
-    evt.preventDefault()
-    processFiles(evt.dataTransfer.files)
-    fileDragged = false
+    return await response.json()
   }
 </script>
 
-<div
-  class="dropzone"
-  on:dragover={handleDragOver}
-  on:dragleave={handleDragLeave}
-  on:dragenter={handleDragOver}
-  on:drop={handleDrop}
-  class:fileDragged>
-  <ul>
-    {#if selectedImage}
-      <li>
-        <header>
-          <div>
-            <i
-              class={`file-icon ${determineFileIcon(selectedImage.extension)}`} />
-            <span class="filename">{selectedImage.name}</span>
-          </div>
-          <p>
-            {#if selectedImage.size <= BYTES_IN_MB}
-              {selectedImage.size / BYTES_IN_KB}KB
-            {:else}{selectedImage.size / BYTES_IN_MB}MB{/if}
-          </p>
-        </header>
-        <div class="delete-button" on:click={removeFile}>
-          <i class="ri-close-line" />
-        </div>
-        {#if selectedImageIdx !== 0}
-          <div class="nav left" on:click={navigateLeft}>
-            <i class="ri-arrow-left-line" />
-          </div>
-        {/if}
-        <img src={selectedImage.url} />
-        {#if selectedImageIdx !== files.length - 1}
-          <div class="nav right" on:click={navigateRight}>
-            <i class="ri-arrow-right-line" />
-          </div>
-        {/if}
-      </li>
-    {/if}
-  </ul>
-  <i class="ri-folder-upload-line" />
-  <input id="file-upload" type="file" multiple on:change={handleFile} />
-  <label for="file-upload">Upload</label>
-</div>
-
-<style>
-  .dropzone {
-    padding: var(--spacing-l);
-    border: 2px dashed var(--grey-7);
-    text-align: center;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    border-radius: 10px;
-    transition: all 0.3s;
-  }
-
-  .fileDragged {
-    border: 2px dashed var(--grey-7);
-    transform: scale(1.03);
-    background: var(--blue-light);
-  }
-
-  input[type="file"] {
-    display: none;
-  }
-
-  label {
-    font-family: var(--font-sans);
-    cursor: pointer;
-    font-weight: 600;
-    box-sizing: border-box;
-    overflow: hidden;
-    border-radius: var(--border-radius-s);
-    color: var(--white);
-    padding: var(--spacing-s) var(--spacing-l);
-    transition: all 0.2s ease 0s;
-    display: inline-flex;
-    text-rendering: optimizeLegibility;
-    min-width: auto;
-    outline: none;
-    font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
-    -webkit-box-align: center;
-    user-select: none;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    margin-top: 10px;
-    width: 100%;
-    border: solid 1.5px var(--ink);
-    background-color: var(--ink);
-  }
-
-  div.nav {
-    position: absolute;
-    background: black;
-    color: var(--white);
-    display: flex;
-    align-items: center;
-    bottom: var(--spacing-s);
-    border-radius: 10px;
-    transition: 0.2s transform;
-  }
-
-  .nav:hover {
-    cursor: pointer;
-    transform: scale(1.1);
-  }
-
-  .left {
-    left: var(--spacing-s);
-  }
-
-  .right {
-    right: var(--spacing-s);
-  }
-
-  li {
-    position: relative;
-    height: 300px;
-    background: var(--grey-7);
-    display: flex;
-    justify-content: center;
-    border-radius: 10px;
-  }
-
-  img {
-    border-radius: 10px;
-    width: 100%;
-    box-shadow: 0 var(--spacing-s) 12px rgba(0, 0, 0, 0.15);
-    object-fit: contain;
-  }
-
-  i {
-    font-size: 3em;
-  }
-
-  .file-icon {
-    color: var(--white);
-    font-size: 2em;
-    margin-right: var(--spacing-s);
-  }
-
-  ul {
-    padding: 0;
-    display: grid;
-    grid-gap: var(--spacing-s);
-    list-style-type: none;
-    width: 100%;
-  }
-
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: absolute;
-    background: linear-gradient(
-      180deg,
-      rgba(12, 12, 12, 1),
-      rgba(60, 60, 60, 0)
-    );
-    width: 100%;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    height: 60px;
-  }
-
-  header > div {
-    color: var(--white);
-    display: flex;
-    align-items: center;
-    font-size: 15px;
-    margin-left: var(--spacing-m);
-    width: 60%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .filename {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  header > p {
-    color: var(--grey-5);
-    margin-right: var(--spacing-m);
-  }
-
-  .delete-button {
-    position: absolute;
-    top: var(--spacing-s);
-    right: var(--spacing-s);
-    padding: var(--spacing-s);
-    border-radius: 10px;
-    opacity: 0;
-    transition: all 0.3s;
-    color: var(--white);
-  }
-
-  .delete-button i {
-    font-size: 2em;
-  }
-
-  .delete-button:hover {
-    opacity: 1;
-    cursor: pointer;
-    background: linear-gradient(
-      to top right,
-      rgba(60, 60, 60, 0),
-      rgba(255, 0, 0, 0.2)
-    );
-  }
-</style>
+<Dropzone bind:files {processFiles} {handleFileTooLarge} />
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index e2ed2a824c..f640e80567 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -688,10 +688,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.33.0":
-  version "1.33.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.33.0.tgz#216b24dd815f45880e9795e66b04848329b0390f"
-  integrity sha512-Rrt5eLbea014TIfAbT40kP0D0AWNUi8Q0kDr3UZO6Aq4UXgjc0f53ZuJ7Kb66YRDWrqiucjf1FtvOUs3/YaD6g==
+"@budibase/bbui@^1.34.6":
+  version "1.34.6"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.34.6.tgz#d94a9c0af52244ded20dfcd7c93dbd6b184460dc"
+  integrity sha512-FLYKst1WDjQWpZPOm5w31M5mpdc4FZaHNT5UPyE+LTOtVJquUPycyS1Y/lhGjt/QjwP/Gn8wSvwwsD0gCNJvvg==
   dependencies:
     sirv-cli "^0.4.6"
     svelte-flatpickr "^2.4.0"
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 494a86f2ee..5b3cc17cd7 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -36,7 +36,7 @@
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
-    "@budibase/bbui": "^1.32.0",
+    "@budibase/bbui": "^1.34.6",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "britecharts": "^2.16.1",
     "d3-selection": "^1.4.2",
diff --git a/packages/standard-components/src/attachments/Dropzone.svelte b/packages/standard-components/src/attachments/Dropzone.svelte
index 5d443b2674..9d68c920c2 100644
--- a/packages/standard-components/src/attachments/Dropzone.svelte
+++ b/packages/standard-components/src/attachments/Dropzone.svelte
@@ -1,26 +1,16 @@
 <script>
-  import { Heading, Body, Button } from "@budibase/bbui"
+  import { Heading, Body, Button, Dropzone } from "@budibase/bbui"
   import { FILE_TYPES } from "./fileTypes"
-  import api from "../api"
 
   const BYTES_IN_KB = 1000
-  const BYTES_IN_MB = 1000000
 
   export let files = []
-  export let fileSizeLimit = BYTES_IN_MB * 20
 
-  let selectedImageIdx = 0
-  let fileDragged = false
-
-  $: selectedImage = files ? files[selectedImageIdx] : null
-
-  function determineFileIcon(extension) {
-    const ext = extension.toLowerCase()
-
-    if (FILE_TYPES.IMAGE.includes(ext)) return "fas fa-file-image"
-    if (FILE_TYPES.CODE.includes(ext)) return "fas fa-file-code"
-
-    return "fas fa-file"
+  function handleFileTooLarge(fileSizeLimit) {
+    alert(
+      `Files cannot exceed ${fileSizeLimit /
+        BYTES_IN_MB}MB. Please try again with smaller files.`
+    )
   }
 
   async function processFiles(fileList) {
@@ -29,14 +19,6 @@
       data.append("file", fileList[i])
     }
 
-    if (Array.from(fileList).some(file => file.size >= fileSizeLimit)) {
-      alert(
-        `Files cannot exceed ${fileSizeLimit /
-          BYTES_IN_MB}MB. Please try again with smaller files.`
-      )
-      return
-    }
-
     const response = await fetch("/api/attachments/upload", {
       method: "POST",
       body: data,
@@ -46,256 +28,8 @@
     })
 
     const processedFiles = await response.json()
-    files = [...processedFiles, ...files]
-    selectedImageIdx = 0
-  }
-
-  async function removeFile() {
-    files.splice(selectedImageIdx, 1)
-    files = files
-    selectedImageIdx = 0
-  }
-
-  function navigateLeft() {
-    selectedImageIdx -= 1
-  }
-
-  function navigateRight() {
-    selectedImageIdx += 1
-  }
-
-  function handleFile(evt) {
-    processFiles(evt.target.files)
-  }
-
-  function handleDragOver(evt) {
-    evt.preventDefault()
-    fileDragged = true
-  }
-
-  function handleDragLeave(evt) {
-    evt.preventDefault()
-    fileDragged = false
-  }
-
-  function handleDrop(evt) {
-    evt.preventDefault()
-    processFiles(evt.dataTransfer.files)
-    fileDragged = false
+    return processedFiles
   }
 </script>
 
-<div
-  class="dropzone"
-  on:dragover={handleDragOver}
-  on:dragleave={handleDragLeave}
-  on:dragenter={handleDragOver}
-  on:drop={handleDrop}
-  class:fileDragged>
-  <ul>
-    {#if selectedImage}
-      <li>
-        <header>
-          <div>
-            <i class={determineFileIcon(selectedImage.extension)} />
-            <span class="filename">{selectedImage.name}</span>
-          </div>
-          <p>
-            {#if selectedImage.size <= BYTES_IN_MB}
-              {selectedImage.size / BYTES_IN_KB}KB
-            {:else}{selectedImage.size / BYTES_IN_MB}MB{/if}
-          </p>
-        </header>
-        <div class="delete-button" on:click={removeFile}>
-          <i class="fas fa-times" />
-        </div>
-        {#if selectedImageIdx !== 0}
-          <div class="nav left" on:click={navigateLeft}>
-            <i class="fas fa-arrow-left" />
-          </div>
-        {/if}
-        <img src={selectedImage.url} />
-        {#if selectedImageIdx !== files.length - 1}
-          <div class="nav right" on:click={navigateRight}>
-            <i class="fas fa-arrow-right" />
-          </div>
-        {/if}
-      </li>
-    {/if}
-  </ul>
-  <i class="fas fa-upload" />
-  <input id="file-upload" type="file" multiple on:change={handleFile} />
-  <label for="file-upload">Upload</label>
-</div>
-
-<style>
-  .dropzone {
-    padding: var(--spacing-l);
-    border: 2px dashed var(--grey-7);
-    text-align: center;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    border-radius: 10px;
-    transition: all 0.3s;
-  }
-
-  .fileDragged {
-    border: 2px dashed var(--grey-7);
-    transform: scale(1.03);
-    background: var(--blue-light);
-  }
-
-  input[type="file"] {
-    display: none;
-  }
-
-  label {
-    font-family: var(--font-sans);
-    cursor: pointer;
-    font-weight: 600;
-    box-sizing: border-box;
-    overflow: hidden;
-    border-radius: var(--border-radius-s);
-    color: var(--white);
-    padding: var(--spacing-s) var(--spacing-l);
-    transition: all 0.2s ease 0s;
-    display: inline-flex;
-    text-rendering: optimizeLegibility;
-    min-width: auto;
-    outline: none;
-    font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
-    -webkit-box-align: center;
-    user-select: none;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    margin-top: 10px;
-    width: 100%;
-    border: solid 1.5px var(--ink);
-    background-color: var(--ink);
-  }
-
-  div.nav {
-    padding: var(--spacing-xs);
-    position: absolute;
-    background: black;
-    color: var(--white);
-    display: flex;
-    align-items: center;
-    bottom: var(--spacing-s);
-    border-radius: 5px;
-    transition: 0.2s transform;
-  }
-
-  .nav:hover {
-    cursor: pointer;
-    transform: scale(1.1);
-  }
-
-  .left {
-    left: var(--spacing-s);
-  }
-
-  .right {
-    right: var(--spacing-s);
-  }
-
-  li {
-    position: relative;
-    height: 300px;
-    background: var(--grey-7);
-    display: flex;
-    justify-content: center;
-    border-radius: 10px;
-  }
-
-  img {
-    border-radius: 10px;
-    width: 100%;
-    box-shadow: 0 var(--spacing-s) 12px rgba(0, 0, 0, 0.15);
-    object-fit: contain;
-  }
-
-  i {
-    font-size: 3em;
-  }
-
-  .file-icon {
-    color: var(--white);
-    font-size: 2em;
-    margin-right: var(--spacing-s);
-  }
-
-  ul {
-    padding: 0;
-    display: grid;
-    grid-gap: var(--spacing-s);
-    list-style-type: none;
-    width: 100%;
-  }
-
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: absolute;
-    background: linear-gradient(
-      180deg,
-      rgba(12, 12, 12, 1),
-      rgba(60, 60, 60, 0)
-    );
-    width: 100%;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    height: 60px;
-  }
-
-  header > div {
-    color: var(--white);
-    display: flex;
-    align-items: center;
-    font-size: 15px;
-    margin-left: var(--spacing-m);
-    width: 60%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .filename {
-    overflow: hidden;
-    margin-left: 5px;
-    text-overflow: ellipsis;
-  }
-
-  header > p {
-    color: var(--grey-5);
-    margin-right: var(--spacing-m);
-  }
-
-  .delete-button {
-    position: absolute;
-    top: var(--spacing-s);
-    right: var(--spacing-s);
-    padding: var(--spacing-s);
-    border-radius: 10px;
-    opacity: 0;
-    transition: all 0.3s;
-    color: var(--white);
-  }
-
-  .delete-button i {
-    font-size: 2em;
-  }
-
-  .delete-button:hover {
-    opacity: 1;
-    cursor: pointer;
-    background: linear-gradient(
-      to top right,
-      rgba(60, 60, 60, 0),
-      rgba(255, 0, 0, 0.2)
-    );
-  }
-</style>
+<Dropzone bind:files {processFiles} {handleFileTooLarge} />