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

/* @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);