From 6883ee014185665f2d74ccad6eda95349130aa67 Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Mon, 9 Apr 2018 20:27:19 -0700 Subject: [PATCH] ref(toolbar): rename ToolbarButtonV2 to ToolbarButton --- .../invite/components/InfoDialogButton.web.js | 4 +- .../components/OverflowMenuButton.web.js | 4 +- .../toolbox/components/ToolbarButton.web.js | 214 ++++-------------- .../components/ToolbarButtonV2.native.js | 0 .../toolbox/components/ToolbarButtonV2.web.js | 79 ------- .../toolbox/components/Toolbox.web.js | 10 +- .../components/ToolboxFilmstrip.web.js | 4 +- .../components/buttons/AudioMuteButton.web.js | 4 +- .../components/buttons/HangupButton.web.js | 4 +- .../components/buttons/VideoMuteButton.web.js | 4 +- react/features/toolbox/components/index.js | 1 - 11 files changed, 60 insertions(+), 268 deletions(-) delete mode 100644 react/features/toolbox/components/ToolbarButtonV2.native.js delete mode 100644 react/features/toolbox/components/ToolbarButtonV2.web.js diff --git a/react/features/invite/components/InfoDialogButton.web.js b/react/features/invite/components/InfoDialogButton.web.js index 01459e5e4..57826919a 100644 --- a/react/features/invite/components/InfoDialogButton.web.js +++ b/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' }> - - { - 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, + ...AbstractToolbarButton.propTypes, /** - * Object describing button. + * The text to display in the tooltip. */ - button: PropTypes.object.isRequired, + tooltip: PropTypes.string, /** - * Handler for component mount. + * From which direction the tooltip should appear, relative to the + * button. */ - onMount: PropTypes.func, - - /** - * Handler for component unmount. - */ - onUnmount: PropTypes.func, - - /** - * Translation helper function. - */ - 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); + tooltipPosition: PropTypes.string } /** - * Sets shortcut/tooltip - * after mounting of the component. + * 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}. */ - componentDidMount(): void { - this._setShortcut(); - - if (this.props.onMount) { - this.props.onMount(); - } - } - - /** - * Invokes on unmount handler if it was passed to the props. - * - * @inheritdoc - * @returns {void} - */ - componentWillUnmount(): void { - if (this.props.onUnmount) { - this.props.onUnmount(); - } - } - - /** - * Implements React's {@link Component#render()}. - * - * @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 - - - { this.props.children } - - - ); - let children = buttonComponent; - - const popupConfig = this._getPopupDisplayConfiguration(); - - if (popupConfig) { - const { dataAttr, dataInterpolate, position } = popupConfig; - - children = ( // eslint-disable-line no-extra-parens - - { t(dataAttr, dataInterpolate) } - - } - isOpen = { Boolean(popupConfig) } - position = { position }> - { buttonComponent } - - ); - } - + _renderButton(children) { return ( -
- { children } +
+ + { children } +
); } /** - * Wrapper on on click handler props for current button. + * Renders the icon of this {@code ToolbarButton}. * - * @param {Event} event - Click event object. - * @returns {void} - * @private + * @inheritdoc */ - _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 - ); - } + _renderIcon() { + return ( +
+ +
+ ); } } -export default translate(ToolbarButton); +export default ToolbarButton; diff --git a/react/features/toolbox/components/ToolbarButtonV2.native.js b/react/features/toolbox/components/ToolbarButtonV2.native.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/react/features/toolbox/components/ToolbarButtonV2.web.js b/react/features/toolbox/components/ToolbarButtonV2.web.js deleted file mode 100644 index 2b7ac1cb3..000000000 --- a/react/features/toolbox/components/ToolbarButtonV2.web.js +++ /dev/null @@ -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 ( -
- - { children } - -
- ); - } - - /** - * Renders the icon of this {@code ToolbarButton}. - * - * @inheritdoc - */ - _renderIcon() { - return ( -
- -
- ); - } -} - -export default ToolbarButtonV2; diff --git a/react/features/toolbox/components/Toolbox.web.js b/react/features/toolbox/components/Toolbox.web.js index ef2c2e194..a78060af1 100644 --- a/react/features/toolbox/components/Toolbox.web.js +++ b/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 { { this._shouldShowButton('desktop') && this._renderDesktopSharingButton() } { this._shouldShowButton('raisehand') - && { tooltip = { t('toolbar.raiseHand') } /> } { this._shouldShowButton('chat') &&
- {
{ this._shouldShowButton('invite') && !_hideInviteButton - && { : t('toolbar.sharescreen'); return ( - { { this._shouldShowButton('camera') && } { this._shouldShowButton('fodeviceselection') - &&