mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +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; let timeoutId = undefined;
onDestroy(() => { onDestroy(() => {
if (timeoutId !== undefined) { window.clearTimeout(timeoutId);
window.clearTimeout(timeoutId); timeoutId = undefined;
timeoutId = undefined;
}
}); });
$: showFeedback = timeoutId !== undefined; $: showFeedback = timeoutId !== undefined;

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

@ -6,19 +6,25 @@
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;
onDestroy(() => { afterUpdate(() => {
if (timeoutId !== undefined) { if (animation === 'fade-in') {
window.clearTimeout(timeoutId); timeoutId = window.setTimeout(() => {
timeoutId = undefined; animation = 'fade-out';
}, feedbackTimeout);
} }
}); });
onDestroy(() => {
window.clearTimeout(timeoutId);
timeoutId = undefined;
});
</script> </script>
<button <button
@ -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

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

@ -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 = window.setTimeout(() => {
timeoutId = undefined; dispatch('success');
}, successDelay);
} }
}); });
$: if (status === 'finished') { onDestroy(() => {
timeoutId = window.setTimeout(() => { window.clearTimeout(timeoutId);
dispatch('success'); timeoutId = undefined;
}, successDelay); });
}
</script> </script>
<div <div