Merge pull request #15 from uptick/enhance/row-and-cell-shouldComponentUpdate-methods

update shouldComponentUpdate methods for row and cell

Author: cat-bro

src/object-cell.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import Clone from 'clone'
 import classNames from 'classnames'
 
-import { cellIsEditable } from './utilities'
+import { cellIsEditable, isDifferent } from './utilities'
 
 import TextDrawer from './drawers/text.jsx'
 import TextEditor from './editors/text.jsx'
@@ -33,29 +33,17 @@ class ObjectCell extends React.Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    let isShallowDifferent = function(objectA, objectB, exemptions) {
-      for (let key in objectA) {
-        if (exemptions && key in exemptions) {
-          continue
-        }
-        if (objectB[key] !== objectA[key]) {
-          // console.log('key', key, 'does not equal')
-          return true
-        }
-      }
-      return false
-    }
-    let propsExemptions = {
+    const propsExemptions = {
       'onMouseDownCell': true,
       'beginEdit': true,
       'updateField': true,
       'abortField': true,
       'cellError': true,
     }
-    if (isShallowDifferent(this.props, nextProps, propsExemptions) || isShallowDifferent(nextProps, this.props, propsExemptions)) {
+    if (isDifferent(this.props, nextProps, propsExemptions)) {
       return true
     }
-    if (isShallowDifferent(this.state, nextState) || isShallowDifferent(nextState, this.state)) {
+    if (isDifferent(this.state, nextState)) {
       return true
     }
     return false
@@ -69,7 +57,7 @@ class ObjectCell extends React.Component {
   }
 
   handleMouseDown = (event) => {
-    let button = event.which || event.button
+    const button = event.which || event.button
     event.preventDefault()
     if (button === 0) {
       this.props.onMouseDownCell(this.getCellRef(), event.clientX, event.clientY, event.shiftKey)
@@ -88,15 +76,15 @@ class ObjectCell extends React.Component {
   }
 
   render() {
-    let classes = classNames('', {
+    const classes = classNames('', {
       'selected': this.props.selected,
       'copying': this.props.copying,
       'editing': this.props.editing,
     })
 
     if (this.props.editing) {
-      let editor = this.props.column.editor || TextEditor
-      let editorProps = Clone(this.props.column.editorProps || {})
+      const editor = this.props.column.editor || TextEditor
+      const editorProps = Clone(this.props.column.editorProps || {})
       editorProps.value = this.props.value
       editorProps.update = this.props.updateField
       editorProps.abort = this.props.abortField
@@ -126,8 +114,8 @@ class ObjectCell extends React.Component {
         </td>
       )
     } else {
-      let drawer = this.props.column.drawer || TextDrawer
-      let drawerProps = Clone(this.props.column.drawerProps || {})
+      const drawer = this.props.column.drawer || TextDrawer
+      const drawerProps = Clone(this.props.column.drawerProps || {})
 
       drawerProps.value = this.props.value
       drawerProps.column = this.props.column

src/object-row.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import JQuery from 'jquery'
 import classNames from 'classnames'
 
-import { dictCount } from './utilities.js'
+import { dictCount, isDifferent } from './utilities.js'
 
 class ObjectRow extends React.Component {
   static propTypes = {
@@ -29,8 +29,8 @@ class ObjectRow extends React.Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    let isMissingColumns = function(propsA, propsB, columnsKey) {
-      for (let key in propsA[columnsKey]) {
+    const isMissingColumns = function(propsA, propsB, columnsKey) {
+      for (const key in propsA[columnsKey]) {
         if (key in propsB[columnsKey] === false) {
           // console.log('key', key, 'does not exist in both')
           return true
@@ -45,20 +45,7 @@ class ObjectRow extends React.Component {
       return true
     }
 
-    let isShallowDifferent = function(objectA, objectB, exemptions) {
-      for (let key in objectA) {
-        if (exemptions && key in exemptions) {
-          continue
-        }
-        if (objectB[key] !== objectA[key]) {
-          // console.log('key', key, 'does not equal')
-          return true
-        }
-      }
-      return false
-    }
-
-    let propsExemptions = {
+    const propsExemptions = {
       // ignore column we perform above
       'selectedColumns': true,
       'copyingColumns': true,
@@ -71,18 +58,18 @@ class ObjectRow extends React.Component {
       'onMouseDownCell': true,
       'beginEdit': true,
     }
-    if (isShallowDifferent(this.props, nextProps, propsExemptions) || isShallowDifferent(nextProps, this.props, propsExemptions)) {
+    if (isDifferent(this.props, nextProps, propsExemptions)) {
       return true
     }
-    if (isShallowDifferent(this.state, nextState) || isShallowDifferent(nextState, this.state)) {
+    if (isDifferent(this.state, nextState)) {
       return true
     }
     return false
   }
 
   colInRanges(column, columns, rows) {
-    let numRangeColumns = dictCount(columns)
-    let numRangeRows = dictCount(rows)
+    const numRangeColumns = dictCount(columns)
+    const numRangeRows = dictCount(rows)
     if (numRangeColumns === 0 && numRangeRows === 0) {
       return false
     } else if (columns !== null && rows === null) {

src/utilities.js

@@ -1,13 +1,13 @@
 function dictCount(dict) {
   let count = 0
-  for (let _ in dict) {
+  for (const _ in dict) {
     count++
   }
   return count
 }
 
 function dictFirstKey(dict) {
-  for (let dictKey in dict) {
+  for (const dictKey in dict) {
     return dictKey
   }
   return undefined
@@ -20,8 +20,21 @@ function cellIsEditable(object, column) {
   return editorIsSet && !readOnly
 }
 
+function isDifferent(objectA, objectB, exemptions) {
+  for (const key in objectA) {
+    if (exemptions && key in exemptions) {
+      continue
+    }
+    if (JSON.stringify(objectB[key]) !== JSON.stringify(objectA[key])) {
+      return true
+    }
+  }
+  return false
+}
+
 export {
   dictCount,
   dictFirstKey,
   cellIsEditable,
+  isDifferent,
 }