diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/channel_header.jsx | 59 | ||||
-rw-r--r-- | webapp/components/modals/leave_private_channel_modal.jsx | 120 | ||||
-rw-r--r-- | webapp/components/navbar.jsx | 62 | ||||
-rw-r--r-- | webapp/components/needs_team/needs_team.jsx | 2 |
4 files changed, 125 insertions, 118 deletions
diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx index 10e568794..bee06c700 100644 --- a/webapp/components/channel_header.jsx +++ b/webapp/components/channel_header.jsx @@ -14,7 +14,6 @@ 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 ConfirmModal from './confirm_modal.jsx'; import ToggleModalButton from './toggle_modal_button.jsx'; import ChannelStore from 'stores/channel_store.jsx'; @@ -60,8 +59,6 @@ export default class ChannelHeader extends React.Component { this.initWebrtc = this.initWebrtc.bind(this); this.onBusy = this.onBusy.bind(this); this.openDirectMessageModal = this.openDirectMessageModal.bind(this); - this.createLeaveChannelModal = this.createLeaveChannelModal.bind(this); - this.hideLeaveChannelModal = this.hideLeaveChannelModal.bind(this); const state = this.getStateFromStores(); state.showEditChannelHeaderModal = false; @@ -91,7 +88,6 @@ export default class ChannelHeader extends React.Component { enableFormatting: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', true), isBusy: WebrtcStore.isBusy(), isFavorite: channel && ChannelUtils.isFavoriteChannel(channel), - showLeaveChannelModal: false, pinsOpen: SearchStore.getIsPinnedPosts() }; } @@ -144,9 +140,7 @@ export default class ChannelHeader extends React.Component { handleLeave() { if (this.state.channel.type === Constants.PRIVATE_CHANNEL) { - this.setState({ - showLeaveChannelModal: true - }); + GlobalActions.showLeavePrivateChannelModal(this.state.channel); } else { ChannelActions.leaveChannel(this.state.channel.id); } @@ -233,54 +227,6 @@ export default class ChannelHeader extends React.Component { }); } - hideLeaveChannelModal() { - this.setState({ - showLeaveChannelModal: false - }); - } - - createLeaveChannelModal() { - const title = ( - <FormattedMessage - id='leave_private_channel_modal.title' - defaultMessage='Leave Private Channel {channel}' - values={{ - channel: <b>{this.state.channel.display_name}</b> - }} - /> - ); - - const message = ( - <FormattedMessage - id='leave_private_channel_modal.message' - defaultMessage='Are you sure you wish to leave the private channel {channel}? You must be re-invited in order to re-join this channel in the future.' - values={{ - channel: <b>{this.state.channel.display_name}</b> - }} - /> - ); - - const buttonClass = 'btn btn-danger'; - const button = ( - <FormattedMessage - id='leave_private_channel_modal.leave' - defaultMessage='Yes, leave channel' - /> - ); - - return ( - <ConfirmModal - show={this.state.showLeaveChannelModal} - title={title} - message={message} - confirmButtonClass={buttonClass} - confirmButtonText={button} - onConfirm={() => ChannelActions.leaveChannel(this.state.channel.id)} - onCancel={this.hideLeaveChannelModal} - /> - ); - } - render() { const flagIcon = Constants.FLAG_ICON_SVG; const pinIcon = Constants.PIN_ICON_SVG; @@ -885,8 +831,6 @@ export default class ChannelHeader extends React.Component { ); } - const leaveChannelModal = this.createLeaveChannelModal(); - let pinnedIconClass = 'channel-header__icon'; if (this.state.pinsOpen) { pinnedIconClass += ' active'; @@ -1001,7 +945,6 @@ export default class ChannelHeader extends React.Component { {editHeaderModal} {editPurposeModal} {channelMembersModal} - {leaveChannelModal} <RenameChannelModal show={this.state.showRenameChannelModal} onHide={this.hideRenameChannelModal} diff --git a/webapp/components/modals/leave_private_channel_modal.jsx b/webapp/components/modals/leave_private_channel_modal.jsx new file mode 100644 index 000000000..9b8e6df83 --- /dev/null +++ b/webapp/components/modals/leave_private_channel_modal.jsx @@ -0,0 +1,120 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import ConfirmModal from 'components/confirm_modal.jsx'; + +import * as ChannelActions from 'actions/channel_actions.jsx'; + +import ModalStore from 'stores/modal_store.jsx'; +import Constants from 'utils/constants.jsx'; + +import {intlShape, injectIntl, FormattedMessage} from 'react-intl'; + +import React from 'react'; + +class LeavePrivateChannelModal extends React.Component { + constructor(props) { + super(props); + + this.handleToggle = this.handleToggle.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + this.handleHide = this.handleHide.bind(this); + this.handleKeyPress = this.handleKeyPress.bind(this); + + this.state = { + show: false, + channel: null + }; + this.mounted = false; + } + + componentDidMount() { + this.mounted = true; + ModalStore.addModalListener(Constants.ActionTypes.TOGGLE_LEAVE_PRIVATE_CHANNEL_MODAL, this.handleToggle); + } + + componentWillUnmount() { + this.mounted = false; + ModalStore.removeModalListener(Constants.ActionTypes.TOGGLE_LEAVE_PRIVATE_CHANNEL_MODAL, this.handleToggle); + } + + handleKeyPress(e) { + if (e.key === 'Enter' && this.state.show) { + this.handleSubmit(); + } + } + + handleSubmit() { + const channelId = this.state.channel.id; + this.setState({ + show: false, + channel: null + }); + ChannelActions.leaveChannel(channelId); + } + + handleToggle(value) { + this.setState({ + channel: value, + show: value !== null + }); + } + + handleHide() { + this.setState({ + show: false + }); + } + + render() { + let title = ''; + let message = ''; + if (this.state.channel) { + title = ( + <FormattedMessage + id='leave_private_channel_modal.title' + defaultMessage='Leave Private Channel {channel}' + values={{ + channel: <b>{this.state.channel.display_name}</b> + }} + /> + ); + + message = ( + <FormattedMessage + id='leave_private_channel_modal.message' + defaultMessage='Are you sure you wish to leave the private channel {channel}? You must be re-invited in order to re-join this channel in the future.' + values={{ + channel: <b>{this.state.channel.display_name}</b> + }} + /> + ); + } + + const buttonClass = 'btn btn-danger'; + const button = ( + <FormattedMessage + id='leave_private_channel_modal.leave' + defaultMessage='Yes, leave channel' + /> + ); + + return ( + <ConfirmModal + show={this.state.show} + title={title} + message={message} + confirmButtonClass={buttonClass} + confirmButtonText={button} + onConfirm={this.handleSubmit} + onCancel={this.handleHide} + /> + ); + } +} + +LeavePrivateChannelModal.propTypes = { + intl: intlShape.isRequired +}; + +export default injectIntl(LeavePrivateChannelModal); diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx index 81959f352..0217dc15c 100644 --- a/webapp/components/navbar.jsx +++ b/webapp/components/navbar.jsx @@ -12,7 +12,6 @@ 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 ConfirmModal from './confirm_modal.jsx'; import ToggleModalButton from './toggle_modal_button.jsx'; import StatusIcon from './status_icon.jsx'; @@ -75,9 +74,6 @@ export default class Navbar extends React.Component { this.openDirectMessageModal = this.openDirectMessageModal.bind(this); this.getPinnedPosts = this.getPinnedPosts.bind(this); - this.createLeaveChannelModal = this.createLeaveChannelModal.bind(this); - this.hideLeaveChannelModal = this.hideLeaveChannelModal.bind(this); - const state = this.getStateFromStores(); state.showEditChannelPurposeModal = false; state.showEditChannelHeaderModal = false; @@ -97,8 +93,7 @@ export default class Navbar extends React.Component { users: [], userCount: ChannelStore.getCurrentStats().member_count, currentUser: UserStore.getCurrentUser(), - isFavorite: channel && ChannelUtils.isFavoriteChannel(channel), - showLeaveChannelModal: false + isFavorite: channel && ChannelUtils.isFavoriteChannel(channel) }; } @@ -139,9 +134,7 @@ export default class Navbar extends React.Component { handleLeave() { if (this.state.channel.type === Constants.PRIVATE_CHANNEL) { - this.setState({ - showLeaveChannelModal: true - }); + GlobalActions.showLeavePrivateChannelModal(this.state.channel); } else { ChannelActions.leaveChannel(this.state.channel.id); } @@ -739,54 +732,6 @@ export default class Navbar extends React.Component { return buttons; } - hideLeaveChannelModal() { - this.setState({ - showLeaveChannelModal: false - }); - } - - createLeaveChannelModal() { - const title = ( - <FormattedMessage - id='leave_private_channel_modal.title' - defaultMessage='Leave Private Channel {channel}' - values={{ - channel: <b>{this.state.channel.display_name}</b> - }} - /> - ); - - const message = ( - <FormattedMessage - id='leave_private_channel_modal.message' - defaultMessage='Are you sure you wish to leave the private channel {channel}? You must be re-invited in order to re-join this channel in the future.' - values={{ - channel: <b>{this.state.channel.display_name}</b> - }} - /> - ); - - const buttonClass = 'btn btn-danger'; - const button = ( - <FormattedMessage - id='leave_private_channel_modal.leave' - defaultMessage='Yes, leave channel' - /> - ); - - return ( - <ConfirmModal - show={this.state.showLeaveChannelModal} - title={title} - message={message} - confirmButtonClass={buttonClass} - confirmButtonText={button} - onConfirm={() => ChannelActions.leaveChannel(this.state.channel.id)} - onCancel={this.hideLeaveChannelModal} - /> - ); - } - getTeammateStatus() { const channel = this.state.channel; @@ -961,8 +906,6 @@ export default class Navbar extends React.Component { var channelMenuDropdown = this.createDropdown(channel, channelTitle, isSystemAdmin, isTeamAdmin, isChannelAdmin, isDirect, isGroup, popoverContent); - const leaveChannelModal = this.createLeaveChannelModal(); - return ( <div> <nav @@ -979,7 +922,6 @@ export default class Navbar extends React.Component { </nav> {editChannelHeaderModal} {editChannelPurposeModal} - {leaveChannelModal} {renameChannelModal} {channelMembersModal} {quickSwitchModal} diff --git a/webapp/components/needs_team/needs_team.jsx b/webapp/components/needs_team/needs_team.jsx index e86e4fb11..7b8630f40 100644 --- a/webapp/components/needs_team/needs_team.jsx +++ b/webapp/components/needs_team/needs_team.jsx @@ -45,6 +45,7 @@ import ImportThemeModal from 'components/user_settings/import_theme_modal.jsx'; import InviteMemberModal from 'components/invite_member_modal.jsx'; import LeaveTeamModal from 'components/leave_team_modal.jsx'; import ResetStatusModal from 'components/reset_status_modal'; +import LeavePrivateChannelModal from 'components/modals/leave_private_channel_modal.jsx'; import iNoBounce from 'inobounce'; import * as UserAgent from 'utils/user_agent.jsx'; @@ -231,6 +232,7 @@ export default class NeedsTeam extends React.Component { <DeletePostModal/> <RemovedFromChannelModal/> <ResetStatusModal/> + <LeavePrivateChannelModal/> </div> </div> ); |