Merge pull request temando#79 from brendo/no-bind-jsx

Fix `react/jsx-no-bind` violations, simplify Example

Author: quangkhoa

.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
   }
 }

jest.config.js

@@ -7,8 +7,9 @@ module.exports = {
     'node_modules'
   ],
   moduleNameMapper: {
+    'balloon-css': '<rootDir>/src/__mocks__/styleMock.js',
     '\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
-    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/src/__mocks__/styleMock.js'
+    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/src/__mocks__/fileMock.js'
   },
   moduleFileExtensions: [
     'js',
@@ -17,4 +18,4 @@ module.exports = {
   ],
   testEnvironment: 'node',
   verbose: true
-};
+}

package.json

@@ -24,10 +24,9 @@
     "prop-types": "^15.5.8",
     "react": "^15.5.4",
     "react-addons-create-fragment": "^15.5.4",
-    "react-addons-css-transition-group": "^15.5.2",
     "react-document-title": "^2.0.2",
     "react-dom": "^15.5.4",
-    "react-json-view": "^1.7.5",
+    "react-json-view": "^1.8.2",
     "react-redux": "^5.0.3",
     "react-router": "3.0.0",
     "react-router-redux": "^4.0.8",

src/components/BodyContent/BodyContent.js

@@ -13,22 +13,22 @@ export default class BodyContent extends Component {
 
     this.renderTabs = this.renderTabs.bind(this)
     this.renderSchema = this.renderSchema.bind(this)
-    this.renderExample = this.renderExample.bind(this)
+    this.renderExamples = this.renderExamples.bind(this)
 
     this.state = {
       tab: 'schema'
     }
   }
 
   render () {
-    const { schema, example, examples } = this.props
+    const { schema, examples } = this.props
 
     const { tab } = this.state
     return (
       <div className='body-content'>
-        {schema && this.renderTabs(schema, example || examples)}
+        {schema && this.renderTabs(schema, examples)}
         {tab === 'schema' && this.renderSchema(schema)}
-        {tab === 'example' && this.renderExample(example, examples)}
+        {tab === 'example' && this.renderExamples(examples)}
       </div>
     )
   }
@@ -38,7 +38,7 @@ export default class BodyContent extends Component {
     return (
       <div className='body-content-tabs'>
         {includeSchema && this.renderSchemaTab(currentTab)}
-        {includeExample && this.renderExampleTab(currentTab)}
+        {includeExample && this.renderExamplesTab(currentTab)}
       </div>
     )
   }
@@ -57,7 +57,7 @@ export default class BodyContent extends Component {
     )
   }
 
-  renderExampleTab (currentTab) {
+  renderExamplesTab (currentTab) {
     return (
       <div
         role='button'
@@ -72,23 +72,23 @@ export default class BodyContent extends Component {
   }
 
   renderSchema (schema) {
-    if (schema) {
-      return (
-        <BodySchema properties={schema} styleVariation='odd' />
-      )
+    if (!schema) {
+      return null
     }
-    return null
+
+    return (
+      <BodySchema properties={schema} styleVariation='odd' />
+    )
   }
 
-  renderExample (example, examples) {
+  renderExamples (examples) {
     return (
-      <Example example={example} examples={examples} />
+      <Example examples={examples} />
     )
   }
 }
 
 BodyContent.propTypes = {
   schema: PropTypes.array,
-  example: PropTypes.string,
   examples: PropTypes.array
 }

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 = false, 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,35 +79,32 @@ 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>
     )
   }
 
+  /**
+   * Responsible for updating the state of all properties that
+   * have been expanded by the user.
+   *
+   * @param {string} propertyName
+   */
   onClick (propertyName) {
     const { expandedProp } = this.state
+
     if (expandedProp.includes(propertyName)) {
       const newExpanded = expandedProp.filter((prop) => prop !== propertyName)
       this.setState({ expandedProp: newExpanded })

src/components/Example/Example.js

@@ -13,79 +13,61 @@ export default class Example extends Component {
     super(props)
 
     this.onCopyClick = this.onCopyClick.bind(this)
-    this.updateState = this.updateState.bind(this)
-    this.renderString = this.renderString.bind(this)
-    this.renderJson = this.renderJson.bind(this)
-
-    const { example, examples } = this.props
-    let exampleToShow = example
-
-    if (!exampleToShow && examples && examples.length > 0) {
-      exampleToShow = examples[0]
-    }
 
     this.state = {
       hovered: false,
-      collapseAll: false,
-      example: exampleToShow
+      collapseAll: false
     }
   }
 
   render () {
-    const example = this.state.example
+    const { examples } = this.props
+    let example
 
-    if (example) {
-      if (typeof example === 'string') {
-        return this.renderString(example)
-      } else {
-        return this.renderJson(example)
-      }
+    // TODO: Handle multiple examples
+    if (examples && examples.length) {
+      example = examples[0]
     }
 
-    return null
-  }
+    const isSimple = typeof example === 'string'
 
-  renderString (example) {
-    return (
-      <div className='body-content-example'>{example}</div>
-    )
-  }
+    if (!example) {
+      return null
+    }
 
-  renderJson (example) {
     return (
       <div className='body-content-example'
-        onMouseEnter={() => this.updateState({ hovered: true })}
-        onMouseLeave={() => this.updateState({ hovered: false })}
+        onMouseEnter={() => this.setState({ hovered: true })}
+        onMouseLeave={() => this.setState({ hovered: false })}
       >
         <div className={classNames('action-buttons', {
           hovered: this.state.hovered
         })}>
           <CopyButton onCopyClick={this.onCopyClick} tooltip='Copy to Clipboard' />
-          <span onClick={() => this.updateState({ collapseAll: false })}>Expand All</span>
-          <span onClick={() => this.updateState({ collapseAll: true })}>Collapse All</span>
+          {!isSimple &&
+            <span onClick={() => this.setState({ collapseAll: false })}>Expand All</span>}
+          {!isSimple &&
+            <span onClick={() => this.setState({ collapseAll: true })}>Collapse All</span>}
         </div>
-        <ReactJson src={example} theme='chalk' displayDataTypes={false} displayObjectSize={false}
-          collapsed={this.state.collapseAll}
-          enableClipboard={false} />
+        {isSimple
+          ? {example}
+          : <ReactJson
+            src={example}
+            theme='chalk'
+            displayDataTypes={false}
+            displayObjectSize={false}
+            collapsed={this.state.collapseAll}
+            enableClipboard={false}
+        />}
       </div>
     )
   }
 
-  /**
-   * Update internal state
-   *
-   * @param {Object} changedState
-   */
-  updateState (changedState) {
-    this.setState(Object.assign({}, this.state, changedState))
-  }
-
   onCopyClick () {
-    copy(JSON.stringify(this.state.example, null, 2))
+    copy(JSON.stringify(this.props.examples[0], null, 2))
   }
 }
 
 Example.propTypes = {
-  example: PropTypes.string,
   examples: PropTypes.array
 }

src/components/Indicator/Indicator.js

@@ -11,11 +11,11 @@ export default class Indicator extends Component {
     const { status, className } = this.props
 
     return (
-      <div className={classNames('indicator', className, {
+      <span className={classNames('indicator', className, {
         [`indicator--${status}`]: status
       })}>
-        <img src={arrow} title='arrow' />
-      </div>
+        <img src={arrow} alt='' title='arrow' />
+      </span>
     )
   }
 }