From 6beb40783bd68f1a67148abe8b4f38e1bfb36c78 Mon Sep 17 00:00:00 2001 From: CJ <38697367+imisshtml@users.noreply.github.com> Date: Fri, 11 Oct 2019 22:14:07 -0400 Subject: [PATCH] MM-18829 Updated Channel Header SafeAreaView (#3370) Removed the RN SafeAreaView and applied the padding for our iOS X specific setting. --- .../channel_info_header.test.js.snap | 4809 +++++++++-------- app/screens/channel_info/channel_info.js | 1 + .../channel_info/channel_info_header.js | 190 +- .../channel_info/channel_info_header.test.js | 1 + 4 files changed, 2520 insertions(+), 2481 deletions(-) diff --git a/app/screens/channel_info/__snapshots__/channel_info_header.test.js.snap b/app/screens/channel_info/__snapshots__/channel_info_header.test.js.snap index e8f47346b..0122d3937 100644 --- a/app/screens/channel_info/__snapshots__/channel_info_header.test.js.snap +++ b/app/screens/channel_info/__snapshots__/channel_info_header.test.js.snap @@ -1,502 +1,545 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`channel_info_header should match snapshot 1`] = ` - + - - - - Channel name - - - - - - - - - - - - - - - - - - + type="O" + /> - - + Channel name - + + + + + + + + + + + + + + + + + + + + + `; exports[`channel_info_header should match snapshot when DM and hasGuests and is the teammate 1`] = ` - + + + + + Channel name + + - - - Channel name - + /> - + + + - - + + + - - - - - - - - - - - - - - - - - - - + > + + + + - + + + + + `; exports[`channel_info_header should match snapshot when DM and hasGuests but its me and not the teammate 1`] = ` - + - - - - Channel name - - - - - - - - - - - - - - - - - - + type="D" + /> - - + Channel name - + + + + + + + + + + + + + + + + + + + + + `; exports[`channel_info_header should match snapshot when GM and hasGuests 1`] = ` - + + + + + Channel name + + - - - Channel name - + /> - + + + - - + + + - - - - - - - - - - - - - - - - - - - + > + + + + - + + + + + `; exports[`channel_info_header should match snapshot when is group constrained 1`] = ` - + - - - - Channel name - - - + - - - - - - - - - - - - - - - - - - - - - + Channel name - -`; - -exports[`channel_info_header should match snapshot when public channel and hasGuests 1`] = ` - - - - - Channel name - - - + + - - + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + +`; + +exports[`channel_info_header should match snapshot when public channel and hasGuests 1`] = ` + + + + + Channel name + + + + - - + - + + + + + + + + + + + + + + + + + + + + + `; diff --git a/app/screens/channel_info/channel_info.js b/app/screens/channel_info/channel_info.js index 49f4e1098..7f2bddc6d 100644 --- a/app/screens/channel_info/channel_info.js +++ b/app/screens/channel_info/channel_info.js @@ -528,6 +528,7 @@ export default class ChannelInfo extends PureComponent { isTeammateGuest={isTeammateGuest} hasGuests={currentChannelGuestCount > 0} isGroupConstrained={currentChannel.group_constrained} + isLandscape={isLandscape} /> } diff --git a/app/screens/channel_info/channel_info_header.js b/app/screens/channel_info/channel_info_header.js index e77f874d2..4e2fc2fab 100644 --- a/app/screens/channel_info/channel_info_header.js +++ b/app/screens/channel_info/channel_info_header.js @@ -9,7 +9,6 @@ import { Text, TouchableHighlight, View, - SafeAreaView, } from 'react-native'; import {intlShape} from 'react-intl'; @@ -19,6 +18,7 @@ import ChannelIcon from 'app/components/channel_icon'; import FormattedDate from 'app/components/formatted_date'; import FormattedText from 'app/components/formatted_text'; import Markdown from 'app/components/markdown'; +import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing'; import mattermostManaged from 'app/mattermost_managed'; import BottomSheet from 'app/utils/bottom_sheet'; import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown'; @@ -44,6 +44,7 @@ export default class ChannelInfoHeader extends React.PureComponent { hasGuests: PropTypes.bool.isRequired, isGroupConstrained: PropTypes.bool, timeZone: PropTypes.string, + isLandscape: PropTypes.bool.isRequired, }; static contextTypes = { @@ -142,6 +143,7 @@ export default class ChannelInfoHeader extends React.PureComponent { isBot, isGroupConstrained, timeZone, + isLandscape, } = this.props; const style = getStyleSheet(theme); @@ -152,101 +154,99 @@ export default class ChannelInfoHeader extends React.PureComponent { style.detail; return ( - - - - - - {displayName} - - - {this.renderHasGuestText(style)} - {purpose.length > 0 && - - - - - - - - - } - {header.length > 0 && - - - - - - - - - } - {isGroupConstrained && - - - - } - {creator && - - - - - } + + + + + {displayName} + - + {this.renderHasGuestText(style)} + {purpose.length > 0 && + + + + + + + + + } + {header.length > 0 && + + + + + + + + + } + {isGroupConstrained && + + + + } + {creator && + + + + + } + ); } } diff --git a/app/screens/channel_info/channel_info_header.test.js b/app/screens/channel_info/channel_info_header.test.js index c865d1b3f..94ec048c5 100644 --- a/app/screens/channel_info/channel_info_header.test.js +++ b/app/screens/channel_info/channel_info_header.test.js @@ -43,6 +43,7 @@ describe('channel_info_header', () => { isTeammateGuest: false, hasGuests: false, isGroupConstrained: false, + isLandscape: false, }; test('should match snapshot', async () => {