From f3c702947c7fdaa095951bf077748fcdeac940dd Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 23 Dec 2019 09:47:34 -0800
Subject: [PATCH] refactor(lib): extract fillArray utility

---
 src/components/Accordion/Accordion.Skeleton.svelte         | 6 +++---
 src/components/DataTableSkeleton/DataTableSkeleton.svelte  | 6 +++---
 src/components/Pagination/Pagination.svelte                | 4 ++--
 .../StructuredList/StructuredList.Skeleton.svelte          | 4 ++--
 src/lib/__tests__/fill-array.spec.js                       | 7 +++++++
 src/lib/fill-array.js                                      | 5 +++++
 src/lib/index.js                                           | 1 +
 7 files changed, 23 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/__tests__/fill-array.spec.js
 create mode 100644 src/lib/fill-array.js

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);
 </script>
 
 <ul on:click on:mouseover on:mouseenter on:mouseleave {style} class={_class}>
@@ -27,7 +27,7 @@
       </div>
     </li>
   {/if}
-  {#each skeletonItems as item}
+  {#each items as item, i (item)}
     <li class={cx('--accordion__item')}>
       <span class={cx('--accordion__heading')}>
         <ChevronRight16 class={cx('--accordion__arrow')} />
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);
 </script>
 
 <section on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
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';