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'
},