mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Implement redesigned dropdown
This commit is contained in:
parent
ed8a71d350
commit
a49e5e158a
71
ui/responsive/app/components/dropdown.js
Normal file
71
ui/responsive/app/components/dropdown.js
Normal file
@ -0,0 +1,71 @@
|
||||
const Component = require('react').Component;
|
||||
const PropTypes = require('react').PropTypes;
|
||||
const h = require('react-hyperscript');
|
||||
const MenuDroppo = require('menu-droppo');
|
||||
|
||||
class Dropdown extends Component {
|
||||
render() {
|
||||
const { isOpen, onClickOutside, style, children } = this.props;
|
||||
|
||||
return h(
|
||||
MenuDroppo,
|
||||
{
|
||||
isOpen,
|
||||
zIndex: 11,
|
||||
onClickOutside,
|
||||
style,
|
||||
innerStyle: {
|
||||
borderRadius: '4px',
|
||||
padding: '8px 16px',
|
||||
background: 'rgba(0, 0, 0, 0.8)',
|
||||
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
|
||||
},
|
||||
},
|
||||
children,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Dropdown.propTypes = {
|
||||
isOpen: PropTypes.func.isRequired,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
children: PropTypes.node,
|
||||
style: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
class DropdownMenuItem extends Component {
|
||||
render() {
|
||||
const { onClick, closeMenu, children } = this.props;
|
||||
|
||||
return h(
|
||||
'li',
|
||||
{
|
||||
onClick,
|
||||
closeMenu,
|
||||
style: {
|
||||
listStyle: 'none',
|
||||
padding: '8px 0px 8px 0px',
|
||||
fontSize: '12px',
|
||||
fontStyle: 'normal',
|
||||
fontFamily: 'Montserrat Regular',
|
||||
color: 'rgb(185, 185, 185)',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
},
|
||||
children
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DropdownMenuItem.propTypes = {
|
||||
closeMenu: PropTypes.func.isRequired,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
Dropdown,
|
||||
DropdownMenuItem,
|
||||
};
|
Loading…
Reference in New Issue
Block a user