diff --git a/ui/app/components/app/dropdowns/components/menu.js b/ui/app/components/app/dropdowns/components/menu.js
index 950ccccb7..9bb919c6d 100644
--- a/ui/app/components/app/dropdowns/components/menu.js
+++ b/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
+ ?
{children}
+ : 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 ? {icon}
: null
+ const textComponent = text ? {text}
: null
+ const subTextComponent = subText ? {subText}
: null
return children
- ? h('div', { className: itemClassName, onClick }, children)
- : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent, subTextComponent ]
- .filter(d => Boolean(d))
+ ? {children}
+ : (
+
+ {[ iconComponent, textComponent, subTextComponent ].filter(d => Boolean(d))}
+
)
}
-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
}
-inherits(CloseArea, Component)
-function CloseArea () {
- Component.call(this)
+function CloseArea ({ onClick }) {
+ return
}
-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 }
diff --git a/ui/app/components/app/dropdowns/tests/menu.test.js b/ui/app/components/app/dropdowns/tests/menu.test.js
index 6413c0c2c..56cec93a3 100644
--- a/ui/app/components/app/dropdowns/tests/menu.test.js
+++ b/ui/app/components/app/dropdowns/tests/menu.test.js
@@ -31,14 +31,14 @@ describe('Dropdown Menu Components', () => {
)
})
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', () => {