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.

OverflowMenuItem.js 1.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import PropTypes from 'prop-types';
  2. import React, { Component } from 'react';
  3. /**
  4. * A React {@code Component} for displaying a link to interact with other
  5. * features of the application.
  6. *
  7. * @extends Component
  8. */
  9. class OverflowMenuItem extends Component {
  10. /**
  11. * {@code OverflowMenuItem} component's property types.
  12. *
  13. * @static
  14. */
  15. static propTypes = {
  16. /**
  17. * A succinct description of what the item does. Used by accessibility
  18. * tools and torture tests.
  19. */
  20. accessibilityLabel: PropTypes.string,
  21. /**
  22. * The icon class to use for displaying an icon before the link text.
  23. */
  24. icon: PropTypes.string,
  25. /**
  26. * The callback to invoke when {@code OverflowMenuItem} is clicked.
  27. */
  28. onClick: PropTypes.func,
  29. /**
  30. * The text to display in the {@code OverflowMenuItem}.
  31. */
  32. text: PropTypes.string
  33. };
  34. /**
  35. * Implements React's {@link Component#render()}.
  36. *
  37. * @inheritdoc
  38. * @returns {ReactElement}
  39. */
  40. render() {
  41. return (
  42. <li
  43. aria-label = { this.props.accessibilityLabel }
  44. className = 'overflow-menu-item'
  45. onClick = { this.props.onClick }>
  46. <span className = 'overflow-menu-item-icon'>
  47. <i className = { this.props.icon } />
  48. </span>
  49. { this.props.text }
  50. </li>
  51. );
  52. }
  53. }
  54. export default OverflowMenuItem;