mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
refactor(timeout): move setTimeout to afterUpdate method
This commit is contained in:
parent
7a612e60cf
commit
2cac297abf
3 changed files with 23 additions and 22 deletions
|
@ -11,10 +11,8 @@
|
||||||
let timeoutId = undefined;
|
let timeoutId = undefined;
|
||||||
|
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
if (timeoutId !== undefined) {
|
|
||||||
window.clearTimeout(timeoutId);
|
window.clearTimeout(timeoutId);
|
||||||
timeoutId = undefined;
|
timeoutId = undefined;
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$: showFeedback = timeoutId !== undefined;
|
$: showFeedback = timeoutId !== undefined;
|
||||||
|
|
|
@ -6,18 +6,24 @@
|
||||||
export let feedbackTimeout = 2000;
|
export let feedbackTimeout = 2000;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
import { onDestroy } from 'svelte';
|
import { afterUpdate, onDestroy } from 'svelte';
|
||||||
import Copy16 from 'carbon-icons-svelte/lib/Copy16';
|
import Copy16 from 'carbon-icons-svelte/lib/Copy16';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
let animation = undefined;
|
let animation = undefined;
|
||||||
let timeoutId = undefined;
|
let timeoutId = undefined;
|
||||||
|
|
||||||
|
afterUpdate(() => {
|
||||||
|
if (animation === 'fade-in') {
|
||||||
|
timeoutId = window.setTimeout(() => {
|
||||||
|
animation = 'fade-out';
|
||||||
|
}, feedbackTimeout);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
if (timeoutId !== undefined) {
|
|
||||||
window.clearTimeout(timeoutId);
|
window.clearTimeout(timeoutId);
|
||||||
timeoutId = undefined;
|
timeoutId = undefined;
|
||||||
}
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -30,9 +36,6 @@
|
||||||
on:click
|
on:click
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
animation = 'fade-in';
|
animation = 'fade-in';
|
||||||
timeoutId = window.setTimeout(() => {
|
|
||||||
animation = 'fade-out';
|
|
||||||
}, feedbackTimeout);
|
|
||||||
}}
|
}}
|
||||||
on:mouseover
|
on:mouseover
|
||||||
on:mouseenter
|
on:mouseenter
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
export let successDelay = 1500;
|
export let successDelay = 1500;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
import { createEventDispatcher, onDestroy } from 'svelte';
|
import { createEventDispatcher, afterUpdate, onDestroy } 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 { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
@ -17,18 +17,18 @@
|
||||||
|
|
||||||
let timeoutId = undefined;
|
let timeoutId = undefined;
|
||||||
|
|
||||||
onDestroy(() => {
|
afterUpdate(() => {
|
||||||
if (timeoutId !== undefined) {
|
if (status === 'finished') {
|
||||||
window.clearTimeout(timeoutId);
|
|
||||||
timeoutId = undefined;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$: if (status === 'finished') {
|
|
||||||
timeoutId = window.setTimeout(() => {
|
timeoutId = window.setTimeout(() => {
|
||||||
dispatch('success');
|
dispatch('success');
|
||||||
}, successDelay);
|
}, successDelay);
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
window.clearTimeout(timeoutId);
|
||||||
|
timeoutId = undefined;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue