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.

42 lines
902 B

  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. const iconStyle = {
  4. height: null,
  5. lineHeight: '27px',
  6. width: `${18 * 1.28571429}px`,
  7. };
  8. export default class TextIconButton extends React.PureComponent {
  9. static propTypes = {
  10. label: PropTypes.string.isRequired,
  11. title: PropTypes.string,
  12. active: PropTypes.bool,
  13. onClick: PropTypes.func.isRequired,
  14. ariaControls: PropTypes.string,
  15. };
  16. handleClick = (e) => {
  17. e.preventDefault();
  18. this.props.onClick();
  19. }
  20. render () {
  21. const { label, title, active, ariaControls } = this.props;
  22. return (
  23. <button
  24. title={title}
  25. aria-label={title}
  26. className={`text-icon-button ${active ? 'active' : ''}`}
  27. aria-expanded={active}
  28. onClick={this.handleClick}
  29. aria-controls={ariaControls} style={iconStyle}
  30. >
  31. {label}
  32. </button>
  33. );
  34. }
  35. }