You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

30 lines
1001 B

  1. import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
  2. const DropdownMenu = ({ icon, items, size }) => {
  3. return (
  4. <Dropdown>
  5. <DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }}>
  6. <i className={`fa fa-fw fa-${icon}`} style={{ verticalAlign: 'middle' }} />
  7. </DropdownTrigger>
  8. <DropdownContent style={{ lineHeight: '18px' }}>
  9. <ul>
  10. {items.map(({ text, action, href = '#' }, i) => <li key={i}><a href={href} target='_blank' rel='noopener' onClick={e => {
  11. if (typeof action === 'function') {
  12. e.preventDefault();
  13. action();
  14. }
  15. }}>{text}</a></li>)}
  16. </ul>
  17. </DropdownContent>
  18. </Dropdown>
  19. );
  20. };
  21. DropdownMenu.propTypes = {
  22. icon: React.PropTypes.string.isRequired,
  23. items: React.PropTypes.array.isRequired,
  24. size: React.PropTypes.number.isRequired
  25. };
  26. export default DropdownMenu;