Commit c72e4b7b authored by Luke Schoen's avatar Luke Schoen
Browse files

fix: Use Menupopup with trigger and without underlay CSS

parent bedcce14
......@@ -14,18 +14,6 @@ import withAccount from '../utils/withAccount';
@withRouter
@withAccount
class Tokens extends PureComponent {
state = {
isMenuOpen: false
};
handleToggleMenu = () => {
const { isMenuOpen } = this.state;
this.setState({ isMenuOpen: !isMenuOpen });
};
handleMenuRef = menuNode => this.setState({ menuNode });
handleGoToLink = url => {
this.props.history.push(url);
};
......@@ -66,21 +54,9 @@ class Tokens extends PureComponent {
const {
account: { address, name, type }
} = this.props;
const { isMenuOpen, menuNode } = this.state;
return (
<div className='tokens'>
<div className={isMenuOpen ? 'popup-underlay' : ''} />
<MenuPopup
className='popup-menu-account'
context={menuNode}
horizontalOffset={1}
menuItems={this.menuItems()}
onClose={this.handleToggleMenu}
onItemClick={this.handleGoToLink}
open={isMenuOpen}
size='small'
/>
<AccountHeader
address={address}
copyAddress
......@@ -92,13 +68,14 @@ class Tokens extends PureComponent {
</Link>
}
right={
<a
className='icon -menu'
ref={this.handleMenuRef}
onClick={this.handleToggleMenu}
>
Menu
</a>
<MenuPopup
className='popup-menu-account'
horizontalOffset={1}
menuItems={this.menuItems()}
onItemClick={this.handleGoToLink}
size='small'
trigger={<a className='icon -menu'>Menu</a>}
/>
}
/>
......
.popup-underlay {
background: transparent;
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 1899; /* Under the menu popup */
}
.popup-menu-account {
/* Override SUI popup styles so popup does not appear above menu icon */
background: $white !important;
......
......@@ -7,14 +7,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Popup as SUIPopup } from 'semantic-ui-react';
export const MenuPopup = ({
menuItems,
onClose,
onItemClick,
open,
...otherProps
}) => (
<SUIPopup onClose={(event, data) => onClose()} open={open} {...otherProps}>
export const MenuPopup = ({ menuItems, onItemClick, ...otherProps }) => (
<SUIPopup {...otherProps}>
<div className='popup-screen'>
<SUIPopup.Content>
{menuItems &&
......@@ -36,23 +30,16 @@ MenuPopup.defaultProps = {
basic: true,
horizontalOffset: 0,
on: 'click',
position: 'top right',
size: 'large',
verticalOffset: 0
size: 'large'
};
MenuPopup.propTypes = {
basic: PropTypes.bool, // toggles popup arrow
className: PropTypes.string,
context: PropTypes.any, // element to bind the popup to or use position
horizontalOffset: PropTypes.number,
hoverable: PropTypes.bool, // toggle autoclose
menuItems: PropTypes.array.isRequired,
on: PropTypes.string,
onClose: PropTypes.func.isRequired,
onItemClick: PropTypes.func,
open: PropTypes.bool.isRequired,
position: PropTypes.string,
size: PropTypes.string,
verticalOffset: PropTypes.number
trigger: PropTypes.node
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment