ref(toolbar): rename ToolbarButtonV2 to ToolbarButton

react/features/invite/components/InfoDialogButton.web.js

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import { createToolbarEvent, sendAnalytics } from '../../analytics';
 import { translate } from '../../base/i18n';
 import { getParticipantCount } from '../../base/participants';
-import { ToolbarButtonV2 } from '../../toolbox';
+import { ToolbarButton } from '../../toolbox';
 
 import { updateDialInNumbers } from '../actions';
 
@@ -162,7 +162,7 @@ class InfoDialogButton extends Component {
                     isOpen = { showDialog }
                     onClose = { this._onDialogClose }
                     position = { 'top right' }>
-                    <ToolbarButtonV2
+                    <ToolbarButton
                         accessibilityLabel = 'Info'
                         iconName = { iconClass }
                         onClick = { this._onDialogToggle }

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

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 
-import ToolbarButtonV2 from './ToolbarButtonV2';
+import ToolbarButton from './ToolbarButton';
 
 /**
  * A React {@code Component} for opening or closing the {@code OverflowMenu}.
@@ -71,7 +71,7 @@ class OverflowMenuButton extends Component {
                     isOpen = { isOpen }
                     onClose = { this._onCloseDialog }
                     position = { 'top right' }>
-                    <ToolbarButtonV2
+                    <ToolbarButton
                         accessibilityLabel = 'Overflow'
                         iconName = { iconClasses }
                         onClick = { this._onToggleDialogVisibility }

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

@@ -1,207 +1,79 @@
-/* @flow */
-
-import InlineDialog from '@atlaskit/inline-dialog';
 import Tooltip from '@atlaskit/tooltip';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-
-import { translate } from '../../base/i18n';
+import React from 'react';
 
-import { TOOLTIP_TO_POPUP_POSITION } from '../constants';
-import StatelessToolbarButton from './StatelessToolbarButton';
-
-declare var APP: Object;
+import AbstractToolbarButton from './AbstractToolbarButton';
 
 /**
- * Represents a button in Toolbar on React.
+ * Represents a button in the toolbar.
  *
- * @class ToolbarButton
  * @extends AbstractToolbarButton
  */
-class ToolbarButton extends Component<*> {
-    button: Object;
-
-    _onClick: Function;
+class ToolbarButton extends AbstractToolbarButton {
+    /**
+     * Default values for {@code ToolbarButton} component's properties.
+     *
+     * @static
+     */
+    static defaultProps = {
+        tooltipPosition: 'top'
+    };
 
     /**
-     * Toolbar button component's property types.
+     * {@code ToolbarButton} component's property types.
      *
      * @static
      */
     static propTypes = {
-        ...StatelessToolbarButton.propTypes,
-
-        /**
-         * Object describing button.
-         */
-        button: PropTypes.object.isRequired,
-
-        /**
-         * Handler for component mount.
-         */
-        onMount: PropTypes.func,
+        ...AbstractToolbarButton.propTypes,
 
         /**
-         * Handler for component unmount.
+         * The text to display in the tooltip.
          */
-        onUnmount: PropTypes.func,
+        tooltip: PropTypes.string,
 
         /**
-         * Translation helper function.
+         * From which direction the tooltip should appear, relative to the
+         * button.
          */
-        t: PropTypes.func,
-
-        /**
-         * Indicates the position of the tooltip.
-         */
-        tooltipPosition: PropTypes.oneOf([ 'bottom', 'left', 'right', 'top' ])
-    };
-
-    /**
-     * Initializes new ToolbarButton instance.
-     *
-     * @param {Object} props - The read-only properties with which the new
-     * instance is to be initialized.
-     */
-    constructor(props: Object) {
-        super(props);
-
-        // Bind methods to save the context
-        this._onClick = this._onClick.bind(this);
-    }
-
-    /**
-     * Sets shortcut/tooltip
-     * after mounting of the component.
-     *
-     * @inheritdoc
-     * @returns {void}
-     */
-    componentDidMount(): void {
-        this._setShortcut();
-
-        if (this.props.onMount) {
-            this.props.onMount();
-        }
+        tooltipPosition: PropTypes.string
     }
 
     /**
-     * Invokes on unmount handler if it was passed to the props.
+     * Renders the button of this {@code ToolbarButton}.
      *
-     * @inheritdoc
-     * @returns {void}
+     * @param {Object} children - The children, if any, to be rendered inside
+     * the button. Presumably, contains the icon of this {@code ToolbarButton}.
+     * @protected
+     * @returns {ReactElement} The button of this {@code ToolbarButton}.
      */
-    componentWillUnmount(): void {
-        if (this.props.onUnmount) {
-            this.props.onUnmount();
-        }
+    _renderButton(children) {
+        return (
+            <div
+                aria-label = { this.props.accessibilityLabel }
+                className = 'toolbox-button'
+                onClick = { this.props.onClick }>
+                <Tooltip
+                    description = { this.props.tooltip }
+                    position = { this.props.tooltipPosition }>
+                    { children }
+                </Tooltip>
+            </div>
+        );
     }
 
     /**
-     * Implements React's {@link Component#render()}.
+     * Renders the icon of this {@code ToolbarButton}.
      *
      * @inheritdoc
-     * @returns {ReactElement}
      */
-    render(): React$Element<*> {
-        const { button, t, tooltipPosition } = this.props;
-        const props = {
-            ...this.props,
-            onClick: this._onClick
-        };
-
-        const buttonComponent = ( // eslint-disable-line no-extra-parens
-            <Tooltip
-                description = { button.tooltipText || t(button.tooltipKey) }
-                position = { tooltipPosition }>
-                <StatelessToolbarButton { ...props }>
-                    { this.props.children }
-                </StatelessToolbarButton>
-            </Tooltip>
-        );
-        let children = buttonComponent;
-
-        const popupConfig = this._getPopupDisplayConfiguration();
-
-        if (popupConfig) {
-            const { dataAttr, dataInterpolate, position } = popupConfig;
-
-            children = ( // eslint-disable-line no-extra-parens
-                <InlineDialog
-                    content = {
-                        <div className = 'button-popover-message'>
-                            { t(dataAttr, dataInterpolate) }
-                        </div>
-                    }
-                    isOpen = { Boolean(popupConfig) }
-                    position = { position }>
-                    { buttonComponent }
-                </InlineDialog>
-            );
-        }
-
+    _renderIcon() {
         return (
-            <div className = { `toolbar-button-wrapper ${button.id}-wrapper` }>
-                { children }
+            <div className = 'toolbox-icon'>
+                <i className = { this.props.iconName } />
             </div>
         );
     }
-
-    /**
-     * Wrapper on on click handler props for current button.
-     *
-     * @param {Event} event - Click event object.
-     * @returns {void}
-     * @private
-     */
-    _onClick(event) {
-        this.props.onClick(event);
-    }
-
-    /**
-     * Parses the props and state to find any popup that should be displayed
-     * and returns an object describing how the popup should display.
-     *
-     * @private
-     * @returns {Object|null}
-     */
-    _getPopupDisplayConfiguration() {
-        const { button, tooltipPosition } = this.props;
-        const { popups, popupDisplay } = button;
-
-        if (!popups || !popupDisplay) {
-            return null;
-        }
-
-        const { popupID } = popupDisplay;
-        const currentPopup = popups.find(popup => popup.id === popupID);
-
-        return Object.assign(
-            {},
-            currentPopup || {},
-            {
-                position: TOOLTIP_TO_POPUP_POSITION[tooltipPosition]
-            });
-    }
-
-    /**
-     * Sets shortcut and tooltip for current toolbar button.
-     *
-     * @private
-     * @returns {void}
-     */
-    _setShortcut(): void {
-        const { button } = this.props;
-
-        if (button.shortcut && APP && APP.keyboardshortcut) {
-            APP.keyboardshortcut.registerShortcut(
-                button.shortcut,
-                button.shortcutAttr,
-                button.shortcutFunc,
-                button.shortcutDescription
-            );
-        }
-    }
 }
 
-export default translate(ToolbarButton);
+export default ToolbarButton;

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

@@ -1,79 +0,0 @@
-import Tooltip from '@atlaskit/tooltip';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import AbstractToolbarButton from './AbstractToolbarButton';
-
-/**
- * Represents a button in the toolbar.
- *
- * @extends AbstractToolbarButton
- */
-class ToolbarButtonV2 extends AbstractToolbarButton {
-    /**
-     * Default values for {@code ToolbarButtonV2} component's properties.
-     *
-     * @static
-     */
-    static defaultProps = {
-        tooltipPosition: 'top'
-    };
-
-    /**
-     * {@code ToolbarButtonV2} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        ...AbstractToolbarButton.propTypes,
-
-        /**
-         * The text to display in the tooltip.
-         */
-        tooltip: PropTypes.string,
-
-        /**
-         * From which direction the tooltip should appear, relative to the
-         * button.
-         */
-        tooltipPosition: PropTypes.string
-    }
-
-    /**
-     * Renders the button of this {@code ToolbarButton}.
-     *
-     * @param {Object} children - The children, if any, to be rendered inside
-     * the button. Presumably, contains the icon of this {@code ToolbarButton}.
-     * @protected
-     * @returns {ReactElement} The button of this {@code ToolbarButton}.
-     */
-    _renderButton(children) {
-        return (
-            <div
-                aria-label = { this.props.accessibilityLabel }
-                className = 'toolbox-button'
-                onClick = { this.props.onClick }>
-                <Tooltip
-                    description = { this.props.tooltip }
-                    position = { this.props.tooltipPosition }>
-                    { children }
-                </Tooltip>
-            </div>
-        );
-    }
-
-    /**
-     * Renders the icon of this {@code ToolbarButton}.
-     *
-     * @inheritdoc
-     */
-    _renderIcon() {
-        return (
-            <div className = 'toolbox-icon'>
-                <i className = { this.props.iconName } />
-            </div>
-        );
-    }
-}
-
-export default ToolbarButtonV2;

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

@@ -34,7 +34,7 @@ import { setFullScreen, setToolbarHovered } from '../actions';
 import OverflowMenuButton from './OverflowMenuButton';
 import OverflowMenuItem from './OverflowMenuItem';
 import OverflowMenuProfileItem from './OverflowMenuProfileItem';
-import ToolbarButtonV2 from './ToolbarButtonV2';
+import ToolbarButton from './ToolbarButton';
 import { AudioMuteButton, HangupButton, VideoMuteButton } from './buttons';
 
 type Props = {
@@ -332,7 +332,7 @@ class Toolbox extends Component<Props, State> {
                     { this._shouldShowButton('desktop')
                         && this._renderDesktopSharingButton() }
                     { this._shouldShowButton('raisehand')
-                        && <ToolbarButtonV2
+                        && <ToolbarButton
                             accessibilityLabel = 'Raised hand'
                             iconName = { _raisedHand
                                 ? 'icon-raised-hand toggled'
@@ -341,7 +341,7 @@ class Toolbox extends Component<Props, State> {
                             tooltip = { t('toolbar.raiseHand') } /> }
                     { this._shouldShowButton('chat')
                         && <div className = 'toolbar-button-with-badge'>
-                            <ToolbarButtonV2
+                            <ToolbarButton
                                 accessibilityLabel = 'Chat'
                                 iconName = { _chatOpen
                                     ? 'icon-chat toggled'
@@ -362,7 +362,7 @@ class Toolbox extends Component<Props, State> {
                 <div className = 'button-group-right'>
                     { this._shouldShowButton('invite')
                         && !_hideInviteButton
-                        && <ToolbarButtonV2
+                        && <ToolbarButton
                             accessibilityLabel = 'Invite'
                             iconName = 'icon-add'
                             onClick = { this._onToolbarOpenInvite }
@@ -944,7 +944,7 @@ class Toolbox extends Component<Props, State> {
             : t('toolbar.sharescreen');
 
         return (
-            <ToolbarButtonV2
+            <ToolbarButton
                 accessibilityLabel = 'Screenshare'
                 iconName = { classNames }
                 onClick = { this._onToolbarToggleScreenshare }

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

@@ -7,7 +7,7 @@ import { createToolbarEvent, sendAnalytics } from '../../analytics';
 import { translate } from '../../base/i18n';
 import { openDeviceSelectionDialog } from '../../device-selection';
 
-import ToolbarButtonV2 from './ToolbarButtonV2';
+import ToolbarButton from './ToolbarButton';
 import { AudioMuteButton, HangupButton, VideoMuteButton } from './buttons';
 
 declare var interfaceConfig: Object;
@@ -53,7 +53,7 @@ class ToolboxFilmstrip extends Component<*> {
                 { this._shouldShowButton('camera')
                     && <VideoMuteButton tooltipPosition = 'left' /> }
                 { this._shouldShowButton('fodeviceselection')
-                    && <ToolbarButtonV2
+                    && <ToolbarButton
                         accessibilityLabel = 'Settings'
                         iconName = 'icon-settings'
                         onClick = { this._onToolbarOpenSettings }

react/features/toolbox/components/buttons/AudioMuteButton.web.js

@@ -16,7 +16,7 @@ import { MEDIA_TYPE } from '../../../base/media';
 import { isLocalTrackMuted } from '../../../base/tracks';
 
 import AbstractAudioMuteButton from './AbstractAudioMuteButton';
-import ToolbarButtonV2 from '../ToolbarButtonV2';
+import ToolbarButton from '../ToolbarButton';
 
 declare var APP: Object;
 
@@ -111,7 +111,7 @@ export class AudioMuteButton extends AbstractAudioMuteButton {
         const { _audioMuted, _conference, t, tooltipPosition } = this.props;
 
         return (
-            <ToolbarButtonV2
+            <ToolbarButton
                 accessibilityLabel = 'Audio mute'
                 iconName = { _audioMuted && _conference
                     ? 'icon-mic-disabled toggled'

react/features/toolbox/components/buttons/HangupButton.web.js

@@ -9,7 +9,7 @@ import { disconnect } from '../../../base/connection';
 import { translate } from '../../../base/i18n';
 
 import AbstractHangupButton from './AbstractHangupButton';
-import ToolbarButtonV2 from '../ToolbarButtonV2';
+import ToolbarButton from '../ToolbarButton';
 
 /**
  * Component that renders a toolbar button for leaving the current conference.
@@ -58,7 +58,7 @@ export class HangupButton extends AbstractHangupButton {
         const { t, tooltipPosition } = this.props;
 
         return (
-            <ToolbarButtonV2
+            <ToolbarButton
                 accessibilityLabel = 'Hangup'
                 iconName = 'icon-hangup'
                 onClick = { this._onToolbarHangup }

react/features/toolbox/components/buttons/VideoMuteButton.web.js

@@ -16,7 +16,7 @@ import { MEDIA_TYPE } from '../../../base/media';
 import { isLocalTrackMuted } from '../../../base/tracks';
 
 import AbstractVideoMuteButton from './AbstractVideoMuteButton';
-import ToolbarButtonV2 from '../ToolbarButtonV2';
+import ToolbarButton from '../ToolbarButton';
 
 declare var APP: Object;
 
@@ -106,7 +106,7 @@ export class VideoMuteButton extends AbstractVideoMuteButton {
         const { _conference, _videoMuted, t, tooltipPosition } = this.props;
 
         return (
-            <ToolbarButtonV2
+            <ToolbarButton
                 accessibilityLabel = 'Video mute'
                 iconName = { _videoMuted && _conference
                     ? 'icon-camera-disabled toggled'

react/features/toolbox/components/index.js

@@ -1,4 +1,3 @@
 export { default as ToolbarButton } from './ToolbarButton';
-export { default as ToolbarButtonV2 } from './ToolbarButtonV2';
 export { default as ToolboxFilmstrip } from './ToolboxFilmstrip';
 export { default as Toolbox } from './Toolbox';