toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

MM-28296 Fix Android @mention render (#4764) (#4774)

Browse source 
* MM-28296 Fix Android @mention render

* Simplify mention style

* Update @mention snapshot

* @mention fix lint

* Address QA feedback

* QA Review

(cherry picked from commit c97b2be927)

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
This commit is contained in:
Mattermost Build 2020-09-08 12:20:55 -04:00 committed by GitHub
parent bcd5397300
commit 9db54fb462
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/components/at_mention/__snapshots__/at_mention.test.js.snap
View file

@ -7,7 +7,6 @@ exports[`AtMention should match snapshot, no highlight 1`] = `
<Text
style={
Array [
null,
Object {
"backgroundColor": "yellow",
},
@ -28,7 +27,9 @@ exports[`AtMention should match snapshot, with highlight 1`] = `
<Text
style={
Array [
null,
Object {
"color": "#ff0000",
},
Object {
"backgroundColor": "yellow",
},
@ -52,9 +53,6 @@ exports[`AtMention should match snapshot, without highlight 1`] = `
Object {
"color": "#ff0000",
},
Object {
"backgroundColor": "yellow",
},
]
}
>

25
app/components/at_mention/at_mention.js
View file

@ -142,40 +142,45 @@ export default class AtMention extends React.PureComponent {
const {isSearchResult, mentionName, mentionStyle, onPostPress, teammateNameDisplay, textStyle, mentionKeys} = this.props;
const {user} = this.state;
const {backgroundColor, ...styleText} = StyleSheet.flatten(textStyle);
const mentionTextStyle = [];
let canPress = false;
let highlighted;
let isMention = false;
let mention;
let onLongPress;
let onPress;
let suffix;
let suffixElement;
if (user?.username) {
suffix = this.props.mentionName.substring(user.username.length);
highlighted = mentionKeys.some((item) => item.key === user.username);
highlighted = mentionKeys.some((item) => item.key.includes(user.username));
mention = displayUsername(user, teammateNameDisplay);
isMention = true;
canPress = true;
} else {
const group = this.getGroupFromMentionName();
if (group.allow_reference) {
highlighted = mentionKeys.some((item) => item.key === group.name);
isMention = true;
mention = group.name;
suffix = this.props.mentionName.substring(group.name.length);
} else {
const pattern = new RegExp(/\b(all|channel|here)(?:\.\B|_\b|\b)/, 'i');
const mentionMatch = pattern.exec(mentionName);
highlighted = true;
if (mentionMatch) {
highlighted = false;
mention = mentionMatch.length > 1 ? mentionMatch[1] : mentionMatch[0];
suffix = mentionName.replace(mention, '');
isMention = true;
} else {
highlighted = true;
mention = mentionName;
}
}
}
let onPress;
let onLongPress;
if (canPress) {
onLongPress = this.handleLongPress;
onPress = isSearchResult ? onPostPress : this.goToUserProfile;
@ -190,13 +195,21 @@ export default class AtMention extends React.PureComponent {
);
}
if (isMention) {
mentionTextStyle.push(mentionStyle);
}
if (highlighted) {
mentionTextStyle.push({backgroundColor});
}
return (
<Text
style={styleText}
onPress={onPress}
onLongPress={onLongPress}
>
<Text style={[highlighted ? null : mentionStyle, {backgroundColor}]}>
<Text style={mentionTextStyle}>
{'@' + mention}
</Text>
{suffixElement}