diff options
author | Joram Wilander <jwawilander@gmail.com> | 2016-12-15 11:40:46 -0500 |
---|---|---|
committer | enahum <nahumhbl@gmail.com> | 2016-12-15 13:40:46 -0300 |
commit | 7f48a7fc9d2238134414668e0b520115706b8b2d (patch) | |
tree | c7b485e0305a46e10ea997ea3450c2c040efcb95 /webapp/components/sidebar.jsx | |
parent | c35b95709e293680f882f27ab6e616bf8f92a7cc (diff) | |
download | chat-7f48a7fc9d2238134414668e0b520115706b8b2d.tar.gz chat-7f48a7fc9d2238134414668e0b520115706b8b2d.tar.bz2 chat-7f48a7fc9d2238134414668e0b520115706b8b2d.zip |
PLT-4815 Refactor 'More Channels' modal into the new modal pattern (#4742)
* Refactor 'More Channels' modal into the new modal pattern
* Fix unit test
* Readded CSS changes
Diffstat (limited to 'webapp/components/sidebar.jsx')
-rw-r--r-- | webapp/components/sidebar.jsx | 32 |
1 files changed, 23 insertions, 9 deletions
diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx index 1145c8ab3..fcfa9496c 100644 --- a/webapp/components/sidebar.jsx +++ b/webapp/components/sidebar.jsx @@ -5,6 +5,7 @@ import $ from 'jquery'; import ReactDOM from 'react-dom'; import NewChannelFlow from './new_channel_flow.jsx'; import MoreDirectChannels from './more_direct_channels.jsx'; +import MoreChannels from 'components/more_channels.jsx'; import SidebarHeader from './sidebar_header.jsx'; import UnreadChannelIndicator from './unread_channel_indicator.jsx'; import TutorialTip from './tutorial/tutorial_tip.jsx'; @@ -19,7 +20,6 @@ import * as AsyncClient from 'utils/async_client.jsx'; import * as Utils from 'utils/utils.jsx'; import * as ChannelUtils from 'utils/channel_utils.jsx'; import * as ChannelActions from 'actions/channel_actions.jsx'; -import * as UserAgent from 'utils/user_agent.jsx'; import Constants from 'utils/constants.jsx'; @@ -53,6 +53,7 @@ export default class Sidebar extends React.Component { this.handleLeaveDirectChannel = this.handleLeaveDirectChannel.bind(this); this.showMoreChannelsModal = this.showMoreChannelsModal.bind(this); + this.hideMoreChannelsModal = this.hideMoreChannelsModal.bind(this); this.showNewChannelModal = this.showNewChannelModal.bind(this); this.hideNewChannelModal = this.hideNewChannelModal.bind(this); this.showMoreDirectChannelsModal = this.showMoreDirectChannelsModal.bind(this); @@ -72,6 +73,7 @@ export default class Sidebar extends React.Component { const state = this.getStateFromStores(); state.newChannelModalType = ''; state.showDirectChannelsModal = false; + state.showMoreChannelsModal = false; state.loadingDMChannel = -1; this.state = state; } @@ -340,13 +342,11 @@ export default class Sidebar extends React.Component { } showMoreChannelsModal() { - // manually show the modal because using data-toggle messes with keyboard focus when the modal is dismissed - $('#more_channels').modal({'data-channeltype': 'O'}).modal('show'); - $('#more_channels').on('shown.bs.modal', () => { - if (!UserAgent.isMobile()) { - $('#more_channels input').focus(); - } - }); + this.setState({showMoreChannelsModal: true}); + } + + hideMoreChannelsModal() { + this.setState({showMoreChannelsModal: false}); } showNewChannelModal(type) { @@ -552,6 +552,7 @@ export default class Sidebar extends React.Component { </li> ); } + render() { // Check if we have all info needed to render if (this.state.currentTeam == null || this.state.currentUser == null) { @@ -721,12 +722,24 @@ export default class Sidebar extends React.Component { if (this.state.showDirectChannelsModal) { moreDirectChannelsModal = ( <MoreDirectChannels - show={true} onModalDismissed={this.hideMoreDirectChannelsModal} /> ); } + let moreChannelsModal; + if (this.state.showMoreChannelsModal) { + moreChannelsModal = ( + <MoreChannels + onModalDismissed={this.hideMoreChannelsModal} + handleNewChannel={() => { + this.hideMoreChannelsModal(); + this.showNewChannelModal(Constants.OPEN_CHANNEL); + }} + /> + ); + } + return ( <div className='sidebar--left' @@ -739,6 +752,7 @@ export default class Sidebar extends React.Component { onModalDismissed={this.hideNewChannelModal} /> {moreDirectChannelsModal} + {moreChannelsModal} <SidebarHeader teamDisplayName={this.state.currentTeam.display_name} |