MenuPopup.js

// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause

import React from 'react';
import PropTypes from 'prop-types';
import { Popup as SUIPopup } from 'semantic-ui-react';

export const MenuPopup = ({
  basic,
  className,
  context,
  handleGoToLink,
  horizontalOffset,
  hoverable,
  menuItems,
  on,
  onClose,
  open,
  position,
  size,
  verticalOffset
}) => (
  <SUIPopup
    basic={basic} // toggles popup arrow
    className={className}
    context={context} // element to bind the popup to or use position
    horizontalOffset={horizontalOffset}
    hoverable={hoverable} // toggle autoclose
    keepInViewPort
    on={on}
    onClose={(event, data) => onClose()}
    open={open}
    position={position}
    size={size}
    verticalOffset={verticalOffset}
  >
    <div className='popup-screen'>
      <SUIPopup.Content>
        {menuItems &&
          menuItems.map(item => (
            <div
              className='popup-screen_item'
              key={item.name}
              onClick={() => handleGoToLink(item.url)}
            >
              {item.name}
            </div>
          ))}
      </SUIPopup.Content>
    </div>
  </SUIPopup>
);

MenuPopup.defaultProps = {
  basic: true,
  horizontalOffset: 0,
  on: 'click',
  position: 'top right',
  size: 'large',
  verticalOffset: 0
};

MenuPopup.propTypes = {
  basic: PropTypes.bool,
  className: PropTypes.string,
  context: PropTypes.any,
  handleGoToLink: PropTypes.func,
  horizontalOffset: PropTypes.number,
  hoverable: PropTypes.bool,
  menuItems: PropTypes.array.isRequired,
  on: PropTypes.string,
  onClose: PropTypes.func.isRequired,
  open: PropTypes.bool.isRequired,
  position: PropTypes.string,
  size: PropTypes.string,
  verticalOffset: PropTypes.number
};