ordo
/
mobile-nawakara
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix(profile): change layout view profile page

master
farhantock 4 months ago
parent
4f0e0781d8
commit
75391b9709
1 changed files with 113 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 200
      src/screens/Profile.js

200
src/screens/Profile.js
Unescape View File

@ -1,102 +1,109 @@
import React from 'react';
import { Alert, View, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
import { Avatar, Text, useTheme, Appbar, Icon, Button, Card, List } from 'react-native-paper';
import React, { useState } from 'react';
import { Alert, View, ScrollView, StyleSheet, TouchableOpacity, StatusBar } from 'react-native';
import { Avatar, Text, Appbar, List, Button, Switch, Modal, TouchableRipple } from 'react-native-paper';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { clearAllState } from '../utils/Auth';
import { strings } from '../utils/i18n';
import person from '../assets/images/courier_man.png'
import { colors } from '../utils/color';
const ProfileScreen = ({ navigation }) => {
const theme = useTheme();
const [expanded, setExpanded] = React.useState(true);
const [isSwitchOn, setIsSwitchOn] = React.useState(false);
const handlePress = () => setExpanded(!expanded);
const SettingItem = ({ title, icon, onPress }) => {
return (
<Box
maxWidth="$100"
borderColor="$borderLight200"
borderRadius="$lg"
// borderWidth="$1"
borderBottomWidth="$1"
// my="$1"
py="$5"
overflow="hidden"
sx={{
"@base": {
mx: "$5",
},
_dark: {
bg: "$backgroundDark900",
borderColor: "$borderDark800",
},
}}
>
<TouchableOpacity onPress={onPress}>
<HStack>
<VStack w='20%' alignItems='center' alignSelf='center'>
{icon ? icon : null}
</VStack>
<VStack w='80%'>
<Text _dark={{ color: "$textLight200" }} fontSize="$md">{title ? title : null}</Text>
</VStack>
</HStack>
</TouchableOpacity>
</Box>
)
}
const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
const [visible, setVisible] = useState(false);
const handleLogout = () => {
Alert.alert(
strings('profile.signout'),
strings('profile.signoutMessage'),
[
{ text: strings('global.no') },
{
text: strings('global.yes'), onPress: () => {
clearAllState();
}
}
]
);
}
const showModal = () => setVisible(true);
const hideModal = () => setVisible(false);
return (
<View style={styles.container}>
<Appbar.Header mode='center-aligned' style={{ backgroundColor: 'white' }} >
<Appbar.BackAction onPress={() => { navigation.goBack() }} />
<Appbar.Content title="Profile" />
</Appbar.Header>
<>
<View style={styles.container}>
<StatusBar backgroundColor={colors.pureWhite} barStyle='dark-content' translucent={true} />
<Appbar.Header mode='center-aligned' style={{ backgroundColor: colors.pureWhite }} >
<Appbar.BackAction onPress={() => { navigation.goBack() }} />
<Appbar.Content title="Profile" />
</Appbar.Header>
<View style={styles.header}>
<Avatar.Image size={80} style={styles.avatar} source={person} />
<View style={styles.textContainer}>
<Text style={[styles.welcomeText, { color: '#1C1B40' }]}>
Farhan
</Text>
<Text style={[styles.subWelcomeText, { color: '#1C1B40' }]}>
Land Encroachment Prevention Officer
</Text>
<View style={styles.header}>
<Avatar.Image size={80} style={styles.avatar} source={person} />
<View style={styles.textContainer}>
<Text style={[styles.welcomeText, { color: colors.black }]}>
Farhan
</Text>
<Text style={[styles.subWelcomeText, { color: colors.amethystSmoke }]}>
Land Encroachment Prevention Officer
</Text>
</View>
</View>
</View>
<View style={styles.cardView}>
<Card style={styles.card}>
<Card.Title title="Laporan Harian" titleVariant='labelLarge' titleStyle={{ fontWeight: 'bold' }} rightStyle={{ marginRight: 20 }} right={() => <Icon source="arrow-right-drop-circle-outline" size={24} />} left={() => <Icon size={25} source="file-cabinet" />} />
<ScrollView style={{ backgroundColor: colors.pureWhite }}>
<View style={styles.cardView}>
<TouchableRipple rippleColor={colors.pureWhite} onPress={() => { navigation.navigate('DailyReportScreen') }}>
<List.Item
title="Laporan Harian"
left={() => <List.Icon icon="file-document" />}
right={() => <List.Icon icon="chevron-right" />}
/>
</TouchableRipple>
<TouchableRipple rippleColor={colors.pureWhite} onPress={() => { navigation.navigate('PresenceScreen') }}>
<List.Item
title="Riwayat Kehadiran"
left={() => <List.Icon icon="history" />}
right={() => <List.Icon icon="chevron-right" />}
/>
</TouchableRipple>
<TouchableRipple rippleColor={colors.pureWhite} onPress={() => { navigation.navigate('RegisterScreen') }}>
<List.Item
title="Registrasi"
left={() => <List.Icon icon="account-cog" />}
right={() => <List.Icon icon="chevron-right" />}
/>
</TouchableRipple>
<TouchableRipple rippleColor={colors.pureWhite} onPress={() => { navigation.navigate('RegisterScreen') }}>
<List.Item
title="Daftar Personel"
left={() => <List.Icon icon="account" />}
right={() => <List.Icon icon="chevron-right" />}
/>
</TouchableRipple>
<List.Item
title="bahasa"
left={() => <List.Icon icon="translate" />}
right={() =>
<View style={styles.switchContainer}>
<Text>{isSwitchOn ? "ID" : "EN"}</Text>
<Switch
trackColor={{ true: colors.blue, false: colors.blue }}
color={colors.pureWhite}
style={styles.switch}
onValueChange={onToggleSwitch}
value={isSwitchOn}
/>
</View>
}
/>
</View>
</ScrollView>
<Button buttonColor={colors.beanRed} style={styles.button} contentStyle={{ flexDirection: 'row-reverse' }} icon="logout" mode="contained" onPress={showModal}>
Keluar
</Button>
</View >
</Card>
<Card style={styles.card}>
<Card.Title title="Riwayat Kehadiran" titleVariant='labelLarge' titleStyle={{ fontWeight: 'bold' }} rightStyle={{ marginRight: 20 }} right={() => <Icon source="arrow-right-drop-circle-outline" size={24} />} left={() => <Icon size={25} source="history" />} />
</Card>
<Card style={styles.card}>
<Card.Title title="Informasi Detail" titleVariant='labelLarge' titleStyle={{ fontWeight: 'bold' }} rightStyle={{ marginRight: 20 }} right={() => <Icon source="arrow-right-drop-circle-outline" size={24} />} left={() => <Icon size={25} source="card-account-details-outline" />} />
</Card>
</View>
<Button buttonColor='#EF6262' style={styles.button} contentStyle={{ flexDirection: 'row-reverse' }} icon="logout" mode="contained" onPress={() => console.log('Pressed')}>
Keluar
</Button>
</View >
<Modal visible={visible} onDismiss={hideModal} contentContainerStyle={styles.modal}>
<Text variant='titleLarge' >Konfirmasi</Text>
<Text variant='bodyMedium' >{strings('profile.signoutMessage')}</Text>
<Button buttonColor={colors.blue} style={{ borderRadius: 10, marginVertical: 20, paddingVertical: 5 }} contentStyle={{ flexDirection: 'row-reverse' }} mode="contained" onPress={clearAllState()}>
{strings('global.yes')}
</Button>
<Button style={{ borderRadius: 10, paddingVertical: 5 }} contentStyle={{ flexDirection: 'row-reverse' }} textColor={colors.mistBlue} mode="outlined" onPress={hideModal}>
{strings('global.no')}
</Button>
</Modal>
</>
)
}
@ -104,13 +111,14 @@ const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 20,
backgroundColor: colors.pureWhite
},
header: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
paddingVertical: 20,
backgroundColor: 'white'
backgroundColor: colors.pureWhite
},
avatar: {
marginRight: 10,
@ -128,16 +136,34 @@ const styles = StyleSheet.create({
},
cardView: {
marginTop: 10,
marginVertical: 20,
marginHorizontal: 10,
},
card: {
marginTop: 10,
marginHorizontal: 10,
marginVertical: 2,
backgroundColor: 'white'
backgroundColor: colors.pureWhite
},
button: {
marginTop: 20,
margin: 10,
borderRadius: 10,
color: colors.beanRed
},
modal: {
marginVertical: 20,
padding: 20,
marginHorizontal: 20,
borderRadius: 10,
backgroundColor: colors.pureWhite
},
switchContainer: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
},
switch: {
marginLeft: 10
}
})

Write Preview
Loading…
Cancel
Save