// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. var ChannelStore = require('../stores/channel_store.jsx'); var UserStore = require('../stores/user_store.jsx'); var PostStore = require('../stores/post_store.jsx'); var SocketStore = require('../stores/socket_store.jsx'); var NavbarSearchBox = require('./search_bar.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var Client = require('../utils/client.jsx'); var utils = require('../utils/utils.jsx'); var MessageWrapper = require('./message_wrapper.jsx'); var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; var PopoverListMembers = React.createClass({ componentDidMount: function() { var originalLeave = $.fn.popover.Constructor.prototype.leave; $.fn.popover.Constructor.prototype.leave = function(obj) { var selfObj; if (obj instanceof this.constructor) { selfObj = obj; } else { selfObj = $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type); } originalLeave.call(this, obj); if (obj.currentTarget && selfObj.$tip) { selfObj.$tip.one('mouseenter', function() { clearTimeout(selfObj.timeout); selfObj.$tip.one('mouseleave', function() { $.fn.popover.Constructor.prototype.leave.call(selfObj, selfObj); }); }); } }; $('#member_popover').popover({placement: 'bottom', trigger: 'click', html: true}); $('body').on('click', function(e) { if ($(e.target.parentNode.parentNode)[0] !== $('#member_popover')[0] && $(e.target).parents('.popover.in').length === 0) { $('#member_popover').popover('hide'); } }); }, render: function() { var popoverHtml = ''; var members = this.props.members; var count; if (members.length > 20) { count = '20+'; } else { count = members.length || '-'; } if (members) { members.sort(function(a, b) { return a.username.localeCompare(b.username); }); members.forEach(function(m) { popoverHtml += "
" + m.username + '
'; }); } return (
{count}
); } }); function getStateFromStores() { return { channel: ChannelStore.getCurrent(), memberChannel: ChannelStore.getCurrentMember(), memberTeam: UserStore.getCurrentUser(), users: ChannelStore.getCurrentExtraInfo().members, searchVisible: PostStore.getSearchResults() != null }; } module.exports = React.createClass({ displayName: 'ChannelHeader', componentDidMount: function() { ChannelStore.addChangeListener(this.onListenerChange); ChannelStore.addExtraInfoChangeListener(this.onListenerChange); PostStore.addSearchChangeListener(this.onListenerChange); UserStore.addChangeListener(this.onListenerChange); SocketStore.addChangeListener(this.onSocketChange); }, componentWillUnmount: function() { ChannelStore.removeChangeListener(this.onListenerChange); ChannelStore.removeExtraInfoChangeListener(this.onListenerChange); PostStore.removeSearchChangeListener(this.onListenerChange); UserStore.addChangeListener(this.onListenerChange); }, onListenerChange: function() { var newState = getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { this.setState(newState); } $('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover', html: true, delay: {show: 500, hide: 500}}); }, onSocketChange: function(msg) { if (msg.action === 'new_user') { AsyncClient.getChannelExtraInfo(true); } }, getInitialState: function() { return getStateFromStores(); }, handleLeave: function() { Client.leaveChannel(this.state.channel.id, function() { var townsquare = ChannelStore.getByName('town-square'); utils.switchChannel(townsquare); }, function(err) { AsyncClient.dispatchError(err, 'handleLeave'); } ); }, searchMentions: function(e) { e.preventDefault(); var user = UserStore.getCurrentUser(); var terms = ''; if (user.notify_props && user.notify_props.mention_keys) { var 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: function() { if (this.state.channel == null) { return null; } var channel = this.state.channel; var description = utils.textToJsx(channel.description, {singleline: true, noMentionHighlight: true}); var popoverContent = React.renderToString(); var channelTitle = channel.display_name; var currentId = UserStore.getCurrentId(); var isAdmin = this.state.memberChannel.roles.indexOf('admin') > -1 || this.state.memberTeam.roles.indexOf('admin') > -1; var isDirect = (this.state.channel.type === 'D'); if (isDirect) { if (this.state.users.length > 1) { var contact; if (this.state.users[0].id === currentId) { contact = this.state.users[1]; } else { contact = this.state.users[0]; } channelTitle = contact.nickname || contact.username; } } var channelTerm = 'Channel'; if (channel.type === 'P') { channelTerm = 'Group'; } return (
{channelTitle} {!isDirect ? : }
{description}
); } });