From c17f6bb2a5b584b138c1e4e7300a6fc76dbb388b Mon Sep 17 00:00:00 2001
From: Conor-Mack <cmckeown101@gmail.com>
Date: Mon, 17 Feb 2020 17:01:57 +0000
Subject: [PATCH] WIP: Beginnings of Datatable component

---
 .../materialdesign-components/package.json    |  1 +
 .../src/Datatable/Datatable.svelte            | 44 +++++++++++++++++++
 .../src/Datatable/DatatableCell.svelte        | 23 ++++++++++
 .../src/Datatable/DatatableRow.svelte         | 18 ++++++++
 .../src/Datatable/_style.scss                 |  0
 .../src/Datatable/index.js                    |  0
 6 files changed, 86 insertions(+)
 create mode 100644 packages/materialdesign-components/src/Datatable/Datatable.svelte
 create mode 100644 packages/materialdesign-components/src/Datatable/DatatableCell.svelte
 create mode 100644 packages/materialdesign-components/src/Datatable/DatatableRow.svelte
 create mode 100644 packages/materialdesign-components/src/Datatable/_style.scss
 create mode 100644 packages/materialdesign-components/src/Datatable/index.js

diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json
index 48fc769d26..543fbcdf59 100644
--- a/packages/materialdesign-components/package.json
+++ b/packages/materialdesign-components/package.json
@@ -41,6 +41,7 @@
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072",
   "dependencies": {
     "@material/checkbox": "^4.0.0",
+    "@material/data-table": "^5.0.0",
     "@material/form-field": "^4.0.0",
     "@material/radio": "^4.0.0",
     "@material/textfield": "^4.0.0"
diff --git a/packages/materialdesign-components/src/Datatable/Datatable.svelte b/packages/materialdesign-components/src/Datatable/Datatable.svelte
new file mode 100644
index 0000000000..1e15eb25bb
--- /dev/null
+++ b/packages/materialdesign-components/src/Datatable/Datatable.svelte
@@ -0,0 +1,44 @@
+<script>
+  import { onMount, setContext } from "svelte"
+  import { MDCDataTable } from "@material/data-table"
+  import DatatableRow from "./DatatableRow.svelte"
+  import DatatableCell from "./DatatableCell.svelte"
+  import ClassBuilder from "../ClassBuilder.js"
+
+  const cb = new ClassBuilder("data-table")
+  setContext("BBMD:data-table:cb", cb)
+
+  let datatable = null
+  let instance = null
+
+  onMount(() => {
+    if (!!datatable) instance = new MDCDataTable(datatable)
+    return () => {
+      !!instance && instance.destroy()
+      instance = null
+    }
+  })
+</script>
+
+<div class={cb.block()}>
+  <table class={cb.elem`table`} aria-label="Material Design Datatable">
+    <thead>
+      <DatatableRow isHeader>
+        <DatatableCell isHeader>Id</DatatableCell>
+        <DatatableCell isHeader>First Name</DatatableCell>
+        <DatatableCell isHeader>Second Name</DatatableCell>
+        <DatatableCell isHeader>Gender</DatatableCell>
+        <DatatableCell isHeader>Address</DatatableCell>
+      </DatatableRow>
+    </thead>
+    <tbody class={cb.elem`content`}>
+      <DatatableRow>
+        <DatatableCell numeric>123456</DatatableCell>
+        <DatatableCell>Conor</DatatableCell>
+        <DatatableCell>McKeown</DatatableCell>
+        <DatatableCell>Male</DatatableCell>
+        <DatatableCell>1 Cool Street</DatatableCell>
+      </DatatableRow>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/materialdesign-components/src/Datatable/DatatableCell.svelte b/packages/materialdesign-components/src/Datatable/DatatableCell.svelte
new file mode 100644
index 0000000000..beb078d7cb
--- /dev/null
+++ b/packages/materialdesign-components/src/Datatable/DatatableCell.svelte
@@ -0,0 +1,23 @@
+<script>
+  import { getContext } from "svelte"
+
+  export let isHeader = false
+  export let numeric = false
+
+  const cb = getContext("BBMD:data-table:cb")
+
+  let elementName = isHeader ? "header-cell" : "cell"
+  let modifiers = { numeric }
+  let props = { modifiers }
+  let cellClass = cb.build({ elementName, props })
+</script>
+
+{#if isHeader}
+  <th class={cellClass} role="columnheader" scope="col">
+    <slot />
+  </th>
+{:else}
+  <td class={cellClass}>
+    <slot />
+  </td>
+{/if}
diff --git a/packages/materialdesign-components/src/Datatable/DatatableRow.svelte b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte
new file mode 100644
index 0000000000..5cb03366f3
--- /dev/null
+++ b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { getContext } from "svelte"
+
+  export let isHeader = false
+  let selected = false
+
+  const cb = getContext("BBMD:data-table:cb")
+
+  let elementName = isHeader ? "header-row" : "row"
+  let modifiers = { selected }
+  let props = { modifiers }
+
+  let rowClass = cb.build({ elementName, props })
+</script>
+
+<tr class={rowClass} on:click={() => (selected = !selected)}>
+  <slot />
+</tr>
diff --git a/packages/materialdesign-components/src/Datatable/_style.scss b/packages/materialdesign-components/src/Datatable/_style.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/materialdesign-components/src/Datatable/index.js b/packages/materialdesign-components/src/Datatable/index.js
new file mode 100644
index 0000000000..e69de29bb2