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.

57 lines
1.2 KiB

  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import classNames from 'classnames';
  4. export default class Button extends React.PureComponent {
  5. static propTypes = {
  6. text: PropTypes.node,
  7. type: PropTypes.string,
  8. onClick: PropTypes.func,
  9. disabled: PropTypes.bool,
  10. block: PropTypes.bool,
  11. secondary: PropTypes.bool,
  12. className: PropTypes.string,
  13. title: PropTypes.string,
  14. children: PropTypes.node,
  15. };
  16. static defaultProps = {
  17. type: 'button',
  18. };
  19. handleClick = (e) => {
  20. if (!this.props.disabled && this.props.onClick) {
  21. this.props.onClick(e);
  22. }
  23. };
  24. setRef = (c) => {
  25. this.node = c;
  26. };
  27. focus() {
  28. this.node.focus();
  29. }
  30. render () {
  31. const className = classNames('button', this.props.className, {
  32. 'button-secondary': this.props.secondary,
  33. 'button--block': this.props.block,
  34. });
  35. return (
  36. <button
  37. className={className}
  38. disabled={this.props.disabled}
  39. onClick={this.handleClick}
  40. ref={this.setRef}
  41. title={this.props.title}
  42. type={this.props.type}
  43. >
  44. {this.props.text || this.props.children}
  45. </button>
  46. );
  47. }
  48. }