more perf improvements, add PokemonBody and Head components

vinnymac · Jan 14, 2017 · c2e784d · c2e784d
1 parent 9d4faf5
commit c2e784d
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 65 deletions.
diff --git a/app/screens/Table/components/PokemonTable.js b/app/screens/Table/components/PokemonTable.js
@@ -7,10 +7,11 @@ import actions from '../../../actions'
 
 import PokemonRow from './PokemonRow'
 
-const getPokemonComponents = (species, pokemon, getPokemonState, onCheckedChange,
-  toggleFavoritePokemon, powerUpPokemon
-) =>
-  pokemon.map(p =>
+const PokemonBody = ({
+  species, pokemon, getPokemonState, onCheckedChange,
+  toggleFavoritePokemon, powerUpPokemon,
+}) => {
+  const pokemonRows = pokemon.map(p =>
     <PokemonRow
       key={p.id}
       getPokemonState={getPokemonState}
@@ -22,43 +23,48 @@ const getPokemonComponents = (species, pokemon, getPokemonState, onCheckedChange
     />
   )
 
-class PokemonTable extends React.PureComponent { // eslint-disable-line
-  static displayName = 'PokemonTable'
+  return (
+    <tbody>
+      {pokemonRows}
+    </tbody>
+  )
+}
+
+PokemonBody.propTypes = {
+  onCheckedChange: PropTypes.func.isRequired,
+  species: PropTypes.object.isRequired,
+  pokemon: PropTypes.array.isRequired,
+  getPokemonState: PropTypes.func.isRequired,
+  toggleFavoritePokemon: PropTypes.func.isRequired,
+  powerUpPokemon: PropTypes.func.isRequired,
+}
+
+class PokemonHead extends React.PureComponent { // eslint-disable-line
+  static displayName = 'PokemonHead'
 
   static propTypes = {
     speciesIndex: PropTypes.number,
     sortBy: PropTypes.string,
     sortDir: PropTypes.string,
     sortPokemonBy: PropTypes.func.isRequired,
-    onCheckedChange: PropTypes.func.isRequired,
     species: PropTypes.object.isRequired,
-    pokemon: PropTypes.array.isRequired,
     checkAll: PropTypes.bool.isRequired,
     onCheckAll: PropTypes.func.isRequired,
-    getPokemonState: PropTypes.func.isRequired,
-    toggleFavoritePokemon: PropTypes.func.isRequired,
-    powerUpPokemon: PropTypes.func.isRequired,
   }
 
   render() {
     const {
-      species,
       checkAll,
-      getPokemonState,
-      pokemon,
-      onCheckedChange,
-      toggleFavoritePokemon,
-      powerUpPokemon,
     } = this.props
 
-    return (<table className="table table-condensed table-hover table-striped">
+    return (
       <thead>
         <tr>
           <th width="5%">
             <input
               type="checkbox"
               checked={checkAll}
-              onChange={this.checkAll.bind(this, species)}
+              onChange={this.handleCheckAll}
             />
           </th>
           <th
@@ -134,14 +140,16 @@ class PokemonTable extends React.PureComponent { // eslint-disable-line
           </th>
         </tr>
       </thead>
-      <tbody ref={(c) => { this.tBody = c }}>
-        {getPokemonComponents(species, pokemon, getPokemonState, onCheckedChange, toggleFavoritePokemon, powerUpPokemon)}
-      </tbody>
-    </table>)
+    )
   }
 
-  checkAll = (species) => {
-    this.props.onCheckAll(species)
+  handleCheckAll = () => {
+    const {
+      onCheckAll,
+      species,
+    } = this.props
+
+    onCheckAll(species)
   }
 
   handleSortPokemon = (sortBy) => {
@@ -167,6 +175,62 @@ class PokemonTable extends React.PureComponent { // eslint-disable-line
   }
 }
 
+class PokemonTable extends React.PureComponent { // eslint-disable-line
+  static displayName = 'PokemonTable'
+
+  static propTypes = {
+    speciesIndex: PropTypes.number,
+    sortBy: PropTypes.string,
+    sortDir: PropTypes.string,
+    sortPokemonBy: PropTypes.func.isRequired,
+    onCheckedChange: PropTypes.func.isRequired,
+    species: PropTypes.object.isRequired,
+    pokemon: PropTypes.array.isRequired,
+    checkAll: PropTypes.bool.isRequired,
+    onCheckAll: PropTypes.func.isRequired,
+    getPokemonState: PropTypes.func.isRequired,
+    toggleFavoritePokemon: PropTypes.func.isRequired,
+    powerUpPokemon: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const {
+      species,
+      checkAll,
+      getPokemonState,
+      pokemon,
+      onCheckedChange,
+      toggleFavoritePokemon,
+      powerUpPokemon,
+      speciesIndex,
+      sortPokemonBy,
+      sortDir,
+      sortBy,
+      onCheckAll,
+    } = this.props
+
+    return (<table className="table table-condensed table-hover table-striped">
+      <PokemonHead
+        checkAll={checkAll}
+        sortBy={sortBy}
+        sortDir={sortDir}
+        sortPokemonBy={sortPokemonBy}
+        speciesIndex={speciesIndex}
+        species={species}
+        onCheckAll={onCheckAll}
+      />
+      <PokemonBody
+        species={species}
+        pokemon={pokemon}
+        getPokemonState={getPokemonState}
+        onCheckedChange={onCheckedChange}
+        toggleFavoritePokemon={toggleFavoritePokemon}
+        powerUpPokemon={powerUpPokemon}
+      />
+    </table>)
+  }
+}
+
 export default connect(null, dispatch => bindActionCreators({
   toggleFavoritePokemon: actions.toggleFavoritePokemon,
   powerUpPokemon: actions.powerUpPokemon

diff --git a/app/screens/Table/components/PokemonTableWrapper.js b/app/screens/Table/components/PokemonTableWrapper.js
@@ -1,6 +1,7 @@
 import React, {
   PropTypes
 } from 'react'
+
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 

diff --git a/app/screens/Tooltip/index.js b/app/screens/Tooltip/index.js
@@ -5,12 +5,30 @@ import {
   Button
 } from 'react-bootstrap'
 
+const fixDisabledChildren = (children) => {
+  let hasDisabledChildren = false
+
+  const childrenWithDisabledSupport = React.Children.map(children, (child) => {
+    const isChildType = child.type in [Button, React.DOM.button]
+
+    if (child && isChildType && child.props.disabled) {
+      hasDisabledChildren = true
+      const childStyle = Object.assign({}, child.props.style, { pointerEvents: 'none' })
+      return React.cloneElement(child, { style: childStyle })
+    }
+
+    return child
+  })
+
+  return { childrenWithDisabledSupport, hasDisabledChildren }
+}
+
 // This wrapper allows for tooltips to be used around disabled elements
 // For example a disabled input or button may have a tooltip to inform the user
-const TooltipWrapper = React.createClass({
-  displayName: 'TooltipWrapper',
+class TooltipWrapper extends React.PureComponent {
+  static displayName = 'TooltipWrapper'
 
-  propTypes: {
+  static propTypes = {
     id: PropTypes.string.isRequired,
     show: PropTypes.bool,
     message: PropTypes.node,
@@ -19,8 +37,8 @@ const TooltipWrapper = React.createClass({
     wrapperClass: PropTypes.string,
     wrapperStyle: PropTypes.object,
     wrapperTag: PropTypes.string,
-    children: React.PropTypes.node
-  },
+    children: PropTypes.node,
+  }
 
   render() {
     const {
@@ -31,7 +49,8 @@ const TooltipWrapper = React.createClass({
       delayShow,
       wrapperClass,
       wrapperStyle,
-      wrapperTag
+      wrapperTag,
+      children,
     } = this.props
 
     let tooltip = null
@@ -46,7 +65,7 @@ const TooltipWrapper = React.createClass({
 
     const WrapperTag = wrapperTag || 'div'
 
-    const { childrenWithDisabledSupport, hasDisabledChildren } = this.renderChildren()
+    const { childrenWithDisabledSupport, hasDisabledChildren } = fixDisabledChildren(children)
 
     let disabledWrapperStyle = null
 
@@ -57,40 +76,21 @@ const TooltipWrapper = React.createClass({
       }, wrapperStyle)
     }
 
-    return (<OverlayTrigger
-      placement={placement}
-      overlay={tooltip}
-      delayShow={delayShow}
-    >
-      <WrapperTag
-        className={wrapperClass}
-        style={disabledWrapperStyle}
+    return (
+      <OverlayTrigger
+        placement={placement}
+        overlay={tooltip}
+        delayShow={delayShow}
       >
-        {childrenWithDisabledSupport}
-      </WrapperTag>
-    </OverlayTrigger>)
-  },
-
-
-  renderChildren() {
-    const { children } = this.props
-
-    let hasDisabledChildren = false
-
-    const childrenWithDisabledSupport = React.Children.map(children, (child) => {
-      const isChildType = child.type in [Button, React.DOM.button]
-
-      if (child && isChildType && child.props.disabled) {
-        hasDisabledChildren = true
-        const childStyle = Object.assign({}, child.props.style, { pointerEvents: 'none' })
-        return React.cloneElement(child, { style: childStyle })
-      }
-
-      return child
-    })
-
-    return { childrenWithDisabledSupport, hasDisabledChildren }
+        <WrapperTag
+          className={wrapperClass}
+          style={disabledWrapperStyle}
+        >
+          {childrenWithDisabledSupport}
+        </WrapperTag>
+      </OverlayTrigger>
+    )
   }
-})
+}
 
 export default TooltipWrapper
diff --git a/package.json b/package.json
@@ -118,6 +118,7 @@
     "minimist": "^1.2.0",
     "moment": "2.17.1",
     "postcss": "5.2.9",
+    "react-addons-perf": "^15.4.2",
     "react-bootstrap": "^0.30.3",
     "react-burger-menu": "1.10.10",
     "redux-actions": "1.2.0",

diff --git a/yarn.lock b/yarn.lock
@@ -5423,6 +5423,13 @@ react:
     loose-envify "^1.1.0"
     object-assign "^4.1.0"
 
+react-addons-perf:
+  version "15.4.2"
+  resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.4.2.tgz#110bdcf5c459c4f77cb85ed634bcd3397536383b"
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"
+
 react-bootstrap@^0.30.3:
   version "0.30.7"
   resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-0.30.7.tgz#39da80088693ecb71e8e63b5bdc313571fd993d1"