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.

AbstractToolbarButton.js 2.5KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import React, { Component } from 'react';
  2. /**
  3. * Abstract (base) class for a button in {@link Toolbar}.
  4. *
  5. * @abstract
  6. */
  7. export default class AbstractToolbarButton extends Component {
  8. /**
  9. * AbstractToolbarButton component's property types.
  10. *
  11. * @static
  12. */
  13. static propTypes = {
  14. /**
  15. * The name of the Icon of this {@code AbstractToolbarButton}.
  16. */
  17. iconName: React.PropTypes.string,
  18. /**
  19. * The style of the Icon of this {@code AbstractToolbarButton}.
  20. */
  21. iconStyle: React.PropTypes.object,
  22. /**
  23. * On click handler.
  24. */
  25. onClick: React.PropTypes.func,
  26. /**
  27. * {@code AbstractToolbarButton} styles.
  28. */
  29. style:
  30. React.PropTypes.oneOfType([
  31. React.PropTypes.array,
  32. React.PropTypes.object
  33. ]),
  34. /**
  35. * The color underlaying the button.
  36. */
  37. underlayColor: React.PropTypes.any
  38. };
  39. /**
  40. * Initializes a new {@code AbstractToolbarButton} instance.
  41. *
  42. * @param {Object} props - The React {@code Component} props to initialize
  43. * the new {@code AbstractToolbarButton} instance with.
  44. */
  45. constructor(props) {
  46. super(props);
  47. // Bind event handlers so they are only bound once per instance.
  48. this._onClick = this._onClick.bind(this);
  49. }
  50. /**
  51. * Handles clicking/pressing this {@code AbstractToolbarButton} by
  52. * forwarding the event to the {@code onClick} prop of this instance if any.
  53. *
  54. * @protected
  55. * @returns {*} The result returned by the invocation of the {@code onClick}
  56. * prop of this instance if any.
  57. */
  58. _onClick(...args) {
  59. const { onClick } = this.props;
  60. return onClick && onClick(...args);
  61. }
  62. /**
  63. * Implements React's {@link Component#render()}.
  64. *
  65. * @inheritdoc
  66. * @returns {ReactElement}
  67. */
  68. render() {
  69. return this._renderButton(this._renderIcon());
  70. }
  71. /**
  72. * Renders the icon of this {@code AbstractToolbarButton}.
  73. *
  74. * @param {string|ReactClass} type - The React Component type of the icon to
  75. * be rendered.
  76. * @protected
  77. * @returns {ReactElement} The icon of this {@code AbstractToolbarButton}.
  78. */
  79. _renderIcon(type) {
  80. const props = {};
  81. 'iconName' in this.props && (props.name = this.props.iconName);
  82. 'iconStyle' in this.props && (props.style = this.props.iconStyle);
  83. return React.createElement(type, props);
  84. }
  85. }