MM-39720_Invite People - phase 1

Plus menu separator

app/components/slide_up_panel_item/index.tsx

@@ -21,7 +21,6 @@ type SlideUpPanelProps = {
     textStyles?: TextStyle;
     testID?: string;
     text: string;
-    topDivider?: boolean;
 }
 
 export const ITEM_HEIGHT = 48;
@@ -62,15 +61,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             color: theme.centerChannelColor,
             ...typography('Body', 200, 'Regular'),
         },
-        divider: {
-            borderTopWidth: 1,
-            borderStyle: 'solid',
-            borderColor: changeOpacity(theme.centerChannelColor, 0.08),
-        },
     };
 });
 
-const SlideUpPanelItem = ({destructive, icon, imageStyles, onPress, testID, text, textStyles, rightIcon = false, topDivider}: SlideUpPanelProps) => {
+const SlideUpPanelItem = ({destructive, icon, imageStyles, onPress, testID, text, textStyles, rightIcon = false}: SlideUpPanelProps) => {
     const theme = useTheme();
     const handleOnPress = useCallback(preventDoubleTap(onPress, 500), []);
     const style = getStyleSheet(theme);
@@ -105,12 +99,10 @@ const SlideUpPanelItem = ({destructive, icon, imageStyles, onPress, testID, text
         }
     }
 
-    const divider = topDivider ? style.divider : {};
-
     return (
         <TouchableHighlight
             onPress={handleOnPress}
-            style={{...style.container, ...divider}}
+            style={style.container}
             testID={testID}
             underlayColor={changeOpacity(theme.buttonBg, 0.08)}
         >

app/screens/home/channel_list/categories_list/header/header.tsx

@@ -24,6 +24,7 @@ import {typography} from '@utils/typography';
 
 import LoadingUnreads from './loading_unreads';
 import PlusMenu from './plus_menu';
+import {SEPARATOR_HEIGHT} from './plus_menu/separator';
 
 type Props = {
     canCreateChannels: boolean;
@@ -131,6 +132,8 @@ const ChannelListHeader = ({
 
         const closeButtonId = 'close-plus-menu';
         let items = 1;
+        let separators = 0;
+
         if (canCreateChannels) {
             items += 1;
         }
@@ -141,12 +144,13 @@ const ChannelListHeader = ({
 
         if (canInvitePeople) {
             items += 1;
+            separators += 1;
         }
 
         bottomSheet({
             closeButtonId,
             renderContent,
-            snapPoints: [bottomSheetSnapPoint(items, ITEM_HEIGHT, insets.bottom), 10],
+            snapPoints: [bottomSheetSnapPoint(items, ITEM_HEIGHT, insets.bottom, separators, SEPARATOR_HEIGHT), 10],
             theme,
             title: intl.formatMessage({id: 'home.header.plus_menu', defaultMessage: 'Options'}),
         });

app/screens/home/channel_list/categories_list/header/plus_menu/index.tsx

@@ -14,6 +14,7 @@ import {useTheme} from '@context/theme';
 import {dismissBottomSheet, showModal} from '@screens/navigation';
 
 import PlusMenuItem from './item';
+import PlusMenuSeparator from './separator';
 
 type Props = {
     canCreateChannels: boolean;
@@ -128,10 +129,13 @@ const PlusMenuList = ({canCreateChannels, canJoinChannels, canInvitePeople, disp
                 onPress={openDirectMessage}
             />
             {canInvitePeople &&
-            <PlusMenuItem
-                pickerAction='invitePeopleToTeam'
-                onPress={invitePeopleToTeam}
-            />
+            <>
+                <PlusMenuSeparator/>
+                <PlusMenuItem
+                    pickerAction='invitePeopleToTeam'
+                    onPress={invitePeopleToTeam}
+                />
+            </>
             }
         </>
     );

app/screens/home/channel_list/categories_list/header/plus_menu/item.tsx

@@ -36,7 +36,6 @@ const PlusMenuItem = ({pickerAction, onPress}: PlusMenuItemProps) => {
             icon: 'account-plus-outline',
             text: intl.formatMessage({id: 'plus_menu.invite_people_to_team.title', defaultMessage: 'Invite people to the team'}),
             testID: 'plus_menu_item.invite_people_to_team',
-            topDivider: true,
         },
     };
 

app/screens/home/channel_list/categories_list/header/plus_menu/separator.tsx

@@ -0,0 +1,33 @@
+// 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 {useTheme} from '@context/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+
+const MARGIN_VERTICAL = 8;
+const BORDER = 1;
+export const SEPARATOR_HEIGHT = (MARGIN_VERTICAL * 2) + BORDER;
+
+const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
+    separator: {
+        marginTop: MARGIN_VERTICAL,
+        marginBottom: MARGIN_VERTICAL,
+        borderTopWidth: BORDER,
+        borderStyle: 'solid',
+        borderColor: changeOpacity(theme.centerChannelColor, 0.08),
+    },
+}));
+
+const PlusMenuSeparator = () => {
+    const theme = useTheme();
+    const style = getStyleSheet(theme);
+
+    return (
+        <View style={style.separator}/>
+    );
+};
+
+export default PlusMenuSeparator;

app/utils/helpers.ts

@@ -144,12 +144,12 @@ export async function isTablet() {
 
 export const pluckUnique = (key: string) => (array: Array<{[key: string]: unknown}>) => Array.from(new Set(array.map((obj) => obj[key])));
 
-export function bottomSheetSnapPoint(itemsCount: number, itemHeight: number, bottomInset = 0) {
+export function bottomSheetSnapPoint(itemsCount: number, itemHeight: number, bottomInset = 0, separatorCount = 0, separatorHeight = 0) {
     let bottom = bottomInset;
     if (!bottom && Platform.OS === 'ios') {
         bottom = IOS_STATUS_BAR_HEIGHT;
     }
-    return ((itemsCount + Platform.select({android: 1, default: 0})) * itemHeight) + (bottom * 2.5);
+    return ((itemsCount + Platform.select({android: 1, default: 0})) * itemHeight) + (separatorCount * separatorHeight) + (bottom * 2.5);
 }
 
 export function hasTrailingSpaces(term: string) {