diff options
author | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-07-10 09:49:44 -0700 |
---|---|---|
committer | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-07-16 08:10:18 -0700 |
commit | 63b9dd85b6efd9d292d4d79240e00b7d27e6616c (patch) | |
tree | 3ef3faad67297b38ab2fe913bec72b00ee10c996 /web/react/components/mention.jsx | |
parent | 924fd8609bb0b512cd60c1f345ec22dcb6bf0612 (diff) | |
download | chat-63b9dd85b6efd9d292d4d79240e00b7d27e6616c.tar.gz chat-63b9dd85b6efd9d292d4d79240e00b7d27e6616c.tar.bz2 chat-63b9dd85b6efd9d292d4d79240e00b7d27e6616c.zip |
Changed model of handling key down and focus change
Diffstat (limited to 'web/react/components/mention.jsx')
-rw-r--r-- | web/react/components/mention.jsx | 19 |
1 files changed, 18 insertions, 1 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> |