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 1.7KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import React, { Component } from 'react';
  2. /**
  3. * Abstract (base) class for a button in 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 AbstractToolbarButton.
  16. */
  17. iconName: React.PropTypes.string,
  18. /**
  19. * The style of the Icon of this AbstractToolbarButton.
  20. */
  21. iconStyle: React.PropTypes.object,
  22. /**
  23. * On click handler.
  24. */
  25. onClick: React.PropTypes.func,
  26. /**
  27. * Toolbar button 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. * Implements React's {@link Component#render()}.
  41. *
  42. * @inheritdoc
  43. * @returns {ReactElement}
  44. */
  45. render() {
  46. return this._renderButton(this._renderIcon());
  47. }
  48. /**
  49. * Renders the icon of this Toolbar button.
  50. *
  51. * @param {string|ReactClass} type - The React Component type of the icon to
  52. * be rendered.
  53. * @protected
  54. * @returns {ReactElement} The icon of this Toolbar button.
  55. */
  56. _renderIcon(type) {
  57. const props = {};
  58. 'iconName' in this.props && (props.name = this.props.iconName);
  59. 'iconStyle' in this.props && (props.style = this.props.iconStyle);
  60. return React.createElement(type, props);
  61. }
  62. }