From 1b8962a024359d237cd98f0100800b54a0ca7f0d Mon Sep 17 00:00:00 2001 From: Elias Nahum Date: Tue, 8 Oct 2019 17:34:56 +0300 Subject: [PATCH] MM-19185 Fix tab for UnreadIndicator on Android (#3368) * MM-19185 Fix tab for UnreadIndicator on Android * update snapshots --- .../__snapshots__/channel_item.test.js.snap | 4 +- .../channel_item/channel_item.js | 4 +- .../channels_list/unread_indicator/index.js | 113 +----------------- .../unread_indicator.android.js | 24 ++++ .../unread_indicator/unread_indicator.base.js | 97 +++++++++++++++ .../unread_indicator/unread_indicator.ios.js | 26 ++++ .../__snapshots__/channel_title.test.js.snap | 4 +- .../channel_title/channel_title.js | 4 +- 8 files changed, 157 insertions(+), 119 deletions(-) create mode 100644 app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.android.js create mode 100644 app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js create mode 100644 app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.ios.js diff --git a/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap b/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap index 93f9b9c3e..2987e202c 100644 --- a/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap +++ b/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap @@ -210,7 +210,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you ] } > - {displayName} (you) + {displayname} (you) @@ -324,7 +324,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you ] } > - {displayName} (you) + {displayname} (you) diff --git a/app/components/sidebars/main/channels_list/channel_item/channel_item.js b/app/components/sidebars/main/channels_list/channel_item/channel_item.js index 1022d8b7f..bfdf56f88 100644 --- a/app/components/sidebars/main/channels_list/channel_item/channel_item.js +++ b/app/components/sidebars/main/channels_list/channel_item/channel_item.js @@ -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}); } diff --git a/app/components/sidebars/main/channels_list/unread_indicator/index.js b/app/components/sidebars/main/channels_list/unread_indicator/index.js index bcbb436da..25625a32c 100644 --- a/app/components/sidebars/main/channels_list/unread_indicator/index.js +++ b/app/components/sidebars/main/channels_list/unread_indicator/index.js @@ -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 = ( - - - - - ); - - if (visible) { - return ( - - {content} - - ); - } - - return content; - }; - - render() { - const {visible, theme} = this.props; - const style = getStyleSheet(theme); - - return ( - - {this.renderContent()} - - ); - } -} - -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; diff --git a/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.android.js b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.android.js new file mode 100644 index 000000000..bfafdae37 --- /dev/null +++ b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.android.js @@ -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 ( + + {this.renderContent()} + + ); + } +} diff --git a/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js new file mode 100644 index 000000000..bb8ece741 --- /dev/null +++ b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js @@ -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 = ( + + + + + ); + + if (visible) { + return ( + + {content} + + ); + } + + 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', + }, + }; +}); diff --git a/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.ios.js b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.ios.js new file mode 100644 index 000000000..273923f6e --- /dev/null +++ b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.ios.js @@ -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 ( + + {this.renderContent()} + + ); + } +} diff --git a/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap b/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap index 56e371084..cda04d782 100644 --- a/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap +++ b/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap @@ -86,11 +86,11 @@ exports[`ChannelTitle should match snapshot when isSelfDMChannel is true 1`] = ` } > diff --git a/app/screens/channel/channel_nav_bar/channel_title/channel_title.js b/app/screens/channel/channel_nav_bar/channel_title/channel_title.js index e91c20a04..2eaae2a0d 100644 --- a/app/screens/channel/channel_nav_bar/channel_title/channel_title.js +++ b/app/screens/channel/channel_nav_bar/channel_title/channel_title.js @@ -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 (