summaryrefslogtreecommitdiffstats
path: root/web/react/components
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components')
-rw-r--r--web/react/components/mention.jsx19
-rw-r--r--web/react/components/mention_list.jsx38
2 files changed, 40 insertions, 17 deletions
diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index 520b81cbb..7a8045134 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -6,6 +6,23 @@ module.exports = React.createClass({
handleClick: function() {
this.props.handleClick(this.props.username);
},
+ handleKeyDown: function(e) {
+ var selectedMention = this.state.selectedMention <= nunMentions ? this.state.selectedMention : 1;
+
+ console.log("Here: keyDown");
+
+ if (e.key === "ArrowUp") {
+ //selectedMention = selectedMention === numMentions ? 1 : selectedMention++;
+ this.props.handleFocus(this.props.listId);
+ }
+ else if (e.key === "ArrowDown") {
+ //selectedMention = selectedMention === 1 ? numMentions : selectedMention--;
+ this.props.handleFocus(this.props.listId);
+ }
+ else if (e.key === "Enter") {
+ this.handleClick();
+ }
+ },
render: function() {
var icon;
var timestamp = UserStore.getCurrentUser().update_at;
@@ -15,7 +32,7 @@ module.exports = React.createClass({
icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
}
return (
- <div className="mentions-name" onClick={this.handleClick}>
+ <div className="mentions-name" ref="mention" onClick={this.handleClick} onKeyDown={this.handleKeyDown}>
<div className="pull-left">{icon}</div>
<div className="pull-left mention-align"><span>@{this.props.username}</span><span className="mention-fullname">{this.props.secondary_text}</span></div>
</div>
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 115ab1b2a..c5b4030c8 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -18,6 +18,8 @@ module.exports = React.createClass({
componentDidMount: function() {
PostStore.addMentionDataChangeListener(this._onChange);
+ console.log("here!");
+
var self = this;
$('body').on('keypress.mentionlist', '#'+this.props.id,
function(e) {
@@ -26,6 +28,16 @@ module.exports = React.createClass({
e.preventDefault();
self.addFirstMention();
}
+ if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 38) {
+ e.stopPropagation();
+ e.preventDefault();
+ self.handleFocus(0);
+ }
+ if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 40) {
+ e.stopPropagation();
+ e.preventDefault();
+ self.addFirstMention(UserStore.getActiveOnlyProfiles().length - 1);
+ }
}
);
$(document).click(function(e) {
@@ -56,21 +68,13 @@ module.exports = React.createClass({
this.setState({ mentionText: '-1' });
},
- handleKeyDown: function(e, numMentions) {
- var selectedMention = this.state.selectedMention <= nunMentions ? this.state.selectedMention : 1;
-
- // Need to be able to know number of mentions, use in conditionals & still
- // need to figure out how to highlight the mention I want every time.
- // Remember separate Mention Ref within for, second if statement in render
- // Maybe have the call there instead? Ehhh maybe not but need that to be able
- // to "select" it maybe...
- if (e.key === "ArrowUp") {
- selectedMention = selectedMention === numMentions ? 1 : selectedMention++;
- }
- else if (e.key === "ArrowDown") {
- selectedMention = selectedMention === 1 ? numMentions : selectedMention--;
- }
- this.setState({selectedMention: selectedMention});
+ handleFocus: function(listId) {
+ console.log("here! 1");
+ var mention = this.refs['mention' + index];
+ if (!mention) return;
+ var mentionRef = mention.refs.mention;
+ mentionRef.getDOMNode().focus();
+ console.log("here! 2");
},
addFirstMention: function() {
if (!this.refs.mention0) return;
@@ -140,6 +144,8 @@ module.exports = React.createClass({
username={users[i].username}
secondary_text={users[i].secondary_text}
id={users[i].id}
+ listId={index}
+ handleFocus={this.handleFocus}
handleClick={this.handleClick} />
);
index++;
@@ -162,7 +168,7 @@ module.exports = React.createClass({
return (
<div className="mentions--top" style={style}>
- <div ref="mentionlist" className="mentions-box" onKeyDown={this.handleKeyDown.bind(this, numMentions)}>
+ <div ref="mentionlist" className="mentions-box">
{ mentions }
</div>
</div>