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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.
var UserStore = require('../stores/user_store.jsx');
var PostStore = require('../stores/post_store.jsx');
var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
var Mention = require('./mention.jsx');
var Constants = require('../utils/constants.jsx');
var ActionTypes = Constants.ActionTypes;
module.exports = React.createClass({
componentDidMount: function() {
PostStore.addMentionDataChangeListener(this._onChange);
var self = this;
$('#'+this.props.id).on('keypress.mentionlist',
function(e) {
if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 13) {
e.stopPropagation();
e.preventDefault();
self.addFirstMention();
}
}
);
},
componentWillUnmount: function() {
PostStore.removeMentionDataChangeListener(this._onChange);
$('#'+this.props.id).off('keypress.mentionlist');
},
_onChange: function(id, mentionText, excludeList) {
if (id !== this.props.id) return;
var newState = this.state;
if (mentionText != null) newState.mentionText = mentionText;
if (excludeList != null) newState.excludeUsers = excludeList;
this.setState(newState);
},
handleClick: function(name) {
AppDispatcher.handleViewAction({
type: ActionTypes.RECIEVED_ADD_MENTION,
id: this.props.id,
username: name
});
this.setState({ mentionText: '-1' });
},
addFirstMention: function() {
if (!this.refs.mention0) return;
this.refs.mention0.handleClick();
},
isEmpty: function() {
return (!this.refs.mention0);
},
alreadyMentioned: function(username) {
var excludeUsers = this.state.excludeUsers;
for (var i = 0; i < excludeUsers.length; i++) {
if (excludeUsers[i] === username) {
return true;
}
}
return false;
},
getInitialState: function() {
return { excludeUsers: [], mentionText: "-1" };
},
render: function() {
var mentionText = this.state.mentionText;
if (mentionText === '-1') return (<div/>);
var profiles = UserStore.getActiveOnlyProfiles();
var users = [];
for (var id in profiles) {
users.push(profiles[id]);
}
users.sort(function(a,b) {
if (a.username < b.username) return -1;
if (a.username > b.username) return 1;
return 0;
});
var mentions = {};
var index = 0;
for (var i = 0; i < users.length; i++) {
if (Object.keys(mentions).length >= 25) break;
if (this.alreadyMentioned(users[i].username)) continue;
var firstName = "", lastName = "";
if (users[i].full_name.length > 0) {
var splitName = users[i].full_name.split(' ');
firstName = splitName[0].toLowerCase();
lastName = splitName.length > 1 ? splitName[splitName.length-1].toLowerCase() : "";
}
if (firstName.lastIndexOf(mentionText,0) === 0
|| lastName.lastIndexOf(mentionText,0) === 0 || users[i].username.lastIndexOf(mentionText,0) === 0) {
mentions[i+1] = (
<Mention
ref={'mention' + index}
username={users[i].username}
name={users[i].full_name}
id={users[i].id}
handleClick={this.handleClick} />
);
index++;
}
}
var numMentions = Object.keys(mentions).length;
if (numMentions < 1) return (<div/>);
var height = (numMentions*37) + 2;
var width = $('#'+this.props.id).parent().width();
var bottom = $(window).height() - $('#'+this.props.id).offset().top;
var left = $('#'+this.props.id).offset().left;
var max_height = $('#'+this.props.id).offset().top - 10;
return (
<div className="mentions--top" style={{height: height, width: width, bottom: bottom, left: left}}>
<div ref="mentionlist" className="mentions-box" style={{maxHeight: max_height, height: height, width: width}}>
{ mentions }
</div>
</div>
);
}
});
|
