闭社主体 forked from https://github.com/tootsuite/mastodon
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.

50 lines
1.1 KiB

  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. class Button extends React.PureComponent {
  4. constructor (props, context) {
  5. super(props, context);
  6. this.handleClick = this.handleClick.bind(this);
  7. }
  8. handleClick (e) {
  9. if (!this.props.disabled) {
  10. this.props.onClick();
  11. }
  12. }
  13. render () {
  14. const style = {
  15. display: this.props.block ? 'block' : 'inline-block',
  16. width: this.props.block ? '100%' : 'auto',
  17. padding: `0 ${this.props.size / 2.25}px`,
  18. height: `${this.props.size}px`,
  19. lineHeight: `${this.props.size}px`
  20. };
  21. return (
  22. <button className={`button ${this.props.secondary ? 'button-secondary' : ''}`} disabled={this.props.disabled} onClick={this.handleClick} style={{ ...style, ...this.props.style }}>
  23. {this.props.text || this.props.children}
  24. </button>
  25. );
  26. }
  27. }
  28. Button.propTypes = {
  29. text: PropTypes.node,
  30. onClick: PropTypes.func,
  31. disabled: PropTypes.bool,
  32. block: PropTypes.bool,
  33. secondary: PropTypes.bool,
  34. size: PropTypes.number,
  35. style: PropTypes.object,
  36. children: PropTypes.node
  37. };
  38. Button.defaultProps = {
  39. size: 36
  40. };
  41. export default Button;