From 12896bd23eeba79884245c1c29fdc568cf21a7fa Mon Sep 17 00:00:00 2001 From: Christopher Speller Date: Mon, 14 Mar 2016 08:50:46 -0400 Subject: Converting to Webpack. Stage 1. --- webapp/components/channel_header.jsx | 520 +++++++++++++++++++++++++++++++++++ 1 file changed, 520 insertions(+) create mode 100644 webapp/components/channel_header.jsx (limited to 'webapp/components/channel_header.jsx') diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx new file mode 100644 index 000000000..7cd713942 --- /dev/null +++ b/webapp/components/channel_header.jsx @@ -0,0 +1,520 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import $ from 'jquery'; +import 'bootstrap'; +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 RenameChannelModal from './rename_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'; + +import {FormattedMessage} from 'react-intl'; + +const ActionTypes = Constants.ActionTypes; + +import {Tooltip, OverlayTrigger, Popover} from 'react-bootstrap'; + +import React from 'react'; + +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); + this.showRenameChannelModal = this.showRenameChannelModal.bind(this); + this.hideRenameChannelModal = this.hideRenameChannelModal.bind(this); + + const state = this.getStateFromStores(); + state.showEditChannelPurposeModal = false; + state.showMembersModal = false; + state.showRenameChannelModal = false; + this.state = state; + } + getStateFromStores() { + const extraInfo = ChannelStore.getCurrentExtraInfo(); + + return { + channel: ChannelStore.getCurrent(), + memberChannel: ChannelStore.getCurrentMember(), + users: extraInfo.members, + userCount: extraInfo.member_count, + searchVisible: SearchStore.getSearchResults() !== null, + currentUser: UserStore.getCurrentUser() + }; + } + validState() { + if (!this.state.channel || + !this.state.memberChannel || + !this.state.users || + !this.state.userCount || + !this.state.currentUser) { + return false; + } + return true; + } + componentDidMount() { + ChannelStore.addChangeListener(this.onListenerChange); + ChannelStore.addExtraInfoChangeListener(this.onListenerChange); + SearchStore.addSearchChangeListener(this.onListenerChange); + PreferenceStore.addChangeListener(this.onListenerChange); + UserStore.addChangeListener(this.onListenerChange); + } + componentWillUnmount() { + ChannelStore.removeChangeListener(this.onListenerChange); + ChannelStore.removeExtraInfoChangeListener(this.onListenerChange); + SearchStore.removeSearchChangeListener(this.onListenerChange); + PreferenceStore.removeChangeListener(this.onListenerChange); + UserStore.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 = this.state.currentUser; + + let terms = ''; + if (user.notify_props && user.notify_props.mention_keys) { + const termKeys = UserStore.getMentionKeys(user.id); + + 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.RECEIVED_SEARCH_TERM, + term: terms, + do_search: true, + is_mention_search: true + }); + } + showRenameChannelModal(e) { + e.preventDefault(); + + this.setState({ + showRenameChannelModal: true + }); + } + hideRenameChannelModal() { + this.setState({ + showRenameChannelModal: false + }); + } + render() { + if (!this.validState()) { + return null; + } + + const channel = this.state.channel; + const recentMentionsTooltip = ( + + + + ); + const popoverContent = ( + this.refs.headerOverlay.show()} + onMouseOut={() => this.refs.headerOverlay.hide()} + > + + + ); + let channelTitle = channel.display_name; + const currentId = this.state.currentUser.id; + const isAdmin = Utils.isAdmin(this.state.memberChannel.roles) || Utils.isAdmin(this.state.currentUser.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 = ( + + ); + if (channel.type === Constants.PRIVATE_CHANNEL) { + channelTerm = ( + + ); + } + + let popoverListMembers; + if (!isDirect) { + popoverListMembers = ( + + ); + } + + const dropdownContents = []; + if (isDirect) { + dropdownContents.push( +
  • + + + +
    • + ); + } else { + dropdownContents.push( +
  • + + + +
    • + ); + + if (!ChannelStore.isDefault(channel)) { + dropdownContents.push( +
  • + + + +
    • + ); + + if (isAdmin) { + dropdownContents.push( +
  • + this.setState({showMembersModal: true})} + > + + +
    • + ); + } + } + + dropdownContents.push( +
  • + + + +
    • + ); + dropdownContents.push( +
  • + this.setState({showEditChannelPurposeModal: true})} + > + + +
    • + ); + dropdownContents.push( +
  • + + + +
    • + ); + + if (isAdmin) { + dropdownContents.push( +
  • + + + +
    • + ); + + if (!ChannelStore.isDefault(channel)) { + dropdownContents.push( +
  • + + + +
    • + ); + } + } + + if (!ChannelStore.isDefault(channel)) { + dropdownContents.push( +
  • + + + +
    • + ); + } + } + + return ( +
    + + + + + + + + + +
    +
    +
    + + {channelTitle} + + +
      + {dropdownContents} +
    +
    + +
    + +
    +
    		+ {popoverListMembers} + +
    + + + {'@'} + + +
    +
    + this.setState({showEditChannelPurposeModal: false})} + channel={channel} + /> + this.setState({showMembersModal: false})} + channel={channel} + /> + +
    + ); + } +} + +ChannelHeader.propTypes = { +}; -- cgit v1.2.3-1-g7c22