diff --git a/react/features/toolbox/components/Toolbar.web.js b/react/features/toolbox/components/Toolbar.web.js index bf4946b56..8faa15606 100644 --- a/react/features/toolbox/components/Toolbar.web.js +++ b/react/features/toolbox/components/Toolbar.web.js @@ -23,17 +23,6 @@ class Toolbar extends Component { * @static */ static propTypes = { - - /** - * Handler for mouse out event. - */ - _onMouseOut: React.PropTypes.func, - - /** - * Handler for mouse over event. - */ - _onMouseOver: React.PropTypes.func, - /** * Children of current React component. */ @@ -44,6 +33,12 @@ class Toolbar extends Component { */ className: React.PropTypes.string, + /** + * Used to dispatch an action when a button is clicked or on mouse + * out/in event. + */ + dispatch: React.PropTypes.func, + /** * Map with toolbar buttons. */ @@ -80,11 +75,11 @@ class Toolbar extends Component { return (
+ onMouseOut = { this._onMouseOut } + onMouseOver = { this._onMouseOver }> { [ ...this.props.toolbarButtons.entries() ] - .reduce(this._renderToolbarButton, []) + .reduce(this._renderToolbarButton, []) } { this.props.children @@ -93,6 +88,26 @@ class Toolbar extends Component { ); } + /** + * Dispatches an action signalling that toolbar is no being hovered. + * + * @protected + * @returns {Object} Dispatched action. + */ + _onMouseOut() { + this.props.dispatch(setToolbarHovered(false)); + } + + /** + * Dispatches an action signalling that toolbar is now being hovered. + * + * @protected + * @returns {Object} Dispatched action. + */ + _onMouseOver() { + this.props.dispatch(setToolbarHovered(true)); + } + /** * Renders toolbar button. Method is passed to reduce function. * @@ -120,11 +135,15 @@ class Toolbar extends Component { const { onClick, onMount, onUnmount } = button; + const onClickHandler + = (...args) => + onClick(this.props.dispatch, ...args); + acc.push( @@ -134,35 +153,4 @@ class Toolbar extends Component { } } -/** - * Maps part of Redux actions to component's props. - * - * @param {Function} dispatch - Redux action dispatcher. - * @private - * @returns {Object} - */ -function _mapDispatchToProps(dispatch: Function): Object { - return { - /** - * Dispatches an action signalling that toolbar is no being hovered. - * - * @protected - * @returns {Object} Dispatched action. - */ - _onMouseOut() { - dispatch(setToolbarHovered(false)); - }, - - /** - * Dispatches an action signalling that toolbar is now being hovered. - * - * @protected - * @returns {Object} Dispatched action. - */ - _onMouseOver() { - dispatch(setToolbarHovered(true)); - } - }; -} - -export default connect(undefined, _mapDispatchToProps)(Toolbar); +export default connect()(Toolbar); diff --git a/react/features/toolbox/components/ToolbarButton.web.js b/react/features/toolbox/components/ToolbarButton.web.js index 6c38c884e..a3496b364 100644 --- a/react/features/toolbox/components/ToolbarButton.web.js +++ b/react/features/toolbox/components/ToolbarButton.web.js @@ -1,7 +1,6 @@ /* @flow */ import React from 'react'; -import { connect } from 'react-redux'; import { translate } from '../../base/i18n'; @@ -37,11 +36,6 @@ class ToolbarButton extends AbstractToolbarButton { */ button: React.PropTypes.object.isRequired, - /** - * Used to dispatch an action when the button is clicked. - */ - dispatch: React.PropTypes.func, - /** * Handler for component mount. */ @@ -157,11 +151,7 @@ class ToolbarButton extends AbstractToolbarButton { } = button; if (enabled && !unclickable && onClick) { - const action = onClick(event); - - if (action) { - this.props.dispatch(action); - } + onClick(event); } } @@ -244,4 +234,4 @@ class ToolbarButton extends AbstractToolbarButton { } } -export default translate(connect()(ToolbarButton)); +export default translate(ToolbarButton); diff --git a/react/features/toolbox/defaultToolbarButtons.js b/react/features/toolbox/defaultToolbarButtons.js index ae24d1777..a07ed8f34 100644 --- a/react/features/toolbox/defaultToolbarButtons.js +++ b/react/features/toolbox/defaultToolbarButtons.js @@ -22,10 +22,10 @@ const buttons: Object = { enabled: true, id: 'toolbar_button_add', isDisplayed: () => !APP.store.getState()['features/jwt'].isGuest, - onClick() { + onClick(dispatch) { JitsiMeetJS.analytics.sendEvent('toolbar.add.clicked'); - return openAddPeopleDialog(); + dispatch(openAddPeopleDialog()); }, tooltipKey: 'toolbar.addPeople' }, @@ -167,10 +167,10 @@ const buttons: Object = { // Will be displayed once the SIP calls functionality is detected. hidden: true, id: 'toolbar_button_dial_out', - onClick() { + onClick(dispatch) { JitsiMeetJS.analytics.sendEvent('toolbar.sip.clicked'); - return openDialOutDialog(); + dispatch(openDialOutDialog()); }, tooltipKey: 'dialOut.dialOut' }, @@ -185,11 +185,11 @@ const buttons: Object = { return interfaceConfig.filmStripOnly; }, id: 'toolbar_button_fodeviceselection', - onClick() { + onClick(dispatch) { JitsiMeetJS.analytics.sendEvent( 'toolbar.fodeviceselection.toggled'); - return openDeviceSelectionDialog(); + dispatch(openDeviceSelectionDialog()); }, sideContainerId: 'settings_container', tooltipKey: 'toolbar.Settings' @@ -270,10 +270,10 @@ const buttons: Object = { classNames: [ 'button', 'icon-link' ], enabled: true, id: 'toolbar_button_link', - onClick() { + onClick(dispatch) { JitsiMeetJS.analytics.sendEvent('toolbar.invite.clicked'); - return openInviteDialog(); + dispatch(openInviteDialog()); }, tooltipKey: 'toolbar.invite' },