// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. const EditChannelPurposeModal = require('./edit_channel_purpose_modal.jsx'); const MessageWrapper = require('./message_wrapper.jsx'); const NotifyCounts = require('./notify_counts.jsx'); const ChannelMembersModal = require('./channel_members_modal.jsx'); const ChannelInfoModal = require('./channel_info_modal.jsx'); const ChannelInviteModal = require('./channel_invite_modal.jsx'); const ChannelNotificationsModal = require('./channel_notifications_modal.jsx'); const DeleteChannelModal = require('./delete_channel_modal.jsx'); const ToggleModalButton = require('./toggle_modal_button.jsx'); const UserStore = require('../stores/user_store.jsx'); const ChannelStore = require('../stores/channel_store.jsx'); const TeamStore = require('../stores/team_store.jsx'); const Client = require('../utils/client.jsx'); const AsyncClient = require('../utils/async_client.jsx'); const Utils = require('../utils/utils.jsx'); const Constants = require('../utils/constants.jsx'); const ActionTypes = Constants.ActionTypes; const AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); const Popover = ReactBootstrap.Popover; const OverlayTrigger = ReactBootstrap.OverlayTrigger; export default class Navbar extends React.Component { constructor(props) { super(props); this.onChange = this.onChange.bind(this); this.handleLeave = this.handleLeave.bind(this); this.showSearch = this.showSearch.bind(this); this.createCollapseButtons = this.createCollapseButtons.bind(this); this.createDropdown = this.createDropdown.bind(this); const state = this.getStateFromStores(); state.showEditChannelPurposeModal = false; state.showMembersModal = false; state.showInviteModal = false; this.state = state; } getStateFromStores() { return { channel: ChannelStore.getCurrent(), member: ChannelStore.getCurrentMember(), users: ChannelStore.getCurrentExtraInfo().members }; } componentDidMount() { ChannelStore.addChangeListener(this.onChange); ChannelStore.addExtraInfoChangeListener(this.onChange); $('.inner__wrap').click(this.hideSidebars); } componentWillUnmount() { ChannelStore.removeChangeListener(this.onChange); ChannelStore.removeExtraInfoChangeListener(this.onChange); } handleSubmit(e) { e.preventDefault(); } handleLeave() { Client.leaveChannel(this.state.channel.id, () => { AsyncClient.getChannels(true); window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/town-square'; }, (err) => { AsyncClient.dispatchError(err, 'handleLeave'); } ); } hideSidebars(e) { var windowWidth = $(window).outerWidth(); if (windowWidth <= 768) { AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_SEARCH, results: null }); AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_POST_SELECTED, results: null }); if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') { $('.inner__wrap').removeClass('move--right move--left move--left-small'); $('.sidebar--left').removeClass('move--right'); $('.sidebar--right').removeClass('move--left'); $('.sidebar--menu').removeClass('move--left'); } } } toggleLeftSidebar() { $('.inner__wrap').toggleClass('move--right'); $('.sidebar--left').toggleClass('move--right'); } toggleRightSidebar() { $('.inner__wrap').toggleClass('move--left-small'); $('.sidebar--menu').toggleClass('move--left'); } showSearch() { AppDispatcher.handleServerAction({ type: ActionTypes.SHOW_SEARCH }); } onChange() { this.setState(this.getStateFromStores()); $('#navbar .navbar-brand .description').popover({placement: 'bottom', trigger: 'click', html: true}); } createDropdown(channel, channelTitle, isAdmin, isDirect, popoverContent) { if (channel) { var viewInfoOption = (
  • {'View Info'}
  • ); var setChannelHeaderOption = (
  • {'Set Channel Header...'}
  • ); var setChannelPurposeOption = null; if (!isDirect) { setChannelPurposeOption = (
  • this.setState({showEditChannelPurposeModal: true})} > {'Set Channel Purpose...'}
  • ); } var addMembersOption; var leaveChannelOption; if (!isDirect && !ChannelStore.isDefault(channel)) { addMembersOption = (
  • this.setState({showInviteModal: false})} > {'Add Members'}
  • ); leaveChannelOption = (
  • {'Leave Channel'}
  • ); } var manageMembersOption; var renameChannelOption; var deleteChannelOption; if (!isDirect && isAdmin) { if (!ChannelStore.isDefault(channel)) { manageMembersOption = (
  • this.setState({showMembersModal: true})} > {'Manage Members'}
  • ); deleteChannelOption = (
  • {'Delete Channel...'}
  • ); } renameChannelOption = (
  • {'Rename Channel...'}
  • ); } var notificationPreferenceOption; if (!isDirect) { notificationPreferenceOption = (
  • {'Notification Preferences'}
  • ); } return (
    {channelTitle}
      {viewInfoOption} {addMembersOption} {manageMembersOption} {setChannelHeaderOption} {setChannelPurposeOption} {notificationPreferenceOption} {renameChannelOption} {deleteChannelOption} {leaveChannelOption}
    ); } return (
    {channelTitle}
    ); } createCollapseButtons(currentId) { var buttons = []; if (currentId == null) { buttons.push( ); } else { buttons.push( ); buttons.push( ); } return buttons; } render() { var currentId = UserStore.getCurrentId(); var channel = this.state.channel; var channelTitle = this.props.teamDisplayName; var popoverContent; var isAdmin = false; var isDirect = false; if (channel) { popoverContent = ( ); isAdmin = Utils.isAdmin(this.state.member.roles); if (channel.type === 'O') { channelTitle = channel.display_name; } else if (channel.type === 'P') { channelTitle = channel.display_name; } else if (channel.type === 'D') { isDirect = true; if (this.state.users.length > 1) { if (this.state.users[0].id === currentId) { channelTitle = UserStore.getProfile(this.state.users[1].id).username; } else { channelTitle = UserStore.getProfile(this.state.users[0].id).username; } } } if (channel.header.length === 0) { popoverContent = (
    {'No channel header yet.'}
    {'Click here'} {' to add one.'}
    ); } } var collapseButtons = this.createCollapseButtons(currentId); const searchButton = ( ); var channelMenuDropdown = this.createDropdown(channel, channelTitle, isAdmin, isDirect, popoverContent); return (
    this.setState({showEditChannelPurposeModal: false})} channel={channel} /> this.setState({showMembersModal: false})} /> this.setState({showInviteModal: false})} />
    ); } } Navbar.defaultProps = { teamDisplayName: '' }; Navbar.propTypes = { teamDisplayName: React.PropTypes.string };