fix(live-streaming): add beta tag to toolbar button (#3263)
This commit is contained in:
parent
6b7a883331
commit
b9f28a1beb
|
@ -140,6 +140,17 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
|
||||||
// To be implemented by subclass.
|
// To be implemented by subclass.
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Helper function to be implemented by subclasses, which may return a new
|
||||||
|
* React Element to be appended at the end of the button.
|
||||||
|
*
|
||||||
|
* @protected
|
||||||
|
* @returns {ReactElement|null}
|
||||||
|
*/
|
||||||
|
_getElementAfter() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets the current icon name, taking the toggled state into account. If no
|
* Gets the current icon name, taking the toggled state into account. If no
|
||||||
* toggled icon is provided, the regular icon will also be used in the
|
* toggled icon is provided, the regular icon will also be used in the
|
||||||
|
@ -243,6 +254,7 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
|
||||||
const props = {
|
const props = {
|
||||||
...this.props,
|
...this.props,
|
||||||
accessibilityLabel: this.accessibilityLabel,
|
accessibilityLabel: this.accessibilityLabel,
|
||||||
|
elementAfter: this._getElementAfter(),
|
||||||
iconName: this._getIconName(),
|
iconName: this._getIconName(),
|
||||||
label: this._getLabel(),
|
label: this._getLabel(),
|
||||||
styles: this._getStyles(),
|
styles: this._getStyles(),
|
||||||
|
|
|
@ -41,6 +41,11 @@ export type Props = {
|
||||||
*/
|
*/
|
||||||
disabled: boolean,
|
disabled: boolean,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A React Element to display at the end of {@code ToolboxItem}.
|
||||||
|
*/
|
||||||
|
elementAfter?: React$Node,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The name of the icon of this {@code ToolboxItem}.
|
* The name of the icon of this {@code ToolboxItem}.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -22,6 +22,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
|
||||||
_renderItem() {
|
_renderItem() {
|
||||||
const {
|
const {
|
||||||
disabled,
|
disabled,
|
||||||
|
elementAfter,
|
||||||
onClick,
|
onClick,
|
||||||
showLabel,
|
showLabel,
|
||||||
tooltipPosition
|
tooltipPosition
|
||||||
|
@ -41,6 +42,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
|
||||||
{ showLabel && <span>
|
{ showLabel && <span>
|
||||||
{ this.label }
|
{ this.label }
|
||||||
</span> }
|
</span> }
|
||||||
|
{ elementAfter }
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
import { translate } from '../../../base/i18n';
|
import { translate } from '../../../base/i18n';
|
||||||
|
@ -56,6 +57,22 @@ class LiveStreamButton extends AbstractLiveStreamButton<Props> {
|
||||||
this.tooltip = newProps._liveStreamDisabledTooltipKey;
|
this.tooltip = newProps._liveStreamDisabledTooltipKey;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Helper function to be implemented by subclasses, which returns a React
|
||||||
|
* Element to display (a beta tag) at the end of the button.
|
||||||
|
*
|
||||||
|
* @override
|
||||||
|
* @protected
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
|
_getElementAfter() {
|
||||||
|
return (
|
||||||
|
<span className = 'beta-tag'>
|
||||||
|
{ this.props.t('recording.beta') }
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Helper function to be implemented by subclasses, which must return a
|
* Helper function to be implemented by subclasses, which must return a
|
||||||
* boolean value indicating if this button is disabled or not.
|
* boolean value indicating if this button is disabled or not.
|
||||||
|
|
Loading…
Reference in New Issue