Merge pull request #136 from Conor-Mack/feature/radio-group-refactor

Radiobutton Group update to work with builder specific logic

packages/materialdesign-components/src/Common/ItemStore.js

@@ -1,14 +1,14 @@
-import { writable } from "svelte/store";
+import { writable } from "svelte/store"
 
 function createItemsStore(componentOnSelect) {
-    const { subscribe, set, update } = writable([]);
+    const { subscribe, set, update } = writable([])
 
     function addItem(item) {
         update(items => {
-            return [...items, item]                  
+            return [...items, item]
         })
         if (componentOnSelect) {
-            componentOnSelect();            
+            componentOnSelect()
         }
     }
 

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

@@ -6,8 +6,6 @@
   import ListItem from "./ListItem.svelte"
   import ClassBuilder from "../ClassBuilder.js"
 
-  let selectedItems
-
   export let _bb
   const cb = new ClassBuilder("list", ["one-line"])
 

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

@@ -3,23 +3,29 @@
   import Formfield from "../Common/Formfield.svelte"
   import ClassBuilder from "../ClassBuilder.js"
   import { MDCRadio } from "@material/radio"
+  import { generate } from "shortid"
 
   export let onClick = item => {}
   export let _bb
 
   export let id = ""
   export let label = ""
+  export let value = ""
   export let name = "radios"
   export let checked = false
   export let disabled = false
   export let alignEnd = false
 
+  let _id
   let instance = null
   let radiobtn = null
+  let selectedItems
 
   let context = _bb.getContext("BBMD:input:context")
 
   onMount(() => {
+    _id = generate()
+
     if (!!radiobtn) {
       instance = new MDCRadio(radiobtn)
       if (context !== "list-item") {
@@ -27,8 +33,23 @@
         fieldStore.setInput(instance)
       }
     }
+    if (context === "radiobuttongroup") {
+      selectedItems = _bb.getContext("BBMD:radiobutton:selectedItemsStore")
+      let props = _bb.getContext("BBMD:radiobutton:props")
+      name = props.name
+    }
   })
 
+  function handleOnClick() {
+    let item = { _id, label, value }
+    if (context === "radiobuttongroup") {
+      selectedItems.addSingleItem(item)
+    } else {
+      debugger
+      onClick(item)
+    }
+  }
+
   let extras = null
 
   if (context === "list-item") {
@@ -40,6 +61,11 @@
   let props = { modifiers, extras }
 
   const blockClass = cb.build({ props })
+
+  $: isChecked =
+    context === "radiobuttongroup"
+      ? $selectedItems && $selectedItems.findIndex(i => i._id === _id) > -1
+      : checked
 </script>
 
 {#if context !== 'list-item'}
@@ -52,7 +78,7 @@
         {name}
         {checked}
         {disabled}
-        on:click={onClick} />
+        on:click={handleOnClick} />
       <div class={cb.elem`background`}>
         <div class={cb.elem`outer-circle`} />
         <div class={cb.elem`inner-circle`} />

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

@@ -1,28 +1,39 @@
 <script>
+  import { onMount } from "svelte"
+  import createItemStore from "../Common/ItemStore.js"
   import Radiobutton from "./Radiobutton.svelte"
   import Label from "../Common/Label.svelte"
 
+  export let onChange = selected => {}
+
+  export let _bb
   export let name = "radio-group"
   export let label = ""
   export let orientation = "row"
   export let fullwidth = false
   export let alignEnd = false
 
-  export let onChange = selected => {}
-
-  export let items = []
-
+  let selectedItemsStore
   let selected = null
+  let radioItems
+
+  onMount(() => {
+    _bb.setContext("BBMD:input:context", "radiobuttongroup")
+    selectedItemsStore = createItemStore(() => onChange($selectedItemsStore))
+    _bb.setContext("BBMD:radiobutton:props", { name })
+    _bb.setContext("BBMD:radiobutton:selectedItemsStore", selectedItemsStore)
+  })
+
+  // function handleOnClick(item) {
+  //   if (!!selected) selected.checked = false
+  //   item.checked = true
+  //   selected = item
+  //   items = items
+  //   onChange(selected)
+  // }
 
   $: alignRight = orientation === "column" && alignEnd
-
-  function handleOnClick(item) {
-    if (!!selected) selected.checked = false
-    item.checked = true
-    selected = item
-    items = items
-    onChange(selected)
-  }
+  $: radioItems && _bb.attachChildren(radioItems)
 </script>
 
 <div class="radiobutton-group">
@@ -30,17 +41,7 @@
     <Label text={label} bold />
   </div>
   <div class={`radiobutton-group__radios ${orientation}`} class:alignRight>
-    {#each items as item, i}
-      <div class:fullwidth>
-        <Radiobutton
-          id={`${item.label}-${i}`}
-          {name}
-          {alignEnd}
-          label={item.label}
-          checked={item.checked || false}
-          onClick={() => handleOnClick(item)} />
-      </div>
-    {/each}
+    <div bind:this={radioItems} class:fullwidth />
   </div>
 </div>
 

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

@@ -39,7 +39,6 @@
 
     if (!!select) {
       instance = new MDCSelect(select)
-      debugger
       return () => {
         instance && instance.destroy()
         instance = null

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

@@ -38,6 +38,8 @@
             CustomersIndexTable,
             List,
             Select,
+            Radiobutton,
+            Radiobuttongroup,
           ],
         },
       }

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

@@ -95,19 +95,33 @@ export const props = {
     _children: [],
     label: "Hi radio",
     alignEnd: true,
-    onClick: () => alert`Roger That`,
+    onClick: item => console.log(item),
   },
   Radiobuttongroup: {
     _component: "@budibase/materialdesign-components/Radiobuttongroup",
-    _children: [],
     label: "Preferred method of contact: ",
     orientation: "column",
-    items: [
-      { label: "Email", value: 1 },
-      { label: "Phone", value: 2 },
-      { label: "Social Media", value: 3 },
+    onChange: selected => console.log("Radiobutton Group", selected),
+    _children: [
+      {
+        _component: "@budibase/materialdesign-components/Radiobutton",
+        _children: [],
+        label: "Email",
+        value: 1,
+      },
+      {
+        _component: "@budibase/materialdesign-components/Radiobutton",
+        _children: [],
+        label: "Phone",
+        value: 2,
+      },
+      {
+        _component: "@budibase/materialdesign-components/Radiobutton",
+        _children: [],
+        label: "Social Media",
+        value: 3,
+      },
     ],
-    onChange: selected => console.log(selected),
   },
   Datatable: {
     _component: "@budibase/materialdesign-components/Datatable",