diff options
Diffstat (limited to 'web/react/components/sidebar.jsx')
| -rw-r--r-- | web/react/components/sidebar.jsx | 102 |
1 files changed, 60 insertions, 42 deletions
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index ad934d271..87007edcc 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -12,6 +12,8 @@ var Utils = require('../utils/utils.jsx'); var SidebarHeader = require('./sidebar_header.jsx'); var SearchBox = require('./search_bar.jsx'); var Constants = require('../utils/constants.jsx'); +var NewChannelFlow = require('./new_channel_flow.jsx'); +var UnreadChannelIndicator = require('./unread_channel_indicator.jsx'); export default class Sidebar extends React.Component { constructor(props) { @@ -28,6 +30,7 @@ export default class Sidebar extends React.Component { this.createChannelElement = this.createChannelElement.bind(this); this.state = this.getStateFromStores(); + this.state.modal = ''; this.state.loadingDMChannel = -1; } getStateFromStores() { @@ -151,6 +154,16 @@ export default class Sidebar extends React.Component { $(window).on('resize', this.onResize); } + shouldComponentUpdate(nextProps, nextState) { + if (!Utils.areStatesEqual(nextProps, this.props)) { + return true; + } + + if (!Utils.areStatesEqual(nextState, this.state)) { + return true; + } + return false; + } componentDidUpdate() { this.updateTitle(); this.updateUnreadIndicators(); @@ -272,15 +285,16 @@ export default class Sidebar extends React.Component { this.updateUnreadIndicators(); } updateUnreadIndicators() { - var container = $(React.findDOMNode(this.refs.container)); + const container = $(React.findDOMNode(this.refs.container)); + + var showTopUnread = false; + var showBottomUnread = false; if (this.firstUnreadChannel) { var firstUnreadElement = $(React.findDOMNode(this.refs[this.firstUnreadChannel])); if (firstUnreadElement.position().top + firstUnreadElement.height() < 0) { - $(React.findDOMNode(this.refs.topUnreadIndicator)).css('display', 'initial'); - } else { - $(React.findDOMNode(this.refs.topUnreadIndicator)).css('display', 'none'); + showTopUnread = true; } } @@ -288,11 +302,14 @@ export default class Sidebar extends React.Component { var lastUnreadElement = $(React.findDOMNode(this.refs[this.lastUnreadChannel])); if (lastUnreadElement.position().top > container.height()) { - $(React.findDOMNode(this.refs.bottomUnreadIndicator)).css('display', 'initial'); - } else { - $(React.findDOMNode(this.refs.bottomUnreadIndicator)).css('display', 'none'); + showBottomUnread = true; } } + + this.setState({ + showTopUnread, + showBottomUnread + }); } createChannelElement(channel, index) { var members = this.state.members; @@ -346,6 +363,11 @@ export default class Sidebar extends React.Component { ); } + var badgeClass; + if (msgCount > 0) { + badgeClass = 'has-badge'; + } + // set up status icon for direct message channels var status = null; if (channel.type === 'D') { @@ -406,7 +428,7 @@ export default class Sidebar extends React.Component { className={linkClass} > <a - className={'sidebar-channel ' + titleClass} + className={'sidebar-channel ' + titleClass + ' ' + badgeClass} href={href} onClick={handleClick} > @@ -425,19 +447,13 @@ export default class Sidebar extends React.Component { this.lastUnreadChannel = null; // create elements for all 3 types of channels - var channelItems = this.state.channels.filter( - function filterPublicChannels(channel) { - return channel.type === 'O'; - } - ).map(this.createChannelElement); + const publicChannels = this.state.channels.filter((channel) => channel.type === 'O'); + const publicChannelItems = publicChannels.map(this.createChannelElement); - var privateChannelItems = this.state.channels.filter( - function filterPrivateChannels(channel) { - return channel.type === 'P'; - } - ).map(this.createChannelElement); + const privateChannels = this.state.channels.filter((channel) => channel.type === 'P'); + const privateChannelItems = privateChannels.map(this.createChannelElement); - var directMessageItems = this.state.showDirectChannels.map(this.createChannelElement); + const directMessageItems = this.state.showDirectChannels.map(this.createChannelElement); // update the favicon to show if there are any notifications var link = document.createElement('link'); @@ -473,28 +489,34 @@ export default class Sidebar extends React.Component { ); } + let showChannelModal = false; + if (this.state.modal !== '') { + showChannelModal = true; + } + return ( <div> + <NewChannelFlow + show={showChannelModal} + channelType={this.state.modal} + onModalDismissed={() => this.setState({modal: ''})} + /> <SidebarHeader teamDisplayName={this.props.teamDisplayName} teamType={this.props.teamType} /> <SearchBox /> - <div - ref='topUnreadIndicator' - className='nav-pills__unread-indicator nav-pills__unread-indicator-top' - style={{display: 'none'}} - > - Unread post(s) above - </div> - <div - ref='bottomUnreadIndicator' - className='nav-pills__unread-indicator nav-pills__unread-indicator-bottom' - style={{display: 'none'}} - > - Unread post(s) below - </div> + <UnreadChannelIndicator + show={this.state.showTopUnread} + extraClass='nav-pills__unread-indicator-top' + text={'Unread post(s) above'} + /> + <UnreadChannelIndicator + show={this.state.showBottomUnread} + extraClass='nav-pills__unread-indicator-bottom' + text={'Unread post(s) below'} + /> <div ref='container' @@ -508,15 +530,13 @@ export default class Sidebar extends React.Component { <a className='add-channel-btn' href='#' - data-toggle='modal' - data-target='#new_channel' - data-channeltype='O' + onClick={() => this.setState({modal: 'O'})} > - + + {'+'} </a> </h4> </li> - {channelItems} + {publicChannelItems} <li> <a href='#' @@ -537,11 +557,9 @@ export default class Sidebar extends React.Component { <a className='add-channel-btn' href='#' - data-toggle='modal' - data-target='#new_channel' - data-channeltype='P' + onClick={() => this.setState({modal: 'P'})} > - + + {'+'} </a> </h4> </li> |