diff options
author | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-06-19 16:04:33 -0700 |
---|---|---|
committer | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-07-16 08:10:18 -0700 |
commit | 6e67be40544f537d624f7f4449b8fcb97e338fb3 (patch) | |
tree | f3f1ffba4426eccfc3bc260c40862febf6b4e4c0 /web/react/components | |
parent | b236079d936e7f7af648b362d11b491fc0a2c428 (diff) | |
download | chat-6e67be40544f537d624f7f4449b8fcb97e338fb3.tar.gz chat-6e67be40544f537d624f7f4449b8fcb97e338fb3.tar.bz2 chat-6e67be40544f537d624f7f4449b8fcb97e338fb3.zip |
Added framework for handling up and down arrow key presses to move between different @mention choices
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/mention_list.jsx | 18 |
1 files changed, 17 insertions, 1 deletions
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 103ff29bb..3796d465f 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -56,6 +56,22 @@ module.exports = React.createClass({ this.setState({ mentionText: '-1' }); }, + handleKeyDown: function(e) { + var selectedMention = this.state.selectedMention ? 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 === ? 1 : selectedMention++; + } + else if (e.key === "ArrowDown") { + selectedMention = selectedMention === 1 ? : selectedMention--; + } + this.setState({selectedMention: selectedMention}); + } addFirstMention: function() { if (!this.refs.mention0) return; this.refs.mention0.handleClick(); @@ -144,7 +160,7 @@ module.exports = React.createClass({ return ( <div className="mentions--top" style={style}> - <div ref="mentionlist" className="mentions-box"> + <div ref="mentionlist" className="mentions-box" onKeyDown={this.handleKeyDown}> { mentions } </div> </div> |