Convert Menu, Item, Divider, and CloseArea components to use JSX (#7547)

ui/app/components/app/dropdowns/components/menu.js

@@ -1,61 +1,87 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const h = require('react-hyperscript')
+import PropTypes from 'prop-types'
+import React from 'react'
+import classnames from 'classnames'
 
-inherits(Menu, Component)
-function Menu () {
-  Component.call(this)
+/**
+ * Menu component
+ * @return {Component|null}
+ */
+function Menu (props) {
+  const { className, children, isShowing } = props
+  return isShowing
+    ? <div className={classnames('menu', className)}>{children}</div>
+    : null
 }
 
-Menu.prototype.render = function () {
-  const { className = '', children, isShowing } = this.props
-  return isShowing
-    ? h('div', { className: `menu ${className}` }, children)
-    : h('noscript')
+Menu.defaultProps = {
+  className: '',
+  isShowing: false,
+  children: null,
 }
 
-inherits(Item, Component)
-function Item () {
-  Component.call(this)
+Menu.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  isShowing: PropTypes.bool,
 }
 
-Item.prototype.render = function () {
+function Item (props) {
   const {
     icon,
     children,
     text,
     subText,
-    className = '',
+    className,
     onClick,
-  } = this.props
-  const itemClassName = `menu__item ${className} ${onClick ? 'menu__item--clickable' : ''}`
-  const iconComponent = icon ? h('div.menu__item__icon', [icon]) : null
-  const textComponent = text ? h('div.menu__item__text', text) : null
-  const subTextComponent = subText ? h('div.menu__item__subtext', subText) : null
+  } = props
+
+  const itemClassName = classnames('menu__item', className, {
+    'menu__item--clickable': Boolean(onClick),
+  })
+  const iconComponent = icon ? <div className="menu__item__icon">{icon}</div> : null
+  const textComponent = text ? <div className="menu__item__text">{text}</div> : null
+  const subTextComponent = subText ? <div className="menu__item__subtext">{subText}</div> : null
 
   return children
-    ? h('div', { className: itemClassName, onClick }, children)
-    : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent, subTextComponent ]
-      .filter(d => Boolean(d))
+    ? <div className={itemClassName} onClick={onClick}>{children}</div>
+    : (
+      <div
+        className={itemClassName}
+        onClick={onClick}
+      >
+        {[ iconComponent, textComponent, subTextComponent ].filter(d => Boolean(d))}
+      </div>
     )
 }
 
-inherits(Divider, Component)
-function Divider () {
-  Component.call(this)
+Item.defaultProps = {
+  children: null,
+  icon: null,
+  text: null,
+  subText: null,
+  className: '',
+  onClick: null,
 }
 
-Divider.prototype.render = function () {
-  return h('div.menu__divider')
+Item.propTypes = {
+  icon: PropTypes.node,
+  children: PropTypes.node,
+  text: PropTypes.node,
+  subText: PropTypes.node,
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+}
+
+function Divider () {
+  return <div className="menu__divider" />
 }
 
-inherits(CloseArea, Component)
-function CloseArea () {
-  Component.call(this)
+function CloseArea ({ onClick }) {
+  return <div className="menu__close-area" onClick={onClick} />
 }
 
-CloseArea.prototype.render = function () {
-  return h('div.menu__close-area', { onClick: this.props.onClick })
+CloseArea.propTypes = {
+  onClick: PropTypes.func.isRequired,
 }
 
 module.exports = { Menu, Item, Divider, CloseArea }

ui/app/components/app/dropdowns/tests/menu.test.js

@@ -31,14 +31,14 @@ describe('Dropdown Menu Components', () => {
         <Item
           icon="test icon"
           text="test text"
-          className="test className"
+          className="test foo1"
           onClick={onClickSpy}
         />
       )
     })
 
     it('add className based on props', () => {
-      assert.equal(wrapper.find('.menu__item').prop('className'), 'menu__item menu__item test className menu__item--clickable')
+      assert.equal(wrapper.find('.menu__item').prop('className'), 'menu__item test foo1 menu__item--clickable')
     })
 
     it('simulates onClick called', () => {