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 Dropdown and DropdownMenuItem components to JSX (#7510)

Browse Source
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
1 changed files with 33 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
ui/app/components/app/dropdowns/components/dropdown.js
View File

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