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

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