refactor: use $$restProps API

- 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

View file

@ -1,38 +1,51 @@
<script>
let className = undefined;
export { className as class };
export let feedback = 'Copied!';
export let feedback = "Copied!";
export let feedbackTimeout = 2000;
export let style = undefined;
export let ref = null;
import { onDestroy } from 'svelte';
import { cx } from '../../lib';
import { onDestroy } from "svelte";
let timeoutId = undefined;
$: animation = undefined;
$: timeoutId = undefined;
$: showFeedback = timeoutId !== undefined;
onDestroy(() => {
window.clearTimeout(timeoutId);
timeoutId = undefined;
});
$: showFeedback = timeoutId !== undefined;
</script>
<button
bind:this={ref}
type="button"
class={className}
aria-live="polite"
class:bx--copy={true}
class:bx--copy-btn--animating={animation}
aria-label={animation ? feedback : undefined}
{...$$restProps}
class="{$$restProps.class}
{animation && `bx--copy-btn--${animation}`}"
on:click
on:click={() => {
timeoutId = window.setTimeout(() => {
showFeedback = undefined;
if (animation === 'fade-in') return;
animation = 'fade-in';
timeoutId = setTimeout(() => {
animation = 'fade-out';
}, feedbackTimeout);
}}
on:mouseover
on:mouseenter
on:mouseleave
{style}>
<slot />
<div
class={cx('--btn--copy__feedback', showFeedback && '--btn--copy__feedback--displayed')}
data-feedback={feedback} />
on:animationend
on:animationend={({ animationName }) => {
if (animationName === 'hide-feedback') {
animation = undefined;
}
}}>
<slot>
{#if animation}{feedback || $$restProps['aria-label']}{/if}
</slot>
<span
aria-hidden="true"
class:bx--assistive-text={true}
class:bx--copy-btn__feedback={true}>
{feedback}
</span>
</button>