blob: 852e0dbb719a1a0c496d6049d5c2317e8beb6bd3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.
// Indicators for the left sidebar which indicate if there's unread posts in a channel that is not shown
// because it is either above or below the screen
export default class UnreadChannelIndicators extends React.Component {
constructor(props) {
super(props);
this.getFirstLastUnreadChannels = this.getFirstLastUnreadChannels.bind(this);
this.onParentUpdate = this.onParentUpdate.bind(this);
this.state = this.getFirstLastUnreadChannels(props);
}
getFirstLastUnreadChannels(props) {
let firstUnreadChannel = null;
let lastUnreadChannel = null;
for (const unreadChannel of props.unreadChannels) {
if (!firstUnreadChannel) {
firstUnreadChannel = unreadChannel;
}
lastUnreadChannel = unreadChannel;
}
return {
firstUnreadChannel,
lastUnreadChannel
};
}
onParentUpdate(parentRefs) {
const container = $(React.findDOMNode(parentRefs.container));
const topUnreadIndicator = $(React.findDOMNode(this.refs.topIndicator));
const bottomUnreadIndicator = $(React.findDOMNode(this.refs.bottomIndicator));
if (this.state.firstUnreadChannel) {
var firstUnreadElement = $(React.findDOMNode(parentRefs[this.state.firstUnreadChannel.name]));
if (firstUnreadElement.position().top + firstUnreadElement.height() < 0) {
topUnreadIndicator.css('display', 'initial');
} else {
topUnreadIndicator.css('display', 'none');
}
} else {
topUnreadIndicator.css('display', 'none');
}
if (this.state.lastUnreadChannel) {
var lastUnreadElement = $(React.findDOMNode(parentRefs[this.state.lastUnreadChannel.name]));
if (lastUnreadElement.position().top > container.height()) {
bottomUnreadIndicator.css('display', 'initial');
} else {
bottomUnreadIndicator.css('display', 'none');
}
} else {
bottomUnreadIndicator.css('display', 'none');
}
}
componentWillReceiveProps(nextProps) {
this.setState(this.getFirstLastUnreadChannels(nextProps));
}
render() {
return (
<div>
<div
ref='topIndicator'
className='nav-pills__unread-indicator nav-pills__unread-indicator-top'
style={{display: 'none'}}
>
{'Unread post(s) above'}
</div>
<div
ref='bottomIndicator'
className='nav-pills__unread-indicator nav-pills__unread-indicator-bottom'
style={{display: 'none'}}
>
{'Unread post(s) below'}
</div>
</div>
);
}
}
UnreadChannelIndicators.propTypes = {
// a list of the unread channels displayed in the parent
unreadChannels: React.PropTypes.array.isRequired
};
|
