diff options
author | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-07-11 12:57:28 -0700 |
---|---|---|
committer | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-07-16 08:10:18 -0700 |
commit | 59b2a42ac89ca03a196bf5d20d617174a5bc30bb (patch) | |
tree | 3d940a09bf89c8e594b6e3303f690fad0c92d747 /web/react/components/mention.jsx | |
parent | 63b9dd85b6efd9d292d4d79240e00b7d27e6616c (diff) | |
download | chat-59b2a42ac89ca03a196bf5d20d617174a5bc30bb.tar.gz chat-59b2a42ac89ca03a196bf5d20d617174a5bc30bb.tar.bz2 chat-59b2a42ac89ca03a196bf5d20d617174a5bc30bb.zip |
Have arrow key selection working, but visually does not highlight correct mention. Also if user continues to type things might get weird.
Diffstat (limited to 'web/react/components/mention.jsx')
-rw-r--r-- | web/react/components/mention.jsx | 23 |
1 files changed, 21 insertions, 2 deletions
diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx index 7a8045134..abb6ae5c6 100644 --- a/web/react/components/mention.jsx +++ b/web/react/components/mention.jsx @@ -6,22 +6,41 @@ module.exports = React.createClass({ handleClick: function() { this.props.handleClick(this.props.username); }, - handleKeyDown: function(e) { + /*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); + this.setState({ isFocused: "mentions-focus" }) + }, + handleBlur: function() { + console.log("Leaving " + this.props.listId); + this.setState({ isFocused: "" }); + }, + getInitialState: function() { + if (this.props.isFocus) { + return { isFocused: "mentions-focus" }; + } + else { + return { isFocused: "" }; + } }, render: function() { var icon; @@ -32,7 +51,7 @@ module.exports = React.createClass({ icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>; } return ( - <div className="mentions-name" ref="mention" onClick={this.handleClick} onKeyDown={this.handleKeyDown}> + <div className={"mentions-name " + this.state.isFocused} tabIndex={this.props.id} onClick={this.handleClick} onFocus={this.handleFocus} onBlur={this.handleBlur}> <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> |