Merge pull request #103 from Conor-Mack/bugfix/event-handling-button-textfield

Event handling for MD Buttons and Textfields

packages/materialdesign-components/src/Button/Button.svelte

@@ -1,49 +1,45 @@
 <script>
-  import { setContext, getContext } from "svelte";
-  import Icon from "../Icon.svelte";
-  import ripple from "../Ripple.js";
-  import ClassBuilder from "../ClassBuilder.js";
+  import { setContext, getContext } from "svelte"
+  import Icon from "../Icon.svelte"
+  import ripple from "../Ripple.js"
+  import ClassBuilder from "../ClassBuilder.js"
 
-  const cb = new ClassBuilder("button", ["primary", "medium"]);
+  const cb = new ClassBuilder("button", ["primary", "medium"])
 
-  export let variant = "raised";
-  export let colour = "primary";
-  export let size = "medium";
+  export let onClick = () => {}
 
-  export let href = "";
-  export let icon = "";
-  export let trailingIcon = false;
-  export let fullwidth = false;
+  export let variant = "raised"
+  export let colour = "primary"
+  export let size = "medium"
 
-  export let text = "";
-  export let disabled = false;
+  export let href = ""
+  export let icon = ""
+  export let trailingIcon = false
+  export let fullwidth = false
 
-  let modifiers = {};
-  let customs = { size, colour };
+  export let text = ""
+  export let disabled = false
 
-  if (!href) modifiers = { variant };
+  let modifiers = {}
+  let customs = { size, colour }
 
-  let props = { modifiers, customs };
+  if (!href) modifiers = { variant }
 
-  let blockClasses = cb.build({ props });
-  const labelClass = cb.elem("label");
+  let props = { modifiers, customs }
+
+  let blockClasses = cb.build({ props })
+  const labelClass = cb.elem("label")
 
   $: if (icon) {
-    setContext("BBMD:icon:context", "button");
+    setContext("BBMD:icon:context", "button")
   }
 
-  $: renderLeadingIcon = !!icon && !trailingIcon;
-  $: renderTrailingIcon = !!icon && trailingIcon;
+  $: renderLeadingIcon = !!icon && !trailingIcon
+  $: renderTrailingIcon = !!icon && trailingIcon
 </script>
 
-<style>
-  .fullwidth {
-    width: 100%;
-  }
-</style>
-
 {#if href}
-  <a class={blockClasses} {href} on:click>
+  <a class={blockClasses} {href} on:click={onClick}>
     <span class={labelClass}>{text}</span>
   </a>
 {:else}
@@ -52,7 +48,7 @@
     class={blockClasses}
     class:fullwidth
     {disabled}
-    on:click>
+    on:click={onClick}>
     {#if renderLeadingIcon}
       <Icon {icon} />
     {/if}
@@ -62,3 +58,9 @@
     {/if}
   </button>
 {/if}
+
+<style>
+  .fullwidth {
+    width: 100%;
+  }
+</style>

packages/materialdesign-components/src/Test/props.js

@@ -22,6 +22,7 @@ export const props = {
     fullwidth: false,
     text: "I am button",
     disabled: false,
+    onClick: () => alert`Button Clicked`,
   },
   icon: {
     _component: "@budibase/materialdesign-components/icon",
@@ -33,10 +34,10 @@ export const props = {
     _children: [],
     label: "First",
     colour: "secondary",
-    textarea: true,
     fullwidth: true,
     helperText: "Add Surname",
     useCharCounter: true,
+    onChange: text => console.log("Text: ", text),
   },
   checkbox: {
     _component: "@budibase/materialdesign-components/checkbox",

packages/materialdesign-components/src/Textfield/Textfield.svelte

@@ -21,6 +21,8 @@
     }
   })
 
+  export let onChange = text => {}
+
   export let label = ""
   export let variant = "standard" //outlined | filled | standard
   export let disabled = false
@@ -112,7 +114,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         {placeholder}
         {minLength}
         {maxLength}
-        on:change />
+        on:change={e => onChange(e.target.value)} />
     {:else}
       {#if renderLeadingIcon}
         <Icon {icon} />
@@ -120,7 +122,6 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
       <input
         {id}
         {disabled}
-        on:focus={focus}
         class={inputClasses}
         {type}
         {required}
@@ -128,7 +129,8 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         {minLength}
         {maxLength}
         aria-label={`Textfield ${variant}`}
-        on:change />
+        on:focus={focus}
+        on:change={e => onChange(e.target.value)} />
       {#if renderTrailingIcon}
         <Icon {icon} />
       {/if}