Convert SimpleDropdown component to use JSX (#7540)

ui/app/components/app/dropdowns/simple-dropdown.js

@@ -1,15 +1,18 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const classnames = require('classnames')
-const R = require('ramda')
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import R from 'ramda'
 
 class SimpleDropdown extends Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      isOpen: false,
-    }
+  static propTypes = {
+    options: PropTypes.array.isRequired,
+    placeholder: PropTypes.string,
+    onSelect: PropTypes.func,
+    selectedOption: PropTypes.string,
+  }
+
+  state = {
+    isOpen: false,
   }
 
   getDisplayValue () {
@@ -26,67 +29,58 @@ class SimpleDropdown extends Component {
   }
 
   toggleOpen () {
-    const { isOpen } = this.state
-    this.setState({ isOpen: !isOpen })
+    this.setState((prevState) => ({
+      isOpen: !prevState.isOpen,
+    }))
   }
 
   renderOptions () {
     const { options, onSelect, selectedOption } = this.props
 
-    return h('div', [
-      h('div.simple-dropdown__close-area', {
-        onClick: event => {
-          event.stopPropagation()
-          this.handleClose()
-        },
-      }),
-      h('div.simple-dropdown__options', [
-        ...options.map(option => {
-          return h(
-            'div.simple-dropdown__option',
-            {
-              className: classnames({
+    return (
+      <div>
+        <div
+          className="simple-dropdown__close-area"
+          onClick={event => {
+            event.stopPropagation()
+            this.handleClose()
+          }}
+        />
+        <div className="simple-dropdown__options">
+          {options.map((option) => (
+            <div
+              className={classnames('simple-dropdown__option', {
                 'simple-dropdown__option--selected': option.value === selectedOption,
-              }),
-              key: option.value,
-              onClick: () => {
+              })}
+              key={option.value}
+              onClick={() => {
                 if (option.value !== selectedOption) {
                   onSelect(option.value)
                 }
 
                 this.handleClose()
-              },
-            },
-            option.displayValue || option.value,
-          )
-        }),
-      ]),
-    ])
+              }}
+            >
+              {option.displayValue || option.value}
+            </div>
+          ))}
+        </div>
+      </div>
+    )
   }
 
   render () {
     const { placeholder } = this.props
     const { isOpen } = this.state
 
-    return h(
-      'div.simple-dropdown',
-      {
-        onClick: () => this.toggleOpen(),
-      },
-      [
-        h('div.simple-dropdown__selected', this.getDisplayValue() || placeholder || 'Select'),
-        h('i.fa.fa-caret-down.fa-lg.simple-dropdown__caret'),
-        isOpen && this.renderOptions(),
-      ]
+    return (
+      <div className="simple-dropdown" onClick={() => this.toggleOpen()}>
+        <div className="simple-dropdown__selected">{this.getDisplayValue() || placeholder || 'Select'}</div>
+        <i className="fa fa-caret-down fa-lg simple-dropdown__caret" />
+        {isOpen && this.renderOptions()}
+      </div>
     )
   }
 }
 
-SimpleDropdown.propTypes = {
-  options: PropTypes.array.isRequired,
-  placeholder: PropTypes.string,
-  onSelect: PropTypes.func,
-  selectedOption: PropTypes.string,
-}
-
 module.exports = SimpleDropdown