Merge pull request #142 from Conor-Mack/feature/check-group-refactor

Tidyup and bugfixes

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

@@ -22,6 +22,7 @@
   let instance = null
   let checkbox = null
   let selectedItems
+  let checkProps
 
   let context = _bb.getContext("BBMD:input:context")
 
@@ -39,6 +40,7 @@
 
     if (context === "checkboxgroup") {
       selectedItems = _bb.getContext("BBMD:checkbox:selectedItemsStore")
+      checkProps = _bb.getContext("BBMD:checkbox:props")
     }
   })
 
@@ -80,18 +82,24 @@
     context === "checkboxgroup"
       ? $selectedItems && $selectedItems.findIndex(i => i._id === _id) > -1
       : checked
+
+  $: isAlignedEnd =
+    context === "checkboxgroup" && !!checkProps ? checkProps.alignEnd : alignEnd
+
+  $: isDisabled =
+    context === "checkboxgroup" && !!checkProps ? checkProps.disabled : disabled
 </script>
 
 <!-- TODO: Customizing Colour and Density - What level of customization for these things does Budibase need here? -->
 
 {#if context !== 'list-item'}
-  <Formfield {label} {id} {alignEnd}>
+  <Formfield {label} {_bb} {id} alignEnd={isAlignedEnd}>
     <div bind:this={checkbox} class={blockClass}>
       <input
         type="checkbox"
         class={cb.elem`native-control`}
         {id}
-        {disabled}
+        disabled={isDisabled}
         {isChecked}
         on:click={handleOnClick}
         on:change={changed} />
@@ -113,7 +121,7 @@
       type="checkbox"
       class={cb.elem`native-control`}
       {id}
-      {disabled}
+      disabled={isDisabled}
       {isChecked}
       on:change={changed}
       on:click={handleOnClick} />

packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte

@@ -15,12 +15,12 @@
 
   export let disabled = false
   export let alignEnd = false
-  let selectedItems = []
 
   onMount(() => {
     _bb.setContext("BBMD:input:context", "checkboxgroup")
     selectedItemsStore = createItemsStore(() => onChange($selectedItemsStore))
     _bb.setContext("BBMD:checkbox:selectedItemsStore", selectedItemsStore)
+    _bb.setContext("BBMD:checkbox:props", { alignEnd, disabled })
   })
 
   $: checkItems && _bb.attachChildren(checkItems)

packages/materialdesign-components/src/Common/Formfield.svelte

@@ -17,15 +17,14 @@
 
   let formField = null
 
-  let modifiers = { alignEnd }
-  let props = { modifiers }
+  $: modifiers = { alignEnd }
+  $: props = { modifiers }
 
-  let blockClasses = cb.build({ props })
+  $: blockClasses = cb.build({ props })
 
   onMount(() => {
     if (!!formField) fieldStore.set(new MDCFormField(formField))
-    //TODO: Fix this, _bb is coming back undefined
-    // _bb.setContext("BBMD:field-element", fieldStore)
+    _bb.setContext("BBMD:field-element", fieldStore)
   })
 
   onDestroy(unsubscribe)

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

@@ -20,6 +20,7 @@
   let instance = null
   let radiobtn = null
   let selectedItems
+  let radioProps
 
   let context = _bb.getContext("BBMD:input:context")
 
@@ -35,8 +36,8 @@
     }
     if (context === "radiobuttongroup") {
       selectedItems = _bb.getContext("BBMD:radiobutton:selectedItemsStore")
-      let props = _bb.getContext("BBMD:radiobutton:props")
-      name = props.name
+      radioProps = _bb.getContext("BBMD:radiobutton:props")
+      name = radioProps.name
     }
   })
 
@@ -56,19 +57,30 @@
   }
 
   const cb = new ClassBuilder("radio")
-  let modifiers = { disabled }
-  let props = { modifiers, extras }
-
-  const blockClass = cb.build({ props })
 
   $: isChecked =
     context === "radiobuttongroup"
       ? $selectedItems && $selectedItems.findIndex(i => i._id === _id) > -1
       : checked
+
+  $: isAlignedEnd =
+    context === "radiobuttongroup" && !!radioProps
+      ? radioProps.alignEnd
+      : alignEnd
+
+  $: isDisabled =
+    context === "radiobuttongroup" && !!radioProps
+      ? radioProps.disabled
+      : disabled
+
+  $: modifiers = { disabled: isDisabled }
+  $: props = { modifiers, extras }
+
+  $: blockClass = cb.build({ props })
 </script>
 
 {#if context !== 'list-item'}
-  <Formfield {id} {label} {alignEnd}>
+  <Formfield {id} {_bb} {label} alignEnd={isAlignedEnd}>
     <div class={blockClass}>
       <input
         {id}
@@ -76,7 +88,7 @@
         type="radio"
         {name}
         {checked}
-        {disabled}
+        disabled={isDisabled}
         on:click={handleOnClick} />
       <div class={cb.elem`background`}>
         <div class={cb.elem`outer-circle`} />
@@ -93,7 +105,7 @@
       type="radio"
       {name}
       {checked}
-      {disabled}
+      disabled={isDisabled}
       on:click={onClick} />
     <div class={cb.elem`background`}>
       <div class={cb.elem`outer-circle`} />

packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte

@@ -12,6 +12,7 @@
   export let orientation = "row"
   export let fullwidth = false
   export let alignEnd = false
+  export let disabled = false
 
   let selectedItemsStore
   let selected = null
@@ -20,18 +21,10 @@
   onMount(() => {
     _bb.setContext("BBMD:input:context", "radiobuttongroup")
     selectedItemsStore = createItemStore(() => onChange($selectedItemsStore))
-    _bb.setContext("BBMD:radiobutton:props", { name })
+    _bb.setContext("BBMD:radiobutton:props", { name, disabled, alignEnd })
     _bb.setContext("BBMD:radiobutton:selectedItemsStore", selectedItemsStore)
   })
 
-  // function handleOnClick(item) {
-  //   if (!!selected) selected.checked = false
-  //   item.checked = true
-  //   selected = item
-  //   items = items
-  //   onChange(selected)w
-  // }
-
   $: alignRight = orientation === "column" && alignEnd
   $: radioItems && _bb.attachChildren(radioItems)
 </script>

packages/materialdesign-components/src/Test/TestApp.svelte

@@ -28,20 +28,12 @@
         props: {
           _component: "testcomponents/rootComponent",
           _children: [
-            H1,
-            Overline,
             Button,
             BodyBoundToStore,
             Textfield,
-            Icon,
-            Datatable,
-            CustomersIndexTable,
-            List,
             Select,
             Radiobutton,
             Radiobuttongroup,
-            Checkbox,
-            Checkboxgroup,
           ],
         },
       }

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

@@ -77,12 +77,15 @@ export const props = {
     _component: "@budibase/materialdesign-components/Checkbox",
     _children: [],
     id: "test-check",
+    alignEnd: true,
     label: "Check Yo Self",
     onClick: () => alert`Before ya reck yo'self`,
   },
   Checkboxgroup: {
     _component: "@budibase/materialdesign-components/Checkboxgroup",
     label: "Whats your favourite?",
+    disabled: true,
+    alignEnd: true,
     onChange: selectedItems => console.log(selectedItems),
     _children: [
       {
@@ -114,6 +117,8 @@ export const props = {
     _component: "@budibase/materialdesign-components/Radiobuttongroup",
     label: "Preferred method of contact: ",
     orientation: "column",
+    disabled: true,
+    alignEnd: true,
     onChange: selected => console.log("Radiobutton Group", selected),
     _children: [
       {