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

feat(code-snippet): add skeleton state

Browse source
This commit is contained in:
Eric Liu 2020-01-11 18:39:33 -08:00
commit fd7164a312
1 changed files with 66 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

122
src/components/CodeSnippet/CodeSnippet.svelte
View file

@ -10,6 +10,7 @@
export let light = false;
export let showLessText = 'Show less';
export let showMoreText = 'Show more';
export let skeleton = false;
export let style = undefined;
export let type = 'single';
@ -19,71 +20,80 @@
import Button from '../Button';
import Copy from '../Copy';
import CopyButton from '../CopyButton';
import CodeSnippetSkeleton from './CodeSnippet.Skeleton.svelte';
let codeRef = undefined;
let expanded = false;
let showMoreLess = false;
afterUpdate(() => {
showMoreLess = type === 'multi' && codeRef.getBoundingClientRect().height > 255;
if (type === 'multi' && codeRef) {
showMoreLess = codeRef.getBoundingClientRect().height > 255;
}
});
$: expandText = expanded ? showLessText : showMoreText;
</script>
{#if type === 'inline'}
<Copy
aria-label={$$props['aria-label'] || copyLabel}
aria-describedby={id}
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
on:click
on:mouseover
on:mouseenter
on:mouseleave
{feedback}
{feedbackTimeout}
{style}>
<code {id}>
<slot>{code}</slot>
</code>
</Copy>
{:else}
<div
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
{style}>
<div
role="textbox"
tabindex="0"
class={cx('--snippet-container')}
aria-label={$$props['aria-label'] || copyLabel || 'code-snippet'}>
<code>
<pre bind:this={codeRef}>
<slot>{code}</slot>
</pre>
</code>
</div>
<CopyButton
iconDescription={copyButtonDescription}
class={cx('--snippet-button')}
on:click
{feedback}
{feedbackTimeout} />
{#if showMoreLess}
<Button
kind="ghost"
size="small"
class={cx('--snippet-btn--expand')}
on:click={() => {
expanded = !expanded;
}}>
<span class={cx('--snippet-btn--text')}>{expandText}</span>
<ChevronDown16
aria-label={expandText}
class={cx('--icon-chevron--down', '--snippet__icon')} />
</Button>
{/if}
</div>
{#if skeleton}
<CodeSnippetSkeleton class={className} {type} {style} />
{/if}
{#if !skeleton}
{#if type === 'inline'}
<Copy
aria-label={$$props['aria-label'] || copyLabel}
aria-describedby={id}
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
on:click
on:mouseover
on:mouseenter
on:mouseleave
{feedback}
{feedbackTimeout}
{style}>
<code {id}>
<slot>{code}</slot>
</code>
</Copy>
{:else}
<div
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
{style}>
<div
role="textbox"
tabindex="0"
class={cx('--snippet-container')}
aria-label={$$props['aria-label'] || copyLabel || 'code-snippet'}>
<code>
<pre bind:this={codeRef}>
<slot>{code}</slot>
</pre>
</code>
</div>
<CopyButton
iconDescription={copyButtonDescription}
class={cx('--snippet-button')}
on:click
{feedback}
{feedbackTimeout} />
{#if showMoreLess}
<Button
kind="ghost"
size="small"
class={cx('--snippet-btn--expand')}
on:click={() => {
expanded = !expanded;
}}>
<span class={cx('--snippet-btn--text')}>{expandText}</span>
<ChevronDown16
aria-label={expandText}
class={cx('--icon-chevron--down', '--snippet__icon')} />
</Button>
{/if}
</div>
{/if}
{/if}