ref(toolbar): kill Stateless Toolbar and Invite, Feedback, Profile buttons
This commit is contained in:
Leonard Kim
Saúl Ibarra Corretgé
parent
008645568c
commit
1e69dc93d6
|
|
@ -1,113 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import Tooltip from '@atlaskit/tooltip';
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import { translate } from '../../base/i18n';
|
|
||||||
|
|
||||||
import { openFeedbackDialog } from '../actions';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The type of the React {@code Component} props of {@link FeedbackButton}.
|
|
||||||
*/
|
|
||||||
type Props = {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The JitsiConference for which the feedback will be about.
|
|
||||||
*
|
|
||||||
* FIXME define JitsiConference type
|
|
||||||
* @type {JitsiConference}
|
|
||||||
*/
|
|
||||||
_conference: Object,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Redux store dispatch function.
|
|
||||||
*/
|
|
||||||
dispatch: Dispatch<*>,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Invoked to obtain translated strings.
|
|
||||||
*/
|
|
||||||
t: Function,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* From which side of the button the tooltip should appear from.
|
|
||||||
*/
|
|
||||||
tooltipPosition: string
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Implements a Web/React Component which renders a feedback button.
|
|
||||||
*/
|
|
||||||
class FeedbackButton extends Component<Props> {
|
|
||||||
_onClick: Function;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initializes a new FeedbackButton instance.
|
|
||||||
*
|
|
||||||
* @param {Object} props - The read-only properties with which the new
|
|
||||||
* instance is to be initialized.
|
|
||||||
*/
|
|
||||||
constructor(props: Object) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
// Bind event handlers so they are only bound once for every instance.
|
|
||||||
this._onClick = this._onClick.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Implements React's {@link Component#render()}.
|
|
||||||
*
|
|
||||||
* @inheritdoc
|
|
||||||
* @returns {ReactElement}
|
|
||||||
*/
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div id = 'feedbackButton'>
|
|
||||||
<Tooltip
|
|
||||||
description = { this.props.t('welcomepage.sendFeedback') }
|
|
||||||
position = { this.props.tooltipPosition } >
|
|
||||||
<a
|
|
||||||
className = 'button icon-feedback'
|
|
||||||
onClick = { this._onClick } />
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Dispatches an action to open a dialog requesting call feedback.
|
|
||||||
*
|
|
||||||
* @private
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_onClick() {
|
|
||||||
const { _conference, dispatch } = this.props;
|
|
||||||
|
|
||||||
dispatch(openFeedbackDialog(_conference));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Maps (parts of) the Redux state to the associated Conference's props.
|
|
||||||
*
|
|
||||||
* @param {Object} state - The Redux state.
|
|
||||||
* @private
|
|
||||||
* @returns {{
|
|
||||||
* _toolboxVisible: boolean
|
|
||||||
* }}
|
|
||||||
*/
|
|
||||||
function _mapStateToProps(state) {
|
|
||||||
return {
|
|
||||||
/**
|
|
||||||
* The JitsiConference for which the feedback will be about.
|
|
||||||
*
|
|
||||||
* @private
|
|
||||||
* @type {JitsiConference}
|
|
||||||
*/
|
|
||||||
_conference: state['features/base/conference'].conference
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default translate(connect(_mapStateToProps)(FeedbackButton));
|
|
||||||
|
|
@ -1,2 +1 @@
|
||||||
export { default as FeedbackButton } from './FeedbackButton';
|
|
||||||
export { default as FeedbackDialog } from './FeedbackDialog';
|
export { default as FeedbackDialog } from './FeedbackDialog';
|
||||||
|
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
|
|
||||||
|
|
@ -1,147 +0,0 @@
|
||||||
/* @flow */
|
|
||||||
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import {
|
|
||||||
createToolbarEvent,
|
|
||||||
sendAnalytics
|
|
||||||
} from '../../analytics';
|
|
||||||
import {
|
|
||||||
getAvatarURL,
|
|
||||||
getLocalParticipant
|
|
||||||
} from '../../base/participants';
|
|
||||||
import UIEvents from '../../../../service/UI/UIEvents';
|
|
||||||
|
|
||||||
import ToolbarButton from './ToolbarButton';
|
|
||||||
|
|
||||||
declare var APP: Object;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The default configuration for the button.
|
|
||||||
*
|
|
||||||
* @type {Object}
|
|
||||||
*/
|
|
||||||
const DEFAULT_BUTTON_CONFIGURATION = {
|
|
||||||
buttonName: 'profile',
|
|
||||||
classNames: [ 'button' ],
|
|
||||||
enabled: true,
|
|
||||||
id: 'toolbar_button_profile',
|
|
||||||
tooltipKey: 'profile.setDisplayNameLabel'
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* React {@code Component} for the profile button.
|
|
||||||
*
|
|
||||||
* @extends Component
|
|
||||||
*/
|
|
||||||
class ProfileButton extends Component<*> {
|
|
||||||
_onClick: Function;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* {@code ProfileButton}'s property types.
|
|
||||||
*
|
|
||||||
* @static
|
|
||||||
*/
|
|
||||||
static propTypes = {
|
|
||||||
/**
|
|
||||||
* The redux representation of the local participant.
|
|
||||||
*/
|
|
||||||
_localParticipant: PropTypes.object,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether the button support clicking or not.
|
|
||||||
*/
|
|
||||||
_unclickable: PropTypes.bool,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether the side panel is opened or not.
|
|
||||||
*/
|
|
||||||
toggled: PropTypes.bool,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* From which side tooltips should display. Will be re-used for
|
|
||||||
* displaying the inline dialog for video quality adjustment.
|
|
||||||
*/
|
|
||||||
tooltipPosition: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initializes a new {@code ProfileButton} instance.
|
|
||||||
*
|
|
||||||
* @param {Object} props - The read-only properties with which the new
|
|
||||||
* instance is to be initialized.
|
|
||||||
*/
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
// Bind event handlers so they are only bound once for every instance.
|
|
||||||
this._onClick = this._onClick.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Implements React's {@link Component#render()}.
|
|
||||||
*
|
|
||||||
* @inheritdoc
|
|
||||||
* @returns {ReactElement}
|
|
||||||
*/
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
_localParticipant,
|
|
||||||
_unclickable,
|
|
||||||
tooltipPosition,
|
|
||||||
toggled
|
|
||||||
} = this.props;
|
|
||||||
const buttonConfiguration = {
|
|
||||||
...DEFAULT_BUTTON_CONFIGURATION,
|
|
||||||
unclickable: _unclickable,
|
|
||||||
toggled
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ToolbarButton
|
|
||||||
button = { buttonConfiguration }
|
|
||||||
onClick = { this._onClick }
|
|
||||||
tooltipPosition = { tooltipPosition }>
|
|
||||||
<img
|
|
||||||
id = 'avatar'
|
|
||||||
src = { getAvatarURL(_localParticipant) } />
|
|
||||||
</ToolbarButton>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Click handler for the button.
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_onClick() {
|
|
||||||
if (!this.props._unclickable) {
|
|
||||||
// TODO: Include an 'enable' attribute, which specifies whether
|
|
||||||
// the profile panel was opened or closed.
|
|
||||||
sendAnalytics(createToolbarEvent('profile'));
|
|
||||||
APP.UI.emitEvent(UIEvents.TOGGLE_PROFILE);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Maps (parts of) the Redux state to the associated {@code ProfileButton}
|
|
||||||
* component's props.
|
|
||||||
*
|
|
||||||
* @param {Object} state - The Redux state.
|
|
||||||
* @private
|
|
||||||
* @returns {{
|
|
||||||
* _localParticipant: Object,
|
|
||||||
* _unclickable: boolean
|
|
||||||
* }}
|
|
||||||
*/
|
|
||||||
function _mapStateToProps(state) {
|
|
||||||
return {
|
|
||||||
_localParticipant: getLocalParticipant(state),
|
|
||||||
_unclickable: !state['features/base/jwt'].isGuest
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default connect(_mapStateToProps)(ProfileButton);
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
/* @flow */
|
|
||||||
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Implements a toolbar in React/Web. It is a strip that contains a set of
|
|
||||||
* toolbar items such as buttons.
|
|
||||||
*
|
|
||||||
* @class StatelessToolbar
|
|
||||||
* @extends Component
|
|
||||||
*/
|
|
||||||
export default class StatelessToolbar extends Component<*> {
|
|
||||||
/**
|
|
||||||
* Base toolbar component's property types.
|
|
||||||
*
|
|
||||||
* @static
|
|
||||||
*/
|
|
||||||
static propTypes = {
|
|
||||||
/**
|
|
||||||
* Children of current React component.
|
|
||||||
*/
|
|
||||||
children: PropTypes.node,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Toolbar's class name.
|
|
||||||
*/
|
|
||||||
className: PropTypes.string,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handler for mouse out event.
|
|
||||||
*/
|
|
||||||
onMouseOut: PropTypes.func,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handler for mouse over event.
|
|
||||||
*/
|
|
||||||
onMouseOver: PropTypes.func
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Implements React's {@link Component#render()}.
|
|
||||||
*
|
|
||||||
* @inheritdoc
|
|
||||||
* @returns {ReactElement}
|
|
||||||
*/
|
|
||||||
render(): React$Element<*> {
|
|
||||||
const {
|
|
||||||
className,
|
|
||||||
onMouseOut,
|
|
||||||
onMouseOver
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className = { `toolbar ${className}` }
|
|
||||||
onMouseOut = { onMouseOut }
|
|
||||||
onMouseOver = { onMouseOver }>
|
|
||||||
{
|
|
||||||
this.props.children
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,130 +0,0 @@
|
||||||
/* @flow */
|
|
||||||
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import AbstractToolbarButton from './AbstractToolbarButton';
|
|
||||||
|
|
||||||
type MapOfAttributes = { [key: string]: * };
|
|
||||||
|
|
||||||
|
|
||||||
/* eslint-disable flowtype/space-before-type-colon */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Takes toolbar button props and maps them to HTML attributes to set.
|
|
||||||
*
|
|
||||||
* @param {Object} props - Props set to the React component.
|
|
||||||
* @returns {MapOfAttributes}
|
|
||||||
*/
|
|
||||||
function getButtonAttributesByProps(props: Object = {})
|
|
||||||
: MapOfAttributes {
|
|
||||||
// XXX Make sure to not modify props.classNames because that'd be bad
|
|
||||||
// practice.
|
|
||||||
const classNames = (props.classNames && [ ...props.classNames ]) || [];
|
|
||||||
|
|
||||||
props.toggled && classNames.push('toggled');
|
|
||||||
props.unclickable && classNames.push('unclickable');
|
|
||||||
|
|
||||||
const result: MapOfAttributes = {
|
|
||||||
className: classNames.join(' '),
|
|
||||||
'data-container': 'body',
|
|
||||||
'data-placement': 'bottom',
|
|
||||||
id: props.id
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!props.enabled) {
|
|
||||||
result.disabled = 'disabled';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.hidden) {
|
|
||||||
result.style = { display: 'none' };
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.tooltipText) {
|
|
||||||
result.content = props.tooltipText;
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* eslint-enable flowtype/space-before-type-colon */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Represents a button in Toolbar on React.
|
|
||||||
*
|
|
||||||
* @class ToolbarButton
|
|
||||||
* @extends AbstractToolbarButton
|
|
||||||
*/
|
|
||||||
export default class StatelessToolbarButton extends AbstractToolbarButton {
|
|
||||||
_onClick: Function;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Toolbar button component's property types.
|
|
||||||
*
|
|
||||||
* @static
|
|
||||||
*/
|
|
||||||
static propTypes = {
|
|
||||||
...AbstractToolbarButton.propTypes,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Object describing button.
|
|
||||||
*/
|
|
||||||
button: PropTypes.object.isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Implements React's {@link Component#render()}.
|
|
||||||
*
|
|
||||||
* @inheritdoc
|
|
||||||
* @returns {ReactElement}
|
|
||||||
*/
|
|
||||||
render(): React$Element<*> {
|
|
||||||
const { button } = this.props;
|
|
||||||
const attributes = getButtonAttributesByProps(button);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className = 'toolbar-button'>
|
|
||||||
<a
|
|
||||||
{ ...attributes }
|
|
||||||
onClick = { this._onClick }>
|
|
||||||
{ this.props.children }
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Wrapper on on click handler props for current button.
|
|
||||||
*
|
|
||||||
* @param {Event} event - Click event object.
|
|
||||||
* @returns {void}
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
_onClick(event: Event): void {
|
|
||||||
const {
|
|
||||||
button,
|
|
||||||
onClick
|
|
||||||
} = this.props;
|
|
||||||
const {
|
|
||||||
enabled,
|
|
||||||
unclickable
|
|
||||||
} = button;
|
|
||||||
|
|
||||||
if (enabled && !unclickable && onClick) {
|
|
||||||
onClick(event);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue