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', () => {