Fix react/jsx-no-bind on BodySchema component

Author: Brendan Abbott

.eslintrc.json

@@ -8,9 +8,5 @@
     "browser": true,
     "node": true,
     "jest": true
-  },
-  "rules": {
-    // Temporary, components need to be rewritten to take advantage of this
-    "react/jsx-no-bind": 0
   }
 }

src/components/BodySchema/BodySchema.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import createFragment from 'react-addons-create-fragment'
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 
@@ -14,6 +13,7 @@ export default class BodySchema extends Component {
 
     this.renderPropertyRow = this.renderPropertyRow.bind(this)
     this.renderSubsetProperties = this.renderSubsetProperties.bind(this)
+    this.onClick = this.onClick.bind(this)
 
     this.state = {
       expandedProp: []
@@ -28,41 +28,37 @@ export default class BodySchema extends Component {
     }
 
     const { expandedProp } = this.state
-    let iterator = 0
+
     return (
       <table className={classNames('body-schema', `body-schema--${styleVariation}`)}>
         <tbody>
-          {properties.map((property) => {
-            iterator = iterator + 1
-            let isLast = false
-            if (properties.length === iterator) {
-              isLast = true
-            }
+          {properties.map((property, i) => {
+            const isLast = (properties.length === i + 1)
 
-            if (property.type.includes('array') && expandedProp.includes(property.name) && property.properties !== undefined) {
-              return createFragment({
-                property: this.renderPropertyRow(property, isLast, true),
-                subset: this.renderSubsetProperties(property, true)
-              })
-            } else if (property.type.includes('array') && property.properties !== undefined) {
-              return this.renderPropertyRow(property, isLast, false)
-            } else if (property.type.includes('object') && expandedProp.includes(property.name) && property.properties !== undefined) {
-              return createFragment({
-                property: this.renderPropertyRow(property, isLast, true),
-                subset: this.renderSubsetProperties(property)
-              })
-            } else if (property.type.includes('object') && property.properties !== undefined) {
-              return this.renderPropertyRow(property, isLast, false)
-            } else {
+            if (property.properties === undefined) {
               return this.renderPropertyRow(property, isLast)
             }
+
+            const isPropertyArray = property.type.includes('array')
+            const isPropertyObject = property.type.includes('object')
+
+            if (isPropertyArray || isPropertyObject) {
+              if (expandedProp.includes(property.name)) {
+                return createFragment({
+                  property: this.renderPropertyRow(property, isLast, true, true),
+                  subset: this.renderSubsetProperties(property, isPropertyArray)
+                })
+              }
+
+              return this.renderPropertyRow(property, isLast, false, true)
+            }
           })}
         </tbody>
       </table>
     )
   }
 
-  renderPropertyRow (property, isLast, isOpen) {
+  renderPropertyRow (property, isLast, isOpen = undefined, hasSubset = false) {
     return (
       <Property
         key={property.name}
@@ -73,7 +69,7 @@ export default class BodySchema extends Component {
         enumValues={property.enum}
         defaultValue={property.defaultValue}
         constraints={property.constraints}
-        onClick={this.onClick.bind(this, property.name)}
+        onClick={hasSubset ? this.onClick : undefined}
         isRequired={property.required}
         isOpen={isOpen}
         isLast={isLast}
@@ -83,28 +79,18 @@ export default class BodySchema extends Component {
 
   renderSubsetProperties (property, isArray = false) {
     const { styleVariation } = this.props
-    let nextStyleVariation = 'even'
-    if (styleVariation === 'even') {
-      nextStyleVariation = 'odd'
-    }
+    const nextStyleVariation = (styleVariation === 'even') ? 'odd' : 'even'
+
     return (
       <tr className='body-schema-subset'>
         <td colSpan='100'>
-          <ReactCSSTransitionGroup
-            transitionName='schema-slide-toggle'
-            transitionEnterTimeout={500}
-            transitionLeaveTimeout={500}
-            transitionAppear
-            transitionAppearTimeout={500}
-          >
-            {isArray && <div>Array [</div>}
-            <BodySchema
-              key={`${property.name}-properties`}
-              properties={property.properties}
-              styleVariation={nextStyleVariation}
-            />
-            {isArray && <div>]</div>}
-          </ReactCSSTransitionGroup>
+          {isArray && <div>Array [</div>}
+          <BodySchema
+            key={`${property.name}-properties`}
+            properties={property.properties}
+            styleVariation={nextStyleVariation}
+          />
+          {isArray && <div>]</div>}
         </td>
       </tr>
     )

src/components/Property/Property.js

@@ -9,21 +9,30 @@ import PropertyConstraints from '../PropertyConstraints/PropertyConstraints'
 import './Property.scss'
 
 export default class Property extends Component {
+  constructor (props) {
+    super(props)
+
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  handleClick () {
+    if (this.props.onClick) {
+      this.props.onClick(this.props.name)
+    }
+  }
+
   render () {
     const {
       name, type, title, description, constraints, isRequired, enumValues, defaultValue, onClick, isOpen, isLast
     } = this.props
 
+    const isClickable = onClick !== undefined
+
     let subtype
     if (type.includes('array')) {
       subtype = this.props.subtype
     }
 
-    let isClickable = false
-    if (isOpen !== undefined) {
-      isClickable = true
-    }
-
     let status
     if (isOpen) {
       status = 'open'
@@ -34,7 +43,7 @@ export default class Property extends Component {
         className={classNames('property', {
           last: isLast
         })}
-        onClick={onClick}
+        onClick={this.handleClick}
       >
         <td className={classNames('property-name', {
           'property--isclickable': isClickable

test/components/__snapshots__/Property.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Property /> can render a basic property 1`] = `
 <tr
   className="property last"
-  onClick={undefined}
+  onClick={[Function]}
 >
   <td
     className="property-name"
@@ -36,7 +36,7 @@ exports[`<Property /> can render a basic property 1`] = `
 exports[`<Property /> can render a property with a format 1`] = `
 <tr
   className="property"
-  onClick={undefined}
+  onClick={[Function]}
 >
   <td
     className="property-name"
@@ -70,7 +70,7 @@ exports[`<Property /> can render a property with a format 1`] = `
 exports[`<Property /> can render a property with a subtype 1`] = `
 <tr
   className="property"
-  onClick={undefined}
+  onClick={[Function]}
 >
   <td
     className="property-name"
@@ -102,7 +102,7 @@ exports[`<Property /> can render a property with a subtype 1`] = `
 exports[`<Property /> can render a property with description 1`] = `
 <tr
   className="property"
-  onClick={undefined}
+  onClick={[Function]}
 >
   <td
     className="property-name"
@@ -138,7 +138,7 @@ exports[`<Property /> can render a property with description 1`] = `
 exports[`<Property /> can render a property with enum 1`] = `
 <tr
   className="property"
-  onClick={undefined}
+  onClick={[Function]}
 >
   <td
     className="property-name"
@@ -186,7 +186,7 @@ exports[`<Property /> can render a property with enum 1`] = `
 exports[`<Property /> can render a property with multiple types 1`] = `
 <tr
   className="property"
-  onClick={undefined}
+  onClick={[Function]}
 >
   <td
     className="property-name"
@@ -213,7 +213,7 @@ exports[`<Property /> can render a property with multiple types 1`] = `
 exports[`<Property /> can render a property with numerical constraints 1`] = `
 <tr
   className="property"
-  onClick={undefined}
+  onClick={[Function]}
 >
   <td
     className="property-name"