From eb9e7c02fc30b1b396c2dc07a34f700f8a4b4039 Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Mon, 2 Mar 2020 14:43:06 +0000
Subject: [PATCH] Completed menu component

---
 .../src/List/List.svelte                      | 29 +++++++------------
 .../src/List/ListItem.svelte                  |  6 ++--
 .../src/Menu/Menu.svelte                      | 27 +++++++----------
 .../src/Menu/_styles.scss                     |  1 +
 .../src/Test/TestApp.svelte                   |  4 +--
 .../src/Test/props.js                         |  5 ++--
 6 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/packages/materialdesign-components/src/List/List.svelte b/packages/materialdesign-components/src/List/List.svelte
index f1686c43ee..eae7018d1b 100644
--- a/packages/materialdesign-components/src/List/List.svelte
+++ b/packages/materialdesign-components/src/List/List.svelte
@@ -17,33 +17,24 @@
   export let onSelect = selectedItems => {}
 
   export let singleSelection = false
-  export let variant = "two-line"
+  export let variant = "one-line"
   export let inputElement = null
 
   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(() => {
-    createOrAcceptItemStore()
+    let ctx = getContext("BBMD:list:context")
 
-    if (!_bb.getContext("BBMD:list:props")) {
-      _bb.setContext("BBMD:list:props", {
-        inputElement,
-        variant,
-        singleSelection,
-      })
-    }
+    selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore))
+    _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
+
+    _bb.setContext("BBMD:list:props", {
+      inputElement,
+      variant,
+      singleSelection,
+    })
 
     if (!!list) {
       if (!inputElement) {
diff --git a/packages/materialdesign-components/src/List/ListItem.svelte b/packages/materialdesign-components/src/List/ListItem.svelte
index 775d73d2e2..979ea3e8b3 100644
--- a/packages/materialdesign-components/src/List/ListItem.svelte
+++ b/packages/materialdesign-components/src/List/ListItem.svelte
@@ -7,8 +7,6 @@
 
   const cb = new ClassBuilder("list-item")
 
-  export let onClick = item => {}
-
   let _id
   let listProps = null
 
@@ -24,6 +22,7 @@
   export let trailingIcon = ""
   export let selected = false
   export let disabled = false
+  export let dividerAfter = false
 
   let role = "option"
 
@@ -110,3 +109,6 @@
     </span>
   {/if}
 </li>
+{#if dividerAfter}
+  <li class="mdc-list-divider" role="separator" />
+{/if}
diff --git a/packages/materialdesign-components/src/Menu/Menu.svelte b/packages/materialdesign-components/src/Menu/Menu.svelte
index b601d38f3e..5782652376 100644
--- a/packages/materialdesign-components/src/Menu/Menu.svelte
+++ b/packages/materialdesign-components/src/Menu/Menu.svelte
@@ -6,7 +6,6 @@
 
   export let onSelect = selectedItems => {}
 
-  export let singleSelection = true
   export let width = "400px"
   export let open = true
   export let useFixedPosition = false
@@ -17,21 +16,16 @@
   export let _bb
 
   let menu = null
+  let menuList = null
   let instance = null
   let selectedItemsStore
 
-  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(() => {
-    createOrAcceptItemStore()
+    _bb.setContext("BBMD:list:context", "menu")
+    _bb.setContext("BBMD:list:props", { singleSelection: true })
+
+    selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore))
+    _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
 
     if (!!menu) {
       instance = new MDCMenu(menu)
@@ -43,8 +37,9 @@
         instance.setAbsolutePosition(x | 0, y | 0)
       }
     }
-    setContext("BBMD:list:context", "menu")
   })
+
+  $: menuList && _bb.attachChildren(menuList)
 </script>
 
 {#if useFixedPosition || useAbsolutePosition}
@@ -52,17 +47,17 @@
     bind:this={menu}
     class="mdc-menu mdc-menu-surface"
     style={`width: ${width}`}>
-    <List {singleSelection} {_bb} />
+    <ul bind:this={menuList} class="mdc-list" role="menu" />
   </div>
 {:else}
   <div class="mdc-menu-surface--anchor">
-    <!-- Will automatically anchor to slotted element -->
+    <!--TODO: Will automatically anchor to slotted element. Not sure how this would be achieved with Budibase though -->
     <slot />
     <div
       bind:this={menu}
       class="mdc-menu mdc-menu-surface"
       style={`width: ${width}`}>
-      <List {singleSelection} {_bb} />
+      <ul bind:this={menuList} class="mdc-list" role="menu" />
     </div>
   </div>
 {/if}
diff --git a/packages/materialdesign-components/src/Menu/_styles.scss b/packages/materialdesign-components/src/Menu/_styles.scss
index 13bd3f1d98..596b6a96da 100644
--- a/packages/materialdesign-components/src/Menu/_styles.scss
+++ b/packages/materialdesign-components/src/Menu/_styles.scss
@@ -1,2 +1,3 @@
+@import "@material/list/mdc-list.scss";
 @import "@material/menu-surface/mdc-menu-surface.scss";
 @import "@material/menu/mdc-menu.scss";
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index d7bb53662c..e4320e94e9 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -14,9 +14,9 @@
     Radiobuttongroup,
     Datatable,
     CustomersIndexTable,
-    List,
     Icon,
     Menu,
+    List,
   } = props
 
   let currentComponent
@@ -36,8 +36,8 @@
             Icon,
             Datatable,
             CustomersIndexTable,
-            List,
             Menu,
+            List,
           ],
         },
       }
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index f83bb846d3..039f056365 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -119,7 +119,7 @@ export const props = {
     _component: "@budibase/materialdesign-components/List",
     variant: "two-line",
     singleSelection: false,
-    onSelect: selected => console.log(selected),
+    onSelect: selected => console.log("LIST SELECT", selected),
     _children: [
       {
         _component: "@budibase/materialdesign-components/ListItem",
@@ -148,6 +148,7 @@ export const props = {
   },
   Menu: {
     _component: "@budibase/materialdesign-components/Menu",
+    onSelect: items => console.log("MENU SELECT", items),
     _children: [
       {
         _component: "@budibase/materialdesign-components/ListItem",
@@ -168,5 +169,5 @@ export const props = {
         value: 2,
       },
     ],
-  }
+  },
 }