text_icon_button.js 846 B

1234567891011121314151617181920212223242526272829303132333435363738
  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. render () {
  17. const { label, title, active, ariaControls } = this.props;
  18. return (
  19. <button
  20. type='button'
  21. title={title}
  22. aria-label={title}
  23. className={`text-icon-button ${active ? 'active' : ''}`}
  24. aria-expanded={active}
  25. onClick={this.props.onClick}
  26. aria-controls={ariaControls} style={iconStyle}
  27. >
  28. {label}
  29. </button>
  30. );
  31. }
  32. }