summaryrefslogtreecommitdiffstats
path: root/web/react/components/channel_header.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/channel_header.jsx')
-rw-r--r--web/react/components/channel_header.jsx517
1 files changed, 0 insertions, 517 deletions
diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx
deleted file mode 100644
index 882c575f0..000000000
--- a/web/react/components/channel_header.jsx
+++ /dev/null
@@ -1,517 +0,0 @@
-// 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 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 'mm-intl';
-
-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);
- 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 = (
- <Tooltip id='recentMentionsTooltip'>
- <FormattedMessage
- id='channel_header.recentMentions'
- defaultMessage='Recent Mentions'
- />
- </Tooltip>
- );
- const popoverContent = (
- <Popover
- id='hader-popover'
- bStyle='info'
- bSize='large'
- placement='bottom'
- className='description'
- onMouseOver={() => this.refs.headerOverlay.show()}
- onMouseOut={() => this.refs.headerOverlay.hide()}
- >
- <MessageWrapper
- message={channel.header}
- />
- </Popover>
- );
- 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 = (
- <FormattedMessage
- id='channel_header.channel'
- defaultMessage='Channel'
- />
- );
- if (channel.type === Constants.PRIVATE_CHANNEL) {
- channelTerm = (
- <FormattedMessage
- id='channel_header.group'
- defaultMessage='Group'
- />
- );
- }
-
- let popoverListMembers;
- if (!isDirect) {
- popoverListMembers = (
- <PopoverListMembers
- members={this.state.users}
- memberCount={this.state.userCount}
- channelId={channel.id}
- />
- );
- }
-
- const dropdownContents = [];
- if (isDirect) {
- dropdownContents.push(
- <li
- key='edit_header_direct'
- role='presentation'
- >
- <ToggleModalButton
- role='menuitem'
- dialogType={EditChannelHeaderModal}
- dialogProps={{channel}}
- >
- <FormattedMessage
- id='channel_header.channelHeader'
- defaultMessage='Set Channel Header...'
- />
- </ToggleModalButton>
- </li>
- );
- } else {
- dropdownContents.push(
- <li
- key='view_info'
- role='presentation'
- >
- <ToggleModalButton
- role='menuitem'
- dialogType={ChannelInfoModal}
- dialogProps={{channel}}
- >
- <FormattedMessage
- id='channel_header.viewInfo'
- defaultMessage='View Info'
- />
- </ToggleModalButton>
- </li>
- );
-
- if (!ChannelStore.isDefault(channel)) {
- dropdownContents.push(
- <li
- key='add_members'
- role='presentation'
- >
- <ToggleModalButton
- role='menuitem'
- dialogType={ChannelInviteModal}
- dialogProps={{channel, currentUser: this.state.currentUser}}
- >
- <FormattedMessage
- id='chanel_header.addMembers'
- defaultMessage='Add Members'
- />
- </ToggleModalButton>
- </li>
- );
-
- if (isAdmin) {
- dropdownContents.push(
- <li
- key='manage_members'
- role='presentation'
- >
- <a
- role='menuitem'
- href='#'
- onClick={() => this.setState({showMembersModal: true})}
- >
- <FormattedMessage
- id='channel_header.manageMembers'
- defaultMessage='Manage Members'
- />
- </a>
- </li>
- );
- }
- }
-
- dropdownContents.push(
- <li
- key='set_channel_header'
- role='presentation'
- >
- <ToggleModalButton
- role='menuitem'
- dialogType={EditChannelHeaderModal}
- dialogProps={{channel}}
- >
- <FormattedMessage
- id='channel_header.setHeader'
- defaultMessage='Set {term} Header...'
- values={{
- term: (channelTerm)
- }}
- />
- </ToggleModalButton>
- </li>
- );
- dropdownContents.push(
- <li
- key='set_channel_purpose'
- role='presentation'
- >
- <a
- role='menuitem'
- href='#'
- onClick={() => this.setState({showEditChannelPurposeModal: true})}
- >
- <FormattedMessage
- id='channel_header.setPurpose'
- defaultMessage='Set {term} Purpose...'
- values={{
- term: (channelTerm)
- }}
- />
- </a>
- </li>
- );
- dropdownContents.push(
- <li
- key='notification_preferences'
- role='presentation'
- >
- <ToggleModalButton
- role='menuitem'
- dialogType={ChannelNotificationsModal}
- dialogProps={{
- channel,
- channelMember: this.state.memberChannel,
- currentUser: this.state.currentUser
- }}
- >
- <FormattedMessage
- id='channel_header.notificationPreferences'
- defaultMessage='Notification Preferences'
- />
- </ToggleModalButton>
- </li>
- );
-
- if (isAdmin) {
- dropdownContents.push(
- <li
- key='rename_channel'
- role='presentation'
- >
- <a
- role='menuitem'
- href='#'
- onClick={this.showRenameChannelModal}
- >
- <FormattedMessage
- id='channel_header.rename'
- defaultMessage='Rename {term}...'
- values={{
- term: (channelTerm)
- }}
- />
- </a>
- </li>
- );
-
- if (!ChannelStore.isDefault(channel)) {
- dropdownContents.push(
- <li
- key='delete_channel'
- role='presentation'
- >
- <ToggleModalButton
- role='menuitem'
- dialogType={DeleteChannelModal}
- dialogProps={{channel}}
- >
- <FormattedMessage
- id='channel_header.delete'
- defaultMessage='Delete {term}...'
- values={{
- term: (channelTerm)
- }}
- />
- </ToggleModalButton>
- </li>
- );
- }
- }
-
- if (!ChannelStore.isDefault(channel)) {
- dropdownContents.push(
- <li
- key='leave_channel'
- role='presentation'
- >
- <a
- role='menuitem'
- href='#'
- onClick={this.handleLeave}
- >
- <FormattedMessage
- id='channel_header.leave'
- defaultMessage='Leave {term}'
- values={{
- term: (channelTerm)
- }}
- />
- </a>
- </li>
- );
- }
- }
-
- return (
- <div>
- <table className='channel-header alt'>
- <tbody>
- <tr>
- <th>
- <div className='channel-header__info'>
- <div className='dropdown'>
- <a
- href='#'
- className='dropdown-toggle theme'
- type='button'
- id='channel_header_dropdown'
- data-toggle='dropdown'
- aria-expanded='true'
- >
- <strong className='heading'>{channelTitle} </strong>
- <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'/>
- </a>
- <ul
- className='dropdown-menu'
- role='menu'
- aria-labelledby='channel_header_dropdown'
- >
- {dropdownContents}
- </ul>
- </div>
- <OverlayTrigger
- trigger={'click'}
- placement='bottom'
- overlay={popoverContent}
- ref='headerOverlay'
- >
- <div
- onClick={TextFormatting.handleClick}
- className='description'
- dangerouslySetInnerHTML={{__html: TextFormatting.formatText(channel.header, {singleline: true, mentionHighlight: false})}}
- />
- </OverlayTrigger>
- </div>
- </th>
- <th>
- {popoverListMembers}
- </th>
- <th className='search-bar__container'><NavbarSearchBox/></th>
- <th>
- <div className='dropdown channel-header__links'>
- <OverlayTrigger
- delayShow={Constants.OVERLAY_TIME_DELAY}
- placement='bottom'
- overlay={recentMentionsTooltip}
- >
- <a
- href='#'
- type='button'
- onClick={this.searchMentions}
- >
- {'@'}
- </a>
- </OverlayTrigger>
- </div>
- </th>
- </tr>
- </tbody>
- </table>
- <EditChannelPurposeModal
- show={this.state.showEditChannelPurposeModal}
- onModalDismissed={() => this.setState({showEditChannelPurposeModal: false})}
- channel={channel}
- />
- <ChannelMembersModal
- show={this.state.showMembersModal}
- onModalDismissed={() => this.setState({showMembersModal: false})}
- channel={channel}
- />
- <RenameChannelModal
- show={this.state.showRenameChannelModal}
- onHide={this.hideRenameChannelModal}
- channel={channel}
- />
- </div>
- );
- }
-}
-
-ChannelHeader.propTypes = {
-};
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-05 02:44:46 +0000