feat(toolbox): move OverflowMenu show logic to redux

react/features/toolbox/actionTypes.js

@@ -29,6 +29,16 @@ export const FULL_SCREEN_CHANGED = Symbol('FULL_SCREEN_CHANGED');
  */
 export const SET_FULL_SCREEN = Symbol('SET_FULL_SCREEN');
 
+/**
+ * The type of the (redux) action which shows/hides the OverflowMenu.
+ *
+ * {
+ *     type: SET_OVERFLOW_MENU_VISIBLE,
+ *     visible: boolean
+ * }
+ */
+export const SET_OVERFLOW_MENU_VISIBLE = Symbol('SET_OVERFLOW_MENU_VISIBLE');
+
 /**
  * The type of the action which sets the indicator which determiens whether a
  * fToolbar in the Toolbox is hovered.

react/features/toolbox/actions.native.js

@@ -2,6 +2,7 @@
 
 import {
     CLEAR_TOOLBOX_TIMEOUT,
+    SET_OVERFLOW_MENU_VISIBLE,
     SET_TOOLBAR_HOVERED,
     SET_TOOLBOX_ALWAYS_VISIBLE,
     SET_TOOLBOX_ENABLED,
@@ -24,6 +25,22 @@ export function clearToolboxTimeout(): Object {
     };
 }
 
+/**
+ * Shows/hides the overflow menu.
+ *
+ * @param {boolean} visible - True to show it or false to hide it.
+ * @returns {{
+ *     type: SET_OVERFLOW_MENU_VISIBLE,
+ *     visible: boolean
+ * }}
+ */
+export function setOverflowMenuVisible(visible: boolean): Object {
+    return {
+        type: SET_OVERFLOW_MENU_VISIBLE,
+        visible
+    };
+}
+
 /**
  * Signals that toolbar is hovered value should be changed.
  *

react/features/toolbox/components/OverflowMenuButton.web.js

@@ -2,6 +2,7 @@ import InlineDialog from '@atlaskit/inline-dialog';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
+import { createToolbarEvent, sendAnalytics } from '../../analytics';
 import { translate } from '../../base/i18n';
 
 import ToolbarButton from './ToolbarButton';
@@ -100,6 +101,8 @@ class OverflowMenuButton extends Component {
      * @returns {void}
      */
     _onToggleDialogVisibility() {
+        sendAnalytics(createToolbarEvent('overflow'));
+
         this.props.onVisibilityChange(!this.props.isOpen);
     }
 }

react/features/toolbox/components/Toolbox.web.js

@@ -36,7 +36,11 @@ import {
     VideoQualityDialog
 } from '../../video-quality';
 
-import { setFullScreen, setToolbarHovered } from '../actions';
+import {
+    setFullScreen,
+    setOverflowMenuVisible,
+    setToolbarHovered
+} from '../actions';
 
 import OverflowMenuButton from './OverflowMenuButton';
 import OverflowMenuItem from './OverflowMenuItem';
