mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor(timeout): move setTimeout to afterUpdate method

Browse source
This commit is contained in:
Eric Liu 2019-12-25 06:21:09 -08:00
commit 2cac297abf
3 changed files with 23 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/Copy/Copy.svelte
View file

@ -11,10 +11,8 @@
let timeoutId = undefined;
onDestroy(() => {
if (timeoutId !== undefined) {
window.clearTimeout(timeoutId);
timeoutId = undefined;
}
window.clearTimeout(timeoutId);
timeoutId = undefined;
});
$: showFeedback = timeoutId !== undefined;

19
src/components/CopyButton/CopyButton.svelte
View file

@ -6,19 +6,25 @@
export let feedbackTimeout = 2000;
export let style = undefined;
import { onDestroy } from 'svelte';
import { afterUpdate, onDestroy } from 'svelte';
import Copy16 from 'carbon-icons-svelte/lib/Copy16';
import { cx } from '../../lib';
let animation = undefined;
let timeoutId = undefined;
onDestroy(() => {
if (timeoutId !== undefined) {
window.clearTimeout(timeoutId);
timeoutId = undefined;
afterUpdate(() => {
if (animation === 'fade-in') {
timeoutId = window.setTimeout(() => {
animation = 'fade-out';
}, feedbackTimeout);
}
});
onDestroy(() => {
window.clearTimeout(timeoutId);
timeoutId = undefined;
});
</script>
<button
@ -30,9 +36,6 @@
on:click
on:click={() => {
animation = 'fade-in';
timeoutId = window.setTimeout(() => {
animation = 'fade-out';
}, feedbackTimeout);
}}
on:mouseover
on:mouseenter

20
src/components/InlineLoading/InlineLoading.svelte
View file

@ -7,7 +7,7 @@
export let successDelay = 1500;
export let style = undefined;
import { createEventDispatcher, onDestroy } from 'svelte';
import { createEventDispatcher, afterUpdate, onDestroy } from 'svelte';
import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
import Error20 from 'carbon-icons-svelte/lib/Error20';
import { cx } from '../../lib';
@ -17,18 +17,18 @@
let timeoutId = undefined;
onDestroy(() => {
if (timeoutId !== undefined) {
window.clearTimeout(timeoutId);
timeoutId = undefined;
afterUpdate(() => {
if (status === 'finished') {
timeoutId = window.setTimeout(() => {
dispatch('success');
}, successDelay);
}
});
$: if (status === 'finished') {
timeoutId = window.setTimeout(() => {
dispatch('success');
}, successDelay);
}
onDestroy(() => {
window.clearTimeout(timeoutId);
timeoutId = undefined;
});
</script>
<div