jiti-meet/react/features/toolbox/components/web/ToolbarButton.js

82 lines
2.0 KiB
JavaScript
Raw Normal View History

/* @flow */
import Tooltip from '@atlaskit/tooltip';
import React from 'react';
2017-02-16 23:02:40 +00:00
import AbstractToolbarButton from '../AbstractToolbarButton';
import type { Props as AbstractToolbarButtonProps }
from '../AbstractToolbarButton';
/**
* The type of the React {@code Component} props of {@link ToolbarButton}.
*/
type Props = AbstractToolbarButtonProps & {
/**
* The text to display in the tooltip.
*/
tooltip: string,
/**
* From which direction the tooltip should appear, relative to the
* button.
*/
tooltipPosition: string
};
2017-02-16 23:02:40 +00:00
/**
* Represents a button in the toolbar.
2017-02-16 23:02:40 +00:00
*
* @extends AbstractToolbarButton
*/
class ToolbarButton extends AbstractToolbarButton<Props> {
/**
* Default values for {@code ToolbarButton} component's properties.
*
* @static
*/
static defaultProps = {
tooltipPosition: 'top'
};
2017-08-15 22:39:42 +00:00
2017-02-16 23:02:40 +00:00
/**
* Renders the button of this {@code ToolbarButton}.
2017-02-16 23:02:40 +00:00
*
* @param {Object} children - The children, if any, to be rendered inside
* the button. Presumably, contains the icon of this {@code ToolbarButton}.
* @protected
* @returns {ReactElement} The button of this {@code ToolbarButton}.
2017-02-16 23:02:40 +00:00
*/
_renderButton(children) {
return (
<div
aria-label = { this.props.accessibilityLabel }
className = 'toolbox-button'
onClick = { this.props.onClick }>
{ this.props.tooltip
? <Tooltip
content = { this.props.tooltip }
position = { this.props.tooltipPosition }>
{ children }
</Tooltip>
: children }
</div>
);
2017-02-16 23:02:40 +00:00
}
/**
* Renders the icon of this {@code ToolbarButton}.
2017-02-16 23:02:40 +00:00
*
* @inheritdoc
*/
_renderIcon() {
return (
<div className = 'toolbox-icon'>
<i className = { this.props.iconName } />
</div>
);
2017-02-16 23:02:40 +00:00
}
}
export default ToolbarButton;