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

fix(skeleton-text): fix reactivity in paragraph variant (#1794)

Browse source 
Fixes #1793
This commit is contained in:
Eric Liu 2023-08-26 10:19:37 -07:00 • committed by GitHub
commit bc97ce5e1b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/SkeletonText/SkeletonText.svelte
View file

@ -13,24 +13,21 @@
const RANDOM = [0.973, 0.153, 0.567]; const RANDOM = [0.973, 0.153, 0.567];
$: rows = [];
$: widthNum = parseInt(width, 10); $: widthNum = parseInt(width, 10);
$: widthPx = width.includes("px"); $: widthPx = width.includes("px");
$: if (paragraph) {
for (let i = 0; i < lines; i++) {
const min = widthPx ? widthNum - 75 : 0;
const max = widthPx ? widthNum : 75;
const rand = Math.floor(RANDOM[i % 3] * (max - min + 1)) + min + "px";
rows = [...rows, { width: widthPx ? rand : `calc(${width} - ${rand})` }];
}
}
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if paragraph} {#if paragraph}
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave> <div {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
{#each rows as { width }} {#each Array.from({ length: lines }).map((_, i) => {
const min = widthPx ? widthNum - 75 : 0;
const max = widthPx ? widthNum : 75;
const rand = Math.floor(RANDOM[i % 3] * (max - min + 1)) + min + "px";
return widthPx ? rand : `calc(${width} - ${rand})`;
}) as width}
<p <p
class:bx--skeleton__text="{true}" class:bx--skeleton__text="{true}"
class:bx--skeleton__heading="{heading}" class:bx--skeleton__heading="{heading}"