From 46970a759de29bc5f4b72381b83e6585cb1dea25 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 18 Aug 2020 14:51:02 +0100
Subject: [PATCH] all inputs using BBUI

---
 .../src/components/common/Input.svelte        | 62 -------------------
 .../EventsEditor/EventEditorModal.svelte      |  1 -
 .../PropertyPanelControls/Input.svelte        | 11 ++++
 .../userInterface/propertyCategories.js       |  4 +-
 .../userInterface/temporaryPanelStructure.js  |  2 +-
 5 files changed, 14 insertions(+), 66 deletions(-)
 delete mode 100644 packages/builder/src/components/common/Input.svelte
 create mode 100644 packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte

diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte
deleted file mode 100644
index 730a9ed043..0000000000
--- a/packages/builder/src/components/common/Input.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { buildStyle } from "../../helpers.js"
-  export let value = ""
-  export let name = ""
-  export let textAlign = "left"
-  export let width = "160px"
-  export let placeholder = ""
-  export let suffix = ""
-  export let onChange = val => {}
-
-  let centerPlaceholder = textAlign === "center"
-
-  let style = buildStyle({ width, textAlign })
-
-  function handleChange(val) {
-    value = val
-    let _value = value !== "auto" ? value + suffix : value
-    onChange(_value)
-  }
-
-  $: displayValue =
-    suffix && value && value.endsWith(suffix)
-      ? value.replace(new RegExp(`${suffix}$`), "")
-      : value || ""
-</script>
-
-<input
-  {name}
-  class:centerPlaceholder
-  type="text"
-  value={displayValue}
-  {placeholder}
-  {style}
-  on:change={e => handleChange(e.target.value)} />
-
-<style>
-  input {
-    /* width: 32px; */
-    height: 36px;
-    font-size: 14px;
-    font-weight: 400;
-    margin: 0px 0px 0px 2px;
-    color: var(--ink);
-    padding: 0px 8px;
-    font-family: inter;
-    width: 164px;
-    box-sizing: border-box;
-    background-color: var(--grey-2);
-    border-radius: 4px;
-    border: 1px solid var(--grey-2);
-    outline: none;
-  }
-
-  input::placeholder {
-    text-align: left;
-  }
-
-  .centerPlaceholder::placeholder {
-    text-align: center;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index 62fc4071c6..34a3c78519 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -6,7 +6,6 @@
   import IconButton from "../../common/IconButton.svelte"
   import ActionButton from "../../common/ActionButton.svelte"
   import Select from "../../common/Select.svelte"
-  import Input from "../../common/Input.svelte"
   import getIcon from "../../common/icon"
   import { CloseIcon } from "components/common/Icons/"
 
diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte b/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte
new file mode 100644
index 0000000000..1721c1bbb2
--- /dev/null
+++ b/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte
@@ -0,0 +1,11 @@
+<script>
+  /*
+  This file exists because of how we pass this control to the 
+  properties panel - via a JS reference, not using svelte tags
+  ... checkout the use of Input in propertyCategories to see what i mean
+  */
+  import { Input } from "@budibase/bbui"
+  export let name, value, placeholder, type
+</script>
+
+<Input {name} {value} {placeholder} {type} thin on:change />
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index b85a9abacb..a843a07ee9 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -1,9 +1,9 @@
-import Input from "../common/Input.svelte"
+import Input from "./PropertyPanelControls/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import FlatButtonGroup from "./FlatButtonGroup.svelte"
 import Colorpicker from "@budibase/colorpicker"
 /*
-  TODO: Allow for default values for all properties
+  TODO: Allow for default values for all proproperties
 */
 
 export const layout = [
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 5b016dcc84..b474aea038 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1,4 +1,4 @@
-import Input from "../common/Input.svelte"
+import Input from "./PropertyPanelControls/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import Checkbox from "../common/Checkbox.svelte"
 import ModelSelect from "components/userInterface/ModelSelect.svelte"