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

fix(skeleton-text): fix rows reactivity in paragraph variant

Browse source 
Fixes #1793
This commit is contained in:
metonym 2023-08-20 08:33:32 -07:00
commit 7bf23ad86b
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];
$: rows = [];
$: widthNum = parseInt(width, 10);
$: 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>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if paragraph}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<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
class:bx--skeleton__text="{true}"
class:bx--skeleton__heading="{heading}"