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

121 lines
2.9 KiB
JavaScript

/* @flow */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getToolbarClassNames } from '../functions';
import Toolbar from './Toolbar';
declare var interfaceConfig: Object;
/**
* Implementation of PrimaryToolbar React Component.
*
* @class PrimaryToolbar
* @extends Component
*/
class PrimaryToolbar extends Component {
static propTypes = {
/**
* Contains toolbar buttons for primary toolbar.
*/
_primaryToolbarButtons: React.PropTypes.instanceOf(Map),
/**
* Shows whether toolbox is visible.
*/
_visible: React.PropTypes.bool
};
state: Object;
/**
* Constructs instance of primary toolbar React component.
*
* @param {Object} props - React component's properties.
*/
constructor(props) {
super(props);
const splitterIndex = interfaceConfig.MAIN_TOOLBAR_SPLITTER_INDEX;
this.state = {
/**
* If deployment supports toolbar splitter this value contains its
* index.
*
* @type {number}
*/
splitterIndex
};
}
/**
* Renders primary toolbar component.
*
* @returns {ReactElement}
*/
render(): ReactElement<*> | null {
const { _primaryToolbarButtons } = this.props;
// The number of buttons to show in the toolbar isn't fixed, it depends
// on the availability of features and configuration parameters. So
// there may be nothing to render.
if (_primaryToolbarButtons.size === 0) {
return null;
}
const { splitterIndex } = this.state;
const { primaryToolbarClassName } = getToolbarClassNames(this.props);
const tooltipPosition
= interfaceConfig.filmStripOnly ? 'left' : 'bottom';
return (
<Toolbar
className = { primaryToolbarClassName }
splitterIndex = { splitterIndex }
toolbarButtons = { _primaryToolbarButtons }
tooltipPosition = { tooltipPosition } />
);
}
}
/**
* Maps part of Redux store to React component props.
*
* @param {Object} state - Snapshot of Redux store.
* @returns {{
* _primaryToolbarButtons: Map,
* _visible: boolean
* }}
* @private
*/
function _mapStateToProps(state: Object): Object {
const {
primaryToolbarButtons,
visible
} = state['features/toolbox'];
return {
/**
* Default toolbar buttons for primary toolbar.
*
* @private
* @type {Map}
*/
_primaryToolbarButtons: primaryToolbarButtons,
/**
* Shows whether toolbox is visible.
*
* @private
* @type {boolean}
*/
_visible: visible
};
}
export default connect(_mapStateToProps)(PrimaryToolbar);