// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import React from 'react'; import Client from 'client/web_client.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; import * as Utils from 'utils/utils.jsx'; import SidebarHeaderDropdown from './sidebar_header_dropdown.jsx'; import {Tooltip, OverlayTrigger} from 'react-bootstrap'; import {Preferences, TutorialSteps, Constants} from 'utils/constants.jsx'; import {createMenuTip} from 'components/tutorial/tutorial_tip.jsx'; export default class SidebarHeader extends React.Component { constructor(props) { super(props); this.toggleDropdown = this.toggleDropdown.bind(this); this.onPreferenceChange = this.onPreferenceChange.bind(this); this.state = this.getStateFromStores(); } componentDidMount() { PreferenceStore.addChangeListener(this.onPreferenceChange); } componentWillUnmount() { PreferenceStore.removeChangeListener(this.onPreferenceChange); } getStateFromStores() { const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, this.props.currentUser.id, 999); return {showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER && !Utils.isMobile()}; } onPreferenceChange() { this.setState(this.getStateFromStores()); } toggleDropdown(e) { e.preventDefault(); this.refs.dropdown.toggleDropdown(); } render() { var me = this.props.currentUser; var profilePicture = null; if (!me) { return null; } if (me.last_picture_update) { profilePicture = ( {this.props.teamDisplayName} ); } else { teamNameWithToolTip = ( {this.props.teamDescription}} ref='descriptionOverlay' >
{this.props.teamDisplayName}
); } return (
{tutorialTip}
{profilePicture}
{'@' + me.username}
{teamNameWithToolTip}
); } } SidebarHeader.defaultProps = { teamDisplayName: '', teamDescription: '', teamType: '' }; SidebarHeader.propTypes = { teamDisplayName: React.PropTypes.string, teamDescription: React.PropTypes.string, teamName: React.PropTypes.string, teamType: React.PropTypes.string, currentUser: React.PropTypes.object };