-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import {
Button,
Divider,
ScreenContainer,
Touchable,
withTheme,
} from '@draftbit/ui';
import {
Image,
KeyboardAvoidingView,
ScrollView,
StyleSheet,
Text,
TextInput,
View,
} from 'react-native';
const REPLACE_SCREEN_NAME = props => {
const [collaboratoremail, setCollaboratoremail] = React.useState(undefined);
const { theme } = props;
return (
<ScreenContainer hasSafeArea={true} scrollable={true}>
<KeyboardAvoidingView
style={styles.keyboardAvoidingViewFu}
keyboardVerticalOffset={0}
behavior=""height""
enabled={true}
>
<ScrollView
contentContainerStyle={styles.scrollViewYz}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={true}
bounces={true}
>
<View style={styles.viewTn}>
<Image
style={styles.image5A}
resizeMode=""contain""
source={Images.WorkspaceIconPlaceholder}
/>
<Text
style={StyleSheet.flatten([
styles.textYI,
theme.typography.headline4,
{ color: theme.colors.strong },
])}
>
Invite Collaborators
</Text>
<Text
style={StyleSheet.flatten([
styles.textZ5,
theme.typography.subtitle1,
{ color: theme.colors.medium },
])}
>
Add a collaborator to your team.
</Text>
</View>
<View
style={styles.viewOp}
accessible={true}
importantForAccessibility=""auto""
pointerEvents=""auto""
hitSlop={{}}
>
<View
hitSlop={{}}
importantForAccessibility=""auto""
pointerEvents=""auto""
accessible={true}
>
<Text
style={StyleSheet.flatten([
styles.textVi,
theme.typography.caption,
{ color: theme.colors.strong },
])}
textBreakStrategy=""highQuality""
ellipsizeMode=""tail""
accessible={true}
allowFontScaling={true}
>
Add Collaborator
</Text>
<View
style={styles.viewIo}
accessible={true}
pointerEvents=""auto""
hitSlop={{}}
importantForAccessibility=""auto""
>
<TextInput
style={StyleSheet.flatten([
styles.textInputKI,
{
backgroundColor: theme.colors.background,
borderColor: theme.colors.divider,
borderRadius: theme.borderRadius.global,
color: theme.colors.strong,
},
])}
value={collaboratoremail}
clearButtonMode=""while-editing""
autoCapitalize=""none""
returnKeyType=""done""
placeholder=""Email""
textContentType=""emailaddress""
placeholderTextColor={theme.colors.medium}
onChangeText={collaboratoremail =>
setCollaboratoremail(collaboratoremail)
}
spellcheck={true}
allowFontScaling={true}
keyboardType=""email-address""
enablesReturnKeyAutomatically={false}
/>
</View>
</View>
<View
style={styles.viewYa}
hitSlop={{}}
importantForAccessibility=""auto""
pointerEvents=""auto""
accessible={true}
>
<Button
style={StyleSheet.flatten([
styles.buttonJv,
{ borderRadius: theme.borderRadius.global },
])}
type=""solid""
icon=""FontAwesome/send""
>
Send Invite
</Button>
</View>
</View>
<View
style={styles.viewGf}
hitSlop={{}}
accessible={true}
importantForAccessibility=""auto""
pointerEvents=""auto""
>
<Text
style={StyleSheet.flatten([
theme.typography.headline5,
{ color: theme.colors.strong },
])}
ellipsizeMode=""tail""
textBreakStrategy=""highQuality""
accessible={true}
allowFontScaling={true}
>
Team
</Text>
</View>
<View
style={styles.viewN2}
importantForAccessibility=""auto""
pointerEvents=""auto""
hitSlop={{}}
accessible={true}
>
<Touchable>
<View
style={styles.viewF4}
accessible={true}
importantForAccessibility=""auto""
hitSlop={{}}
pointerEvents=""auto""
>
<View
style={styles.viewRp}
importantForAccessibility=""auto""
accessible={true}
pointerEvents=""auto""
hitSlop={{}}
>
<Image
style={styles.imageTi}
source={Images.ProfilePlaceholder}
resizeMode=""contain""
/>
<View
style={styles.view20}
hitSlop={{}}
importantForAccessibility=""auto""
pointerEvents=""auto""
accessible={true}
>
<Text
style={StyleSheet.flatten([
theme.typography.subtitle1,
{ color: theme.colors.medium },
])}
textBreakStrategy=""highQuality""
accessible={true}
allowFontScaling={true}
ellipsizeMode=""tail""
>
Team Member Name
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.caption,
{ color: theme.colors.light },
])}
textBreakStrategy=""highQuality""
accessible={true}
allowFontScaling={true}
ellipsizeMode=""tail""
>
teammate@email.com
</Text>
</View>
</View>
<Text
style={StyleSheet.flatten([
theme.typography.caption,
{ color: theme.colors.light },
])}
accessible={true}
textBreakStrategy=""highQuality""
ellipsizeMode=""tail""
allowFontScaling={true}
>
Owner
</Text>
</View>
<Divider
style={styles.dividerSG}
color={theme.colors.divider}
height={1}
/>
</Touchable>
<Touchable>
<View
style={styles.viewZj}
pointerEvents=""auto""
importantForAccessibility=""auto""
accessible={true}
hitSlop={{}}
>
<View
style={styles.viewOd}
hitSlop={{}}
importantForAccessibility=""auto""
accessible={true}
pointerEvents=""auto""
>
<Image
style={styles.imageKb}
resizeMode=""contain""
source={Images.ProfilePlaceholder}
/>
<View
style={styles.viewLp}
pointerEvents=""auto""
importantForAccessibility=""auto""
hitSlop={{}}
accessible={true}
>
<Text
style={StyleSheet.flatten([
theme.typography.subtitle1,
{ color: theme.colors.medium },
])}
textBreakStrategy=""highQuality""
allowFontScaling={true}
ellipsizeMode=""tail""
accessible={true}
>
Team Member Name
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.caption,
{ color: theme.colors.light },
])}
textBreakStrategy=""highQuality""
accessible={true}
allowFontScaling={true}
ellipsizeMode=""tail""
>
teammate@email.com
</Text>
</View>
</View>
<Text
style={StyleSheet.flatten([
theme.typography.caption,
{ color: theme.colors.light },
])}
allowFontScaling={true}
accessible={true}
ellipsizeMode=""tail""
textBreakStrategy=""highQuality""
>
Admin
</Text>
</View>
<Divider
style={styles.dividerDc}
height={1}
color={theme.colors.divider}
/>
</Touchable>
</View>
</ScrollView>
</KeyboardAvoidingView>
</ScreenContainer>
);
};
const styles = StyleSheet.create({
textVi: {
textTransform: 'uppercase',
},
buttonJv: {
height: 54,
justifyContent: 'center',
alignItems: 'center',
},
viewRp: {
flexDirection: 'row',
alignItems: 'flex-start',
width: '100%',
maxWidth: '80%',
},
viewF4: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
viewOd: {
width: '100%',
flexDirection: 'row',
maxWidth: '80%',
alignItems: 'flex-start',
},
viewZj: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
scrollViewYz: {
flexGrow: 1,
},
keyboardAvoidingViewFu: {
flexGrow: 1,
},
viewTn: {
paddingBottom: 34,
paddingTop: 34,
paddingLeft: 32,
paddingRight: 32,
},
image5A: {
marginBottom: 24,
marginTop: 24,
height: 54,
width: 54,
},
textInputKI: {
height: 54,
borderTopWidth: 1,
borderBottomWidth: 1,
borderLeftWidth: 1,
borderRightWidth: 1,
paddingLeft: 14,
paddingRight: 14,
},
imageTi: {
width: 42,
height: 42,
marginRight: 14,
},
imageKb: {
marginRight: 14,
height: 42,
width: 42,
},
viewIo: {
paddingTop: 12,
marginBottom: 12,
paddingBottom: 12,
},
viewYa: {
marginBottom: 14,
},
viewOp: {
paddingBottom: 14,
paddingRight: 32,
paddingLeft: 32,
},
view20: {
paddingLeft: 14,
paddingRight: 34,
marginRight: 14,
},
viewLp: {
paddingLeft: 14,
paddingRight: 34,
marginRight: 14,
},
textYI: {
marginBottom: 6,
},
dividerSG: {
marginBottom: 24,
marginTop: 24,
height: 1,
},
dividerDc: {
marginBottom: 24,
height: 1,
marginTop: 24,
},
viewGf: {
width: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingRight: 32,
paddingLeft: 32,
marginTop: 24,
marginBottom: 14,
},
textZ5: {
textAlign: 'left',
},
viewN2: {
paddingLeft: 32,
paddingRight: 32,
},
});
export default withTheme(REPLACE_SCREEN_NAME);