3aff4967f1
Contributing all buttons in one place goes against the designs that we set out at the beginning of the project's rewrite and that multiple of us have been following since then.
121 lines
3.0 KiB
JavaScript
121 lines
3.0 KiB
JavaScript
/* globals interfaceConfig */
|
|
|
|
import PropTypes from 'prop-types';
|
|
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
|
|
import {
|
|
Avatar,
|
|
getAvatarURL,
|
|
getLocalParticipant
|
|
} from '../../../base/participants';
|
|
|
|
/**
|
|
* A React {@code Component} for displaying a link with a profile avatar as an
|
|
* icon.
|
|
*
|
|
* @extends Component
|
|
*/
|
|
class OverflowMenuProfileItem extends Component {
|
|
/**
|
|
* {@code OverflowMenuProfileItem}'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,
|
|
|
|
/**
|
|
* The callback to invoke when {@code OverflowMenuProfileItem} is
|
|
* clicked.
|
|
*/
|
|
onClick: PropTypes.func
|
|
};
|
|
|
|
/**
|
|
* Initializes a new {@code OverflowMenuProfileItem} instance.
|
|
*
|
|
* @param {Object} props - The read-only properties with which the new
|
|
* instance is to be initialized.
|
|
*/
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
// Bind event handler so it is 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 } = this.props;
|
|
const classNames = `overflow-menu-item ${
|
|
_unclickable ? 'unclickable' : ''}`;
|
|
const avatarURL = getAvatarURL(_localParticipant);
|
|
let displayName;
|
|
|
|
if (_localParticipant && _localParticipant.name) {
|
|
displayName = _localParticipant.name.split(' ')[0];
|
|
} else {
|
|
displayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME;
|
|
}
|
|
|
|
return (
|
|
<li
|
|
aria-label = 'Profile'
|
|
className = { classNames }
|
|
onClick = { this._onClick }>
|
|
<span className = 'overflow-menu-item-icon'>
|
|
<Avatar uri = { avatarURL } />
|
|
</span>
|
|
<span className = 'profile-text'>
|
|
{ displayName }
|
|
</span>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Invokes an on click callback if clicking is allowed.
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
_onClick() {
|
|
if (!this.props._unclickable) {
|
|
this.props.onClick();
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Maps (parts of) the Redux state to the associated
|
|
* {@code OverflowMenuProfileItem} 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)(OverflowMenuProfileItem);
|