feat(community-pagination): adding unique keys to pagination

telus · Apr 17, 2019 · 6eb2a96 · 6eb2a96
1 parent 1982942
commit 6eb2a96
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 51 deletions.
diff --git a/packages/Pagination/Pagination.jsx b/packages/Pagination/Pagination.jsx
@@ -6,6 +6,7 @@ import DecorativeIcon from '@tds/core-decorative-icon'
 import Panels from './Panels'
 import Panel from './Panel/Panel'
 import styles from './Pagination.scss'
+import hash from './hash'
 
 /**
  * @version ./package.json
@@ -28,10 +29,6 @@ class Pagination extends Component {
     this.handleButtonState()
   }
 
-  generateKey = pre => {
-    return `${pre}_${new Date().getTime()}`
-  }
-
   mapNumeric = () => {
     return this.props.children.map((item, i) => {
       const index = i + 1
@@ -40,15 +37,15 @@ class Pagination extends Component {
       current = parseInt(current, 10) || 0
       if (current === index) {
         return (
-          <li key={this.generateKey(i)} className={styles.current}>
+          <li key={hash(`${i}-1`)} className={styles.current}>
             {index}
           </li>
         )
       }
 
       if (panels < 7 || index === 1 || index === panels) {
         return (
-          <li key={this.generateKey(i)} className={styles.regular}>
+          <li key={hash(`${i}-2`)} className={styles.regular}>
             <button value={index} onClick={e => this.handleClick(e)}>
               {index}
             </button>
@@ -63,7 +60,7 @@ class Pagination extends Component {
         (current > panels - 2 && index > panels - 4)
       ) {
         return (
-          <li key={this.generateKey(i)} className={styles.regular}>
+          <li key={hash(`${i}-3`)} className={styles.regular}>
             <button
               value={index}
               onClick={e => this.handleClick(e)}
@@ -81,7 +78,7 @@ class Pagination extends Component {
         (current > panels - 2 && index === panels - 5)
       ) {
         return (
-          <li key={this.generateKey(i)} className={styles.ellipsis}>
+          <li key={hash(`${i}-4`)} className={styles.ellipsis}>
             ...
           </li>
         )
@@ -125,9 +122,7 @@ class Pagination extends Component {
     const NextLabel = language !== 'french' ? 'Go to next panel' : 'Aller au prochain panneau'
     return (
       <div {...safeRest(rest)} className={styles.container}>
-        <Panels {...rest} key={this.generateKey(current)}>
-          {children[current - 1] && children[current - 1]}
-        </Panels>
+        <Panels {...rest}>{children[current - 1] && children[current - 1]}</Panels>
         <div className={styles.controls}>
           {this.state.showPrevious && (
             <p className={styles.previous}>

diff --git a/packages/Pagination/Pagination.md b/packages/Pagination/Pagination.md
@@ -1,3 +1,10 @@
+### Usage Criteria
+
+- The `Pagination` component can take any content as children inside a Panel
+- Any number of panels can be used to paginate
+- Style your content within Panel however you wish
+- Language can be passed in as a prop, english is set as default
+
 ```jsx
 <Pagination language="english">
   <Pagination.Panel>Content 1: any type of content can be used here.</Pagination.Panel>
@@ -14,19 +21,5 @@
     </div>
   </Pagination.Panel>
 </Pagination>
-<Pagination language="french">
-  <Pagination.Panel>Content 1: This is pagination with French passed in as a prop.</Pagination.Panel>
-  <Pagination.Panel>Content 2: use responsibly.</Pagination.Panel>
-  <Pagination.Panel>Content 3: Pagination Panels take &lt;div /&gt; tags, image tags, heading tags and so on.</Pagination.Panel>
-  <Pagination.Panel>Content 4: <div><Heading level="h2">This is an h2 heading</Heading></div></Pagination.Panel>
-  <Pagination.Panel>Content 5: language can be passed in as a prop, english is the default, french is the other option.</Pagination.Panel>
-  <Pagination.Panel>Content 6</Pagination.Panel>
-  <Pagination.Panel>Content 7</Pagination.Panel>
-  <Pagination.Panel>Content 8</Pagination.Panel>
-  <Pagination.Panel>
-    <div>
-      <p>This is a paragraph on the 9th panel</p>
-    </div>
-  </Pagination.Panel>
-</Pagination>
+<Box inset={4}> </Box>
 ```
diff --git a/packages/Pagination/Panels.jsx b/packages/Pagination/Panels.jsx
@@ -2,24 +2,14 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import safeRest from '@tds/shared-safe-rest'
-
-// import styles from './ExpandCollapse.modules.scss'
-
-const generateKey = pre => {
-  return `${pre}_${new Date().getTime()}`
-}
+import hash from './hash'
 
 const Panels = ({ children, ...rest }) => (
   <div {...safeRest(rest)}>
     {React.Children.toArray(children)
       .filter(Boolean)
       .map((panel, i) => {
-        return (
-          <div key={generateKey(i)}>
-            <p>This is panels</p>
-            {panel}
-          </div>
-        )
+        return <div key={hash(`${i}-contentpanel`)}>{panel}</div>
       })}
   </div>
 )

diff --git a/packages/Pagination/__tests__/__snapshots__/Pagination.spec.jsx.snap b/packages/Pagination/__tests__/__snapshots__/Pagination.spec.jsx.snap
@@ -7,16 +7,11 @@ exports[`Pagination renders 1`] = `
   <div
     className="container"
   >
-    <Panels
-      key="1_1553122471220"
-    >
+    <Panels>
       <div>
         <div
-          key="0_1553122471220"
+          key="1763044743"
         >
-          <p>
-            This is panels
-          </p>
           <Panel
             key=".0"
           >
@@ -35,13 +30,13 @@ exports[`Pagination renders 1`] = `
       >
         <li
           className="current"
-          key="0_1553122471220"
+          key="193359721"
         >
           1
         </li>
         <li
           className="regular"
-          key="1_1553122471220"
+          key="193361898"
         >
           <button
             aria-label="Go to panel number 2"
@@ -53,7 +48,7 @@ exports[`Pagination renders 1`] = `
         </li>
         <li
           className="regular"
-          key="2_1553122471220"
+          key="193361897"
         >
           <button
             aria-label="Go to panel number 3"
@@ -65,7 +60,7 @@ exports[`Pagination renders 1`] = `
         </li>
         <li
           className="regular"
-          key="3_1553122471220"
+          key="193361896"
         >
           <button
             aria-label="Go to panel number 4"
@@ -77,13 +72,13 @@ exports[`Pagination renders 1`] = `
         </li>
         <li
           className="ellipsis"
-          key="4_1553122471220"
+          key="193354536"
         >
           ...
         </li>
         <li
           className="regular"
-          key="8_1553122471220"
+          key="193360802"
         >
           <button
             onClick={[Function]}

diff --git a/packages/Pagination/hash.js b/packages/Pagination/hash.js
@@ -0,0 +1,26 @@
+import stringHash from 'string-hash'
+
+const JSONSafeStringify = input => {
+  let cache = []
+  const result = JSON.stringify(input, (key, value) => {
+    if (typeof value !== 'object' || value === null) {
+      return value
+    }
+    if (cache.includes(value)) {
+      // Circular reference found, discard key
+      return undefined
+    }
+    // Store value in our collection
+    cache.push(value)
+    return value
+  })
+  cache = null // Enable garbage collection
+  return result
+}
+
+const hash = obj => {
+  if (!obj) return 0
+  return typeof obj !== 'string' ? stringHash(JSONSafeStringify(obj)) : stringHash(obj)
+}
+
+export default hash