Merge pull request #70 from IBM/refactor

refactor(lib): extract fillArray utility

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')} />

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 rows = fillArray(rowCount - 1);
-  const columns = Array.from({ length: columnCount }, (_, i) => i);
+  const columns = fillArray(columnCount);
   const _headers =
     headers[0] === Object(headers[0]) && !Array.isArray(headers[0])
       ? headers.map(({ header }) => header)

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',

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}>

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]);
+});

src/lib/fill-array.js

@@ -0,0 +1,5 @@
+function fillArray(length) {
+  return Array.from({ length }, (_, i) => i);
+}
+
+export { fillArray };

src/lib/index.js

@@ -1,2 +1,3 @@
 export { cx } from './cx';
 export { css } from './css';
+export { fillArray } from './fill-array';