wip shorthand collection keys

Author: levithomason

docs/app/Examples/collections/Table/States/TableWarningShorthand.js

@@ -1,6 +1,13 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
+const tableData = [
+  { name: undefined, status: undefined, notes: undefined },
+  { name: 'Jimmy', status: 'Requires Action', notes: undefined },
+  { name: 'Jamie', status: undefined, notes: 'Hostile' },
+  { name: 'Jill', status: undefined, notes: undefined },
+]
+
 const headerRow = [
   'Name',
   'Status',
@@ -20,16 +27,14 @@ const renderBodyRow = ({ name, status, notes }) => ({
   ],
 })
 
-const tableData = [
-  { name: undefined, status: undefined, notes: undefined },
-  { name: 'Jimmy', status: 'Requires Action', notes: undefined },
-  { name: 'Jamie', status: undefined, notes: 'Hostile' },
-  { name: 'Jill', status: undefined, notes: undefined },
-]
-
 const TableWarningShorthand = () => {
   return (
-    <Table celled headerRow={headerRow} renderBodyRow={renderBodyRow} tableData={tableData} />
+    <Table
+      celled
+       headerRow={headerRow}
+      // renderBodyRow={renderBodyRow}
+      tableData={tableData}
+    />
   )
 }
 

src/lib/factories.js

@@ -2,6 +2,18 @@ import _ from 'lodash'
 import cx from 'classnames'
 import React, { cloneElement, isValidElement } from 'react'
 
+// Simplified and faster version of:
+// http://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript-jquery
+const hashCode = function hashCode(str) {
+  const { length } = str
+  if (!str || length === 0) return 0
+  let hash = 0
+  for (let i = 0; i < length; i++) {
+    hash = hash * 31 + str.charCodeAt(i) | 0
+  }
+  return hash
+}
+
 /**
  * Merges props and classNames.
  *
@@ -16,8 +28,14 @@ const mergePropsAndClassName = (defaultProps, props) => {
     newProps.className = cx(defaultProps.className, props.className) // eslint-disable-line react/prop-types
   }
 
-  if (!newProps.key && childKey) {
-    newProps.key = _.isFunction(childKey) ? childKey(newProps) : childKey
+  if (!newProps.key) {
+    if (childKey) {
+      newProps.key = _.isFunction(childKey) ? childKey(newProps) : childKey
+    } else {
+      const stringified = _.map(newProps, (val, key) => `${key}:${val}`).join('')
+      console.log(stringified)
+      newProps.key = hashCode(stringified)
+    }
   }
 
   return newProps
@@ -57,6 +75,10 @@ export function createShorthand(Component, mapValueToProps, val, defaultProps =
   defaultProps = _.isFunction(defaultProps) ? defaultProps(usersProps) : defaultProps
   const props = mergePropsAndClassName(defaultProps, usersProps)
 
+  if (Component._meta.name === 'TableCell') {
+    console.log(props)
+  }
+
   // Clone ReactElements
   if (type === 'element') {
     return cloneElement(val, props)

test/specs/docs/examples-test.js

@@ -12,6 +12,9 @@ describe.only('examples', () => {
     console.error.restore()
   })
   exampleContext.keys().forEach(path => {
+    if (!path.includes('TableWarningShorthand')) {
+      return
+    }
     it(`renders without errors: ${path}`, () => {
       mount(createElement(exampleContext(path).default))