mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
fix: clear timeout in onMount return function
This commit is contained in:
parent
bd6bd15c79
commit
fff54a19eb
3 changed files with 23 additions and 21 deletions
|
@ -3,15 +3,17 @@
|
||||||
export let feedbackTimeout = 2000;
|
export let feedbackTimeout = 2000;
|
||||||
export let ref = null;
|
export let ref = null;
|
||||||
|
|
||||||
import { onDestroy } from "svelte";
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
$: animation = undefined;
|
let animation = undefined;
|
||||||
$: timeoutId = undefined;
|
let timeout = undefined;
|
||||||
$: showFeedback = timeoutId !== undefined;
|
|
||||||
|
|
||||||
onDestroy(() => {
|
$: showFeedback = timeout !== undefined;
|
||||||
window.clearTimeout(timeoutId);
|
|
||||||
timeoutId = undefined;
|
onMount(() => {
|
||||||
|
return () => {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
};
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -29,7 +31,7 @@
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
if (animation === 'fade-in') return;
|
if (animation === 'fade-in') return;
|
||||||
animation = 'fade-in';
|
animation = 'fade-in';
|
||||||
timeoutId = setTimeout(() => {
|
timeout = setTimeout(() => {
|
||||||
animation = 'fade-out';
|
animation = 'fade-out';
|
||||||
}, feedbackTimeout);
|
}, feedbackTimeout);
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -4,27 +4,28 @@
|
||||||
export let iconDescription = undefined;
|
export let iconDescription = undefined;
|
||||||
export let successDelay = 1500;
|
export let successDelay = 1500;
|
||||||
|
|
||||||
import { createEventDispatcher, afterUpdate, onDestroy } from "svelte";
|
import { createEventDispatcher, afterUpdate, onMount } from "svelte";
|
||||||
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
|
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
|
||||||
import Error20 from "carbon-icons-svelte/lib/Error20";
|
import Error20 from "carbon-icons-svelte/lib/Error20";
|
||||||
import { Loading } from "../Loading";
|
import { Loading } from "../Loading";
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
$: timeoutId = undefined;
|
let timeout = undefined;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
return () => {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
afterUpdate(() => {
|
afterUpdate(() => {
|
||||||
if (status === "finished") {
|
if (status === "finished") {
|
||||||
timeoutId = window.setTimeout(() => {
|
timeout = setTimeout(() => {
|
||||||
dispatch("success");
|
dispatch("success");
|
||||||
}, successDelay);
|
}, successDelay);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
onDestroy(() => {
|
|
||||||
window.clearTimeout(timeoutId);
|
|
||||||
timeoutId = undefined;
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -17,19 +17,18 @@
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
$: open = true;
|
let open = true;
|
||||||
$: timeoutId = undefined;
|
let timeoutId = undefined;
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
if (timeout) {
|
if (timeout) {
|
||||||
timeoutId = window.setTimeout(() => {
|
timeoutId = setTimeout(() => {
|
||||||
open = false;
|
open = false;
|
||||||
}, timeout);
|
}, timeout);
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
window.clearTimeout(timeoutId);
|
clearTimeout(timeoutId);
|
||||||
timeoutId = undefined;
|
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue