Fix generateNumbers function of HelpGuide comp (#212)

* Fix generateNumbers function of HelpGuide comp

* Bump version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "0.5.25",
+  "version": "0.5.26",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "main": "dist/index.js",
   "umd:main": "dist/elements.umd.production.js",

src/components/HelpGuide/__tests__/__snapshots__/index.tsx.snap

@@ -78,6 +78,7 @@ exports[`HelpGuide should match a snapshot 1`] = `
     >
       <div
         className="helpguide-wrapper"
+        key="helper-guide-child-0"
       >
         <Component
           component={[Function]}
@@ -87,6 +88,7 @@ exports[`HelpGuide should match a snapshot 1`] = `
       </div>
       <div
         className="helpguide-wrapper"
+        key="helper-guide-child-1"
       >
         <Component
           component={[Function]}
@@ -96,6 +98,7 @@ exports[`HelpGuide should match a snapshot 1`] = `
       </div>
       <div
         className="helpguide-wrapper"
+        key="helper-guide-child-2"
       >
         <Component
           component={[Function]}
@@ -105,6 +108,7 @@ exports[`HelpGuide should match a snapshot 1`] = `
       </div>
       <div
         className="helpguide-wrapper"
+        key="helper-guide-child-3"
       >
         <Component
           component={[Function]}

src/components/HelpGuide/__tests__/horizontal-timeline.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import { shallow } from 'enzyme'
 import {
   HorizontalTimeline,
-  generateNumbers,
   caculateCircleRef,
   caculateLineRef,
   calculateElement
@@ -13,12 +12,6 @@ describe('NumberedTimeline', () => {
     expect(shallow(<HorizontalTimeline total={5} currentIndex={3} />)).toMatchSnapshot()
   })
 
-  it('generateNumbers should run correctly', () => {
-    ;[[5, [0, 1, 2, 3, 4]], [3, [0, 1, 2]]].forEach(([input, expected]) => {
-      expect(generateNumbers(input as number)()).toEqual(expected)
-    })
-  })
-
   it('caculateCircleRef should run correctly', () => {
     const mockProps = {
       activeRef: {

src/components/HelpGuide/__tests__/utils.ts

@@ -0,0 +1,10 @@
+import { generateNumbers } from '../utils'
+
+describe('help guide utils', () => {
+  it('generateNumbers', () => {
+    const total = 5
+    const expectResult = [0, 1, 2, 3, 4]
+
+    expect(generateNumbers(total)()).toEqual(expectResult)
+  })
+})

src/components/HelpGuide/__tests__/vertical-timeline.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import { shallow } from 'enzyme'
 import {
   VerticalTimeline,
-  generateNumbers,
   caculateCircleRef,
   caculateLineRef,
   calculateElement,
@@ -14,12 +13,6 @@ describe('NumberedTimeline', () => {
     expect(shallow(<VerticalTimeline total={5} currentIndex={3} />)).toMatchSnapshot()
   })
 
-  it('generateNumbers should run correctly', () => {
-    ;[[5, [0, 1, 2, 3, 4]], [3, [0, 1, 2]]].forEach(([input, expected]) => {
-      expect(generateNumbers(input as number)()).toEqual(expected)
-    })
-  })
-
   it('caculateCircleRef should run correctly', () => {
     const mockProps = {
       activeRef: {

src/components/HelpGuide/horizontal-timeline.tsx

@@ -1,8 +1,5 @@
 import * as React from 'react'
-
-export const generateNumbers = (total: number) => () => {
-  return [...Array(total).keys()]
-}
+import { generateNumbers } from './utils'
 
 export const caculateCircleRef = ({
   activeRef,

src/components/HelpGuide/index.tsx

@@ -115,7 +115,11 @@ export const HelpGuide = ({ children, current, isLoading = false }: HelpGuidePro
         {renderTimeline(total, currentIndex, isMobileScreen)}
         <FlexContainerBasic flexColumn className="justify-center relative">
           {React.Children.toArray(children).map((child, index) => (
-            <div ref={currentIndex === index ? currentStepRef : null} className="helpguide-wrapper">
+            <div
+              key={`helper-guide-child-${index}`}
+              ref={currentIndex === index ? currentStepRef : null}
+              className="helpguide-wrapper"
+            >
               {child}
             </div>
           ))}

src/components/HelpGuide/utils.ts

@@ -0,0 +1,7 @@
+export const generateNumbers = (total: number) => () => {
+  const result: number[] = []
+  for (let i = 0; i < total; i++) {
+    result.push(i)
+  }
+  return result
+}

src/components/HelpGuide/vertical-timeline.tsx

@@ -1,11 +1,8 @@
 import * as React from 'react'
+import { generateNumbers } from './utils'
 
 export const LI_MARGIN = 30
 
-export const generateNumbers = (total: number) => () => {
-  return [...Array(total).keys()]
-}
-
 export const caculateCircleRef = ({
   activeRef,
   circleRef

src/styles/components/help-guide.scss

@@ -32,7 +32,7 @@
 .helpguide-graphic {
   max-width: 400px;
   margin: auto;
-  > img {
+  & img {
     max-width: 100%;
     height: auto;
   }