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 | |
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')
-rw-r--r-- | web/react/components/mention.jsx | 23 | ||||
-rw-r--r-- | web/react/components/mention_list.jsx | 56 |
2 files changed, 59 insertions, 20 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> diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index c5b4030c8..882b0d6ad 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -17,26 +17,44 @@ module.exports = React.createClass({ displayName: "MentionList", componentDidMount: function() { PostStore.addMentionDataChangeListener(this._onChange); - - console.log("here!"); - var self = this; $('body').on('keypress.mentionlist', '#'+this.props.id, function(e) { - if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 13) { + 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.addFirstMention(); + self.addCurrentMention(); } if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 38) { + console.log("here! 38"); e.stopPropagation(); e.preventDefault(); - self.handleFocus(0); + + if (self.handleSelection(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(); - self.addFirstMention(UserStore.getActiveOnlyProfiles().length - 1); + + if (self.handleSelection(self.state.selectedMention + 1)) + self.setState({ selectedMention: self.state.selectedMention + 1 }); + else + self.setState({ selectedMention: 0 }); } } ); @@ -68,13 +86,17 @@ module.exports = React.createClass({ this.setState({ mentionText: '-1' }); }, - handleFocus: function(listId) { + handleSelection: 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"); + var mention = this.refs['mention' + listId]; + if (!mention) + return false; + else + return true; + }, + addCurrentMention: function() { + if (!this.refs['mention' + this.state.selectedMention]) return; + this.refs['mention' + this.state.selectedMention].handleClick(); }, addFirstMention: function() { if (!this.refs.mention0) return; @@ -93,7 +115,7 @@ module.exports = React.createClass({ return false; }, getInitialState: function() { - return { excludeUsers: [], mentionText: "-1", selectedMention: 1 }; + return { excludeUsers: [], mentionText: "-1", selectedMention: 0 }; }, render: function() { var mentionText = this.state.mentionText; @@ -138,14 +160,14 @@ module.exports = React.createClass({ if (firstName.lastIndexOf(mentionText,0) === 0 || lastName.lastIndexOf(mentionText,0) === 0 || users[i].username.lastIndexOf(mentionText,0) === 0) { - mentions[i+1] = ( + mentions[index] = ( <Mention ref={'mention' + index} username={users[i].username} secondary_text={users[i].secondary_text} id={users[i].id} listId={index} - handleFocus={this.handleFocus} + isFocus={this.state.selectedMention === index ? true : false} handleClick={this.handleClick} /> ); index++; @@ -164,8 +186,6 @@ module.exports = React.createClass({ left: $mention_tab.offset().left }; - //mentions[this.state.selectedMention].focus(); - return ( <div className="mentions--top" style={style}> <div ref="mentionlist" className="mentions-box"> |