diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/mention.jsx | 28 | ||||
-rw-r--r-- | web/react/components/mention_list.jsx | 55 |
2 files changed, 30 insertions, 53 deletions
diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx index abb6ae5c6..4abf8d0df 100644 --- a/web/react/components/mention.jsx +++ b/web/react/components/mention.jsx @@ -6,32 +6,10 @@ module.exports = React.createClass({ handleClick: function() { this.props.handleClick(this.props.username); }, - /*handleUp: 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++; - e.preventDefault(); - this.props.handleFocus(this.props.listId); - } - else if (e.key === "ArrowDown") { - //selectedMention = selectedMention === 1 ? numMentions : selectedMention--; - e.preventDefault(); - this.props.handleFocus(this.props.listId); - } - else if (e.key === "Enter") { - e.preventDefault(); - this.handleClick(); - } - },*/ - handleFocus: function() { - console.log("Entering " + this.props.listId); + select: function() { this.setState({ isFocused: "mentions-focus" }) }, - handleBlur: function() { - console.log("Leaving " + this.props.listId); + deselect: function() { this.setState({ isFocused: "" }); }, getInitialState: function() { @@ -51,7 +29,7 @@ module.exports = React.createClass({ icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>; } return ( - <div className={"mentions-name " + this.state.isFocused} tabIndex={this.props.id} onClick={this.handleClick} onFocus={this.handleFocus} onBlur={this.handleBlur}> + <div className={"mentions-name " + this.state.isFocused} onClick={this.handleClick}> <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 882b0d6ad..0bef41905 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -18,43 +18,42 @@ module.exports = React.createClass({ componentDidMount: function() { PostStore.addMentionDataChangeListener(this._onChange); var self = this; - $('body').on('keypress.mentionlist', '#'+this.props.id, - function(e) { - if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) { - e.stopPropagation(); - e.preventDefault(); - self.addCurrentMention(); - } - } - ); + $('body').on('keydown.mentionlist', '#'+this.props.id, function(e) { - console.log("here! top"); if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) { e.stopPropagation(); e.preventDefault(); self.addCurrentMention(); } - if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 38) { - console.log("here! 38"); + else if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 38 || e.which === 40)) { e.stopPropagation(); e.preventDefault(); - if (self.handleSelection(self.state.selectedMention - 1)) - self.setState({ selectedMention: self.state.selectedMention - 1 }); + if (!self.getSelection(self.state.selectedMention)) { + self.setState({ selectedMention: 0 }); + self.refs['mention' + self.state.selectedMention].deselect(); + } else { - self.setState({ selectedMention: 0}); + self.refs['mention' + self.state.selectedMention].deselect(); + if (e.which === 38) { + if (self.getSelection(self.state.selectedMention - 1)) + self.setState({ selectedMention: self.state.selectedMention - 1 }); + else { + var tempSelectedMention = -1; + while (self.getSelection(++tempSelectedMention)) + ; + self.setState({ selectedMention: tempSelectedMention - 1 }); + } + } + else { + if (self.getSelection(self.state.selectedMention + 1)) + self.setState({ selectedMention: self.state.selectedMention + 1 }); + else + self.setState({ selectedMention: 0 }); + } } - } - if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 40) { - console.log("here! 40"); - e.stopPropagation(); - e.preventDefault(); - - if (self.handleSelection(self.state.selectedMention + 1)) - self.setState({ selectedMention: self.state.selectedMention + 1 }); - else - self.setState({ selectedMention: 0 }); + self.refs['mention' + self.state.selectedMention].select(); } } ); @@ -86,8 +85,7 @@ module.exports = React.createClass({ this.setState({ mentionText: '-1' }); }, - handleSelection: function(listId) { - console.log("here! 1"); + getSelection: function(listId) { var mention = this.refs['mention' + listId]; if (!mention) return false; @@ -95,7 +93,7 @@ module.exports = React.createClass({ return true; }, addCurrentMention: function() { - if (!this.refs['mention' + this.state.selectedMention]) return; + if (!this.refs['mention' + this.state.selectedMention]) this.addFirstMention(); this.refs['mention' + this.state.selectedMention].handleClick(); }, addFirstMention: function() { @@ -173,6 +171,7 @@ module.exports = React.createClass({ index++; } } + var numMentions = Object.keys(mentions).length; if (numMentions < 1) return null; |