Skip to content

Commit b6e5cd6

Browse files
hperrinhperrin
committed
feat: new Data Table Progress Indicator component
1 parent 267f31d commit b6e5cd6

File tree

5 files changed

+109
-2
lines changed

5 files changed

+109
-2
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,7 @@ New components from the upstream library to build for SMUI v3:
280280
- [x] Tooltips
281281
- [x] Touch Target Wrappers
282282
- [x] Data Table Pagination
283-
- [ ] Data Table Progress Indicator
283+
- [x] Data Table Progress Indicator
284284
- [ ] Data Table Column Sort Buttons
285285
286286
<sub>† This is Sass based, and therefore doesn't require Svelte components. I've included a demo showing how you can use it.</sub>

‎packages/data-table/DataTable.svelte

+31
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,27 @@
4141
</table>
4242
</div>
4343

44+
{#if $$slots.progress}
45+
<div class="mdc-data-table__progress-indicator">
46+
<slot name="progress" />
47+
</div>
48+
{#if !$progressClosed}
49+
<!--
50+
MDC docs put this under mdc-data-table__progress-indicator,
51+
but then it doesn't cover the table, so I think it goes here.
52+
-->
53+
<div class="mdc-data-table__scrim" />
54+
{/if}
55+
{/if}
56+
4457
<slot name="paginate" />
4558
</div>
4659

4760
<script>
4861
import { MDCDataTableFoundation } from '@material/data-table';
4962
import { closest } from '@material/dom/ponyfill';
5063
import { onMount, onDestroy, getContext, setContext } from 'svelte';
64+
import { writable } from 'svelte/store';
5165
import { get_current_component } from 'svelte/internal';
5266
import {
5367
forwardEventsBuilder,
@@ -78,13 +92,30 @@
7892
let addLayoutListener = getContext('SMUI:addLayoutListener');
7993
let removeLayoutListener;
8094
let postMount = false;
95+
let progressClosed = writable(false);
8196
8297
setContext('SMUI:checkbox:context', 'data-table');
98+
setContext('SMUI:linear-progress:context', 'data-table');
99+
setContext('SMUI:linear-progress:closed', progressClosed);
83100
84101
if (addLayoutListener) {
85102
removeLayoutListener = addLayoutListener(layout);
86103
}
87104
105+
let previousProgressClosed = null;
106+
$: if (
107+
$$slots.progress &&
108+
instance &&
109+
previousProgressClosed !== $progressClosed
110+
) {
111+
previousProgressClosed = $progressClosed;
112+
if ($progressClosed) {
113+
instance.hideProgress();
114+
} else {
115+
instance.showProgress();
116+
}
117+
}
118+
88119
onMount(() => {
89120
instance = new MDCDataTableFoundation({
90121
addClass,

‎packages/linear-progress/LinearProgress.svelte

+8-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
'mdc-linear-progress': true,
88
'mdc-linear-progress--indeterminate': indeterminate,
99
'mdc-linear-progress--closed': closed,
10+
'mdc-data-table__linear-progress': context === 'data-table',
1011
...internalClasses,
1112
})}
1213
style={Object.entries(internalStyles)
@@ -45,7 +46,7 @@
4546

4647
<script>
4748
import { MDCLinearProgressFoundation } from '@material/linear-progress';
48-
import { onMount } from 'svelte';
49+
import { onMount, getContext } from 'svelte';
4950
import { get_current_component } from 'svelte/internal';
5051
import {
5152
forwardEventsBuilder,
@@ -71,6 +72,12 @@
7172
let internalStyles = {};
7273
let bufferBarStyles = {};
7374
let primaryBarStyles = {};
75+
let context = getContext('SMUI:linear-progress:context');
76+
let closedStore = getContext('SMUI:linear-progress:closed');
77+
78+
$: if (closedStore) {
79+
$closedStore = closed;
80+
}
7481
7582
$: if (instance && instance.getDeterminate() !== !indeterminate) {
7683
instance.setDeterminate(!indeterminate);

‎site/src/routes/demo/data-table/_ProgressIndicator.svelte

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<DataTable table$aria-label="Todo list" style="width: 100%;">
2+
<Head>
3+
<Row>
4+
<Cell numeric>ID</Cell>
5+
<Cell style="width: 100%;">Name</Cell>
6+
<Cell>Username</Cell>
7+
<Cell>Email</Cell>
8+
</Row>
9+
</Head>
10+
<Body>
11+
{#each items as item (item.id)}
12+
<Row>
13+
<Cell numeric>{item.id}</Cell>
14+
<Cell>{item.name}</Cell>
15+
<Cell>{item.username}</Cell>
16+
<Cell>{item.email}</Cell>
17+
</Row>
18+
{/each}
19+
</Body>
20+
21+
<LinearProgress
22+
indeterminate
23+
bind:closed={loaded}
24+
aria-label="Data is being loaded..."
25+
slot="progress"
26+
/>
27+
</DataTable>
28+
29+
<div style="margin-top: 1em;">
30+
<Button on:click={() => loadThings(true)}>Do Pretend Loading</Button>
31+
</div>
32+
33+
<script>
34+
import DataTable, { Head, Body, Row, Cell } from '@smui/data-table';
35+
import LinearProgress from '@smui/linear-progress';
36+
import Button from '@smui/button';
37+
38+
let items = [];
39+
let loaded = false;
40+
41+
loadThings(false);
42+
43+
function loadThings(wait) {
44+
if (typeof fetch !== 'undefined') {
45+
loaded = false;
46+
47+
fetch('https://jsonplaceholder.typicode.com/users')
48+
.then((response) => response.json())
49+
.then((json) =>
50+
setTimeout(
51+
() => {
52+
items = json;
53+
loaded = true;
54+
},
55+
// Simulate a long load time.
56+
wait ? 2000 : 0
57+
)
58+
);
59+
}
60+
}
61+
</script>

‎site/src/routes/demo/data-table/index.svelte

+8
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@
99

1010
<Demo component={Simple} file="data-table/_Simple.svelte" />
1111

12+
<Demo
13+
component={ProgressIndicator}
14+
file="data-table/_ProgressIndicator.svelte"
15+
>
16+
Progress indicator
17+
</Demo>
18+
1219
<Demo component={RowSelection} file="data-table/_RowSelection.svelte">
1320
Row selection
1421
</Demo>
@@ -21,6 +28,7 @@
2128
<script>
2229
import Demo from '../../../components/Demo.svelte';
2330
import Simple from './_Simple.svelte';
31+
import ProgressIndicator from './_ProgressIndicator.svelte';
2432
import RowSelection from './_RowSelection.svelte';
2533
import Pagination from './_Pagination.svelte';
2634
</script>

0 commit comments

Comments
 (0)