haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ref(toolbar): allow OverflowMenuItem to show beta tag

This commit is contained in:
Leonard Kim 2018-06-21 14:07:10 -07:00 committed by Дамян Минков
parent 045dad3354
commit f035861617
3 changed files with 119 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
react/features/toolbox/components/web/OverflowMenuItem.js
View File

@ -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<Props> {
/**
* 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 {
<span className = 'overflow-menu-item-icon'>
<i className = { this.props.icon } />
</span>
{ this.props.tooltip
? <Tooltip
content = { this.props.tooltip }
position = { this.props.tooltipPosition }>
<span>{ this.props.text }</span>
</Tooltip>
: this.props.text }
{ this._renderText() }
{
this.props.elementAfter || null
}
</li>
);
}
/**
* Renders the text label to display in the {@code OverflowMenuItem}.
*
* @private
* @returns {ReactElement}
*/
_renderText() {
const textElement = ( // eslint-disable-line no-extra-parens
<span className = 'overflow-menu-item-text'>
{ this.props.text }
</span>
);
if (this.props.tooltip) {
return (
<Tooltip
content = { this.props.tooltip }
position = { this.props.tooltipPosition }>
{ textElement }
</Tooltip>
);
}
return textElement;
}
}
export default OverflowMenuItem;

113
react/features/toolbox/components/web/OverflowMenuLiveStreamingItem.js
View File

@ -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
<span>
<span className = 'profile-text'>
{ t(translationKey) }
</span>
<span className = 'beta-tag'>
{ t('recording.beta') }
</span>
</span>
);
return (
<li
aria-label = { t('dialog.accessibilityLabel.liveStreaming') }
className = { className }
onClick = { disabled ? null : onClick }>
<span className = 'overflow-menu-item-icon'>
<i className = 'icon-public' />
</span>
{ tooltip
? <Tooltip
content = { tooltip }
position = { tooltipPosition }>
{ button }
</Tooltip>
: button }
</li>
);
}
}
export default translate(OverflowMenuLiveStreamingItem);

48
react/features/toolbox/components/web/Toolbox.js
View File

@ -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<Props> {
);
}
/**
* 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 (
<OverflowMenuItem
accessibilityLabel
= { t('dialog.accessibilityLabel.liveStreaming') }
disabled = { !_liveStreamingEnabled }
elementAfter = {
<span className = 'beta-tag'>
{ t('recording.beta') }
</span>
}
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<Props> {
_isGuest,
_liveStreamingDisabledTooltipKey,
_liveStreamingEnabled,
_liveStreamingSession,
_sharingVideo,
t
} = this.props;
@ -1019,12 +1054,7 @@ class Toolbox extends Component<Props> {
: t('toolbar.enterFullScreen') } />,
(_liveStreamingEnabled || _liveStreamingDisabledTooltipKey)
&& this._shouldShowButton('livestreaming')
&& <OverflowMenuLiveStreamingItem
disabled = { !_liveStreamingEnabled }
key = 'livestreaming'
onClick = { this._onToolbarToggleLiveStreaming }
session = { _liveStreamingSession }
tooltip = { t(_liveStreamingDisabledTooltipKey) } />,
&& this._renderLiveStreamingButton(),
(_fileRecordingsEnabled || _fileRecordingsDisabledTooltipKey)
&& this._shouldShowButton('recording')
&& this._renderRecordingButton(),
@ -1086,7 +1116,7 @@ class Toolbox extends Component<Props> {
* current conference.
*
* @private
* @returns {ReactElement|null}
* @returns {ReactElement}
*/
_renderRecordingButton() {
const {