From 47c34e23957ffdd078fe1c7aae6f3aee0e11c710 Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Thu, 27 Feb 2020 10:03:49 +0000
Subject: [PATCH 1/2] Testing list items by passing down a event handler
 through context for selecting items

---
 .../src/Checkbox/Checkbox.svelte              | 14 +++--
 .../src/Common/Formfield.svelte               |  6 +-
 .../src/List/List.svelte                      | 51 ++++++++-------
 .../src/List/ListItem.svelte                  | 62 +++++++++++++------
 .../src/Radiobutton/Radiobutton.svelte        | 10 +--
 .../src/Test/TestApp.svelte                   |  4 --
 .../src/Test/props.js                         | 15 ++---
 7 files changed, 92 insertions(+), 70 deletions(-)

diff --git a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte
index bfe861f373..d02f2e83ad 100644
--- a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte
+++ b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount, onDestroy, getContext } from "svelte"
+  import { onMount, onDestroy } from "svelte"
   import Formfield from "../Common/Formfield.svelte"
   import { fieldStore } from "../Common/FormfieldStore.js"
   import ClassBuilder from "../ClassBuilder.js"
@@ -7,6 +7,8 @@
 
   export let onClick = item => {}
 
+  export let _bb
+
   export let id = ""
   export let label = ""
   export let disabled = false
@@ -16,16 +18,18 @@
 
   let instance = null
   let checkbox = null
-
-  let context = getContext("BBMD:input:context")
+  let context = null
 
   onMount(() => {
+    context = _bb.getContext("BBMD:input:context")
+
     if (!!checkbox) {
       instance = new MDCCheckbox(checkbox)
       instance.indeterminate = indeterminate
       if (context !== "list-item") {
-        let fieldStore = getContext("BBMD:field-element")
-        fieldStore.setInput(instance)
+        //TODO: Fix this connected to Formfield context issue
+        // let fieldStore = _bb.getContext("BBMD:field-element")
+        // fieldStore.setInput(instance)
       }
     }
   })
diff --git a/packages/materialdesign-components/src/Common/Formfield.svelte b/packages/materialdesign-components/src/Common/Formfield.svelte
index 3559f721df..d019ac39a9 100644
--- a/packages/materialdesign-components/src/Common/Formfield.svelte
+++ b/packages/materialdesign-components/src/Common/Formfield.svelte
@@ -3,13 +3,14 @@
   import ClassBuilder from "../ClassBuilder.js"
   import { fieldStore } from "./FormfieldStore.js"
   import { MDCFormField } from "@material/form-field"
-  import { onMount, onDestroy, setContext } from "svelte"
+  import { onMount, onDestroy } from "svelte"
 
   const cb = new ClassBuilder("form-field")
 
   let store
   const unsubscribe = fieldStore.subscribe(s => (store = s))
 
+  export let _bb
   export let id = ""
   export let label = ""
   export let alignEnd = false
@@ -23,7 +24,8 @@
 
   onMount(() => {
     if (!!formField) fieldStore.set(new MDCFormField(formField))
-    setContext("BBMD:field-element", fieldStore)
+    //TODO: Fix this, _bb is coming back undefined
+    // _bb.setContext("BBMD:field-element", fieldStore)
   })
 
   onDestroy(unsubscribe)
diff --git a/packages/materialdesign-components/src/List/List.svelte b/packages/materialdesign-components/src/List/List.svelte
index ac375da4f3..7f192348af 100644
--- a/packages/materialdesign-components/src/List/List.svelte
+++ b/packages/materialdesign-components/src/List/List.svelte
@@ -13,19 +13,40 @@
 
   export let onSelect = selectedItems => {}
 
-  export let variant = "one-line"
-  //items: [{text: string | {primary: string, secondary: string}, value: any, selected: bool}...n]
-  export let items = []
   export let singleSelection = false
+  export let variant = "two-line"
   export let inputElement = null
 
