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

ref(toolbar): rename ToolbarButtonV2 to ToolbarButton

This commit is contained in:
Leonard Kim 2018-04-09 20:27:19 -07:00 committed by Saúl Ibarra Corretgé
parent 1eee20dd5a
commit 6883ee0141
11 changed files with 60 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
react/features/invite/components/InfoDialogButton.web.js
View File

@ -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 }

4
react/features/toolbox/components/OverflowMenuButton.web.js
View File

@ -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 }

214
react/features/toolbox/components/ToolbarButton.web.js
View File

@ -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 React from 'react';
import { translate } from '../../base/i18n';
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,
...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
<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>
);
}
_renderButton(children) {
return (
<div className = { `toolbar-button-wrapper ${button.id}-wrapper` }>
{ children }
<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>
);
}
/**
* 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 (
<div className = 'toolbox-icon'>
<i className = { this.props.iconName } />
</div>
);
}
}
export default translate(ToolbarButton);
export default ToolbarButton;

0
react/features/toolbox/components/ToolbarButtonV2.native.js
View File

79
react/features/toolbox/components/ToolbarButtonV2.web.js
View File

@ -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;

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

@ -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 }

4
react/features/toolbox/components/ToolboxFilmstrip.web.js
View File

@ -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 }

4
react/features/toolbox/components/buttons/AudioMuteButton.web.js
View File

@ -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'

4
react/features/toolbox/components/buttons/HangupButton.web.js
View File

@ -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 }

4
react/features/toolbox/components/buttons/VideoMuteButton.web.js
View File

@ -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'

1
react/features/toolbox/components/index.js
View File

@ -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';