From 9a3effe97a72b6a9ef27634361c588d4a6221b89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Fri, 20 Apr 2018 13:24:14 +0200 Subject: [PATCH] feat(toolbox): move OverflowMenu show logic to redux --- react/features/toolbox/actionTypes.js | 10 ++++ react/features/toolbox/actions.native.js | 17 +++++++ .../components/OverflowMenuButton.web.js | 3 ++ .../toolbox/components/Toolbox.web.js | 51 +++++++------------ react/features/toolbox/reducer.js | 15 ++++++ 5 files changed, 63 insertions(+), 33 deletions(-) diff --git a/react/features/toolbox/actionTypes.js b/react/features/toolbox/actionTypes.js index 2caffea65..7655a636e 100644 --- a/react/features/toolbox/actionTypes.js +++ b/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. diff --git a/react/features/toolbox/actions.native.js b/react/features/toolbox/actions.native.js index e669a99cb..3cb54f3aa 100644 --- a/react/features/toolbox/actions.native.js +++ b/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. * diff --git a/react/features/toolbox/components/OverflowMenuButton.web.js b/react/features/toolbox/components/OverflowMenuButton.web.js index 345a02963..55b49526d 100644 --- a/react/features/toolbox/components/OverflowMenuButton.web.js +++ b/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); } } diff --git a/react/features/toolbox/components/Toolbox.web.js b/react/features/toolbox/components/Toolbox.web.js index 45f6a5a02..130208b56 100644 --- a/react/features/toolbox/components/Toolbox.web.js +++ b/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 { +class Toolbox extends Component { _visibleButtons: Object; - state = { - showOverflowMenu: false - } - /** * Initializes a new {@code Toolbox} instance. * @@ -282,11 +279,11 @@ class Toolbox extends Component { */ 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 { const { _chatOpen, _hideInviteButton, + _overflowMenuVisible, _raisedHand, _visible, t @@ -373,7 +371,7 @@ class Toolbox extends Component { { this._shouldShowButton('info') && } { overflowHasItems &&
    { * @returns {void} */ _onSetOverflowVisible(visible) { - this.setState({ showOverflowMenu: visible }); + this.props.dispatch(setOverflowMenuVisible(visible)); } _onShortcutToggleChat: () => void; @@ -764,21 +762,6 @@ class Toolbox extends Component { 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()), diff --git a/react/features/toolbox/reducer.js b/react/features/toolbox/reducer.js index 36d7af5d6..468c7d6fb 100644 --- a/react/features/toolbox/reducer.js +++ b/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,