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

156 lines
4.0 KiB
JavaScript
Raw Normal View History

2017-02-16 23:02:40 +00:00
/* @flow */
import React, { Component } from 'react';
import { connect } from 'react-redux';
2017-05-31 05:24:34 +00:00
import { setToolbarHovered } from '../actions';
import StatelessToolbar from './StatelessToolbar';
2017-02-16 23:02:40 +00:00
import ToolbarButton from './ToolbarButton';
/**
2017-04-01 05:52:40 +00:00
* 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.
2017-02-16 23:02:40 +00:00
*
2017-04-01 05:52:40 +00:00
* @class Toolbar
2017-02-16 23:02:40 +00:00
* @extends Component
*/
2017-04-01 05:52:40 +00:00
class Toolbar extends Component {
_onMouseOut: Function;
_onMouseOver: Function;
2017-02-16 23:02:40 +00:00
_renderToolbarButton: Function;
/**
* Base toolbar component's property types.
*
* @static
*/
static propTypes = {
/**
* Children of current React component.
*/
children: React.PropTypes.element,
/**
* Toolbar's class name.
*/
className: React.PropTypes.string,
2017-07-26 20:47:53 +00:00
/**
* Used to dispatch an action when a button is clicked or on mouse
* out/in event.
*/
dispatch: React.PropTypes.func,
2017-02-16 23:02:40 +00:00
/**
* Map with toolbar buttons.
*/
2017-04-06 22:40:10 +00:00
toolbarButtons: React.PropTypes.instanceOf(Map),
/**
* Indicates the position of the tooltip.
*/
tooltipPosition:
React.PropTypes.oneOf([ 'bottom', 'left', 'right', 'top' ])
2017-02-16 23:02:40 +00:00
};
/**
* Constructor of Primary toolbar class.
*
* @param {Object} props - Object containing React component properties.
*/
constructor(props: Object) {
2017-02-16 23:02:40 +00:00
super(props);
2017-04-06 22:40:10 +00:00
// Bind callbacks to preverse this.
this._onMouseOut = this._onMouseOut.bind(this);
this._onMouseOver = this._onMouseOver.bind(this);
2017-02-16 23:02:40 +00:00
this._renderToolbarButton = this._renderToolbarButton.bind(this);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render(): ReactElement<*> {
const props = {
2017-08-04 08:15:11 +00:00
className: this.props.className,
onMouseOut: this._onMouseOut,
2017-08-04 08:15:11 +00:00
onMouseOver: this._onMouseOver
};
2017-02-16 23:02:40 +00:00
return (
<StatelessToolbar { ...props }>
2017-02-16 23:02:40 +00:00
{
[ ...this.props.toolbarButtons.entries() ]
.map(this._renderToolbarButton)
2017-02-16 23:02:40 +00:00
}
{
this.props.children
}
</StatelessToolbar>
2017-02-16 23:02:40 +00:00
);
}
2017-07-26 20:47:53 +00:00
/**
* Dispatches an action signalling that toolbar is no being hovered.
*
* @protected
* @returns {Object} Dispatched action.
*/
_onMouseOut() {
this.props.dispatch(setToolbarHovered(false));
}
/**
* Dispatches an action signalling that toolbar is now being hovered.
*
* @protected
* @returns {Object} Dispatched action.
*/
_onMouseOver() {
this.props.dispatch(setToolbarHovered(true));
}
2017-02-16 23:02:40 +00:00
/**
* Renders toolbar button. Method is passed to map function.
2017-02-16 23:02:40 +00:00
*
* @param {Array} keyValuePair - Key value pair containing button and its
* key.
* @private
* @returns {ReactElement} A toolbar button.
2017-02-16 23:02:40 +00:00
*/
_renderToolbarButton(
keyValuePair: Array<*>): ReactElement<*> {
2017-02-16 23:02:40 +00:00
const [ key, button ] = keyValuePair;
if (button.component) {
return (
<button.component
key = { key }
tooltipPosition = { this.props.tooltipPosition } />
);
}
const { tooltipPosition } = this.props;
2017-02-16 23:02:40 +00:00
const { onClick, onMount, onUnmount } = button;
2017-08-04 08:15:11 +00:00
const onClickWithDispatch = (...args) =>
onClick && onClick(this.props.dispatch, ...args);
2017-02-16 23:02:40 +00:00
return (
2017-02-16 23:02:40 +00:00
<ToolbarButton
button = { button }
key = { key }
2017-08-04 08:15:11 +00:00
onClick = { onClickWithDispatch }
2017-02-16 23:02:40 +00:00
onMount = { onMount }
2017-04-06 22:40:10 +00:00
onUnmount = { onUnmount }
tooltipPosition = { tooltipPosition } />
2017-02-16 23:02:40 +00:00
);
}
}
2017-07-26 20:47:53 +00:00
export default connect()(Toolbar);