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(inline-loading): remove exported props

Browse source 
Supports #7
This commit is contained in:
Eric Liu 2019-12-18 09:26:31 -08:00
commit 7a21a3150e
2 changed files with 12 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/InlineLoading/InlineLoading.Story.svelte
View file

@ -41,10 +41,6 @@
display: flex; display: flex;
width: 300px; width: 300px;
} }
:global(.loader) {
margin-left: 1rem;
}
</style> </style>
<Layout> <Layout>
@ -53,7 +49,7 @@
<Button kind="secondary" {disabled}>Cancel</Button> <Button kind="secondary" {disabled}>Cancel</Button>
{#if disabled} {#if disabled}
<InlineLoading <InlineLoading
class="loader" style="margin-left: 1rem;"
description={loadingDescription} description={loadingDescription}
status={success ? 'finished' : 'active'} status={success ? 'finished' : 'active'}
aria-live={ariaLive} /> aria-live={ariaLive} />

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

@ -6,7 +6,7 @@
export let description = undefined; export let description = undefined;
export let iconDescription = undefined; export let iconDescription = undefined;
export let successDelay = 1500; export let successDelay = 1500;
export let props = {}; export let style = undefined;
import { createEventDispatcher, onDestroy } from 'svelte'; import { createEventDispatcher, onDestroy } from 'svelte';
import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16'; import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
@ -20,19 +20,26 @@
onDestroy(() => { onDestroy(() => {
if (timeoutId !== undefined) { if (timeoutId !== undefined) {
clearTimeout(timeoutId); window.clearTimeout(timeoutId);
timeoutId = undefined; timeoutId = undefined;
} }
}); });
$: if (status === 'finished') { $: if (status === 'finished') {
timeoutId = setTimeout(() => { timeoutId = window.setTimeout(() => {
dispatch('success'); dispatch('success');
}, successDelay); }, successDelay);
} }
</script> </script>
<div {...props} class={_class} aria-live={$$props['aria-live'] || 'assertive'}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
{style}
class={_class}
aria-live={$$props['aria-live'] || 'assertive'}>
<div class={cx('--inline-loading__animation')}> <div class={cx('--inline-loading__animation')}>
{#if status === 'error'} {#if status === 'error'}
<Error20 class={cx('--inline-loading--error')} /> <Error20 class={cx('--inline-loading--error')} />