_renderToolboxContent()

in react/features/toolbox/components/web/Toolbox.js [1224:1298]
67 lines of code
11 McCabe index (conditional complexity)

    _renderToolboxContent() {
        const {
            _isMobile,
            _overflowMenuVisible,
            _reactionsEnabled,
            _toolbarButtons,
            classes,
            showDominantSpeakerName,
            t
        } = this.props;

        const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
        const containerClassName = `toolbox-content${_isMobile ? ' toolbox-content-mobile' : ''}`;

        const { mainMenuButtons, overflowMenuButtons } = this._getVisibleButtons();

        return (
            <div className = { containerClassName }>
                <div
                    className = 'toolbox-content-wrapper'
                    onFocus = { this._onTabIn }
                    { ...(_isMobile ? {} : {
                        onMouseOut: this._onMouseOut,
                        onMouseOver: this._onMouseOver
                    }) }>

                    { showDominantSpeakerName && <DominantSpeakerName /> }

                    <div className = 'toolbox-content-items'>
                        {mainMenuButtons.map(({ Content, key, ...rest }) => Content !== Separator && (
                            <Content
                                { ...rest }
                                key = { key } />))}

                        {Boolean(overflowMenuButtons.length) && (
                            <OverflowMenuButton
                                ariaControls = 'overflow-menu'
                                isOpen = { _overflowMenuVisible }
                                key = 'overflow-menu'
                                onVisibilityChange = { this._onSetOverflowVisible }
                                showMobileReactions = {
                                    _reactionsEnabled && overflowMenuButtons.find(({ key }) => key === 'raisehand')
                                }>
                                <ul
                                    aria-label = { t(toolbarAccLabel) }
                                    className = { classes.overflowMenu }
                                    id = 'overflow-menu'
                                    onKeyDown = { this._onEscKey }
                                    role = 'menu'>
                                    {overflowMenuButtons.map(({ group, key, Content, ...rest }, index, arr) => {
                                        const showSeparator = index > 0 && arr[index - 1].group !== group;

                                        return (key !== 'raisehand' || !_reactionsEnabled)
                                            && <Fragment key = { `f${key}` }>
                                                {showSeparator && <Separator key = { `hr${group}` } />}
                                                <Content
                                                    { ...rest }
                                                    key = { key }
                                                    showLabel = { true } />
                                            </Fragment>
                                        ;
                                    })}
                                </ul>
                            </OverflowMenuButton>
                        )}

                        <HangupButton
                            customClass = 'hangup-button'
                            key = 'hangup-button'
                            visible = { isToolbarButtonEnabled('hangup', _toolbarButtons) } />
                    </div>
                </div>
            </div>
        );
    }