mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
fix(copy-button): use ^10.9.0 styles for CopyButton
Fixes #36 - Remove creaetEventDispatcher - Remove exported props - Breaking Change: upgrade to carbon-components@10.9.0-rc.1 - Clean up CopyButton story
This commit is contained in:
parent
fb6983b94e
commit
0bf3c465c8
5 changed files with 22 additions and 31 deletions
|
@ -4,59 +4,52 @@
|
|||
export let iconDescription = 'Copy to clipboard';
|
||||
export let feedback = 'Copied!';
|
||||
export let feedbackTimeout = 2000;
|
||||
export let props = {};
|
||||
|
||||
import { createEventDispatcher, onDestroy } from 'svelte';
|
||||
import { onDestroy } from 'svelte';
|
||||
import Copy16 from 'carbon-icons-svelte/lib/Copy16';
|
||||
import { cx } from '../../lib';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
let animation = undefined;
|
||||
let timeoutId = undefined;
|
||||
|
||||
onDestroy(() => {
|
||||
if (timeoutId !== undefined) {
|
||||
clearTimeout(timeoutId);
|
||||
window.clearTimeout(timeoutId);
|
||||
timeoutId = undefined;
|
||||
}
|
||||
});
|
||||
|
||||
function handleClick(event) {
|
||||
animation = 'fade-in';
|
||||
|
||||
timeoutId = setTimeout(() => {
|
||||
animation = 'fade-out';
|
||||
}, feedbackTimeout);
|
||||
}
|
||||
|
||||
function handleAnimationEnd(event) {
|
||||
if (event.animationName === 'hide-feedback') {
|
||||
animation = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
$: _class = cx(
|
||||
'--snippet-button', // TODO: deprecated?
|
||||
'--copy-btn',
|
||||
animation && '--copy-btn--animating',
|
||||
animation && `--copy-btn--${animation}`,
|
||||
animation === 'fade-in' && '--btn--copy__feedback--displayed',
|
||||
className
|
||||
);
|
||||
</script>
|
||||
|
||||
<button
|
||||
{...props}
|
||||
type="button"
|
||||
tabindex="0"
|
||||
aria-label={iconDescription}
|
||||
title={iconDescription}
|
||||
class={_class}
|
||||
on:click
|
||||
on:click={handleClick}
|
||||
on:click={() => {
|
||||
animation = 'fade-in';
|
||||
timeoutId = window.setTimeout(() => {
|
||||
animation = 'fade-out';
|
||||
}, feedbackTimeout);
|
||||
}}
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:animationend
|
||||
on:animationend={handleAnimationEnd}>
|
||||
on:animationend={({ animationName }) => {
|
||||
if (animationName === 'hide-feedback') {
|
||||
animation = undefined;
|
||||
}
|
||||
}}>
|
||||
<span class={cx('--assistive-text', '--copy-btn__feedback')}>{feedback}</span>
|
||||
<Copy16 class={cx('--snippet__icon')} />
|
||||
</button>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue