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

refactor: inline Copy component (#1175)

Browse source
This commit is contained in:
metonym 2022-03-14 08:17:20 -07:00 • committed by GitHub
commit f8aecdbef1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 125 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -921,6 +921,8 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :---------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Set the feedback text shown after clicking the button |
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Copy to clipboard"</code> | Set the title and ARIA label for the copy button |
| text | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text to copy |
| copy | <code>let</code> | No | <code>(text: string) => void</code> | <code>async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }</code> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |

32
docs/src/COMPONENT_API.json
View file

@ -2180,6 +2180,28 @@
"moduleName": "CopyButton",
"filePath": "src/CopyButton/CopyButton.svelte",
"props": [
{
"name": "feedback",
"kind": "let",
"description": "Set the feedback text shown after clicking the button",
"type": "string",
"value": "\"Copied!\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "feedbackTimeout",
"kind": "let",
"description": "Set the timeout duration (ms) to display feedback text",
"type": "number",
"value": "2000",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "iconDescription",
"kind": "let",
@ -2216,16 +2238,12 @@
"moduleExports": [],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "Copy" },
{ "type": "forwarded", "name": "animationend", "element": "Copy" },
{ "type": "forwarded", "name": "click", "element": "button" },
{ "type": "forwarded", "name": "animationend", "element": "button" },
{ "type": "dispatched", "name": "copy" }
],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "Copy" },
"extends": {
"interface": "CopyProps",
"import": "\"../Copy/Copy.svelte\""
}
"rest_props": { "type": "Element", "name": "button" }
},
{
"moduleName": "DataTable",

57
src/CodeSnippet/CodeSnippet.svelte
View file

@ -88,15 +88,18 @@
/** Obtain a reference to the pre HTML element */
export let ref = null;
import { createEventDispatcher, tick } from "svelte";
import { createEventDispatcher, tick, onMount } from "svelte";
import ChevronDown16 from "../icons/ChevronDown16.svelte";
import Button from "../Button/Button.svelte";
import Copy from "../Copy/Copy.svelte";
import CopyButton from "../CopyButton/CopyButton.svelte";
import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
const dispatch = createEventDispatcher();
/** @type {"fade-in" | "fade-out"} */
let animation = undefined;
let timeout = undefined;
function setShowMoreLess() {
const { height } = ref.getBoundingClientRect();
if (height > 0) showMoreLess = ref.getBoundingClientRect().height > 255;
@ -114,6 +117,10 @@
if (code === undefined) setShowMoreLess();
if (code) tick().then(setShowMoreLess);
}
onMount(() => {
return () => clearTimeout(timeout);
});
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
@ -144,20 +151,35 @@
</code>
</span>
{:else}
<Copy
<button
type="button"
aria-live="polite"
class:bx--copy="{true}"
class:bx--btn--copy="{true}"
class:bx--copy-btn--animating="{animation}"
class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
class:bx--snippet="{true}"
class:bx--snippet--inline="{type === 'inline'}"
class:bx--snippet--expand="{expanded}"
class:bx--snippet--light="{light}"
class:bx--snippet--wraptext="{wrapText}"
aria-label="{copyLabel}"
aria-describedby="{id}"
feedback="{feedback}"
feedbackTimeout="{feedbackTimeout}"
class="bx--snippet {type && `bx--snippet--${type}`}
{type === 'inline' && 'bx--btn--copy'}
{expanded && 'bx--snippet--expand'}
{light && 'bx--snippet--light'}
{hideCopyButton && 'bx--snippet--no-copy'}
{wrapText && 'bx--snippet--wraptext'}"
{...$$restProps}
on:click
on:click="{copyCode}"
on:click="{() => {
copyCode();
if (animation === 'fade-in') return;
animation = 'fade-in';
timeout = setTimeout(() => {
animation = 'fade-out';
}, feedbackTimeout);
}}"
on:animationend="{({ animationName }) => {
if (animationName === 'hide-feedback') {
animation = undefined;
}
}}"
on:mouseover
on:mouseenter
on:mouseleave
@ -165,7 +187,14 @@
<code id="{id}">
<slot>{code}</slot>
</code>
</Copy>
<span
aria-hidden="true"
class:bx--assistive-text="{true}"
class:bx--copy-btn__feedback="{true}"
>
{feedback}
</span>
</button>
{/if}
{:else}
<div

47
src/CopyButton/CopyButton.svelte
View file

@ -1,5 +1,9 @@
<script>
/** @extends {"../Copy/Copy.svelte"} CopyProps */
/** Set the feedback text shown after clicking the button */
export let feedback = "Copied!";
/** Set the timeout duration (ms) to display feedback text */
export let feedbackTimeout = 2000;
/** Set the title and ARIA label for the copy button */
export let iconDescription = "Copy to clipboard";
@ -22,15 +26,28 @@
}
};
import Copy from "../Copy/Copy.svelte";
import { createEventDispatcher, onMount } from "svelte";
import Copy16 from "../icons/Copy16.svelte";
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
/** @type {"fade-in" | "fade-out"} */
let animation = undefined;
let timeout = undefined;
onMount(() => {
return () => clearTimeout(timeout);
});
</script>
<Copy
class="bx--copy-btn"
<button
type="button"
aria-live="polite"
class:bx--copy-btn="{true}"
class:bx--copy="{true}"
class:bx--copy-btn--animating="{animation}"
class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
aria-label="{iconDescription}"
title="{iconDescription}"
{...$$restProps}
@ -40,8 +57,26 @@
copy(text);
dispatch('copy');
}
if (animation === 'fade-in') return;
animation = 'fade-in';
timeout = setTimeout(() => {
animation = 'fade-out';
}, feedbackTimeout);
}}"
on:animationend
on:animationend="{({ animationName }) => {
if (animationName === 'hide-feedback') {
animation = undefined;
}
}}"
>
<Copy16 class="bx--snippet__icon" />
</Copy>
<span
aria-hidden="true"
class:bx--assistive-text="{true}"
class:bx--copy-btn__feedback="{true}"
>
{feedback}
</span>
</button>

16
types/CopyButton/CopyButton.svelte.d.ts vendored
View file

@ -1,8 +1,20 @@
/// <reference types="svelte" />
import { SvelteComponentTyped } from "svelte";
import { CopyProps } from "../Copy/Copy.svelte";
export interface CopyButtonProps extends CopyProps {
export interface CopyButtonProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
/**
* Set the feedback text shown after clicking the button
* @default "Copied!"
*/
feedback?: string;
/**
* Set the timeout duration (ms) to display feedback text
* @default 2000
*/
feedbackTimeout?: number;
/**
* Set the title and ARIA label for the copy button
* @default "Copy to clipboard"