447 lines
11 KiB
JavaScript
Executable File
447 lines
11 KiB
JavaScript
Executable File
import React, { Component } from "react";
|
|
import {
|
|
Platform,
|
|
StyleSheet,
|
|
View,
|
|
TouchableOpacity,
|
|
SafeAreaView,
|
|
ScrollView,
|
|
Image,
|
|
Linking,
|
|
Alert,
|
|
Share
|
|
} from "react-native";
|
|
import Text from "react-native-text";
|
|
import { observable } from "mobx";
|
|
import { observer, inject } from "mobx-react/native";
|
|
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
|
import Size from "../../config/size";
|
|
import Icon from "react-native-vector-icons/dist/Ionicons";
|
|
import Icon2 from "react-native-vector-icons/dist/MaterialCommunityIcons";
|
|
import { width, height } from "../../config/screen";
|
|
import theme from "../../config/colors";
|
|
import { Fonts } from "../../config/fonts";
|
|
import DrawerNavigationHeader from "../../components/Public/drawerNavigationHeader";
|
|
import PopupDialog, { SlideAnimation } from "react-native-popup-dialog";
|
|
import language from "../../config/language";
|
|
const size = new Size();
|
|
const slideAnimation = new SlideAnimation({
|
|
slideFrom: "bottom"
|
|
});
|
|
|
|
@inject(["menuStore"], ["userStore"])
|
|
@observer
|
|
export default class SettingInside extends Component {
|
|
@observable
|
|
items = [
|
|
{
|
|
icon: require("../../images/settinglang.png"),
|
|
popup: true,
|
|
screen: "language",
|
|
id: 0
|
|
},
|
|
|
|
{
|
|
icon: require("../../images/settingnotification.png"),
|
|
screen: "NotificationSetting",
|
|
popup: true,
|
|
id: 1
|
|
},
|
|
{
|
|
icon: require("../../images/settinghowtouse.png"),
|
|
popup: true,
|
|
id: 2
|
|
},
|
|
|
|
{
|
|
icon: require("../../images/settinglogout.png"),
|
|
popup: true,
|
|
id: 3
|
|
}
|
|
];
|
|
@observable
|
|
lang = false;
|
|
constructor(props) {
|
|
super(props);
|
|
this.store = this.props.menuStore;
|
|
this.userStore = this.props.userStore;
|
|
}
|
|
|
|
static navigationOptions = {
|
|
drawerLabel: "Settings",
|
|
swipeEnabled: false,
|
|
tabBarLabel: language.en.setting
|
|
};
|
|
|
|
getTitle(id) {
|
|
switch (id) {
|
|
case 0:
|
|
return this.props.userStore.text.language;
|
|
break;
|
|
case 1:
|
|
return this.props.userStore.text.notification;
|
|
break;
|
|
case 2:
|
|
return this.props.userStore.text.howtouse;
|
|
break;
|
|
case 3:
|
|
return this.props.userStore.text.logout;
|
|
break;
|
|
}
|
|
}
|
|
|
|
componentWillMount() {
|
|
if (this.userStore.languageSelection == "english") {
|
|
this.lang = false;
|
|
} else {
|
|
this.lang = true;
|
|
}
|
|
}
|
|
|
|
languageText() {
|
|
if (this.userStore.languageSelection == "english") {
|
|
return "English";
|
|
} else {
|
|
return "繁體中文";
|
|
}
|
|
}
|
|
|
|
languageView(id) {
|
|
if (id == 0) {
|
|
return (
|
|
<View style={{ justifyContent: "center" }}>
|
|
<Text
|
|
style={{
|
|
fontSize: 15,
|
|
marginRight: scale(30),
|
|
color: theme.coolGrey,
|
|
fontWeight: "bold",
|
|
fontFamily: Fonts.century
|
|
}}
|
|
>
|
|
{this.languageText()}
|
|
</Text>
|
|
</View>
|
|
);
|
|
} else {
|
|
return <View />;
|
|
}
|
|
}
|
|
|
|
onPressAction(index) {
|
|
if (this.items[index].popup) {
|
|
switch (index) {
|
|
case 0:
|
|
this.languagePagePopUp();
|
|
break;
|
|
case 1:
|
|
Linking.openURL("app-settings:");
|
|
break;
|
|
case 2:
|
|
this.props.navigation.navigate("Tutorial", { data: "setting" });
|
|
break;
|
|
case 3:
|
|
this.logoutAlert();
|
|
break;
|
|
}
|
|
} else {
|
|
console.log(this.items[index].screen);
|
|
this.props.navigation.navigate(this.items[index].screen);
|
|
}
|
|
}
|
|
|
|
logoutAlert() {
|
|
Alert.alert(
|
|
"Logout",
|
|
"Are you sure to Logout?",
|
|
[
|
|
{
|
|
text: "Cancel",
|
|
onPress: () => console.log("Cancel Pressed"),
|
|
style: "cancel"
|
|
},
|
|
{ text: "Sure", onPress: () => this.logoutAction() }
|
|
],
|
|
{ cancelable: false }
|
|
);
|
|
}
|
|
|
|
referYourFriender() {
|
|
Share.share({
|
|
message: "Hello,Come to join Hangry, this is my refer code: ",
|
|
title: "Hangry no more"
|
|
});
|
|
}
|
|
|
|
logoutAction() {
|
|
this.userStore.logoutPost(this, false);
|
|
}
|
|
navigatieAction(page) {
|
|
this.props.navigation.navigate(page);
|
|
}
|
|
|
|
renderItems() {
|
|
return this.items.map((item, index, array) => {
|
|
if (item.id == 3 && !this.userStore.logined) {
|
|
return null;
|
|
} else {
|
|
if (item.id == 1 && Platform.OS !== 'ios') {
|
|
return null;
|
|
}else{
|
|
return (
|
|
<TouchableOpacity
|
|
style={{ marginBottom: 20, marginLeft: 25, paddingRight: 25 }}
|
|
onPress={() => this.onPressAction(index)}
|
|
>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between"
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
}}
|
|
>
|
|
<Image source={item.icon} />
|
|
<Text
|
|
style={{
|
|
fontSize: 15,
|
|
marginLeft: 10,
|
|
color: theme.coolGrey,
|
|
fontWeight: "bold",
|
|
fontFamily: Fonts.century
|
|
}}
|
|
>
|
|
{this.getTitle(item.id)}
|
|
</Text>
|
|
</View>
|
|
<View style={{ flexDirection: "row" }}>
|
|
{this.languageView(item.id)}
|
|
<Icon
|
|
name={"ios-arrow-forward"}
|
|
size={size.getSize(35)}
|
|
color={theme.coolGrey}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View
|
|
style={{
|
|
backgroundColor: theme.inputBgc,
|
|
flex: 1,
|
|
marginTop: 5,
|
|
marginLeft: 40,
|
|
height: 1
|
|
}}
|
|
/>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
languagePagePopUp() {
|
|
this.popupDialog.show();
|
|
}
|
|
|
|
languagePageDismiss() {
|
|
this.popupDialog.dismiss();
|
|
}
|
|
|
|
updateUser() {
|
|
if (this.lang) {
|
|
this.userStore.saveLanguage("chinese");
|
|
this.popupDialog.dismiss();
|
|
} else {
|
|
this.userStore.saveLanguage("english");
|
|
this.popupDialog.dismiss();
|
|
}
|
|
}
|
|
|
|
languagePageDismissedCallBack() {
|
|
console.log("dismiss dialog");
|
|
if (this.userStore.languageSelection == "english") {
|
|
this.lang = false;
|
|
} else {
|
|
this.lang = true;
|
|
}
|
|
}
|
|
|
|
selectIcon(lang) {
|
|
if (!lang) {
|
|
if (!this.lang) {
|
|
return (
|
|
<Icon2
|
|
name={"checkbox-blank-circle"}
|
|
size={size.getSize(35)}
|
|
color={theme.mainColor}
|
|
/>
|
|
);
|
|
} else {
|
|
return (
|
|
<Icon2
|
|
name={"checkbox-blank-circle-outline"}
|
|
size={size.getSize(35)}
|
|
color={theme.mainColor}
|
|
/>
|
|
);
|
|
}
|
|
} else {
|
|
if (!this.lang) {
|
|
return (
|
|
<Icon2
|
|
name={"checkbox-blank-circle-outline"}
|
|
size={size.getSize(35)}
|
|
color={theme.mainColor}
|
|
/>
|
|
);
|
|
} else {
|
|
return (
|
|
<Icon2
|
|
name={"checkbox-blank-circle"}
|
|
size={size.getSize(35)}
|
|
color={theme.mainColor}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<View style={{ height: verticalScale(40) }}>
|
|
<Icon2
|
|
name="chevron-left"
|
|
size={size.getSize(40)}
|
|
color={"white"}
|
|
style={{ marginLeft: 10 }}
|
|
onPress={() => this.props.navigation.goBack()}
|
|
/>
|
|
</View>
|
|
<ScrollView style={{ backgroundColor: "white" }}>
|
|
<View
|
|
style={{
|
|
backgroundColor: "white",
|
|
width: width,
|
|
marginTop: 25
|
|
}}
|
|
>
|
|
{this.renderItems()}
|
|
<View style={{ flex: 1, alignItems: "flex-end", paddingRight: 25 }}>
|
|
<Text
|
|
style={{
|
|
fontFamily: Fonts.century,
|
|
color: theme.coolGrey,
|
|
fontSize: 10
|
|
}}
|
|
>
|
|
{"Ver 4.4 28 - 3 - 2019"}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
<PopupDialog
|
|
ref={popupDialog => {
|
|
this.popupDialog = popupDialog;
|
|
}}
|
|
dialogAnimation={slideAnimation}
|
|
height={height / 4}
|
|
width={width - scale(60)}
|
|
onDismissed={() => this.languagePageDismissedCallBack()}
|
|
>
|
|
<View style={{ flex: 1, justifyContent: "space-between" }}>
|
|
<View style={{ flex: 4, paddingTop: 5 }}>
|
|
<Text
|
|
style={{
|
|
paddingLeft: 5,
|
|
fontSize: 15,
|
|
color: theme.coolGrey,
|
|
fontWeight: "bold",
|
|
fontFamily: Fonts.century
|
|
}}
|
|
>
|
|
{this.userStore.text.slectLang}
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={{
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center"
|
|
}}
|
|
onPress={() => (this.lang = false)}
|
|
>
|
|
<Text
|
|
style={{
|
|
paddingLeft: 5,
|
|
fontSize: 15,
|
|
color: theme.coolGrey,
|
|
fontWeight: "bold",
|
|
fontFamily: Fonts.century
|
|
}}
|
|
>
|
|
English
|
|
</Text>
|
|
{this.selectIcon(false)}
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={{
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center"
|
|
}}
|
|
onPress={() => (this.lang = true)}
|
|
>
|
|
<Text
|
|
style={{
|
|
paddingLeft: 5,
|
|
fontSize: 15,
|
|
color: theme.coolGrey,
|
|
fontWeight: "bold",
|
|
fontFamily: Fonts.century
|
|
}}
|
|
>
|
|
繁體中文
|
|
</Text>
|
|
{this.selectIcon(true)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
<TouchableOpacity
|
|
onPress={() => this.updateUser()}
|
|
style={{
|
|
backgroundColor: theme.mainColor,
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 15,
|
|
color: "white",
|
|
fontWeight: "bold",
|
|
fontFamily: Fonts.century
|
|
}}
|
|
>
|
|
OK
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</PopupDialog>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: theme.mainColor
|
|
}
|
|
});
|