From 47f92441aced1e2dd6e85fc18f27330d88e07593 Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Thu, 8 Sep 2016 08:48:53 -0400 Subject: PLT-4100 Made SuggestionList dividers optional (#3990) * Made SuggestionList dividers optional * Stopped mutating the User object in the AtMentionProvider --- .../components/suggestion/at_mention_provider.jsx | 21 ++++++--------------- webapp/components/suggestion/suggestion_box.jsx | 2 ++ webapp/components/suggestion/suggestion_list.jsx | 9 +++++++-- webapp/components/textbox.jsx | 1 + 4 files changed, 16 insertions(+), 17 deletions(-) diff --git a/webapp/components/suggestion/at_mention_provider.jsx b/webapp/components/suggestion/at_mention_provider.jsx index 87cdc6894..248e459b5 100644 --- a/webapp/components/suggestion/at_mention_provider.jsx +++ b/webapp/components/suggestion/at_mention_provider.jsx @@ -99,7 +99,7 @@ class AtMentionSuggestion extends Suggestion { } } -function filterUsersByPrefix(users, prefix, limit) { +function filterUsersByPrefix(users, prefix, limit, type) { const filtered = []; for (const id of Object.keys(users)) { @@ -117,7 +117,8 @@ function filterUsersByPrefix(users, prefix, limit) { (user.first_name && user.first_name.toLowerCase().startsWith(prefix)) || (user.last_name && user.last_name.toLowerCase().startsWith(prefix)) || (user.nickname && user.nickname.toLowerCase().startsWith(prefix))) { - filtered.push(user); + // create a new object here since we're mutating it by adding the type field + filtered.push(Object.assign({}, user, {type})); } } @@ -145,15 +146,15 @@ export default class AtMentionProvider { // Filter users by prefix. const filteredMembers = filterUsersByPrefix( - channelMembers, prefix, MaxUserSuggestions); + channelMembers, prefix, MaxUserSuggestions, Constants.MENTION_MEMBERS); const filteredNonmembers = filterUsersByPrefix( - channelNonmembers, prefix, MaxUserSuggestions - filteredMembers.length); + channelNonmembers, prefix, MaxUserSuggestions - filteredMembers.length, Constants.MENTION_NONMEMBERS); let filteredSpecialMentions = []; if (!pretext.startsWith('/msg')) { filteredSpecialMentions = ['here', 'channel', 'all'].filter((item) => { return item.startsWith(prefix); }).map((name) => { - return {username: name}; + return {username: name, type: Constants.MENTION_SPECIAL}; }); } @@ -173,16 +174,6 @@ export default class AtMentionProvider { }); }); - filteredMembers.forEach((item) => { - item.type = Constants.MENTION_MEMBERS; - }); - filteredNonmembers.forEach((item) => { - item.type = Constants.MENTION_NONMEMBERS; - }); - filteredSpecialMentions.forEach((item) => { - item.type = Constants.MENTION_SPECIAL; - }); - const filtered = filteredMembers.concat(filteredSpecialMentions).concat(filteredNonmembers); const mentions = filtered.map((user) => '@' + user.username); diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx index d4b150787..d74038ead 100644 --- a/webapp/components/suggestion/suggestion_box.jsx +++ b/webapp/components/suggestion/suggestion_box.jsx @@ -189,6 +189,7 @@ export default class SuggestionBox extends React.Component { ); @@ -220,6 +221,7 @@ SuggestionBox.propTypes = { value: React.PropTypes.string.isRequired, providers: React.PropTypes.arrayOf(React.PropTypes.object), listStyle: React.PropTypes.string, + renderDividers: React.PropTypes.bool, // explicitly name any input event handlers we override and need to manually call onInput: React.PropTypes.func, diff --git a/webapp/components/suggestion/suggestion_list.jsx b/webapp/components/suggestion/suggestion_list.jsx index 7c746ac2a..7d8059e1e 100644 --- a/webapp/components/suggestion/suggestion_list.jsx +++ b/webapp/components/suggestion/suggestion_list.jsx @@ -121,7 +121,7 @@ export default class SuggestionList extends React.Component { // ReactComponent names need to be upper case when used in JSX const Component = this.state.components[i]; - if (item.type !== lastType) { + if (this.props.renderDividers && item.type !== lastType) { items.push(this.renderDivider(item.type)); lastType = item.type; } @@ -157,5 +157,10 @@ export default class SuggestionList extends React.Component { SuggestionList.propTypes = { suggestionId: React.PropTypes.string.isRequired, - location: React.PropTypes.string + location: React.PropTypes.string, + renderDividers: React.PropTypes.bool }; + +SuggestionList.defaultProps = { + renderDividers: false +}; \ No newline at end of file diff --git a/webapp/components/textbox.jsx b/webapp/components/textbox.jsx index fac1bd027..12f111833 100644 --- a/webapp/components/textbox.jsx +++ b/webapp/components/textbox.jsx @@ -198,6 +198,7 @@ export default class Textbox extends React.Component { providers={this.suggestionProviders} channelId={this.props.channelId} value={this.props.messageText} + renderDividers={true} />