Skip to content

Commit 28c59a9

Browse files
metonymmetonym
committed
feat(loading): integrate Loading, InlineLoading with v11
1 parent 52adc77 commit 28c59a9

File tree

5 files changed

+35
-49
lines changed

5 files changed

+35
-49
lines changed

‎COMPONENT_INDEX.md

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1910,12 +1910,12 @@ None.
19101910

19111911
### Props
19121912

1913-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
1914-
| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------- |
1915-
| status | No | <code>let</code> | No | <code>"active" &#124; "inactive" &#124; "finished" &#124; "error"</code> | <code>"active"</code> | Set the loading status |
1916-
| description | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the loading description |
1917-
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a description for the loading icon.<br />Defaults to the `status` prop for the "error" and "finished" states |
1918-
| successDelay | No | <code>let</code> | No | <code>number</code> | <code>1500</code> | Specify the timeout delay (ms) after `status` is set to "success" |
1913+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
1914+
| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
1915+
| status | No | <code>let</code> | No | <code>"active" &#124; "inactive" &#124; "finished" &#124; "error"</code> | <code>"active"</code> | Set the loading status |
1916+
| description | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the loading description |
1917+
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a description for the loading icon.<br />Defaults to the `status` value for the<br /> "error" and "finished" states. |
1918+
| successDelay | No | <code>let</code> | No | <code>number</code> | <code>1500</code> | Specify the timeout delay (ms) after `status` is set to "finished".<br />The `on:success` event will be dispatched after this delay. |
19191919

19201920
### Slots
19211921

@@ -1925,10 +1925,6 @@ None.
19251925

19261926
| Event name | Type | Detail |
19271927
| :--------- | :--------- | :---------------- |
1928-
| click | forwarded | -- |
1929-
| mouseover | forwarded | -- |
1930-
| mouseenter | forwarded | -- |
1931-
| mouseleave | forwarded | -- |
19321928
| success | dispatched | <code>null</code> |
19331929

19341930
## `InlineNotification`

‎docs/src/COMPONENT_API.json

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5543,7 +5543,7 @@
55435543
{
55445544
"name": "iconDescription",
55455545
"kind": "let",
5546-
"description": "Specify a description for the loading icon.\nDefaults to the `status` prop for the \"error\" and \"finished\" states",
5546+
"description": "Specify a description for the loading icon.\nDefaults to the `status` value for the\n \"error\" and \"finished\" states.",
55475547
"type": "string",
55485548
"isFunction": false,
55495549
"isFunctionDeclaration": false,
@@ -5554,7 +5554,7 @@
55545554
{
55555555
"name": "successDelay",
55565556
"kind": "let",
5557-
"description": "Specify the timeout delay (ms) after `status` is set to \"success\"",
5557+
"description": "Specify the timeout delay (ms) after `status` is set to \"finished\".\nThe `on:success` event will be dispatched after this delay.",
55585558
"type": "number",
55595559
"value": "1500",
55605560
"isFunction": false,
@@ -5566,13 +5566,7 @@
55665566
],
55675567
"moduleExports": [],
55685568
"slots": [],
5569-
"events": [
5570-
{ "type": "forwarded", "name": "click", "element": "div" },
5571-
{ "type": "forwarded", "name": "mouseover", "element": "div" },
5572-
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
5573-
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
5574-
{ "type": "dispatched", "name": "success", "detail": "null" }
5575-
],
5569+
"events": [{ "type": "dispatched", "name": "success", "detail": "null" }],
55765570
"typedefs": [],
55775571
"rest_props": { "type": "Element", "name": "div" }
55785572
},

‎src/InlineLoading/InlineLoading.svelte

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script>
2+
// @ts-check
3+
24
/**
35
* Set the loading status
46
* @type {"active" | "inactive" | "finished" | "error"}
@@ -13,21 +15,27 @@
1315
1416
/**
1517
* Specify a description for the loading icon.
16-
* Defaults to the `status` prop for the "error" and "finished" states
18+
* Defaults to the `status` value for the
19+
* "error" and "finished" states.
1720
* @type {string}
1821
*/
1922
export let iconDescription = undefined;
2023
21-
/** Specify the timeout delay (ms) after `status` is set to "success" */
24+
/**
25+
* Specify the timeout delay (ms) after `status` is set to "finished".
26+
* The `on:success` event will be dispatched after this delay.
27+
*/
2228
export let successDelay = 1500;
2329
24-
import { createEventDispatcher, afterUpdate, onMount } from "svelte";
30+
import { createEventDispatcher, onMount } from "svelte";
2531
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
2632
import ErrorFilled from "../icons/ErrorFilled.svelte";
2733
import Loading from "../Loading/Loading.svelte";
2834
35+
/** @type {import("svelte").EventDispatcher<{ success: null }>} */
2936
const dispatch = createEventDispatcher();
3037
38+
/** @type {NodeJS.Timeout} */
3139
let timeout = undefined;
3240
3341
onMount(() => {
@@ -36,26 +44,16 @@
3644
};
3745
});
3846
39-
afterUpdate(() => {
40-
if (status === "finished") {
41-
timeout = setTimeout(() => {
42-
dispatch("success");
43-
}, successDelay);
44-
}
45-
});
47+
$: if (status === "finished") {
48+
if (timeout) clearTimeout(timeout);
49+
50+
timeout = setTimeout(() => {
51+
dispatch("success");
52+
}, successDelay);
53+
}
4654
</script>
4755

48-
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
49-
<!-- svelte-ignore a11y-no-static-element-interactions -->
50-
<div
51-
class:bx--inline-loading="{true}"
52-
aria-live="assertive"
53-
{...$$restProps}
54-
on:click
55-
on:mouseover
56-
on:mouseenter
57-
on:mouseleave
58-
>
56+
<div class:bx--inline-loading="{true}" aria-live="assertive" {...$$restProps}>
5957
<div class:bx--inline-loading__animation="{true}">
6058
{#if status === "error"}
6159
<ErrorFilled

‎src/Loading/Loading.svelte

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script>
2+
// @ts-check
3+
24
/** Set to `true` to use the small variant */
35
export let small = false;
46

‎types/InlineLoading/InlineLoading.svelte.d.ts

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,15 @@ export interface InlineLoadingProps extends RestProps {
1818

1919
/**
2020
* Specify a description for the loading icon.
21-
* Defaults to the `status` prop for the "error" and "finished" states
21+
* Defaults to the `status` value for the
22+
* "error" and "finished" states.
2223
* @default undefined
2324
*/
2425
iconDescription?: string;
2526

2627
/**
27-
* Specify the timeout delay (ms) after `status` is set to "success"
28+
* Specify the timeout delay (ms) after `status` is set to "finished".
29+
* The `on:success` event will be dispatched after this delay.
2830
* @default 1500
2931
*/
3032
successDelay?: number;
@@ -34,12 +36,6 @@ export interface InlineLoadingProps extends RestProps {
3436

3537
export default class InlineLoading extends SvelteComponentTyped<
3638
InlineLoadingProps,
37-
{
38-
click: WindowEventMap["click"];
39-
mouseover: WindowEventMap["mouseover"];
40-
mouseenter: WindowEventMap["mouseenter"];
41-
mouseleave: WindowEventMap["mouseleave"];
42-
success: CustomEvent<null>;
43-
},
39+
{ success: CustomEvent<null> },
4440
{}
4541
> {}

0 commit comments

Comments
 (0)