From cf2262dbc12290cf45efefae69460310e6347eb3 Mon Sep 17 00:00:00 2001 From: Mattermost Build Date: Mon, 23 Sep 2019 22:19:26 +0200 Subject: [PATCH] MM-18752 Rename constant to handle iPhone X and new iPhone 11 insets (#3300) --- app/components/autocomplete/autocomplete.js | 2 +- .../client_upgrade_listener/client_upgrade_listener.js | 6 +++--- app/components/emoji_picker/emoji_picker.ios.js | 6 +++--- app/components/emoji_picker/emoji_picker_base.js | 2 +- app/components/network_indicator/network_indicator.js | 6 +++--- .../safe_area_view/iphone_x_spacing/index.js | 10 +++++----- app/components/safe_area_view/safe_area_view.ios.js | 8 ++++---- .../sidebars/main/channels_list/list/list.js | 2 +- app/components/sidebars/main/main_sidebar.js | 2 +- app/components/sidebars/main/teams_list/teams_list.js | 2 +- app/components/slide_up_panel/slide_up_panel.js | 2 +- app/components/start/empty_toolbar.js | 2 +- app/components/swiper.js | 4 ++-- app/constants/device.js | 2 +- app/screens/channel/channel.ios.js | 2 +- app/screens/channel/channel_nav_bar/channel_nav_bar.js | 2 +- app/screens/image_preview/image_preview.js | 4 ++-- app/screens/search/search.js | 2 +- package.json | 4 ++-- 19 files changed, 35 insertions(+), 35 deletions(-) diff --git a/app/components/autocomplete/autocomplete.js b/app/components/autocomplete/autocomplete.js index a2a8928fdf..ab05feabef 100644 --- a/app/components/autocomplete/autocomplete.js +++ b/app/components/autocomplete/autocomplete.js @@ -149,7 +149,7 @@ export default class Autocomplete extends PureComponent { } else { // List is expanding downwards, likely from the search box let offset = Platform.select({ios: 65, android: 75}); - if (DeviceTypes.IS_IPHONE_X) { + if (DeviceTypes.IS_IPHONE_WITH_INSETS) { offset = 90; } diff --git a/app/components/client_upgrade_listener/client_upgrade_listener.js b/app/components/client_upgrade_listener/client_upgrade_listener.js index b05b3f14f6..d7bb98eece 100644 --- a/app/components/client_upgrade_listener/client_upgrade_listener.js +++ b/app/components/client_upgrade_listener/client_upgrade_listener.js @@ -71,7 +71,7 @@ export default class ClientUpgradeListener extends PureComponent { if (versionMismatch && (forceUpgrade || Date.now() - lastUpgradeCheck > UPDATE_TIMEOUT)) { this.checkUpgrade(minVersion, latestVersion, nextProps.isLandscape); } else if (this.props.isLandscape !== nextProps.isLandscape && - isUpgradeAvailable(this.state.upgradeType) && DeviceTypes.IS_IPHONE_X) { + isUpgradeAvailable(this.state.upgradeType) && DeviceTypes.IS_IPHONE_WITH_INSETS) { const newTop = nextProps.isLandscape ? 45 : 100; this.setState({top: new Animated.Value(newTop)}); } @@ -98,10 +98,10 @@ export default class ClientUpgradeListener extends PureComponent { toggleUpgradeMessage = (show = true, isLandscape) => { let toValue = -100; if (show) { - if (DeviceTypes.IS_IPHONE_X && isLandscape) { + if (DeviceTypes.IS_IPHONE_WITH_INSETS && isLandscape) { toValue = 45; } else { - toValue = DeviceTypes.IS_IPHONE_X ? 100 : 75; + toValue = DeviceTypes.IS_IPHONE_WITH_INSETS ? 100 : 75; } } Animated.timing(this.state.top, { diff --git a/app/components/emoji_picker/emoji_picker.ios.js b/app/components/emoji_picker/emoji_picker.ios.js index c1603f6e71..4391679b65 100644 --- a/app/components/emoji_picker/emoji_picker.ios.js +++ b/app/components/emoji_picker/emoji_picker.ios.js @@ -27,7 +27,7 @@ export default class EmojiPicker extends EmojiPickerBase { const {emojis, filteredEmojis, searchTerm} = this.state; const styles = getStyleSheetFromTheme(theme); - const shorten = DeviceTypes.IS_IPHONE_X && isLandscape ? 6 : 2; + const shorten = DeviceTypes.IS_IPHONE_WITH_INSETS && isLandscape ? 6 : 2; let listComponent; if (searchTerm) { @@ -68,9 +68,9 @@ export default class EmojiPicker extends EmojiPickerBase { ); } - let keyboardOffset = DeviceTypes.IS_IPHONE_X ? 50 : 30; + let keyboardOffset = DeviceTypes.IS_IPHONE_WITH_INSETS ? 50 : 30; if (isLandscape) { - keyboardOffset = DeviceTypes.IS_IPHONE_X ? 0 : 10; + keyboardOffset = DeviceTypes.IS_IPHONE_WITH_INSETS ? 0 : 10; } const searchBarInput = { diff --git a/app/components/emoji_picker/emoji_picker_base.js b/app/components/emoji_picker/emoji_picker_base.js index 249df1ceb0..9b496468e6 100644 --- a/app/components/emoji_picker/emoji_picker_base.js +++ b/app/components/emoji_picker/emoji_picker_base.js @@ -216,7 +216,7 @@ export default class EmojiPicker extends PureComponent { }; getNumberOfColumns = (deviceWidth) => { - const shorten = DeviceTypes.IS_IPHONE_X && this.props.isLandscape ? 4 : 2; + const shorten = DeviceTypes.IS_IPHONE_WITH_INSETS && this.props.isLandscape ? 4 : 2; return Math.floor(Number(((deviceWidth - (SECTION_MARGIN * shorten)) / (EMOJI_SIZE + (EMOJI_GUTTER * shorten))))); }; diff --git a/app/components/network_indicator/network_indicator.js b/app/components/network_indicator/network_indicator.js index a29476fb27..0913735dc8 100644 --- a/app/components/network_indicator/network_indicator.js +++ b/app/components/network_indicator/network_indicator.js @@ -201,11 +201,11 @@ export default class NetworkIndicator extends PureComponent { return ANDROID_TOP_PORTRAIT; } - const isX = DeviceTypes.IS_IPHONE_X; + const iPhoneWithInsets = DeviceTypes.IS_IPHONE_WITH_INSETS; - if (isX && isLandscape) { + if (iPhoneWithInsets && isLandscape) { return IOS_TOP_LANDSCAPE; - } else if (isX) { + } else if (iPhoneWithInsets) { return IOSX_TOP_PORTRAIT; } else if (isLandscape && !DeviceTypes.IS_TABLET) { return IOS_TOP_LANDSCAPE; diff --git a/app/components/safe_area_view/iphone_x_spacing/index.js b/app/components/safe_area_view/iphone_x_spacing/index.js index 9460b5e2ed..8d8bfa9c64 100644 --- a/app/components/safe_area_view/iphone_x_spacing/index.js +++ b/app/components/safe_area_view/iphone_x_spacing/index.js @@ -4,17 +4,17 @@ import {DeviceTypes, ViewTypes} from 'app/constants'; export const paddingHorizontal = (isLandscape, modifier = 0) => { - return DeviceTypes.IS_IPHONE_X && isLandscape ? {paddingHorizontal: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null; + return DeviceTypes.IS_IPHONE_WITH_INSETS && isLandscape ? {paddingHorizontal: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null; }; export const paddingLeft = (isLandscape, modifier = 0) => { - return DeviceTypes.IS_IPHONE_X && isLandscape ? {paddingLeft: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null; + return DeviceTypes.IS_IPHONE_WITH_INSETS && isLandscape ? {paddingLeft: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null; }; export const paddingRight = (isLandscape, modifier = 0) => { - return DeviceTypes.IS_IPHONE_X && isLandscape ? {paddingRight: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null; + return DeviceTypes.IS_IPHONE_WITH_INSETS && isLandscape ? {paddingRight: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null; }; export const marginHorizontal = (isLandscape, modifier = 0) => { - return DeviceTypes.IS_IPHONE_X && isLandscape ? {marginHorizontal: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null; -}; \ No newline at end of file + return DeviceTypes.IS_IPHONE_WITH_INSETS && isLandscape ? {marginHorizontal: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null; +}; diff --git a/app/components/safe_area_view/safe_area_view.ios.js b/app/components/safe_area_view/safe_area_view.ios.js index 3f70d213b9..97c5117ff9 100644 --- a/app/components/safe_area_view/safe_area_view.ios.js +++ b/app/components/safe_area_view/safe_area_view.ios.js @@ -38,14 +38,14 @@ export default class SafeAreaIos extends PureComponent { super(props); let insetBottom = 0; - if ((DeviceTypes.IS_IPHONE_X || mattermostManaged.hasSafeAreaInsets) && props.excludeFooter) { + if ((DeviceTypes.IS_IPHONE_WITH_INSETS || mattermostManaged.hasSafeAreaInsets) && props.excludeFooter) { insetBottom = 20; } this.state = { keyboard: false, safeAreaInsets: { - top: DeviceTypes.IS_IPHONE_X ? 44 : 20, + top: DeviceTypes.IS_IPHONE_WITH_INSETS ? 44 : 20, left: 0, bottom: insetBottom, right: 0, @@ -94,7 +94,7 @@ export default class SafeAreaIos extends PureComponent { getSafeAreaInsets = () => { this.getStatusBarHeight(); - if (DeviceTypes.IS_IPHONE_X || mattermostManaged.hasSafeAreaInsets) { + if (DeviceTypes.IS_IPHONE_WITH_INSETS || mattermostManaged.hasSafeAreaInsets) { SafeArea.getSafeAreaInsetsForRootView().then((result) => { const {safeAreaInsets} = result; @@ -128,7 +128,7 @@ export default class SafeAreaIos extends PureComponent { } let top = safeAreaInsets.top; - if (forceTop && DeviceTypes.IS_IPHONE_X && !hideTopBar) { + if (forceTop && DeviceTypes.IS_IPHONE_WITH_INSETS && !hideTopBar) { top = forceTop; } diff --git a/app/components/sidebars/main/channels_list/list/list.js b/app/components/sidebars/main/channels_list/list/list.js index 691406d83d..9b78a9e56e 100644 --- a/app/components/sidebars/main/channels_list/list/list.js +++ b/app/components/sidebars/main/channels_list/list/list.js @@ -390,7 +390,7 @@ export default class List extends PureComponent { const {width, height} = Dimensions.get('window'); const landscape = width > height; - if (DeviceTypes.IS_IPHONE_X) { + if (DeviceTypes.IS_IPHONE_WITH_INSETS) { return landscape ? 54 : 44; } diff --git a/app/components/sidebars/main/main_sidebar.js b/app/components/sidebars/main/main_sidebar.js index 8ea04b3914..84b5ef7062 100644 --- a/app/components/sidebars/main/main_sidebar.js +++ b/app/components/sidebars/main/main_sidebar.js @@ -332,7 +332,7 @@ export default class ChannelSidebar extends Component { return null; } - const hasSafeAreaInsets = DeviceTypes.IS_IPHONE_X || mattermostManaged.hasSafeAreaInsets; + const hasSafeAreaInsets = DeviceTypes.IS_IPHONE_WITH_INSETS || mattermostManaged.hasSafeAreaInsets; const multipleTeams = teamsCount > 1; const showTeams = !searching && multipleTeams; if (this.drawerSwiper) { diff --git a/app/components/sidebars/main/teams_list/teams_list.js b/app/components/sidebars/main/teams_list/teams_list.js index afc9272271..b139e7fa6b 100644 --- a/app/components/sidebars/main/teams_list/teams_list.js +++ b/app/components/sidebars/main/teams_list/teams_list.js @@ -117,7 +117,7 @@ export default class TeamsList extends PureComponent { const {width, height} = Dimensions.get('window'); const landscape = width > height; - if (DeviceTypes.IS_IPHONE_X) { + if (DeviceTypes.IS_IPHONE_WITH_INSETS) { return landscape ? 54 : 44; } diff --git a/app/components/slide_up_panel/slide_up_panel.js b/app/components/slide_up_panel/slide_up_panel.js index dc15e26524..9c150243c4 100644 --- a/app/components/slide_up_panel/slide_up_panel.js +++ b/app/components/slide_up_panel/slide_up_panel.js @@ -19,7 +19,7 @@ import {makeStyleSheetFromTheme} from 'app/utils/theme'; import SlideUpPanelIndicator from './slide_up_panel_indicator'; export const BOTTOM_MARGIN = mattermostManaged.hasSafeAreaInsets ? 24 : 0; -const TOP_IOS_MARGIN = DeviceTypes.IS_IPHONE_X ? 84 : 64; +const TOP_IOS_MARGIN = DeviceTypes.IS_IPHONE_WITH_INSETS ? 84 : 64; const TOP_ANDROID_MARGIN = 44; const TOP_MARGIN = Platform.OS === 'ios' ? TOP_IOS_MARGIN : TOP_ANDROID_MARGIN; diff --git a/app/components/start/empty_toolbar.js b/app/components/start/empty_toolbar.js index 8db278b757..f3e5b399ea 100644 --- a/app/components/start/empty_toolbar.js +++ b/app/components/start/empty_toolbar.js @@ -44,7 +44,7 @@ export default class EmptyToolbar extends PureComponent { height = IOS_TOP_LANDSCAPE; } - if (DeviceTypes.IS_IPHONE_X && isLandscape) { + if (DeviceTypes.IS_IPHONE_WITH_INSETS && isLandscape) { padding.paddingHorizontal = 10; } break; diff --git a/app/components/swiper.js b/app/components/swiper.js index 6e69bc0a8b..22dbcdfb98 100644 --- a/app/components/swiper.js +++ b/app/components/swiper.js @@ -180,7 +180,7 @@ export default class Swiper extends PureComponent { const bottom = this.paginationBottom(width, height); const drawerWidth = (width > height) ? width - ViewTypes.IOS_HORIZONTAL_LANDSCAPE : width; let style; - if (DeviceTypes.IS_IPHONE_X && (width < height)) { + if (DeviceTypes.IS_IPHONE_WITH_INSETS && (width < height)) { style = { bottom, width: drawerWidth, @@ -235,7 +235,7 @@ export default class Swiper extends PureComponent { } const landscape = width > height; - if (DeviceTypes.IS_IPHONE_X) { + if (DeviceTypes.IS_IPHONE_WITH_INSETS) { return landscape ? 14 : 34; } diff --git a/app/constants/device.js b/app/constants/device.js index 71f56eefb7..b71388c87c 100644 --- a/app/constants/device.js +++ b/app/constants/device.js @@ -17,7 +17,7 @@ export default { ...deviceTypes, DOCUMENTS_PATH: `${RNFetchBlobFS.dirs.CacheDir}/Documents`, IMAGES_PATH: `${RNFetchBlobFS.dirs.CacheDir}/Images`, - IS_IPHONE_X: DeviceInfo.getModel().includes('iPhone X'), + IS_IPHONE_WITH_INSETS: DeviceInfo.getModel().includes('iPhone X') || DeviceInfo.getModel().includes('iPhone 11'), IS_TABLET: DeviceInfo.isTablet(), VIDEOS_PATH: `${RNFetchBlobFS.dirs.CacheDir}/Videos`, PERMANENT_SIDEBAR_SETTINGS: '@PERMANENT_SIDEBAR_SETTINGS', diff --git a/app/screens/channel/channel.ios.js b/app/screens/channel/channel.ios.js index c7a9159a90..3319e7a920 100644 --- a/app/screens/channel/channel.ios.js +++ b/app/screens/channel/channel.ios.js @@ -39,7 +39,7 @@ export default class ChannelIOS extends ChannelBase { const {currentChannelId} = this.props; const channelLoaderStyle = [style.channelLoader, {height}]; - if ((DeviceTypes.IS_IPHONE_X || DeviceTypes.IS_TABLET)) { + if ((DeviceTypes.IS_IPHONE_WITH_INSETS || DeviceTypes.IS_TABLET)) { channelLoaderStyle.push(style.iOSHomeIndicator); } diff --git a/app/screens/channel/channel_nav_bar/channel_nav_bar.js b/app/screens/channel/channel_nav_bar/channel_nav_bar.js index 9949e6573b..731d9e2ea4 100644 --- a/app/screens/channel/channel_nav_bar/channel_nav_bar.js +++ b/app/screens/channel/channel_nav_bar/channel_nav_bar.js @@ -93,7 +93,7 @@ export default class ChannelNavBar extends PureComponent { canHaveSubtitle = false; } - if (DeviceTypes.IS_IPHONE_X && isLandscape) { + if (DeviceTypes.IS_IPHONE_WITH_INSETS && isLandscape) { canHaveSubtitle = false; } break; diff --git a/app/screens/image_preview/image_preview.js b/app/screens/image_preview/image_preview.js index e902a6b774..1d5d1a2e20 100644 --- a/app/screens/image_preview/image_preview.js +++ b/app/screens/image_preview/image_preview.js @@ -359,7 +359,7 @@ export default class ImagePreview extends PureComponent { const {deviceHeight, deviceWidth} = this.props; const {height, width} = imageDimensions; const {style, ...otherProps} = imageProps; - const statusBar = DeviceTypes.IS_IPHONE_X ? 0 : 20; + const statusBar = DeviceTypes.IS_IPHONE_WITH_INSETS ? 0 : 20; const flattenStyle = StyleSheet.flatten(style); const calculatedDimensions = calculateDimensions(height, width, deviceWidth, deviceHeight - statusBar); const imageStyle = {...flattenStyle, ...calculatedDimensions}; @@ -396,7 +396,7 @@ export default class ImagePreview extends PureComponent { renderVideoPreview = (file) => { const {deviceHeight, deviceWidth, theme} = this.props; - const statusBar = DeviceTypes.IS_IPHONE_X ? 0 : 20; + const statusBar = DeviceTypes.IS_IPHONE_WITH_INSETS ? 0 : 20; return ( diff --git a/package.json b/package.json index 310a2b2cf4..fc16359d96 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "react-native-calendars": "github:mattermost/react-native-calendars#4937ec5a3bf7e86f9f35fcd85eb4aa6133f45b58", "react-native-circular-progress": "1.1.0", "react-native-cookies": "github:joeferraro/react-native-cookies#f11374745deba9f18f7b8a9bb4b0b2573026f522", - "react-native-device-info": "github:mattermost/react-native-device-info#66d730b4f675038867ca389be7374714c2db63b2", + "react-native-device-info": "github:mattermost/react-native-device-info#a434e5378a59825b4c33c9a31bf0d8dc98a45966", "react-native-doc-viewer": "2.7.8", "react-native-document-picker": "2.3.0", "react-native-exception-handler": "2.10.7", @@ -151,4 +151,4 @@ "node_modules/(?!react-native|jail-monkey)" ] } -} \ No newline at end of file +}