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

MM-19185 Fix tab for UnreadIndicator on Android (#3368)

Browse source 
* MM-19185 Fix tab for UnreadIndicator on Android

* update snapshots
This commit is contained in:
Elias Nahum 2019-10-08 17:34:56 +03:00 committed by GitHub
parent ed11cf9b6b
commit 1b8962a024
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 157 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap
View file

@ -210,7 +210,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
]
}
>
{displayName} (you)
{displayname} (you)
</Text>
</View>
</View>
@ -324,7 +324,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
]
}
>
{displayName} (you)
{displayname} (you)
</Text>
</View>
</View>

4
app/components/sidebars/main/channels_list/channel_item/channel_item.js
View file

@ -115,7 +115,7 @@ export default class ChannelItem extends PureComponent {
return null;
}
if (!this.props.displayName) {
if (!displayName) {
return null;
}
@ -134,7 +134,7 @@ export default class ChannelItem extends PureComponent {
if (isCurrenUser) {
channelDisplayName = intl.formatMessage({
id: 'channel_header.directchannel.you',
defaultMessage: '{displayName} (you)',
defaultMessage: '{displayname} (you)',
}, {displayname: displayName});
}

113
app/components/sidebars/main/channels_list/unread_indicator/index.js
View file

@ -1,114 +1,5 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
TouchableWithoutFeedback,
View,
ViewPropTypes,
} from 'react-native';
import IonIcon from 'react-native-vector-icons/Ionicons';
import Fade from 'app/components/fade';
import FormattedText from 'app/components/formatted_text';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
export default class UnreadIndicator extends PureComponent {
static propTypes = {
visible: PropTypes.bool,
style: ViewPropTypes.style,
onPress: PropTypes.func,
theme: PropTypes.object.isRequired,
textStyle: ViewPropTypes.style,
};
static defaultProps = {
onPress: () => true,
};
renderContent = () => {
const {onPress, visible, theme} = this.props;
const style = getStyleSheet(theme);
const content = (
<View
style={[style.wrapper, this.props.style]}
pointerEvents={visible ? 'auto' : 'none'}
>
<FormattedText
style={[style.indicatorText, this.props.textStyle]}
id='sidebar.unreads'
defaultMessage='More unreads'
/>
<IonIcon
size={14}
name='md-arrow-round-up'
color={theme.mentionColor}
style={style.arrow}
/>
</View>
);
if (visible) {
return (
<TouchableWithoutFeedback onPress={onPress}>
{content}
</TouchableWithoutFeedback>
);
}
return content;
};
render() {
const {visible, theme} = this.props;
const style = getStyleSheet(theme);
return (
<Fade
visible={visible}
style={style.container}
duration={150}
disableScale={true}
>
{this.renderContent()}
</Fade>
);
}
}
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
arrow: {
position: 'relative',
bottom: -1,
},
container: {
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
position: 'absolute',
right: 0,
left: 0,
},
indicatorText: {
backgroundColor: 'transparent',
color: theme.mentionColor,
fontSize: 14,
paddingVertical: 2,
paddingHorizontal: 4,
textAlign: 'center',
textAlignVertical: 'center',
},
wrapper: {
borderRadius: 15,
height: 25,
flexDirection: 'row',
paddingLeft: 10,
paddingRight: 12,
justifyContent: 'center',
alignItems: 'center',
},
};
});
import UnreadIndicator from './unread_indicator';
export default UnreadIndicator;

24
app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.android.js Normal file
View file

@ -0,0 +1,24 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {View} from 'react-native';
import UnreadIndicatorBase, {getStyleSheet} from './unread_indicator.base';
export default class UnreadIndicatorAndroid extends UnreadIndicatorBase {
render() {
const {visible, theme} = this.props;
const style = getStyleSheet(theme);
if (!visible) {
return null;
}
return (
<View style={style.container}>
{this.renderContent()}
</View>
);
}
}

97
app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js Normal file
View file

@ -0,0 +1,97 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
TouchableWithoutFeedback,
View,
ViewPropTypes,
} from 'react-native';
import IonIcon from 'react-native-vector-icons/Ionicons';
import FormattedText from 'app/components/formatted_text';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
export default class UnreadIndicatorBase extends PureComponent {
static propTypes = {
visible: PropTypes.bool,
style: ViewPropTypes.style,
onPress: PropTypes.func,
theme: PropTypes.object.isRequired,
textStyle: ViewPropTypes.style,
};
static defaultProps = {
onPress: () => true,
};
renderContent = () => {
const {onPress, visible, theme} = this.props;
const style = getStyleSheet(theme);
const content = (
<View
style={[style.wrapper, this.props.style]}
pointerEvents={visible ? 'auto' : 'none'}
>
<FormattedText
style={[style.indicatorText, this.props.textStyle]}
id='sidebar.unreads'
defaultMessage='More unreads'
/>
<IonIcon
size={14}
name='md-arrow-round-up'
color={theme.mentionColor}
style={style.arrow}
/>
</View>
);
if (visible) {
return (
<TouchableWithoutFeedback onPress={onPress}>
{content}
</TouchableWithoutFeedback>
);
}
return content;
};
}
export const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
arrow: {
position: 'relative',
bottom: -1,
},
container: {
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
position: 'absolute',
right: 0,
left: 0,
},
indicatorText: {
backgroundColor: 'transparent',
color: theme.mentionColor,
fontSize: 14,
paddingVertical: 2,
paddingHorizontal: 4,
textAlign: 'center',
textAlignVertical: 'center',
},
wrapper: {
borderRadius: 15,
height: 25,
flexDirection: 'row',
paddingLeft: 10,
paddingRight: 12,
justifyContent: 'center',
alignItems: 'center',
},
};
});

26
app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.ios.js Normal file
View file

@ -0,0 +1,26 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import Fade from 'app/components/fade';
import UnreadIndicatorBase, {getStyleSheet} from './unread_indicator.base';
export default class UnreadIndicatorIOS extends UnreadIndicatorBase {
render() {
const {visible, theme} = this.props;
const style = getStyleSheet(theme);
return (
<Fade
visible={visible}
style={style.container}
duration={150}
disableScale={true}
>
{this.renderContent()}
</Fade>
);
}
}

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

@ -86,11 +86,11 @@ exports[`ChannelTitle should match snapshot when isSelfDMChannel is true 1`] = `
}
>
<FormattedText
defaultMessage="{displayName} (you)"
defaultMessage="{displayname} (you)"
id="channel_header.directchannel.you"
values={
Object {
"displayName": "My User",
"displayname": "My User",
}
}
/>

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

@ -98,8 +98,8 @@ export default class ChannelTitle extends PureComponent {
if (isSelfDMChannel) {
const messageId = t('channel_header.directchannel.you');
const defaultMessage = '{displayName} (you)';
const values = {displayName: channelDisplayName};
const defaultMessage = '{displayname} (you)';
const values = {displayname: channelDisplayName};
return (
<FormattedText