feat: new Data Table Progress Indicator component

hperrin · Apr 17, 2021 · b6e5cd6 · b6e5cd6
1 parent 267f31d
commit b6e5cd6
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -280,7 +280,7 @@ New components from the upstream library to build for SMUI v3:
 - [x] Tooltips
 - [x] Touch Target Wrappers
 - [x] Data Table Pagination
-- [ ] Data Table Progress Indicator
+- [x] Data Table Progress Indicator
 - [ ] Data Table Column Sort Buttons
 
 <sub>† This is Sass based, and therefore doesn't require Svelte components. I've included a demo showing how you can use it.</sub>

diff --git a/packages/data-table/DataTable.svelte b/packages/data-table/DataTable.svelte
@@ -41,13 +41,27 @@
     </table>
   </div>
 
+  {#if $$slots.progress}
+    <div class="mdc-data-table__progress-indicator">
+      <slot name="progress" />
+    </div>
+    {#if !$progressClosed}
+      <!--
+        MDC docs put this under mdc-data-table__progress-indicator,
+        but then it doesn't cover the table, so I think it goes here.
+      -->
+      <div class="mdc-data-table__scrim" />
+    {/if}
+  {/if}
+
   <slot name="paginate" />
 </div>
 
 <script>
   import { MDCDataTableFoundation } from '@material/data-table';
   import { closest } from '@material/dom/ponyfill';
   import { onMount, onDestroy, getContext, setContext } from 'svelte';
+  import { writable } from 'svelte/store';
   import { get_current_component } from 'svelte/internal';
   import {
     forwardEventsBuilder,
@@ -78,13 +92,30 @@
   let addLayoutListener = getContext('SMUI:addLayoutListener');
   let removeLayoutListener;
   let postMount = false;
+  let progressClosed = writable(false);
 
   setContext('SMUI:checkbox:context', 'data-table');
+  setContext('SMUI:linear-progress:context', 'data-table');
+  setContext('SMUI:linear-progress:closed', progressClosed);
 
   if (addLayoutListener) {
     removeLayoutListener = addLayoutListener(layout);
   }
 
+  let previousProgressClosed = null;
+  $: if (
+    $$slots.progress &&
+    instance &&
+    previousProgressClosed !== $progressClosed
+  ) {
+    previousProgressClosed = $progressClosed;
+    if ($progressClosed) {
+      instance.hideProgress();
+    } else {
+      instance.showProgress();
+    }
+  }
+
   onMount(() => {
     instance = new MDCDataTableFoundation({
       addClass,

diff --git a/packages/linear-progress/LinearProgress.svelte b/packages/linear-progress/LinearProgress.svelte
@@ -7,6 +7,7 @@
     'mdc-linear-progress': true,
     'mdc-linear-progress--indeterminate': indeterminate,
     'mdc-linear-progress--closed': closed,
+    'mdc-data-table__linear-progress': context === 'data-table',
     ...internalClasses,
   })}
   style={Object.entries(internalStyles)
@@ -45,7 +46,7 @@
 
 <script>
   import { MDCLinearProgressFoundation } from '@material/linear-progress';
-  import { onMount } from 'svelte';
+  import { onMount, getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
   import {
     forwardEventsBuilder,
@@ -71,6 +72,12 @@
   let internalStyles = {};
   let bufferBarStyles = {};
   let primaryBarStyles = {};
+  let context = getContext('SMUI:linear-progress:context');
+  let closedStore = getContext('SMUI:linear-progress:closed');
+
+  $: if (closedStore) {
+    $closedStore = closed;
+  }
 
   $: if (instance && instance.getDeterminate() !== !indeterminate) {
     instance.setDeterminate(!indeterminate);

diff --git a/site/src/routes/demo/data-table/_ProgressIndicator.svelte b/site/src/routes/demo/data-table/_ProgressIndicator.svelte
@@ -0,0 +1,61 @@
+<DataTable table$aria-label="Todo list" style="width: 100%;">
+  <Head>
+    <Row>
+      <Cell numeric>ID</Cell>
+      <Cell style="width: 100%;">Name</Cell>
+      <Cell>Username</Cell>
+      <Cell>Email</Cell>
+    </Row>
+  </Head>
+  <Body>
+    {#each items as item (item.id)}
+      <Row>
+        <Cell numeric>{item.id}</Cell>
+        <Cell>{item.name}</Cell>
+        <Cell>{item.username}</Cell>
+        <Cell>{item.email}</Cell>
+      </Row>
+    {/each}
+  </Body>
+
+  <LinearProgress
+    indeterminate
+    bind:closed={loaded}
+    aria-label="Data is being loaded..."
+    slot="progress"
+  />
+</DataTable>
+
+<div style="margin-top: 1em;">
+  <Button on:click={() => loadThings(true)}>Do Pretend Loading</Button>
+</div>
+
+<script>
+  import DataTable, { Head, Body, Row, Cell } from '@smui/data-table';
+  import LinearProgress from '@smui/linear-progress';
+  import Button from '@smui/button';
+
+  let items = [];
+  let loaded = false;
+
+  loadThings(false);
+
+  function loadThings(wait) {
+    if (typeof fetch !== 'undefined') {
+      loaded = false;
+
+      fetch('https://jsonplaceholder.typicode.com/users')
+        .then((response) => response.json())
+        .then((json) =>
+          setTimeout(
+            () => {
+              items = json;
+              loaded = true;
+            },
+            // Simulate a long load time.
+            wait ? 2000 : 0
+          )
+        );
+    }
+  }
+</script>
diff --git a/site/src/routes/demo/data-table/index.svelte b/site/src/routes/demo/data-table/index.svelte
@@ -9,6 +9,13 @@
 
   <Demo component={Simple} file="data-table/_Simple.svelte" />
 
+  <Demo
+    component={ProgressIndicator}
+    file="data-table/_ProgressIndicator.svelte"
+  >
+    Progress indicator
+  </Demo>
+
   <Demo component={RowSelection} file="data-table/_RowSelection.svelte">
     Row selection
   </Demo>
@@ -21,6 +28,7 @@
 <script>
   import Demo from '../../../components/Demo.svelte';
   import Simple from './_Simple.svelte';
+  import ProgressIndicator from './_ProgressIndicator.svelte';
   import RowSelection from './_RowSelection.svelte';
   import Pagination from './_Pagination.svelte';
 </script>