Commit 9b986fda authored by Joram Wilander's avatar Joram Wilander Committed by JoramWilander

MM-13384 Fix clicking username in profile popover (#2161)

* Fix clicking username in profile popover

* Update snapshots
parent 8942b070
......@@ -13,6 +13,7 @@ exports[`components/TextBox should match snapshot with required props 1`] = `
isRHS={false}
listComponent={[Function]}
listStyle="top"
listenForMentionKeyClick={false}
onBlur={[Function]}
onChange={[Function]}
onHeightChange={[Function]}
......@@ -168,6 +169,7 @@ exports[`components/TextBox should throw error when new property is too long 1`]
isRHS={false}
listComponent={[Function]}
listStyle="top"
listenForMentionKeyClick={false}
onBlur={[Function]}
onChange={[Function]}
onHeightChange={[Function]}
......@@ -323,6 +325,7 @@ exports[`components/TextBox should throw error when value is too long 1`] = `
isRHS={false}
listComponent={[Function]}
listStyle="top"
listenForMentionKeyClick={false}
onBlur={[Function]}
onChange={[Function]}
onHeightChange={[Function]}
......
......@@ -73,6 +73,7 @@ exports[`components/AddUserToChannelModal should match snapshot 1`] = `
isRHS={false}
listComponent={[Function]}
listStyle="bottom"
listenForMentionKeyClick={false}
maxLength="64"
onChange={[Function]}
onItemSelected={[Function]}
......
......@@ -25,6 +25,7 @@ exports[`components/CreateComment should match snapshot read only channel 1`] =
id="reply_textbox"
initialText=""
isRHS={true}
listenForMentionKeyClick={true}
onBlur={[Function]}
onChange={[Function]}
onKeyDown={[Function]}
......@@ -116,6 +117,7 @@ exports[`components/CreateComment should match snapshot, comment with message 1`
id="reply_textbox"
initialText=""
isRHS={true}
listenForMentionKeyClick={true}
onBlur={[Function]}
onChange={[Function]}
onKeyDown={[Function]}
......@@ -243,6 +245,7 @@ exports[`components/CreateComment should match snapshot, emoji picker disabled 1
id="reply_textbox"
initialText=""
isRHS={true}
listenForMentionKeyClick={true}
onBlur={[Function]}
onChange={[Function]}
onKeyDown={[Function]}
......@@ -358,6 +361,7 @@ exports[`components/CreateComment should match snapshot, empty comment 1`] = `
id="reply_textbox"
initialText=""
isRHS={true}
listenForMentionKeyClick={true}
onBlur={[Function]}
onChange={[Function]}
onKeyDown={[Function]}
......@@ -485,6 +489,7 @@ exports[`components/CreateComment should match snapshot, non-empty message and u
id="reply_textbox"
initialText=""
isRHS={true}
listenForMentionKeyClick={true}
onBlur={[Function]}
onChange={[Function]}
onKeyDown={[Function]}
......
......@@ -852,6 +852,7 @@ export default class CreateComment extends React.PureComponent {
disabled={readOnlyChannel}
characterLimit={this.props.maxPostSize}
badConnection={this.props.badConnection}
listenForMentionKeyClick={true}
/>
<span
ref='createCommentControls'
......
......@@ -25,6 +25,7 @@ exports[`components/create_post Show tutorial 1`] = `
emojiEnabled={true}
handlePostError={[Function]}
id="post_textbox"
listenForMentionKeyClick={true}
onBlur={[Function]}
onChange={[Function]}
onKeyDown={[Function]}
......@@ -188,6 +189,7 @@ exports[`components/create_post should match snapshot for center textbox 1`] = `
emojiEnabled={true}
handlePostError={[Function]}
id="post_textbox"
listenForMentionKeyClick={true}
onBlur={[Function]}
onChange={[Function]}
onKeyDown={[Function]}
......@@ -320,6 +322,7 @@ exports[`components/create_post should match snapshot for read only channel 1`]
emojiEnabled={true}
handlePostError={[Function]}
id="post_textbox"
listenForMentionKeyClick={true}
onBlur={[Function]}
onChange={[Function]}
onKeyDown={[Function]}
......@@ -418,6 +421,7 @@ exports[`components/create_post should match snapshot when file upload disabled
emojiEnabled={true}
handlePostError={[Function]}
id="post_textbox"
listenForMentionKeyClick={true}
onBlur={[Function]}
onChange={[Function]}
onKeyDown={[Function]}
......@@ -550,6 +554,7 @@ exports[`components/create_post should match snapshot, init 1`] = `
emojiEnabled={true}
handlePostError={[Function]}
id="post_textbox"
listenForMentionKeyClick={true}
onBlur={[Function]}
onChange={[Function]}
onKeyDown={[Function]}
......
......@@ -1105,6 +1105,7 @@ export default class CreatePost extends React.Component {
disabled={readOnlyChannel}
characterLimit={this.props.maxPostSize}
badConnection={this.props.badConnection}
listenForMentionKeyClick={true}
/>
<span
ref='createPostControls'
......
......@@ -156,7 +156,7 @@ class ProfilePopover extends React.PureComponent {
if (this.props.hide) {
this.props.hide();
}
EventEmitter.emit('mention_key_click', this.props.user.username);
EventEmitter.emit('mention_key_click', this.props.user.username, this.props.isRHS);
}
handleEditAccountSettings(e) {
......
......@@ -53,6 +53,7 @@ exports[`components/QuickSwitchModal should match snapshot 1`] = `
isRHS={false}
listComponent={[Function]}
listStyle="bottom"
listenForMentionKeyClick={false}
maxLength="64"
onChange={[Function]}
onItemSelected={[Function]}
......
......@@ -4,6 +4,8 @@
import PropTypes from 'prop-types';
import React from 'react';
import EventEmitter from 'mattermost-redux/utils/event_emitter';
import QuickInput from 'components/quick_input.jsx';
import Constants from 'utils/constants.jsx';
import * as UserAgent from 'utils/user_agent.jsx';
......@@ -113,6 +115,11 @@ export default class SuggestionBox extends React.Component {
* If true, replace all input in the suggestion box with the selected option after a select, defaults to false
*/
replaceAllInputOnSelect: PropTypes.bool,
/**
* If true, listen for clicks on a mention and populate the input with said mention, defaults to false
*/
listenForMentionKeyClick: PropTypes.bool,
}
static defaultProps = {
......@@ -126,6 +133,7 @@ export default class SuggestionBox extends React.Component {
openOnFocus: false,
openWhenEmpty: false,
replaceAllInputOnSelect: false,
listenForMentionKeyClick: false,
}
constructor(props) {
......@@ -158,6 +166,31 @@ export default class SuggestionBox extends React.Component {
};
}
componentDidMount() {
if (this.props.listenForMentionKeyClick) {
EventEmitter.addListener('mention_key_click', this.handleMentionKeyClick);
}
}
componentWillUnmount() {
EventEmitter.removeListener('mention_key_click', this.handleMentionKeyClick);
}
handleMentionKeyClick = (mentionKey, isRHS) => {
if (this.props.isRHS !== isRHS) {
return;
}
let insertText = '@' + mentionKey;
// if the current text does not end with a whitespace, then insert a space
if (this.props.value && (/[^\s]$/).test(this.props.value)) {
insertText = ' ' + insertText;
}
this.addTextAtCaret(insertText, '');
}
getTextbox = () => {
if (!this.refs.input) {
return null;
......@@ -565,6 +598,7 @@ export default class SuggestionBox extends React.Component {
Reflect.deleteProperty(props, 'containerClass');
Reflect.deleteProperty(props, 'replaceAllInputOnSelect');
Reflect.deleteProperty(props, 'renderDividers');
Reflect.deleteProperty(props, 'listenForMentionKeyClick');
// This needs to be upper case so React doesn't think it's an html tag
const SuggestionListComponent = listComponent;
......
......@@ -40,6 +40,7 @@ export default class Textbox extends React.Component {
characterLimit: PropTypes.number.isRequired,
disabled: PropTypes.bool,
badConnection: PropTypes.bool,
listenForMentionKeyClick: PropTypes.bool,
currentUserId: PropTypes.string.isRequired,
profilesInChannel: PropTypes.arrayOf(PropTypes.object).isRequired,
profilesNotInChannel: PropTypes.arrayOf(PropTypes.object).isRequired,
......@@ -51,6 +52,7 @@ export default class Textbox extends React.Component {
static defaultProps = {
supportsCommands: true,
isRHS: false,
listenForMentionKeyClick: false,
};
constructor(props) {
......@@ -80,19 +82,6 @@ export default class Textbox extends React.Component {
this.props.onChange(e);
}
handlePopoverMentionKeyClick = (mentionKey) => {
const textbox = this.refs.message.getTextbox();
let insertText = '@' + mentionKey;
const oldValue = textbox.value;
// if the current text does not end with a whitespace, then insert a space
if (oldValue && (/[^\s]$/).test(oldValue)) {
insertText = ' ' + insertText;
}
textbox.value = oldValue + insertText;
}
checkMessageLength = (message) => {
if (this.props.handlePostError) {
if (message.length > this.props.characterLimit) {
......@@ -336,6 +325,7 @@ export default class Textbox extends React.Component {
renderDividers={true}
isRHS={this.props.isRHS}
disabled={this.props.disabled}
listenForMentionKeyClick={this.props.listenForMentionKeyClick}
/>
{preview}
<div className={'help__text ' + helpTextClass}>
......
......@@ -34,6 +34,7 @@ describe('components/widgets/settings/AutocompleteSelector', () => {
isRHS={false}
listComponent={[Function]}
listStyle="top"
listenForMentionKeyClick={false}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
......@@ -82,6 +83,7 @@ describe('components/widgets/settings/AutocompleteSelector', () => {
isRHS={false}
listComponent={[Function]}
listStyle="top"
listenForMentionKeyClick={false}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
......@@ -121,6 +123,7 @@ describe('components/widgets/settings/AutocompleteSelector', () => {
isRHS={false}
listComponent={[Function]}
listStyle="top"
listenForMentionKeyClick={false}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment