mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Reformatted sidebar.jsx to meet style guide requirements.

Просмотр исходного кода
Этот коммит содержится в:
JoramWilander
2015-09-01 08:37:09 -04:00
родитель 3a66be9078
Коммит 27519d3f73
1 изменённых файлов: 326 добавлений и 236 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

212
web/react/components/sidebar.jsx
Просмотреть файл

@@ -13,7 +13,24 @@ var SidebarHeader = require('./sidebar_header.jsx');
var SearchBox = require('./search_bar.jsx');
var Constants = require('../utils/constants.jsx');
function getStateFromStores() {
export default class Sidebar extends React.Component {
constructor(props) {
super(props);
this.badgesActive = false;
this.firstUnreadChannel = null;
this.lastUnreadChannel = null;
this.onChange = this.onChange.bind(this);
this.onScroll = this.onScroll.bind(this);
this.onResize = this.onResize.bind(this);
this.updateUnreadIndicators = this.updateUnreadIndicators.bind(this);
this.createChannelElement = this.createChannelElement.bind(this);
this.state = this.getStateFromStores();
this.state.loadingDMChannel = -1;
}
getStateFromStores() {
var members = ChannelStore.getAllMembers();
var teamMemberMap = UserStore.getActiveOnlyProfiles();
var currentId = ChannelStore.getCurrentId();
@@ -121,14 +138,7 @@ function getStateFromStores() {
hideDirectChannels: readDirectChannels
};
}
module.exports = React.createClass({
displayName: 'Sidebar',
propTypes: {
teamType: React.PropTypes.string,
teamDisplayName: React.PropTypes.string
},
componentDidMount: function() {
componentDidMount() {
ChannelStore.addChangeListener(this.onChange);
UserStore.addChangeListener(this.onChange);
UserStore.addStatusesChangeListener(this.onChange);
@@ -140,12 +150,12 @@ module.exports = React.createClass({
this.updateUnreadIndicators();
$(window).on('resize', this.onResize);
},
componentDidUpdate: function() {
}
componentDidUpdate() {
this.updateTitle();
this.updateUnreadIndicators();
},
componentWillUnmount: function() {
}
componentWillUnmount() {
$(window).off('resize', this.onResize);
ChannelStore.removeChangeListener(this.onChange);
@@ -153,14 +163,14 @@ module.exports = React.createClass({
UserStore.removeStatusesChangeListener(this.onChange);
TeamStore.removeChangeListener(this.onChange);
SocketStore.removeChangeListener(this.onSocketChange);
},
onChange: function() {
var newState = getStateFromStores();
}
onChange() {
var newState = this.getStateFromStores();
if (!utils.areStatesEqual(newState, this.state)) {
this.setState(newState);
}
},
onSocketChange: function(msg) {
}
onSocketChange(msg) {
if (msg.action === 'posted') {
if (ChannelStore.getCurrentId() === msg.channel_id) {
if (window.isActive) {
@@ -243,8 +253,8 @@ module.exports = React.createClass({
}
}
}
},
updateTitle: function() {
}
updateTitle() {
var channel = ChannelStore.getCurrent();
if (channel) {
if (channel.type === 'D') {
@@ -254,14 +264,14 @@ module.exports = React.createClass({
document.title = channel.display_name + ' ' + document.title.substring(document.title.lastIndexOf('-'));
}
}
},
onScroll: function() {
}
onScroll() {
this.updateUnreadIndicators();
},
onResize: function() {
}
onResize() {
this.updateUnreadIndicators();
},
updateUnreadIndicators: function() {
}
updateUnreadIndicators() {
var container = $(this.refs.container.getDOMNode());
if (this.firstUnreadChannel) {
@@ -283,24 +293,10 @@ module.exports = React.createClass({
$(this.refs.bottomUnreadIndicator.getDOMNode()).css('display', 'none');
}
}
},
getInitialState: function() {
var newState = getStateFromStores();
newState.loadingDMChannel = -1;
return newState;
},
render: function() {
}
createChannelElement(channel, index) {
var members = this.state.members;
var activeId = this.state.activeId;
var badgesActive = false;
// keep track of the first and last unread channels so we can use them to set the unread indicators
var self = this;
this.firstUnreadChannel = null;
this.lastUnreadChannel = null;
function createChannelElement(channel, index) {
var channelMember = members[channel.id];
var msgCount;
@@ -332,15 +328,20 @@ module.exports = React.createClass({
msgCount = channel.total_msg_count - channelMember.msg_count;
if (msgCount > 0) {
badge = <span className='badge pull-right small'>{msgCount}</span>;
badgesActive = true;
this.badgesActive = true;
}
} else if (channelMember.mention_count > 0) {
// public and private channels only show badges for mentions
badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>;
badgesActive = true;
this.badgesActive = true;
}
} else if (self.state.loadingDMChannel === index && channel.type === 'D') {
badge = <img className='channel-loading-gif pull-right' src='/static/images/load.gif'/>;
badge = (
<img
className='channel-loading-gif pull-right'
src='/static/images/load.gif'
/>
);
}
// set up status icon for direct message channels
@@ -354,7 +355,12 @@ module.exports = React.createClass({
} else {
statusIcon = Constants.OFFLINE_ICON_SVG;
}
status = <span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} />;
status = (
<span
className='status'
dangerouslySetInnerHTML={{__html: statusIcon}}
/>
);
}
// set up click handler to switch channels (or create a new channel for non-existant ones)
@@ -392,8 +398,16 @@ module.exports = React.createClass({
}
return (
<li key={channel.name} ref={channel.name} className={linkClass}>
<a className={'sidebar-channel ' + titleClass} href={href} onClick={handleClick}>
<li
key={channel.name}
ref={channel.name}
className={linkClass}
>
<a
className={'sidebar-channel ' + titleClass}
href={href}
onClick={handleClick}
>
{status}
{channel.display_name}
{badge}
@@ -401,28 +415,34 @@ module.exports = React.createClass({
</li>
);
}
render() {
this.badgesActive = false;
// keep track of the first and last unread channels so we can use them to set the unread indicators
this.firstUnreadChannel = null;
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(createChannelElement);
).map(this.createChannelElement);
var privateChannelItems = this.state.channels.filter(
function filterPrivateChannels(channel) {
return channel.type === 'P';
}
).map(createChannelElement);
).map(this.createChannelElement);
var directMessageItems = this.state.showDirectChannels.map(createChannelElement);
var directMessageItems = this.state.showDirectChannels.map(this.createChannelElement);
// update the favicon to show if there are any notifications
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.id = 'favicon';
if (badgesActive) {
if (this.badgesActive) {
link.href = '/static/images/redfavicon.ico';
} else {
link.href = '/static/images/favicon.ico';
@@ -438,7 +458,13 @@ module.exports = React.createClass({
if (this.state.hideDirectChannels.length > 0) {
directMessageMore = (
<li>
<a href='#' data-toggle='modal' className='nav-more' data-target='#more_direct_channels' data-channels={JSON.stringify(this.state.hideDirectChannels)}>
<a
href='#'
data-toggle='modal'
className='nav-more'
data-target='#more_direct_channels'
data-channels={JSON.stringify(this.state.hideDirectChannels)}
>
{'More (' + this.state.hideDirectChannels.length + ')'}
</a>
</li>
@@ -447,21 +473,76 @@ module.exports = React.createClass({
return (
<div>
<SidebarHeader teamDisplayName={this.props.teamDisplayName} teamType={this.props.teamType} />
<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>
<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>
<div ref='container' className='nav-pills__container' onScroll={this.onScroll}>
<div
ref='container'
className='nav-pills__container'
onScroll={this.onScroll}
>
<ul className='nav nav-pills nav-stacked'>
<li><h4>Channels<a className='add-channel-btn' href='#' data-toggle='modal' data-target='#new_channel' data-channeltype='O'>+</a></h4></li>
<li>
<h4>
Channels
<a
className='add-channel-btn'
href='#'
data-toggle='modal'
data-target='#new_channel'
data-channeltype='O'
>
+
</a>
</h4>
</li>
{channelItems}
<li><a href='#' data-toggle='modal' className='nav-more' data-target='#more_channels' data-channeltype='O'>More...</a></li>
<li>
<a
href='#'
data-toggle='modal'
className='nav-more'
data-target='#more_channels'
data-channeltype='O'
>
More...
</a>
</li>
</ul>
<ul className='nav nav-pills nav-stacked'>
<li><h4>Private Groups<a className='add-channel-btn' href='#' data-toggle='modal' data-target='#new_channel' data-channeltype='P'>+</a></h4></li>
<li>
<h4>
Private Groups
<a
className='add-channel-btn'
href='#'
data-toggle='modal'
data-target='#new_channel'
data-channeltype='P'
>
+
</a>
</h4>
</li>
{privateChannelItems}
</ul>
<ul className='nav nav-pills nav-stacked'>
@@ -473,4 +554,13 @@ module.exports = React.createClass({
</div>
);
}
});
}
Sidebar.defaultProps = {
teamType: '',
teamDisplayName: ''
};
Sidebar.propTypes = {
teamType: React.PropTypes.string,
teamDisplayName: React.PropTypes.string
};