165 lines
4.3 KiB
JavaScript
165 lines
4.3 KiB
JavaScript
/* @flow */
|
|
|
|
import PropTypes from 'prop-types';
|
|
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
|
|
import { setToolbarHovered } from '../actions';
|
|
|
|
import StatelessToolbar from './StatelessToolbar';
|
|
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 {
|
|
_onMouseOut: Function;
|
|
_onMouseOver: Function;
|
|
_renderToolbarButton: Function;
|
|
|
|
/**
|
|
* Base toolbar component's property types.
|
|
*
|
|
* @static
|
|
*/
|
|
static propTypes = {
|
|
/**
|
|
* Children of current React component.
|
|
*/
|
|
children: PropTypes.element,
|
|
|
|
/**
|
|
* Toolbar's class name.
|
|
*/
|
|
className: PropTypes.string,
|
|
|
|
/**
|
|
* Used to dispatch an action when a button is clicked or on mouse
|
|
* out/in event.
|
|
*/
|
|
dispatch: PropTypes.func,
|
|
|
|
/**
|
|
* Map with toolbar buttons.
|
|
*/
|
|
toolbarButtons: PropTypes.instanceOf(Map),
|
|
|
|
/**
|
|
* Indicates the position of the tooltip.
|
|
*/
|
|
tooltipPosition: PropTypes.oneOf([ 'bottom', 'left', 'right', 'top' ])
|
|
};
|
|
|
|
/**
|
|
* Constructor of Primary toolbar class.
|
|
*
|
|
* @param {Object} props - Object containing React component properties.
|
|
*/
|
|
constructor(props: Object) {
|
|
super(props);
|
|
|
|
// Bind callbacks to preverse this.
|
|
this._onMouseOut = this._onMouseOut.bind(this);
|
|
this._onMouseOver = this._onMouseOver.bind(this);
|
|
this._renderToolbarButton = this._renderToolbarButton.bind(this);
|
|
}
|
|
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
* @returns {ReactElement}
|
|
*/
|
|
render(): ReactElement<*> {
|
|
const props = {
|
|
className: this.props.className,
|
|
onMouseOut: this._onMouseOut,
|
|
onMouseOver: this._onMouseOver
|
|
};
|
|
|
|
return (
|
|
<StatelessToolbar { ...props }>
|
|
{
|
|
[ ...this.props.toolbarButtons.entries() ]
|
|
.map(this._renderToolbarButton)
|
|
}
|
|
{
|
|
this.props.children
|
|
}
|
|
</StatelessToolbar>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 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));
|
|
}
|
|
|
|
/**
|
|
* Renders toolbar button. Method is passed to map function.
|
|
*
|
|
* @param {Array} keyValuePair - Key value pair containing button and its
|
|
* key.
|
|
* @private
|
|
* @returns {ReactElement} A toolbar button.
|
|
*/
|
|
_renderToolbarButton(keyValuePair: Array<*>): ReactElement<*> {
|
|
const [ key, button ] = keyValuePair;
|
|
|
|
if (button.component) {
|
|
|
|
return (
|
|
<button.component
|
|
key = { key }
|
|
toggled = { button.toggled }
|
|
tooltipPosition = { this.props.tooltipPosition } />
|
|
);
|
|
}
|
|
|
|
const { tooltipPosition } = this.props;
|
|
const {
|
|
childComponent: ChildComponent,
|
|
onClick,
|
|
onMount,
|
|
onUnmount
|
|
} = button;
|
|
const onClickWithDispatch = (...args) =>
|
|
onClick && onClick(this.props.dispatch, ...args);
|
|
|
|
return (
|
|
<ToolbarButton
|
|
button = { button }
|
|
key = { key }
|
|
onClick = { onClickWithDispatch }
|
|
onMount = { onMount }
|
|
onUnmount = { onUnmount }
|
|
tooltipPosition = { tooltipPosition }>
|
|
{ button.html || null }
|
|
{ ChildComponent ? <ChildComponent /> : null }
|
|
</ToolbarButton>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect()(Toolbar);
|