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

169 lines
4.2 KiB
JavaScript

/* @flow */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setToolbarHovered } from '../actions';
import ToolbarButton from './ToolbarButton';
/**
* Implements a toolbar in React/Web. It is a strip that contains a set of
* toolbar items such as buttons. Toolbar is commonly placed inside of a
* Toolbox.
*
* @class Toolbar
* @extends Component
*/
class Toolbar extends Component {
_renderToolbarButton: Function;
/**
* Base toolbar component's property types.
*
* @static
*/
static propTypes = {
/**
* Handler for mouse out event.
*/
_onMouseOut: React.PropTypes.func,
/**
* Handler for mouse over event.
*/
_onMouseOver: React.PropTypes.func,
/**
* Children of current React component.
*/
children: React.PropTypes.element,
/**
* Toolbar's class name.
*/
className: React.PropTypes.string,
/**
* Map with toolbar buttons.
*/
toolbarButtons: React.PropTypes.instanceOf(Map),
/**
* Indicates the position of the tooltip.
*/
tooltipPosition:
React.PropTypes.oneOf([ 'bottom', 'left', 'right', 'top' ])
};
/**
* Constructor of Primary toolbar class.
*
* @param {Object} props - Object containing React component properties.
*/
constructor(props) {
super(props);
// Bind callbacks to preverse this.
this._renderToolbarButton = this._renderToolbarButton.bind(this);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render(): ReactElement<*> {
const { className } = this.props;
return (
<div
className = { `toolbar ${className}` }
onMouseOut = { this.props._onMouseOut }
onMouseOver = { this.props._onMouseOver }>
{
[ ...this.props.toolbarButtons.entries() ]
.reduce(this._renderToolbarButton, [])
}
{
this.props.children
}
</div>
);
}
/**
* Renders toolbar button. Method is passed to reduce function.
*
* @param {Array} acc - Toolbar buttons array.
* @param {Array} keyValuePair - Key value pair containing button and its
* key.
* @private
* @returns {Array} Array of toolbar buttons.
*/
_renderToolbarButton(acc: Array<*>,
keyValuePair: Array<*>): Array<ReactElement<*>> {
const [ key, button ] = keyValuePair;
if (button.component) {
acc.push(
<button.component
key = { key }
tooltipPosition = { this.props.tooltipPosition } />
);
return acc;
}
const { tooltipPosition } = this.props;
const { onClick, onMount, onUnmount } = button;
acc.push(
<ToolbarButton
button = { button }
key = { key }
onClick = { onClick }
onMount = { onMount }
onUnmount = { onUnmount }
tooltipPosition = { tooltipPosition } />
);
return acc;
}
}
/**
* Maps part of Redux actions to component's props.
*
* @param {Function} dispatch - Redux action dispatcher.
* @private
* @returns {Object}
*/
function _mapDispatchToProps(dispatch: Function): Object {
return {
/**
* Dispatches an action signalling that toolbar is no being hovered.
*
* @protected
* @returns {Object} Dispatched action.
*/
_onMouseOut() {
dispatch(setToolbarHovered(false));
},
/**
* Dispatches an action signalling that toolbar is now being hovered.
*
* @protected
* @returns {Object} Dispatched action.
*/
_onMouseOver() {
dispatch(setToolbarHovered(true));
}
};
}
export default connect(undefined, _mapDispatchToProps)(Toolbar);