m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

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

Browse Source
This commit is contained in:
Whymarrh Whitby 2019-11-25 10:01:44 -03:30 committed by GitHub
parent 2b4c99e031
commit f5c496ffcd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
ui/app/components/app/dropdowns/components/menu.js
View File

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

4
ui/app/components/app/dropdowns/tests/menu.test.js
View File

@ -31,14 +31,14 @@ describe('Dropdown Menu Components', () => {
<Item <Item
icon="test icon" icon="test icon"
text="test text" text="test text"
className="test className" className="test foo1"
onClick={onClickSpy} onClick={onClickSpy}
/> />
) )
}) })
it('add className based on props', () => { 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', () => { it('simulates onClick called', () => {