jiti-meet/react/features/toolbox/components/web/OverflowMenuProfileItem.js

126 lines
3.0 KiB
JavaScript

// @flow
import React, { Component } from 'react';
import { connect } from '../../../base/redux';
import {
Avatar,
getAvatarURL,
getLocalParticipant
} from '../../../base/participants';
declare var interfaceConfig: Object;
/**
* The type of the React {@code Component} props of
* {@link OverflowMenuProfileItem}.
*/
type Props = {
/**
* The redux representation of the local participant.
*/
_localParticipant: Object,
/**
* Whether the button support clicking or not.
*/
_unclickable: boolean,
/**
* The callback to invoke when {@code OverflowMenuProfileItem} is
* clicked.
*/
onClick: Function
};
/**
* A React {@code Component} for displaying a link with a profile avatar as an
* icon.
*
* @extends Component
*/
class OverflowMenuProfileItem extends Component<Props> {
/**
* Initializes a new {@code OverflowMenuProfileItem} instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props: 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;
} else {
displayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME;
}
return (
<li
aria-label = 'Edit your profile'
className = { classNames }
onClick = { this._onClick }>
<span className = 'overflow-menu-item-icon'>
<Avatar uri = { avatarURL } />
</span>
<span className = 'profile-text'>
{ displayName }
</span>
</li>
);
}
_onClick: () => void;
/**
* 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
|| !interfaceConfig.SETTINGS_SECTIONS.includes('profile')
};
}
export default connect(_mapStateToProps)(OverflowMenuProfileItem);