From f035861617e0c94d4aa42914ec56d9a7481d5366 Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Thu, 21 Jun 2018 14:07:10 -0700 Subject: [PATCH] ref(toolbar): allow OverflowMenuItem to show beta tag --- .../components/web/OverflowMenuItem.js | 133 +++++++++++------- .../web/OverflowMenuLiveStreamingItem.js | 113 --------------- .../toolbox/components/web/Toolbox.js | 48 +++++-- 3 files changed, 119 insertions(+), 175 deletions(-) delete mode 100644 react/features/toolbox/components/web/OverflowMenuLiveStreamingItem.js diff --git a/react/features/toolbox/components/web/OverflowMenuItem.js b/react/features/toolbox/components/web/OverflowMenuItem.js index ef7af8ca0..d9dc88e95 100644 --- a/react/features/toolbox/components/web/OverflowMenuItem.js +++ b/react/features/toolbox/components/web/OverflowMenuItem.js @@ -1,14 +1,62 @@ +// @flow + import Tooltip from '@atlaskit/tooltip'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; +/** + * The type of the React {@code Component} props of {@link OverflowMenuItem}. + */ +type Props = { + + /** + * A succinct description of what the item does. Used by accessibility tools + * and torture tests. + */ + accessibilityLabel: string, + + /** + * Whether menu item is disabled or not. + */ + disabled: boolean, + + /** + * A React Element to display at the end of {@code OverflowMenuItem}. + */ + elementAfter?: React$Node, + + /** + * The icon class to use for displaying an icon before the link text. + */ + icon: string, + + /** + * The callback to invoke when {@code OverflowMenuItem} is clicked. + */ + onClick: Function, + + /** + * The text to display in the {@code OverflowMenuItem}. + */ + text: string, + + /** + * The text to display in the tooltip. + */ + tooltip?: string, + + /** + * From which direction the tooltip should appear, relative to the button. + */ + tooltipPosition: string +}; + /** * A React {@code Component} for displaying a link to interact with other * features of the application. * * @extends Component */ -class OverflowMenuItem extends Component { +class OverflowMenuItem extends Component { /** * Default values for {@code OverflowMenuItem} component's properties. * @@ -19,50 +67,6 @@ class OverflowMenuItem extends Component { disabled: false }; - /** - * {@code OverflowMenuItem} component's property types. - * - * @static - */ - static propTypes = { - /** - * A succinct description of what the item does. Used by accessibility - * tools and torture tests. - */ - accessibilityLabel: PropTypes.string, - - /** - * Whether menu item is disabled or not. - */ - disabled: PropTypes.bool, - - /** - * The icon class to use for displaying an icon before the link text. - */ - icon: PropTypes.string, - - /** - * The callback to invoke when {@code OverflowMenuItem} is clicked. - */ - onClick: PropTypes.func, - - /** - * The text to display in the {@code OverflowMenuItem}. - */ - text: PropTypes.string, - - /** - * The text to display in the tooltip. - */ - tooltip: PropTypes.string, - - /** - * From which direction the tooltip should appear, relative to the - * button. - */ - tooltipPosition: PropTypes.string - }; - /** * Implements React's {@link Component#render()}. * @@ -82,16 +86,39 @@ class OverflowMenuItem extends Component { - { this.props.tooltip - ? - { this.props.text } - - : this.props.text } + { this._renderText() } + { + this.props.elementAfter || null + } ); } + + /** + * Renders the text label to display in the {@code OverflowMenuItem}. + * + * @private + * @returns {ReactElement} + */ + _renderText() { + const textElement = ( // eslint-disable-line no-extra-parens + + { this.props.text } + + ); + + if (this.props.tooltip) { + return ( + + { textElement } + + ); + } + + return textElement; + } } export default OverflowMenuItem; diff --git a/react/features/toolbox/components/web/OverflowMenuLiveStreamingItem.js b/react/features/toolbox/components/web/OverflowMenuLiveStreamingItem.js deleted file mode 100644 index 92a0e8f8b..000000000 --- a/react/features/toolbox/components/web/OverflowMenuLiveStreamingItem.js +++ /dev/null @@ -1,113 +0,0 @@ -import Tooltip from '@atlaskit/tooltip'; -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; - -import { translate } from '../../../base/i18n'; - -/** - * React {@code Component} for starting or stopping a live streaming of the - * current conference and displaying the current state of live streaming. - * - * @extends Component - */ -class OverflowMenuLiveStreamingItem extends Component { - /** - * Default values for {@code OverflowMenuLiveStreamingItem} - * component's properties. - * - * @static - */ - static defaultProps = { - tooltipPosition: 'left', - disabled: false - }; - - /** - * The type of the React {@code Component} props of - * {@link OverflowMenuLiveStreamingItem}. - */ - static propTypes = { - - /** - * Whether menu item is disabled or not. - */ - disabled: PropTypes.bool, - - /** - * The callback to invoke when {@code OverflowMenuLiveStreamingItem} is - * clicked. - */ - onClick: Function, - - /** - * The current live streaming session, if any. - */ - session: PropTypes.object, - - /** - * Invoked to obtain translated strings. - */ - t: Function, - - /** - * The text to display in the tooltip. - */ - tooltip: PropTypes.string, - - /** - * From which direction the tooltip should appear, relative to the - * button. - */ - tooltipPosition: PropTypes.string - }; - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - const { disabled, onClick, session, t, tooltip, tooltipPosition } - = this.props; - - const translationKey = session - ? 'dialog.stopLiveStreaming' - : 'dialog.startLiveStreaming'; - - let className = 'overflow-menu-item'; - - className += disabled ? ' disabled' : ''; - - const button = (// eslint-disable-line no-extra-parens - - - { t(translationKey) } - - - { t('recording.beta') } - - - ); - - return ( -
  • - - - - { tooltip - ? - { button } - - : button } -
    • - ); - } -} - -export default translate(OverflowMenuLiveStreamingItem); diff --git a/react/features/toolbox/components/web/Toolbox.js b/react/features/toolbox/components/web/Toolbox.js index 6b4c675b4..567be2248 100644 --- a/react/features/toolbox/components/web/Toolbox.js +++ b/react/features/toolbox/components/web/Toolbox.js @@ -58,7 +58,6 @@ import AudioMuteButton from '../AudioMuteButton'; import HangupButton from '../HangupButton'; import OverflowMenuButton from './OverflowMenuButton'; import OverflowMenuItem from './OverflowMenuItem'; -import OverflowMenuLiveStreamingItem from './OverflowMenuLiveStreamingItem'; import OverflowMenuProfileItem from './OverflowMenuProfileItem'; import ToolbarButton from './ToolbarButton'; import VideoMuteButton from '../VideoMuteButton'; @@ -973,6 +972,43 @@ class Toolbox extends Component { ); } + /** + * Renders an {@code OverflowMenuItem} to start or stop live streaming of + * the current conference. + * + * @private + * @returns {ReactElement} + */ + _renderLiveStreamingButton() { + const { + _liveStreamingDisabledTooltipKey, + _liveStreamingEnabled, + _liveStreamingSession, + t + } = this.props; + + const translationKey = _liveStreamingSession + ? 'dialog.stopLiveStreaming' + : 'dialog.startLiveStreaming'; + + return ( + + { t('recording.beta') } + + } + icon = 'icon-public' + key = 'livestreaming' + onClick = { this._onToolbarToggleLiveStreaming } + text = { t(translationKey) } + tooltip = { t(_liveStreamingDisabledTooltipKey) } /> + ); + } + /** * Renders the list elements of the overflow menu. * @@ -990,7 +1026,6 @@ class Toolbox extends Component { _isGuest, _liveStreamingDisabledTooltipKey, _liveStreamingEnabled, - _liveStreamingSession, _sharingVideo, t } = this.props; @@ -1019,12 +1054,7 @@ class Toolbox extends Component { : t('toolbar.enterFullScreen') } />, (_liveStreamingEnabled || _liveStreamingDisabledTooltipKey) && this._shouldShowButton('livestreaming') - && , + && this._renderLiveStreamingButton(), (_fileRecordingsEnabled || _fileRecordingsDisabledTooltipKey) && this._shouldShowButton('recording') && this._renderRecordingButton(), @@ -1086,7 +1116,7 @@ class Toolbox extends Component { * current conference. * * @private - * @returns {ReactElement|null} + * @returns {ReactElement} */ _renderRecordingButton() { const {