diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2017-06-20 15:22:46 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-06-20 15:22:46 -0400 |
commit | 68ea0abfa665144164041c9421899bfc21412f8a (patch) | |
tree | 5d2f2aa5665a084bd1e544d8342e229a8fafc064 /webapp/components/at_mention | |
parent | 270fc41c0ffe52266f821748db9fd8b4e9d10b36 (diff) | |
download | chat-68ea0abfa665144164041c9421899bfc21412f8a.tar.gz chat-68ea0abfa665144164041c9421899bfc21412f8a.tar.bz2 chat-68ea0abfa665144164041c9421899bfc21412f8a.zip |
PLT-4457 Added AtMention component to better render at mentions (#6563)
* Moved Utils.searchForTerm into an action
* Added easier importing of index.jsx files
* PLT-4457 Added AtMention component to better render at mentions
* Fixed client unit tests
* Fixed merge conflict
* Fixed merge conflicts
Diffstat (limited to 'webapp/components/at_mention')
-rw-r--r-- | webapp/components/at_mention/at_mention.jsx | 79 | ||||
-rw-r--r-- | webapp/components/at_mention/index.jsx | 27 |
2 files changed, 106 insertions, 0 deletions
diff --git a/webapp/components/at_mention/at_mention.jsx b/webapp/components/at_mention/at_mention.jsx new file mode 100644 index 000000000..760884b88 --- /dev/null +++ b/webapp/components/at_mention/at_mention.jsx @@ -0,0 +1,79 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; +import PropTypes from 'prop-types'; + +export default class AtMention extends React.PureComponent { + static propTypes = { + mentionName: PropTypes.string.isRequired, + usersByUsername: PropTypes.object.isRequired, + actions: PropTypes.shape({ + searchForTerm: PropTypes.func.isRequired + }).isRequired + }; + + constructor(props) { + super(props); + + this.state = { + username: this.getUsernameFromMentionName(props) + }; + } + + componentWillReceiveProps(nextProps) { + if (nextProps.mentionName !== this.props.mentionName || nextProps.usersByUsername !== this.props.usersByUsername) { + this.setState({ + username: this.getUsernameFromMentionName(nextProps) + }); + } + } + + getUsernameFromMentionName(props) { + let mentionName = props.mentionName; + + while (mentionName.length > 0) { + if (props.usersByUsername[mentionName]) { + return props.usersByUsername[mentionName].username; + } + + // Repeatedly trim off trailing punctuation in case this is at the end of a sentence + if ((/[._-]$/).test(mentionName)) { + mentionName = mentionName.substring(0, mentionName.length - 1); + } else { + break; + } + } + + return ''; + } + + search = (e) => { + e.preventDefault(); + + this.props.actions.searchForTerm(this.state.username); + } + + render() { + const username = this.state.username; + + if (!username) { + return <span>{'@' + this.props.mentionName}</span>; + } + + const suffix = this.props.mentionName.substring(username.length); + + return ( + <span> + <a + className='mention-link' + href='#' + onClick={this.search} + > + {'@' + username} + </a> + {suffix} + </span> + ); + } +} diff --git a/webapp/components/at_mention/index.jsx b/webapp/components/at_mention/index.jsx new file mode 100644 index 000000000..c733158c6 --- /dev/null +++ b/webapp/components/at_mention/index.jsx @@ -0,0 +1,27 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import {connect} from 'react-redux'; + +import {getUsersByUsername} from 'mattermost-redux/selectors/entities/users'; + +import {searchForTerm} from 'actions/post_actions.jsx'; + +import AtMention from './at_mention.jsx'; + +function mapStateToProps(state, ownProps) { + return { + ...ownProps, + usersByUsername: getUsersByUsername(state) + }; +} + +function mapDispatchToProps() { + return { + actions: { + searchForTerm + } + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(AtMention); |