@eureca/eureca-ui/src/components/Menu/icon-and-label.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';

import { Box, Menu, MenuItem, Typography } from '@material-ui/core';

import { IconContext } from 'react-icons';

function IconAndLabel({ options = [], anchor, onClose, onClick = () => {}, ...props }) {
  if (!options.length) return null;

  return (
    <Menu
      open={Boolean(anchor)}
      anchorEl={anchor}
      onClose={onClose}
      getContentAnchorEl={null}
      {...props}
    >
      {options.map(
        option =>
          option.Component || (
            <MenuItem key={option.value} onClick={event => onClick(event, option.value)}>
              {option.icon && (
                <Box mr={1} minWidth={24}>
                  <IconContext.Provider value={{ size: '1rem' }}>
                    {option.icon}
                  </IconContext.Provider>
                </Box>
              )}
              <Typography variant="body2">{option.label}</Typography>
            </MenuItem>
          )
      )}
    </Menu>
  );
}

IconAndLabel.propTypes = {
  options: PropTypes.arrayOf(
    PropTypes.shape({
      Component: PropTypes.node,
      icon: PropTypes.object,
      label: PropTypes.string.isRequired,
      value: PropTypes.string.isRequired,
    })
  ).isRequired,
  onClose: PropTypes.func.isRequired,
  onClick: PropTypes.func,
  anchor: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),
};

export { IconAndLabel };