diff --git a/src/components/Accordion/Accordion.Skeleton.svelte b/src/components/Accordion/Accordion.Skeleton.svelte
index 0ed47b1b..cd5a8990 100644
--- a/src/components/Accordion/Accordion.Skeleton.svelte
+++ b/src/components/Accordion/Accordion.Skeleton.svelte
@@ -6,11 +6,11 @@
export let style = undefined;
import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
- import { cx } from '../../lib';
+ import { cx, fillArray } from '../../lib';
import SkeletonText from '../SkeletonText';
const _class = cx('--accordion', '--skeleton', className);
- const skeletonItems = Array.from({ length: open ? count - 1 : count });
+ const items = fillArray(open ? count - 1 : count);
@@ -27,7 +27,7 @@
{/if}
- {#each skeletonItems as item}
+ {#each items as item, i (item)}
-
diff --git a/src/components/DataTableSkeleton/DataTableSkeleton.svelte b/src/components/DataTableSkeleton/DataTableSkeleton.svelte
index e8ef0a2a..e80652c8 100644
--- a/src/components/DataTableSkeleton/DataTableSkeleton.svelte
+++ b/src/components/DataTableSkeleton/DataTableSkeleton.svelte
@@ -8,10 +8,10 @@
export let headers = [];
export let style = undefined;
- import { cx } from '../../lib';
+ import { cx, fillArray } from '../../lib';
- const rows = Array.from({ length: rowCount - 1 }, (_, i) => i);
- const columns = Array.from({ length: columnCount }, (_, i) => i);
+ const rows = fillArray(rowCount - 1);
+ const columns = fillArray(columnCount);
const _headers =
headers[0] === Object(headers[0]) && !Array.isArray(headers[0])
? headers.map(({ header }) => header)
diff --git a/src/components/Pagination/Pagination.svelte b/src/components/Pagination/Pagination.svelte
index e9ffb6a0..761143fa 100644
--- a/src/components/Pagination/Pagination.svelte
+++ b/src/components/Pagination/Pagination.svelte
@@ -21,11 +21,11 @@
import CaretRight24 from 'carbon-icons-svelte/lib/CaretRight24';
import CaretLeft24 from 'carbon-icons-svelte/lib/CaretLeft24';
import Select, { SelectItem } from '../Select';
- import { cx } from '../../lib';
+ import { cx, fillArray } from '../../lib';
const _class = cx('--pagination', className);
$: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
- $: selectItems = Array.from({ length: totalPages }, (_, i) => i);
+ $: selectItems = fillArray(totalPages);
$: backButtonDisabled = disabled || page === 1;
$: _backButtonClass = cx(
'--pagination__button',
diff --git a/src/components/StructuredList/StructuredList.Skeleton.svelte b/src/components/StructuredList/StructuredList.Skeleton.svelte
index 2f190069..b0e83ba8 100644
--- a/src/components/StructuredList/StructuredList.Skeleton.svelte
+++ b/src/components/StructuredList/StructuredList.Skeleton.svelte
@@ -5,7 +5,7 @@
export let rowCount = 5;
export let style = undefined;
- import { cx } from '../../lib';
+ import { cx, fillArray } from '../../lib';
const _class = cx(
'--skeleton',
@@ -13,7 +13,7 @@
border && '--structured-list--border',
className
);
- const rows = Array.from({ length: rowCount - 1 }, (_, i) => i);
+ const rows = fillArray(rowCount - 1);
diff --git a/src/lib/__tests__/fill-array.spec.js b/src/lib/__tests__/fill-array.spec.js
new file mode 100644
index 00000000..7a451735
--- /dev/null
+++ b/src/lib/__tests__/fill-array.spec.js
@@ -0,0 +1,7 @@
+import { fillArray } from '../fill-array';
+
+test('fillArray', () => {
+ expect(fillArray(0)).toEqual([]);
+ expect(fillArray(2)).toEqual([0, 1]);
+ expect(fillArray(3)).toEqual([0, 1, 2]);
+});
diff --git a/src/lib/fill-array.js b/src/lib/fill-array.js
new file mode 100644
index 00000000..5cd3a7f4
--- /dev/null
+++ b/src/lib/fill-array.js
@@ -0,0 +1,5 @@
+function fillArray(length) {
+ return Array.from({ length }, (_, i) => i);
+}
+
+export { fillArray };
diff --git a/src/lib/index.js b/src/lib/index.js
index d6822aea..ef3d0b74 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1,2 +1,3 @@
export { cx } from './cx';
export { css } from './css';
+export { fillArray } from './fill-array';