jiti-meet/react/features/toolbox/components/AbstractToolbarButton.js

99 lines
2.5 KiB
JavaScript

import React, { Component } from 'react';
/**
* Abstract (base) class for a button in {@link Toolbar}.
*
* @abstract
*/
export default class AbstractToolbarButton extends Component {
/**
* AbstractToolbarButton component's property types.
*
* @static
*/
static propTypes = {
/**
* The name of the Icon of this {@code AbstractToolbarButton}.
*/
iconName: React.PropTypes.string,
/**
* The style of the Icon of this {@code AbstractToolbarButton}.
*/
iconStyle: React.PropTypes.object,
/**
* On click handler.
*/
onClick: React.PropTypes.func,
/**
* {@code AbstractToolbarButton} styles.
*/
style:
React.PropTypes.oneOfType([
React.PropTypes.array,
React.PropTypes.object
]),
/**
* The color underlaying the button.
*/
underlayColor: React.PropTypes.any
};
/**
* Initializes a new {@code AbstractToolbarButton} instance.
*
* @param {Object} props - The React {@code Component} props to initialize
* the new {@code AbstractToolbarButton} instance with.
*/
constructor(props) {
super(props);
// Bind event handlers so they are only bound once per instance.
this._onClick = this._onClick.bind(this);
}
/**
* Handles clicking/pressing this {@code AbstractToolbarButton} by
* forwarding the event to the {@code onClick} prop of this instance if any.
*
* @protected
* @returns {*} The result returned by the invocation of the {@code onClick}
* prop of this instance if any.
*/
_onClick(...args) {
const { onClick } = this.props;
return onClick && onClick(...args);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
return this._renderButton(this._renderIcon());
}
/**
* Renders the icon of this {@code AbstractToolbarButton}.
*
* @param {string|ReactClass} type - The React Component type of the icon to
* be rendered.
* @protected
* @returns {ReactElement} The icon of this {@code AbstractToolbarButton}.
*/
_renderIcon(type) {
const props = {};
'iconName' in this.props && (props.name = this.props.iconName);
'iconStyle' in this.props && (props.style = this.props.iconStyle);
return React.createElement(type, props);
}
}