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

Automated cherry pick of #3293 (#3330)

Browse source 
* Add (you) suffix to self DM channel title

* Use FormattedText component
This commit is contained in:
Mattermost Build 2019-09-26 16:54:45 +02:00 committed by Miguel Alatzar
parent 2eb723a6dc
commit 73d20fdcdf
4 changed files with 177 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap Normal file
View file

@ -0,0 +1,98 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChannelTitle should match snapshot 1`] = `
<TouchableOpacity
activeOpacity={0.2}
style={
Object {
"flex": 1,
}
}
>
<View
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "flex-start",
"position": "relative",
"top": -1,
"width": "90%",
}
}
>
<Text
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": undefined,
"fontSize": 18,
"fontWeight": "bold",
"textAlign": "center",
}
}
/>
</View>
</TouchableOpacity>
`;
exports[`ChannelTitle should match snapshot when isSelfDMChannel is true 1`] = `
<TouchableOpacity
activeOpacity={0.2}
style={
Object {
"flex": 1,
}
}
>
<View
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "flex-start",
"position": "relative",
"top": -1,
"width": "90%",
}
}
>
<Text
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": undefined,
"fontSize": 18,
"fontWeight": "bold",
"textAlign": "center",
}
}
>
<FormattedText
defaultMessage="{displayName} (you)"
id="channel_header.directchannel.you"
values={
Object {
"displayname": undefined,
}
}
/>
</Text>
<Icon
allowFontScaling={false}
name="chevron-down"
size={12}
style={
Object {
"color": undefined,
"marginHorizontal": 5,
}
}
/>
</View>
</TouchableOpacity>
`;

42
app/screens/channel/channel_nav_bar/channel_title/channel_title.js
View file

@ -28,12 +28,14 @@ export default class ChannelTitle extends PureComponent {
isGuest: PropTypes.bool.isRequired,
hasGuests: PropTypes.bool.isRequired,
canHaveSubtitle: PropTypes.bool.isRequired,
isSelfDMChannel: PropTypes.bool.isRequired,
};
static defaultProps = {
currentChannel: {},
displayName: null,
theme: {},
isSelfDMChannel: false,
};
archiveIcon(style) {
@ -85,15 +87,45 @@ export default class ChannelTitle extends PureComponent {
);
}
renderChannelDisplayName = () => {
const {
displayName,
currentChannelName,
isSelfDMChannel,
} = this.props;
const channelDisplayName = displayName || currentChannelName;
if (isSelfDMChannel) {
const messageId = t('channel_header.directchannel.you');
const defaultMessage = '{displayName} (you)';
const values = {displayname: channelDisplayName};
return (
<FormattedText
id={messageId}
defaultMessage={defaultMessage}
values={values}
/>
);
}
return channelDisplayName;
}
render() {
const {currentChannelName, displayName, isChannelMuted, onPress, theme} = this.props;
const {
isChannelMuted,
onPress,
theme,
} = this.props;
const style = getStyle(theme);
const channelName = displayName || currentChannelName;
const hasGuestsText = this.renderHasGuestsText(style);
const channelDisplayName = this.renderChannelDisplayName();
let icon;
if (channelName) {
if (channelDisplayName) {
icon = (
<Icon
style={style.icon}
@ -126,7 +158,7 @@ export default class ChannelTitle extends PureComponent {
numberOfLines={1}
style={style.text}
>
{channelName}
{channelDisplayName}
</Text>
{icon}
{mutedIcon}

39
app/screens/channel/channel_nav_bar/channel_title/channel_title.test.js Normal file
View file

@ -0,0 +1,39 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {shallow} from 'enzyme';
import ChannelTitle from './channel_title';
jest.mock('react-intl');
describe('ChannelTitle', () => {
const baseProps = {
isGuest: false,
hasGuests: false,
canHaveSubtitle: false,
isSelfDMChannel: false,
};
test('should match snapshot', () => {
const wrapper = shallow(
<ChannelTitle {...baseProps}/>
);
expect(wrapper.getElement()).toMatchSnapshot();
});
test('should match snapshot when isSelfDMChannel is true', () => {
const props = {
...baseProps,
isSelfDMChannel: true,
};
const wrapper = shallow(
<ChannelTitle {...props}/>,
{context: {intl: {formatMessage: (intlId) => intlId.defaultMessage}}},
);
expect(wrapper.getElement()).toMatchSnapshot();
});
});

3
app/screens/channel/channel_nav_bar/channel_title/index.js
View file

@ -20,13 +20,16 @@ function mapStateToProps(state) {
const stats = getCurrentChannelStats(state) || {member_count: 0, guest_count: 0};
let isTeammateGuest = false;
let isSelfDMChannel = false;
if (currentChannel && currentChannel.type === General.DM_CHANNEL) {
const teammateId = getUserIdFromChannelName(currentUserId, currentChannel.name);
const teammate = getUser(state, teammateId);
isTeammateGuest = isGuest(teammate);
isSelfDMChannel = currentUserId === currentChannel.teammate_id;
}
return {
isSelfDMChannel,
currentChannelName: currentChannel ? currentChannel.display_name : '',
isArchived: currentChannel ? currentChannel.delete_at !== 0 : false,
displayName: state.views.channel.displayName,