MM-42835_Invite People - add email+user invites

app/components/selected_chip/index.tsx

@@ -0,0 +1,100 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useCallback} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
+
+import CompassIcon from '@components/compass_icon';
+import {useTheme} from '@context/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
+
+type SelectedChipProps = {
+    id: string;
+    text: string;
+    extra?: React.ReactNode;
+    onRemove: (id: string) => void;
+    testID?: string;
+}
+
+export const USER_CHIP_HEIGHT = 32;
+export const USER_CHIP_BOTTOM_MARGIN = 8;
+const FADE_DURATION = 100;
+
+const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
+    return {
+        container: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'row',
+            borderRadius: 16,
+            height: USER_CHIP_HEIGHT,
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
+            marginBottom: USER_CHIP_BOTTOM_MARGIN,
+            marginRight: 8,
+            paddingHorizontal: 7,
+        },
+        extraContent: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            color: theme.centerChannelColor,
+        },
+        text: {
+            marginLeft: 8,
+            color: theme.centerChannelColor,
+            ...typography('Body', 100, 'SemiBold'),
+        },
+        remove: {
+            justifyContent: 'center',
+            marginLeft: 7,
+        },
+    };
+});
+
+export default function SelectedChip({
+    id,
+    text,
+    extra,
+    onRemove,
+    testID,
+}: SelectedChipProps) {
+    const theme = useTheme();
+    const style = getStyleFromTheme(theme);
+
+    const onPress = useCallback(() => {
+        onRemove(id);
+    }, [onRemove, id]);
+
+    return (
+        <Animated.View
+            entering={FadeIn.duration(FADE_DURATION)}
+            exiting={FadeOut.duration(FADE_DURATION)}
+            style={style.container}
+            testID={testID}
+        >
+            {extra && (
+                <View style={style.extraContent}>
+                    {extra}
+                </View>
+            )}
+            <Text
+                style={style.text}
+                testID={`${testID}.display_name`}
+            >
+                {text}
+            </Text>
+            <TouchableOpacity
+                style={style.remove}
+                onPress={onPress}
+                testID={`${testID}.remove.button`}
+            >
+                <CompassIcon
+                    name='close-circle'
+                    size={18}
+                    color={changeOpacity(theme.centerChannelColor, 0.32)}
+                />
+            </TouchableOpacity>
+        </Animated.View>
+    );
+}

app/components/selected_users/index.tsx

@@ -6,6 +6,7 @@ import {LayoutChangeEvent, Platform, ScrollView, useWindowDimensions, View} from
 import Animated, {useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
+import {USER_CHIP_BOTTOM_MARGIN, USER_CHIP_HEIGHT} from '@components/selected_chip';
 import Toast from '@components/toast';
 import {General} from '@constants';
 import {useTheme} from '@context/theme';
@@ -13,7 +14,7 @@ import {useIsTablet, useKeyboardHeightWithDuration} from '@hooks/device';
 import Button from '@screens/bottom_sheet/button';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
-import SelectedUser, {USER_CHIP_BOTTOM_MARGIN, USER_CHIP_HEIGHT} from './selected_user';
+import SelectedUser from './selected_user';
 
 type Props = {
 

app/components/selected_users/selected_user.tsx

@@ -3,18 +3,9 @@
 
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
-import {
-    Text,
-    TouchableOpacity,
-    View,
-} from 'react-native';
-import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
 
-import CompassIcon from '@components/compass_icon';
 import ProfilePicture from '@components/profile_picture';
-import {useTheme} from '@context/theme';
-import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
-import {typography} from '@utils/typography';
+import SelectedChip from '@components/selected_chip';
 import {displayUsername} from '@utils/user';
 
 type Props = {
@@ -40,87 +31,34 @@ type Props = {
     testID?: string;
 }
 
-export const USER_CHIP_HEIGHT = 32;
-export const USER_CHIP_BOTTOM_MARGIN = 8;
-const FADE_DURATION = 100;
-
-const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
-    return {
-        container: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexDirection: 'row',
-            borderRadius: 16,
-            height: USER_CHIP_HEIGHT,
-            backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
-            marginBottom: USER_CHIP_BOTTOM_MARGIN,
-            marginRight: 8,
-            paddingHorizontal: 7,
-        },
-        remove: {
-            justifyContent: 'center',
-            marginLeft: 7,
-        },
-        profileContainer: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginRight: 8,
-            color: theme.centerChannelColor,
-        },
-        text: {
-            color: theme.centerChannelColor,
-            ...typography('Body', 100, 'SemiBold'),
-        },
-    };
-});
-
 export default function SelectedUser({
     teammateNameDisplay,
     user,
     onRemove,
     testID,
 }: Props) {
-    const theme = useTheme();
-    const style = getStyleFromTheme(theme);
     const intl = useIntl();
 
-    const onPress = useCallback(() => {
-        onRemove(user.id);
-    }, [onRemove, user.id]);
+    const onPress = useCallback((id: string) => {
+        onRemove(id);
+    }, [onRemove]);
 
     const userItemTestID = `${testID}.${user.id}`;
+
     return (
-        <Animated.View
-            entering={FadeIn.duration(FADE_DURATION)}
-            exiting={FadeOut.duration(FADE_DURATION)}
-            style={style.container}
-            testID={`${testID}.${user.id}`}
-        >
-            <View style={style.profileContainer}>
+        <SelectedChip
+            id={user.id}
+            text={displayUsername(user, intl.locale, teammateNameDisplay)}
+            extra={(
                 <ProfilePicture
                     author={user}
                     size={20}
                     iconSize={20}
                     testID={`${userItemTestID}.profile_picture`}
                 />
-            </View>
-            <Text
-                style={style.text}
-                testID={`${testID}.${user.id}.display_name`}
-            >
-                {displayUsername(user, intl.locale, teammateNameDisplay)}
-            </Text>
-            <TouchableOpacity
-                style={style.remove}
-                onPress={onPress}
-                testID={`${testID}.${user.id}.remove.button`}
-            >
-                <CompassIcon
-                    name='close-circle'
-                    size={18}
-                    color={changeOpacity(theme.centerChannelColor, 0.32)}
-                />
-            </TouchableOpacity>
-        </Animated.View>
+            )}
+            onRemove={onPress}
+            testID={userItemTestID}
+        />
     );
 }