@@ -118,6 +122,11 @@ type Props = {
      */
     _localParticipantID: String,
 
+    /**
+     * Whether or not the overflow menu is visible.
+     */
+    _overflowMenuVisible: boolean,
+
     /**
      * Whether or not the local participant's hand is raised.
      */
@@ -160,14 +169,6 @@ type Props = {
     t: Function
 }
 
-type State = {
-
-    /**
-     * Whether or not the overflow menu is visible.
-     */
-    showOverflowMenu: boolean
-}
-
 declare var APP: Object;
 declare var interfaceConfig: Object;
 
@@ -176,13 +177,9 @@ declare var interfaceConfig: Object;
  *
  * @extends Component
  */
-class Toolbox extends Component<Props, State> {
+class Toolbox extends Component<Props> {
     _visibleButtons: Object;
 
-    state = {
-        showOverflowMenu: false
-    }
-
     /**
      * Initializes a new {@code Toolbox} instance.
      *
@@ -282,11 +279,11 @@ class Toolbox extends Component<Props, State> {
      */
     componentWillReceiveProps(nextProps) {
         // Ensure the dialog is closed when the toolbox becomes hidden.
-        if (this.state.showOverflowMenu && !nextProps._visible) {
+        if (this.props._overflowMenuVisible && !nextProps._visible) {
             this._onSetOverflowVisible(false);
         }
 
-        if (this.state.showOverflowMenu
+        if (this.props._overflowMenuVisible
             && !this.props._dialog
             && nextProps._dialog) {
             this._onSetOverflowVisible(false);
@@ -315,6 +312,7 @@ class Toolbox extends Component<Props, State> {
         const {
             _chatOpen,
             _hideInviteButton,
+            _overflowMenuVisible,
             _raisedHand,
             _visible,
             t
@@ -373,7 +371,7 @@ class Toolbox extends Component<Props, State> {
                     { this._shouldShowButton('info') && <InfoDialogButton /> }
                     { overflowHasItems
                         && <OverflowMenuButton
-                            isOpen = { this.state.showOverflowMenu }
+                            isOpen = { _overflowMenuVisible }
                             onVisibilityChange = { this._onSetOverflowVisible }>
                             <ul
                                 aria-label = 'Overflow menu'
@@ -555,7 +553,7 @@ class Toolbox extends Component<Props, State> {
      * @returns {void}
      */
     _onSetOverflowVisible(visible) {
-        this.setState({ showOverflowMenu: visible });
+        this.props.dispatch(setOverflowMenuVisible(visible));
     }
 
     _onShortcutToggleChat: () => void;
@@ -764,21 +762,6 @@ class Toolbox extends Component<Props, State> {
         this._doToggleFullScreen();
     }
 
-    _onToolbarToggleOverflowMenu: () => void;
-
-    /**
-     * Callback invoked to change whether the {@code OverflowMenu} is displayed
-     * or not.
-     *
-     * @private
-     * @returns {void}
-     */
-    _onToolbarToggleOverflowMenu() {
-        sendAnalytics(createToolbarEvent('overflow'));
-
-        this.setState({ showOverflowMenu: !this.state.showOverflowMenu });
-    }
-
     _onToolbarToggleProfile: () => void;
 
     /**
@@ -1076,6 +1059,7 @@ function _mapStateToProps(state) {
     const {
         alwaysVisible,
         fullScreen,
+        overflowMenuVisible,
         timeoutID,
         visible
     } = state['features/toolbox'];
@@ -1100,6 +1084,7 @@ function _mapStateToProps(state) {
         _isRecording: isRecording,
         _fullScreen: fullScreen,
         _localParticipantID: localParticipant.id,
+        _overflowMenuVisible: overflowMenuVisible,
         _raisedHand: localParticipant.raisedHand,
         _recordingEnabled: isModerator && enableRecording
             && (conference && conference.isRecordingSupported()),

react/features/toolbox/reducer.js

@@ -5,6 +5,7 @@ import { ReducerRegistry } from '../base/redux';
 import {
     CLEAR_TOOLBOX_TIMEOUT,
     FULL_SCREEN_CHANGED,
+    SET_OVERFLOW_MENU_VISIBLE,
     SET_TOOLBAR_HOVERED,
     SET_TOOLBOX_ALWAYS_VISIBLE,
     SET_TOOLBOX_ENABLED,
@@ -23,6 +24,7 @@ declare var interfaceConfig: Object;
  *     alwaysVisible: boolean,
  *     enabled: boolean,
  *     hovered: boolean,
+ *     overflowMenuVisible: boolean,
  *     timeoutID: number,
  *     timeoutMS: number,
  *     visible: boolean
@@ -62,6 +64,13 @@ function _getInitialState() {
          */
         hovered: false,
 
+        /**
+         * The indicator which determines whether the OverflowMenu is visible.
+         *
+         * @type {boolean}
+         */
+        overflowMenuVisible: false,
+
         /**
          * A number, non-zero value which identifies the timer created by a call
          * to setTimeout() with timeoutMS.
@@ -103,6 +112,12 @@ ReducerRegistry.register(
                 fullScreen: action.fullScreen
             };
 
+        case SET_OVERFLOW_MENU_VISIBLE:
+            return {
+                ...state,
+                overflowMenuVisible: action.visible
+            };
+
         case SET_TOOLBAR_HOVERED:
             return {
                 ...state,