forked from mattermost/mattermost-webapp
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
PLT-4457 Added AtMention component to better render at mentions (matt…
…ermost#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
- Loading branch information
Showing
11 changed files
with
211 additions
and
112 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,71 +8,50 @@ import * as TextFormatting from 'utils/text_formatting.jsx'; | |
| describe('TextFormatting.AtMentions', function() { | ||
| it('At mentions', function() { | ||
| assert.equal( | ||
| TextFormatting.autolinkAtMentions('@user', new Map(), {user: {}}), | ||
| TextFormatting.autolinkAtMentions('@user', new Map()), | ||
| '$MM_ATMENTION0', | ||
| 'should replace explicit mention with token' | ||
| 'should replace mention with token' | ||
| ); | ||
|
|
||
| assert.equal( | ||
| TextFormatting.autolinkAtMentions('abc"@user"def', new Map(), {user: {}}), | ||
| TextFormatting.autolinkAtMentions('abc"@user"def', new Map()), | ||
| 'abc"$MM_ATMENTION0"def', | ||
| 'should replace explicit mention surrounded by punctuation with token' | ||
| 'should replace mention surrounded by punctuation with token' | ||
| ); | ||
|
|
||
| assert.equal( | ||
| TextFormatting.autolinkAtMentions('@user1 @user2', new Map(), {user1: {}, user2: {}}), | ||
| TextFormatting.autolinkAtMentions('@user1 @user2', new Map()), | ||
| '$MM_ATMENTION0 $MM_ATMENTION1', | ||
| 'should replace multiple explicit mentions with tokens' | ||
| 'should replace multiple mentions with tokens' | ||
| ); | ||
|
|
||
| assert.equal( | ||
| TextFormatting.autolinkAtMentions('@us_-e.r', new Map(), {'us_-e.r': {}}), | ||
| '$MM_ATMENTION0', | ||
| 'should replace multiple explicit mentions containing punctuation with token' | ||
| ); | ||
|
|
||
| assert.equal( | ||
| TextFormatting.autolinkAtMentions('@us_-e.r', new Map(), {'us_-e.r': {}}), | ||
| '$MM_ATMENTION0', | ||
| 'should replace multiple explicit mentions containing valid punctuation with token' | ||
| ); | ||
|
|
||
| assert.equal( | ||
| TextFormatting.autolinkAtMentions('@user.', new Map(), {user: {}}), | ||
| '$MM_ATMENTION0.', | ||
| 'should replace explicit mention followed by period with token' | ||
| TextFormatting.autolinkAtMentions('@user1/@user2/@user3', new Map()), | ||
| '$MM_ATMENTION0/$MM_ATMENTION1/$MM_ATMENTION2', | ||
| 'should replace multiple mentions with tokens' | ||
| ); | ||
|
|
||
| assert.equal( | ||
| TextFormatting.autolinkAtMentions('@user.', new Map(), {'user.': {}}), | ||
| TextFormatting.autolinkAtMentions('@us_-e.r', new Map()), | ||
| '$MM_ATMENTION0', | ||
| 'should replace explicit mention ending with period with token' | ||
| 'should replace multiple mentions containing punctuation with token' | ||
| ); | ||
| }); | ||
|
|
||
| it('Implied at mentions', function() { | ||
| // PLT-4454 Assume users exist for things that look like at mentions until we support the new mention syntax | ||
| assert.equal( | ||
| TextFormatting.autolinkAtMentions('@user', new Map(), {}), | ||
| TextFormatting.autolinkAtMentions('@user.', new Map()), | ||
| '$MM_ATMENTION0', | ||
| 'should imply user exists and replace mention with token' | ||
| ); | ||
|
|
||
| assert.equal( | ||
| TextFormatting.autolinkAtMentions('@user.', new Map(), {}), | ||
| '$MM_ATMENTION0.', | ||
| 'should assume username doesn\'t end in punctuation' | ||
| 'should capture trailing punctuation as part of mention' | ||
| ); | ||
| }); | ||
|
|
||
| it('Not at mentions', function() { | ||
| assert.equal( | ||
| TextFormatting.autolinkAtMentions('user@host', new Map(), {user: {}, host: {}}), | ||
| TextFormatting.autolinkAtMentions('user@host', new Map()), | ||
| 'user@host' | ||
| ); | ||
|
|
||
| assert.equal( | ||
| TextFormatting.autolinkAtMentions('[email protected]', new Map(), {user: {}, email: {}}), | ||
| TextFormatting.autolinkAtMentions('[email protected]', new Map()), | ||
| '[email protected]' | ||
| ); | ||
| }); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.