+  let selectedItems = []
+
+  //TODO: Try managing selected list items with a store that is passed into context. This way can check within the component whether list item is selected to not selecteds instead of managing from internal state which is not feasible 
+  function handleSelected(item) {
+    let idx = selectedItems.findIndex(i => i._id === item._id)
+    if (idx > -1) {
+      selectedItems.splice(idx, 1)
+      selectedItems = selectedItems
+    } else {
+      if (singleSelection) {
+        selectedItems = [item]
+      } else {
+        selectedItems = [...selectedItems, item]
+      }
+    }
+  }
+
+  //See todo above
+  _bb.setContext("BBMD:list:selectItem", handleSelected)
+
   let role = "listbox"
 
   onMount(() => {
+    _bb.setContext("BBMD:list:props", { inputElement, variant })
     if (!!list) {
       instance = new MDCList(list)
       instance.singleSelection = singleSelection
-      instance.listElements.map(element => new MDCRipple(element))
+      if (!inputElement) {
+        instance.listElements.map(element => new MDCRipple(element))
+      }
     }
 
     let context = getContext("BBMD:list:context")
@@ -39,28 +60,6 @@
     }
   })
 
-  function handleSelectedItem(item) {
-    if (!item.disabled) {
-      if (singleSelection || inputElement === "radiobutton") {
-        items.forEach(i => {
-          if (i.selected) i.selected = false
-        })
-      }
-
-      let idx = items.indexOf(item)
-      if (!!item.selected) {
-        items[idx].selected = !item.selected
-      } else {
-        items[idx].selected = true
-      }
-      onSelect(items.filter(item => item.selected))
-    }
-  }
-
-  $: useDoubleLine =
-    variant == "two-line" &&
-    items.every(i => typeof i.text == "object" && "primary" in i.text)
-
   $: list && _bb.attachChildren(list)
 
   $: modifiers = { variant }
diff --git a/packages/materialdesign-components/src/List/ListItem.svelte b/packages/materialdesign-components/src/List/ListItem.svelte
index ac16b26d95..1c013d7ab5 100644
--- a/packages/materialdesign-components/src/List/ListItem.svelte
+++ b/packages/materialdesign-components/src/List/ListItem.svelte
@@ -1,17 +1,23 @@
 <script>
-  import { onMount, getContext } from "svelte"
+  import { onMount } from "svelte"
   import { Radiobutton } from "../Radiobutton"
   import { Checkbox } from "../Checkbox"
   import ClassBuilder from "../ClassBuilder.js"
+  import shortid from "shortid"
 
   const cb = new ClassBuilder("list-item")
 
   export let onClick = item => {}
 
+  let _id
+  let listProps = null
+
+  export let _bb
+
+  export let value = null
   export let text = ""
   export let secondaryText = ""
-  export let variant = "two-line"
-  export let inputElement = null
+
   export let leadingIcon = ""
   export let trailingIcon = ""
   export let selected = false
@@ -19,33 +25,51 @@
 
   let role = "option"
 
+  function handleClick() {
+    if (!disabled) {
+      const selectItem = _bb.getContext("BBMD:list:selectItem")
+      selected = !selected
+      selectItem({
+        _id,
+        value,
+        text,
+        secondaryText,
+        selected,
+        disabled,
+      })
+    }
+  }
+
   onMount(() => {
-    let context = getContext("BBMD:list:context")
+    _id = shortid.generate()
+
+    listProps = _bb.getContext("BBMD:list:props")
+
+    let context = _bb.getContext("BBMD:list:context")
     if (context === "menu") {
       role = "menuitem"
     }
   })
 
