// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import NavbarSearchBox from './search_bar.jsx'; import MessageWrapper from './message_wrapper.jsx'; import PopoverListMembers from './popover_list_members.jsx'; import EditChannelHeaderModal from './edit_channel_header_modal.jsx'; import EditChannelPurposeModal from './edit_channel_purpose_modal.jsx'; import ChannelInfoModal from './channel_info_modal.jsx'; import ChannelInviteModal from './channel_invite_modal.jsx'; import ChannelMembersModal from './channel_members_modal.jsx'; import ChannelNotificationsModal from './channel_notifications_modal.jsx'; import DeleteChannelModal from './delete_channel_modal.jsx'; import ToggleModalButton from './toggle_modal_button.jsx'; import ChannelStore from '../stores/channel_store.jsx'; import UserStore from '../stores/user_store.jsx'; import SearchStore from '../stores/search_store.jsx'; import PreferenceStore from '../stores/preference_store.jsx'; import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; import * as Utils from '../utils/utils.jsx'; import * as TextFormatting from '../utils/text_formatting.jsx'; import * as AsyncClient from '../utils/async_client.jsx'; import * as Client from '../utils/client.jsx'; import Constants from '../utils/constants.jsx'; const ActionTypes = Constants.ActionTypes; const Popover = ReactBootstrap.Popover; const OverlayTrigger = ReactBootstrap.OverlayTrigger; const Tooltip = ReactBootstrap.Tooltip; export default class ChannelHeader extends React.Component { constructor(props) { super(props); this.onListenerChange = this.onListenerChange.bind(this); this.handleLeave = this.handleLeave.bind(this); this.searchMentions = this.searchMentions.bind(this); const state = this.getStateFromStores(); state.showEditChannelPurposeModal = false; state.showMembersModal = false; this.state = state; } getStateFromStores() { const extraInfo = ChannelStore.getCurrentExtraInfo(); return { channel: ChannelStore.getCurrent(), memberChannel: ChannelStore.getCurrentMember(), memberTeam: UserStore.getCurrentUser(), users: extraInfo.members, userCount: extraInfo.member_count, searchVisible: SearchStore.getSearchResults() !== null }; } componentDidMount() { ChannelStore.addChangeListener(this.onListenerChange); ChannelStore.addExtraInfoChangeListener(this.onListenerChange); SearchStore.addSearchChangeListener(this.onListenerChange); UserStore.addChangeListener(this.onListenerChange); PreferenceStore.addChangeListener(this.onListenerChange); } componentWillUnmount() { ChannelStore.removeChangeListener(this.onListenerChange); ChannelStore.removeExtraInfoChangeListener(this.onListenerChange); SearchStore.removeSearchChangeListener(this.onListenerChange); UserStore.removeChangeListener(this.onListenerChange); PreferenceStore.removeChangeListener(this.onListenerChange); } onListenerChange() { const newState = this.getStateFromStores(); if (!Utils.areObjectsEqual(newState, this.state)) { this.setState(newState); } $('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover', html: true, delay: {show: 500, hide: 500}}); } handleLeave() { Client.leaveChannel(this.state.channel.id, () => { AppDispatcher.handleViewAction({ type: ActionTypes.LEAVE_CHANNEL, id: this.state.channel.id }); const townsquare = ChannelStore.getByName('town-square'); Utils.switchChannel(townsquare); }, (err) => { AsyncClient.dispatchError(err, 'handleLeave'); } ); } searchMentions(e) { e.preventDefault(); const user = UserStore.getCurrentUser(); let terms = ''; if (user.notify_props && user.notify_props.mention_keys) { const termKeys = UserStore.getCurrentMentionKeys(); if (user.notify_props.all === 'true' && termKeys.indexOf('@all') !== -1) { termKeys.splice(termKeys.indexOf('@all'), 1); } if (user.notify_props.channel === 'true' && termKeys.indexOf('@channel') !== -1) { termKeys.splice(termKeys.indexOf('@channel'), 1); } terms = termKeys.join(' '); } AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_SEARCH_TERM, term: terms, do_search: true, is_mention_search: true }); } render() { if (this.state.channel === null) { return null; } const channel = this.state.channel; const recentMentionsTooltip = {'Recent Mentions'}; const popoverContent = ( this.refs.headerOverlay.show()} onMouseOut={() => this.refs.headerOverlay.hide()} > ); let channelTitle = channel.display_name; const currentId = UserStore.getCurrentId(); const isAdmin = Utils.isAdmin(this.state.memberChannel.roles) || Utils.isAdmin(this.state.memberTeam.roles); const isDirect = (this.state.channel.type === 'D'); if (isDirect) { if (this.state.users.length > 1) { let contact; if (this.state.users[0].id === currentId) { contact = this.state.users[1]; } else { contact = this.state.users[0]; } channelTitle = Utils.displayUsername(contact.id); } } let channelTerm = 'Channel'; if (channel.type === 'P') { channelTerm = 'Group'; } const dropdownContents = []; if (isDirect) { dropdownContents.push(
  • {'Set Channel Header...'}
  • ); } else { dropdownContents.push(
  • {'View Info'}
  • ); if (!ChannelStore.isDefault(channel)) { dropdownContents.push(
  • {'Add Members'}
  • ); if (isAdmin) { dropdownContents.push(
  • this.setState({showMembersModal: true})} > {'Manage Members'}
  • ); } } dropdownContents.push(
  • {`Set ${channelTerm} Header...`}
  • ); dropdownContents.push(
  • this.setState({showEditChannelPurposeModal: true})} > {'Set '}{channelTerm}{' Purpose...'}
  • ); dropdownContents.push(
  • {'Notification Preferences'}
  • ); if (isAdmin) { dropdownContents.push(
  • {'Rename '}{channelTerm}{'...'}
  • ); if (!ChannelStore.isDefault(channel)) { dropdownContents.push(
  • {'Delete '}{channelTerm}{'...'}
  • ); } } if (!ChannelStore.isDefault(channel)) { dropdownContents.push(
  • {'Leave '}{channelTerm}
  • ); } } return (
    {channelTitle}
      {dropdownContents}
    this.setState({showEditChannelPurposeModal: false})} channel={channel} /> this.setState({showMembersModal: false})} channel={channel} />
    ); } }