73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
|
import { ScrollView, View } from 'react-native';
|
||
|
|
|
||
|
|
import KeyboardView from '../../containers/KeyboardView';
|
||
|
|
import sharedStyles from '../Styles';
|
||
|
|
import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
|
||
|
|
import StatusBar from '../../containers/StatusBar';
|
||
|
|
import { useTheme } from '../../theme';
|
||
|
|
import SafeAreaView from '../../containers/SafeAreaView';
|
||
|
|
import * as List from '../../containers/List';
|
||
|
|
import styles from './styles';
|
||
|
|
import { useAppSelector } from '../../lib/hooks';
|
||
|
|
import { getUserSelector } from '../../selectors/login';
|
||
|
|
import Avatar from '../../containers/Avatar';
|
||
|
|
import AvatarUrl from './AvatarUrl';
|
||
|
|
import Button from '../../containers/Button';
|
||
|
|
import I18n from '../../i18n';
|
||
|
|
|
||
|
|
const ChangeAvatarView = () => {
|
||
|
|
const [avatarUrl, setAvatarUrl] = useState('');
|
||
|
|
const { colors } = useTheme();
|
||
|
|
|
||
|
|
const user = useAppSelector(state => getUserSelector(state));
|
||
|
|
|
||
|
|
return (
|
||
|
|
<KeyboardView
|
||
|
|
style={{ backgroundColor: colors.auxiliaryBackground }}
|
||
|
|
contentContainerStyle={sharedStyles.container}
|
||
|
|
keyboardVerticalOffset={128}
|
||
|
|
>
|
||
|
|
<StatusBar />
|
||
|
|
<SafeAreaView testID='change-avatar-view'>
|
||
|
|
<ScrollView
|
||
|
|
contentContainerStyle={sharedStyles.containerScrollView}
|
||
|
|
testID='change-avatar-view-list'
|
||
|
|
{...scrollPersistTaps}
|
||
|
|
>
|
||
|
|
<View style={styles.avatarContainer} testID='change-avatar-view-avatar'>
|
||
|
|
<Avatar text={user.username} avatar={avatarUrl} isStatic={avatarUrl} size={100} />
|
||
|
|
</View>
|
||
|
|
<AvatarUrl onSubmit={(value: string) => setAvatarUrl(value)} />
|
||
|
|
<List.Separator style={styles.separator} />
|
||
|
|
|
||
|
|
<Button
|
||
|
|
title={I18n.t('Upload_image')}
|
||
|
|
type='secondary'
|
||
|
|
backgroundColor={colors.chatComponentBackground}
|
||
|
|
onPress={() => {}}
|
||
|
|
testID='change-avatar-view-logout-other-locations'
|
||
|
|
/>
|
||
|
|
<Button
|
||
|
|
title={I18n.t('Delete_image')}
|
||
|
|
type='primary'
|
||
|
|
backgroundColor={colors.dangerColor}
|
||
|
|
onPress={() => {}}
|
||
|
|
testID='change-avatar-view-delete-my-account'
|
||
|
|
/>
|
||
|
|
<Button
|
||
|
|
title={I18n.t('Save')}
|
||
|
|
type='primary'
|
||
|
|
onPress={() => {}}
|
||
|
|
// disabled={!this.formIsChanged()}
|
||
|
|
testID='change-avatar-view-submit'
|
||
|
|
// loading={saving}
|
||
|
|
/>
|
||
|
|
</ScrollView>
|
||
|
|
</SafeAreaView>
|
||
|
|
</KeyboardView>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ChangeAvatarView;
|