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

Convert Dropdown and DropdownMenuItem components to JSX (#7510)

This commit is contained in:
Whymarrh Whitby 2019-11-22 23:53:16 -03:30 committed by GitHub
parent 7a0e40829a
commit 7d097dedaf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,6 +1,5 @@
const Component = require('react').Component
import React, { Component } from 'react'
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const MenuDroppo = require('../../menu-droppo')
const extend = require('xtend')
@ -23,31 +22,28 @@ class Dropdown extends Component {
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
}, innerStyle)
return h(
MenuDroppo,
{
containerClassName,
useCssTransition,
isOpen,
zIndex: 55,
onClickOutside,
style,
innerStyle: innerStyleDefaults,
},
[
h(
'style',
`
li.dropdown-menu-item:hover {
color:rgb(225, 225, 225);
background-color: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
li.dropdown-menu-item { color: rgb(185, 185, 185); }
`
),
...children,
]
return (
<MenuDroppo
containerClassName={containerClassName}
useCssTransition={useCssTransition}
isOpen={isOpen}
zIndex={55}
onClickOutside={onClickOutside}
style={style}
innerStyle={innerStyleDefaults}
>
<style>
{`
li.dropdown-menu-item:hover {
color:rgb(225, 225, 225);
background-color: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
li.dropdown-menu-item { color: rgb(185, 185, 185); }
`}
</style>
{ children }
</MenuDroppo>
)
}
}
@ -70,14 +66,14 @@ class DropdownMenuItem extends Component {
render () {
const { onClick, closeMenu, children, style } = this.props
return h(
'li.dropdown-menu-item',
{
onClick: () => {
return (
<li
className="dropdown-menu-item"
onClick={() => {
onClick()
closeMenu()
},
style: Object.assign({
}}
style={Object.assign({
listStyle: 'none',
padding: '8px 0px',
fontSize: '18px',
@ -87,9 +83,10 @@ class DropdownMenuItem extends Component {
justifyContent: 'flex-start',
alignItems: 'center',
color: 'white',
}, style),
},
children
}, style)}
>
{children}
</li>
)
}
}