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