mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: lift components folder

Browse source
This commit is contained in:
Eric Liu 2020-07-19 09:06:08 -07:00
commit 2200b29b92
301 changed files with 57 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,53 +0,0 @@
<script>
export let status = "active"; // "active" | "inactive" | "finished" | "error"
export let description = undefined;
export let iconDescription = undefined;
export let successDelay = 1500;
import { createEventDispatcher, afterUpdate, onDestroy } from "svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
import Error20 from "carbon-icons-svelte/lib/Error20";
import { Loading } from "../Loading";
const dispatch = createEventDispatcher();
$: timeoutId = undefined;
afterUpdate(() => {
if (status === "finished") {
timeoutId = window.setTimeout(() => {
dispatch("success");
}, successDelay);
}
});
onDestroy(() => {
window.clearTimeout(timeoutId);
timeoutId = undefined;
});
</script>
<div
aria-live="assertive"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<div class:bx--inline-loading__animation={true}>
{#if status === 'error'}
<Error20 class="bx--inline-loading--error" />
{:else if status === 'finished'}
<CheckmarkFilled16 class="bx--inline-loading__checkmark-container" />
{:else if status === 'inactive' || status === 'active'}
<Loading
small
description={iconDescription}
withOverlay={false}
active={status === 'active'} />
{/if}
</div>
{#if description}
<div class:bx--inline-loading__text={true}>{description}</div>
{/if}
</div>