-  $: if (!!inputElement) {
-    setContext("BBMD:input:context", "list-item")
+  $: if (listProps && !!listProps.inputElement) {
+    _bb.setContext("BBMD:input:context", "list-item")
   }
 
+  $: shouldSel = selected && !listProps
+  $: console.log("Should Select", selected)
+
   $: modifiers = {
-    selected,
+    selected: selected && (!listProps || !listProps.inputElement),
     disabled,
   }
   $: props = { modifiers }
   $: listItemClass = cb.build({ props })
 
-  $: useTwoLine = variant === "two-line" && !!secondaryText
+  $: useTwoLine =
+    listProps && listProps.variant === "two-line" && !!secondaryText
 </script>
 
-<li
-  class={listItemClass}
-  role="option"
-  aria-selected={selected}
-  tabindex="0"
-  on:click={onClick}>
+<li class={listItemClass} role="option" tabindex="0" on:click={handleClick}>
   {#if leadingIcon}
     <span class="mdc-list-item__graphic material-icons" aria-hidden="true">
       {leadingIcon}
@@ -58,11 +82,11 @@
     {:else}{text}{/if}
   </span>
 
-  {#if inputElement}
-    {#if inputElement === 'radiobutton'}
-      <Radiobutton checked={selected} {disabled} />
-    {:else if inputElement === 'checkbox'}
-      <Checkbox checked={selected} {disabled} />
+  {#if listProps}
+    {#if listProps.inputElement === 'radiobutton'}
+      <Radiobutton checked={selected} {disabled} {_bb} />
+    {:else if listProps.inputElement === 'checkbox'}
+      <Checkbox checked={selected} {disabled} {_bb} />
     {/if}
   {:else if trailingIcon}
     <!-- TODO: Adapt label to accept class prop to handle this. Context is insufficient -->
diff --git a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte
index 9b4c475241..f2fce510d1 100644
--- a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte
+++ b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte
@@ -1,10 +1,11 @@
 <script>
-  import { onMount, onDestroy, getContext } from "svelte"
+  import { onMount, onDestroy } from "svelte"
   import Formfield from "../Common/Formfield.svelte"
   import ClassBuilder from "../ClassBuilder.js"
   import { MDCRadio } from "@material/radio"
 
   export let onClick = item => {}
+  export let _bb
 
   export let id = ""
   export let label = ""
@@ -16,14 +17,15 @@
   let instance = null
   let radiobtn = null
 
-  let context = getContext("BBMD:input:context")
+  let context = _bb.getContext("BBMD:input:context")
 
   onMount(() => {
     if (!!radiobtn) {
       instance = new MDCRadio(radiobtn)
       if (context !== "list-item") {
-        let fieldStore = getContext("BBMD:field-element")
-        fieldStore.setInput(instance)
+        //TODO: Fix this connected to Formfield context issue, _bb not binding properly
+        // let fieldStore = _bb.getContext("BBMD:field-element")
+        // fieldStore.setInput(instance)
       }
     }
   })
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index b6c40fa895..518dc54481 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -32,10 +32,6 @@
             Button,
             BodyBoundToStore,
             Textfield,
-            Checkbox,
-            Checkboxgroup,
-            Radiobutton,
-            Radiobuttongroup,
             Icon,
             Datatable,
             CustomersIndexTable,
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index c10cce0161..3f83760d2b 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -117,12 +117,14 @@ export const props = {
   CustomersIndexTable: indexDatatable(templateOptions)[0].props,
   List: {
     _component: "@budibase/materialdesign-components/List",
+    variant: "two-line",
+    inputElement: "radiobutton",
+    singleSelection: true,
+    onSelect: selected => console.log(selected),
     _children: [
       {
         _component: "@budibase/materialdesign-components/ListItem",
         _children: [],
-        variant: "two-line",
-        singleSelection: true,
         text: "Curry",
         secondaryText: "Chicken or Beef",
         value: 0,
@@ -131,8 +133,6 @@ export const props = {
       {
         _component: "@budibase/materialdesign-components/ListItem",
         _children: [],
-        variant: "two-line",
-        singleSelection: true,
         text: "Pastie",
         secondaryText: "Bap with Mayo",
         value: 1,
@@ -141,15 +141,10 @@ export const props = {
       {
         _component: "@budibase/materialdesign-components/ListItem",
         _children: [],
-        variant: "two-line",
-        singleSelection: true,
         text: "Fish",
         secondaryText: "Salmon or Cod",
         value: 2,
       },
-    ],
-    variant: "two-line",
-    singleSelection: true,
-    onSelect: selected => console.log(selected),
+    ]
   },
 }

From 613ab35099276ba2b0f101b50476d73c57a0ca47 Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Thu, 27 Feb 2020 15:45:28 +0000
Subject: [PATCH 2/2] Updated way of handling selected items by using writable
 store and context

---
 .../src/Checkbox/Checkbox.svelte              |  8 +--
 .../src/Common/ItemStore.js                   | 54 ++++++++++++++++++
 .../src/List/List.svelte                      | 47 +++++++--------
 .../src/List/ListItem.svelte                  | 57 ++++++++++++-------
 .../src/Radiobutton/Radiobutton.svelte        |  5 +-
 .../src/Test/props.js                         |  3 +-
 6 files changed, 120 insertions(+), 54 deletions(-)
 create mode 100644 packages/materialdesign-components/src/Common/ItemStore.js

diff --git a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte
index d02f2e83ad..2f8b55bcf2 100644
--- a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte
+++ b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte
@@ -18,18 +18,16 @@
 
   let instance = null
   let checkbox = null
-  let context = null
+  let context = _bb.getContext("BBMD:input:context")
 
   onMount(() => {
-    context = _bb.getContext("BBMD:input:context")
-
     if (!!checkbox) {
       instance = new MDCCheckbox(checkbox)
       instance.indeterminate = indeterminate
       if (context !== "list-item") {
         //TODO: Fix this connected to Formfield context issue
-        // let fieldStore = _bb.getContext("BBMD:field-element")
-        // fieldStore.setInput(instance)
+        let fieldStore = _bb.getContext("BBMD:field-element")
+        fieldStore.setInput(instance)
       }
     }
   })
diff --git a/packages/materialdesign-components/src/Common/ItemStore.js b/packages/materialdesign-components/src/Common/ItemStore.js
new file mode 100644
index 0000000000..c523405dad
--- /dev/null
+++ b/packages/materialdesign-components/src/Common/ItemStore.js
@@ -0,0 +1,54 @@
+import { writable } from "svelte/store";
+
+function createItemsStore(componentOnSelect) {
+    const { subscribe, set, update } = writable([]);
+
+    function addItem(item) {
+        update(items => {
+            return [...items, item]                  
+        })
+        if (componentOnSelect) {
+            componentOnSelect();            
+        }
+    }
+
+    function addSingleItem(item) {
+        set([item])
+        if (componentOnSelect) {
+            componentOnSelect();            
+        }
+    }
+
+    function removeItem(itemId) {
+        update(items => {
+            let index = getItemIdx(items, itemId)
+            items.splice(index, 1);
+            return items;
+        })
+        if (componentOnSelect) {
+            componentOnSelect();            
+        }
+    }
+
+    function clearItems() {
+        set([]);
+        if (componentOnSelect) {
+            componentOnSelect();            
+        }
+    }
+
+    function getItemIdx(items, itemId) {
+        return items.findIndex(i => i._id === itemId);
+    }
+
+    return {
+        subscribe,
+        addItem,
+        addSingleItem,
+        removeItem,
+        clearItems,
+        getItemIdx
+    }
+}
+
+export default createItemsStore
diff --git a/packages/materialdesign-components/src/List/List.svelte b/packages/materialdesign-components/src/List/List.svelte
index 7f192348af..21cecbeada 100644
--- a/packages/materialdesign-components/src/List/List.svelte
+++ b/packages/materialdesign-components/src/List/List.svelte
@@ -1,10 +1,13 @@
 <script>
-  import { onMount, getContext } from "svelte"
+  import { onMount, getContext, setContext } from "svelte"
   import { MDCList } from "@material/list"
+  import createItemsStore from "../Common/ItemStore.js"
   import { MDCRipple } from "@material/ripple"
   import ListItem from "./ListItem.svelte"
   import ClassBuilder from "../ClassBuilder.js"
 
+  let selectedItems
+
   export let _bb
   const cb = new ClassBuilder("list", ["one-line"])
 
@@ -17,34 +20,32 @@
   export let variant = "two-line"
   export let inputElement = null
 
-  let selectedItems = []
-
-  //TODO: Try managing selected list items with a store that is passed into context. This way can check within the component whether list item is selected to not selecteds instead of managing from internal state which is not feasible 
-  function handleSelected(item) {
-    let idx = selectedItems.findIndex(i => i._id === item._id)
-    if (idx > -1) {
-      selectedItems.splice(idx, 1)
-      selectedItems = selectedItems
-    } else {
-      if (singleSelection) {
-        selectedItems = [item]
-      } else {
-        selectedItems = [...selectedItems, item]
-      }
-    }
-  }
-
-  //See todo above
-  _bb.setContext("BBMD:list:selectItem", handleSelected)
+  let selectedItemsStore
 
   let role = "listbox"
 
+  function createOrAcceptItemStore() {
+    let store = _bb.getContext("BBMD:list:selectItemStore")
+    if (!!store) {
+      selectedItemsStore = store
+    } else {
+      selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore))
+      _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
+    }
+  }
+
   onMount(() => {
-    _bb.setContext("BBMD:list:props", { inputElement, variant })
+    createOrAcceptItemStore()
+
+    _bb.setContext("BBMD:list:props", {
+      inputElement,
+      variant,
+      singleSelection,
+    })
     if (!!list) {
-      instance = new MDCList(list)
-      instance.singleSelection = singleSelection
       if (!inputElement) {
+        instance = new MDCList(list)
+        instance.singleSelection = singleSelection
         instance.listElements.map(element => new MDCRipple(element))
       }
     }
diff --git a/packages/materialdesign-components/src/List/ListItem.svelte b/packages/materialdesign-components/src/List/ListItem.svelte
index 1c013d7ab5..ecaf0cefd1 100644
--- a/packages/materialdesign-components/src/List/ListItem.svelte
+++ b/packages/materialdesign-components/src/List/ListItem.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte"
+  import { onMount, getContext } from "svelte"
   import { Radiobutton } from "../Radiobutton"
   import { Checkbox } from "../Checkbox"
   import ClassBuilder from "../ClassBuilder.js"
@@ -12,6 +12,8 @@
   let _id
   let listProps = null
 
+  let selectedItems
+
   export let _bb
 
   export let value = null
@@ -25,24 +27,11 @@
 
   let role = "option"
 
-  function handleClick() {
-    if (!disabled) {
-      const selectItem = _bb.getContext("BBMD:list:selectItem")
-      selected = !selected
-      selectItem({
-        _id,
-        value,
-        text,
-        secondaryText,
-        selected,
-        disabled,
-      })
-    }
-  }
-
   onMount(() => {
     _id = shortid.generate()
 
+    selectedItems = _bb.getContext("BBMD:list:selectItemStore")
+
     listProps = _bb.getContext("BBMD:list:props")
 
     let context = _bb.getContext("BBMD:list:context")
@@ -51,15 +40,41 @@
     }
   })
 
+  function handleClick() {
+    let item = {
+      _id,
+      value,
+      text,
+      secondaryText,
+      selected,
+      disabled,
+    }
+    if (!disabled) {
+      if (
+        listProps.singleSelection ||
+        listProps.inputElement === "radiobutton"
+      ) {
+        selectedItems.addSingleItem(item)
+      } else {
+        let idx = selectedItems.getItemIdx($selectedItems, _id)
+        if (idx > -1) {
+          selectedItems.removeItem(_id)
+        } else {
+          selectedItems.addItem(item)
+        }
+      }
+    }
+  }
+
   $: if (listProps && !!listProps.inputElement) {
     _bb.setContext("BBMD:input:context", "list-item")
   }
 
-  $: shouldSel = selected && !listProps
-  $: console.log("Should Select", selected)
+  $: isSelected =
+    $selectedItems && selectedItems.getItemIdx($selectedItems, _id) > -1
 
   $: modifiers = {
-    selected: selected && (!listProps || !listProps.inputElement),
+    selected: isSelected && (!listProps || !listProps.inputElement),
     disabled,
   }
   $: props = { modifiers }
@@ -84,9 +99,9 @@
 
   {#if listProps}
     {#if listProps.inputElement === 'radiobutton'}
-      <Radiobutton checked={selected} {disabled} {_bb} />
+      <Radiobutton checked={isSelected} {disabled} {_bb} />
     {:else if listProps.inputElement === 'checkbox'}
-      <Checkbox checked={selected} {disabled} {_bb} />
+      <Checkbox checked={isSelected} {disabled} {_bb} />
     {/if}
   {:else if trailingIcon}
     <!-- TODO: Adapt label to accept class prop to handle this. Context is insufficient -->
diff --git a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte
index f2fce510d1..cb83f88d40 100644
--- a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte
+++ b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte
@@ -23,9 +23,8 @@
     if (!!radiobtn) {
       instance = new MDCRadio(radiobtn)
       if (context !== "list-item") {
-        //TODO: Fix this connected to Formfield context issue, _bb not binding properly
-        // let fieldStore = _bb.getContext("BBMD:field-element")
-        // fieldStore.setInput(instance)
+        let fieldStore = _bb.getContext("BBMD:field-element")
+        fieldStore.setInput(instance)
       }
     }
   })
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index 3f83760d2b..ec7f4b9bd9 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -118,8 +118,7 @@ export const props = {
   List: {
     _component: "@budibase/materialdesign-components/List",
     variant: "two-line",
-    inputElement: "radiobutton",
-    singleSelection: true,
+    singleSelection: false,
     onSelect: selected => console.log(selected),
     _children: [
       {