Merge pull request #118 from Conor-Mack/feature/mdc-list

Adding List divider

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

@@ -1,59 +1,59 @@
 <script>
-  import { onMount } from "svelte";
-  import { MDCList } from "@material/list";
-  import { MDCRipple } from "@material/ripple";
-  import ListItem from "./ListItem.svelte";
-  import ClassBuilder from "../ClassBuilder.js";
+  import { onMount } from "svelte"
+  import { MDCList } from "@material/list"
+  import { MDCRipple } from "@material/ripple"
+  import ListItem from "./ListItem.svelte"
+  import ClassBuilder from "../ClassBuilder.js"
 
-  const cb = new ClassBuilder("list");
+  const cb = new ClassBuilder("list")
 
-  let list = null;
-  let instance = null;
+  let list = null
+  let instance = null
 
-  export let onSelect = selectedItems => {};
+  export let onSelect = selectedItems => {}
 
-  export let variant = "";
+  export let variant = ""
   //items: [{text: string | {primary: string, secondary: string}, value: any, selected: bool}...n]
-  export let items = [];
-  export let singleSelection = false;
-  export let inputElement = null;
+  export let items = []
+  export let singleSelection = false
+  export let inputElement = null
 
   onMount(() => {
     if (!!list) {
-      instance = new MDCList(list);
-      instance.singleSelection = singleSelection;
-      instance.listElements.map(element => new MDCRipple(element));
+      instance = new MDCList(list)
+      instance.singleSelection = singleSelection
+      instance.listElements.map(element => new MDCRipple(element))
     }
 
     return () => {
-      instance && instance.destroy();
-      instance = null;
-    };
-  });
+      instance && instance.destroy()
+      instance = null
+    }
+  })
 
   function handleSelectedItem(item) {
     if (singleSelection || inputElement === "radiobutton") {
       items.forEach(i => {
-        if (i.selected) i.selected = false;
-      });
+        if (i.selected) i.selected = false
+      })
     }
 
-    let idx = items.indexOf(item);
+    let idx = items.indexOf(item)
     if (!!item.selected) {
-      items[idx].selected = !item.selected;
+      items[idx].selected = !item.selected
     } else {
-      items[idx].selected = true;
+      items[idx].selected = true
     }
-    onSelect(items.filter(item => item.selected));
+    onSelect(items.filter(item => item.selected))
   }
 
   $: useDoubleLine =
     variant == "two-line" &&
-    items.every(i => typeof i.text == "object" && "primary" in i.text);
+    items.every(i => typeof i.text == "object" && "primary" in i.text)
 
-  $: modifiers = { variant };
-  $: props = { modifiers };
-  $: listClass = cb.build({ props });
+  $: modifiers = { variant }
+  $: props = { modifiers }
+  $: listClass = cb.build({ props })
 </script>
 
 <div class={listClass} role="listbox">
@@ -63,5 +63,8 @@
       {useDoubleLine}
       {inputElement}
       onClick={() => handleSelectedItem(item)} />
+    {#if item.divider}
+      <li role="separator" class="mdc-list-divider" />
+    {/if}
   {/each}
 </div>

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

@@ -112,11 +112,11 @@ export const props = {
       {
         text: { primary: "Curry", secondary: "Chicken or Beef" },
         value: 0,
+        divider: true,
       },
       {
         text: { primary: "Pastie", secondary: "Bap with Mayo" },
         value: 1,
-        selected: true,
       },
       { text: { primary: "Fish", secondary: "Salmon or Cod" }, value: 2 },
     ],