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

refactor: use $$restProps API

Browse source 
- add ref prop for applicable components (#196)
- add slot to Content Switcher `Switch` component (#183)
- remove fillArray, css utilities
This commit is contained in:
Eric Liu 2020-07-18 20:00:20 -07:00
commit e886d772c7
288 changed files with 4681 additions and 4498 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,26 +1,22 @@
<script>
let className = undefined;
export { className as class };
export let status = "active"; // "active" | "inactive" | "finished" | "error"
export let description = undefined;
export let iconDescription = undefined;
export let status = 'active';
export let style = 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 { cx } from '../../lib';
import Loading from '../Loading';
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();
let timeoutId = undefined;
$: timeoutId = undefined;
afterUpdate(() => {
if (status === 'finished') {
if (status === "finished") {
timeoutId = window.setTimeout(() => {
dispatch('success');
dispatch("success");
}, successDelay);
}
});
@ -32,18 +28,17 @@
</script>
<div
aria-live={$$props['aria-live'] || 'assertive'}
class={cx('--inline-loading', className)}
aria-live="assertive"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
{style}>
<div class={cx('--inline-loading__animation')}>
on:mouseleave>
<div class:bx--inline-loading__animation={true}>
{#if status === 'error'}
<Error20 class={cx('--inline-loading--error')} />
<Error20 class="bx--inline-loading--error" />
{:else if status === 'finished'}
<CheckmarkFilled16 class={cx('--inline-loading__checkmark-container')} />
<CheckmarkFilled16 class="bx--inline-loading__checkmark-container" />
{:else if status === 'inactive' || status === 'active'}
<Loading
small
@ -53,6 +48,6 @@
{/if}
</div>
{#if description}
<div class={cx('--inline-loading__text')}>{description}</div>
<div class:bx--inline-loading__text={true}>{description}</div>
{/if}
</div>