308 lines
9.0 KiB
JavaScript
308 lines
9.0 KiB
JavaScript
|
//plugin
|
||
|
import React, { Component } from "react";
|
||
|
import Text from "react-native-text";
|
||
|
import {
|
||
|
StyleSheet,
|
||
|
View,
|
||
|
FlatList,
|
||
|
TouchableOpacity,
|
||
|
Image
|
||
|
} from "react-native";
|
||
|
import { observable, transaction } from "mobx";
|
||
|
import { width, height } from "../../config/screen";
|
||
|
import Icon from "react-native-vector-icons/dist/MaterialCommunityIcons";
|
||
|
import { observer, inject } from "mobx-react/native";
|
||
|
import FastImage from "react-native-fast-image";
|
||
|
import firebase from "react-native-firebase";
|
||
|
import Log from '../../config/log'
|
||
|
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
||
|
// function
|
||
|
import Size from "../../config/size";
|
||
|
import theme from "../../config/colors";
|
||
|
import { Fonts } from "../../config/fonts";
|
||
|
|
||
|
var size = new Size();
|
||
|
var log = new Log();
|
||
|
@inject(["menuStore"], ["userStore"])
|
||
|
@observer
|
||
|
export default class ListItem extends Component {
|
||
|
@observable
|
||
|
soldout = false
|
||
|
constructor(props) {
|
||
|
super(props);
|
||
|
this.store = this.props.menuStore;
|
||
|
this.userStore = this.props.userStore;
|
||
|
}
|
||
|
|
||
|
recommended() {
|
||
|
return (
|
||
|
<Image
|
||
|
style={{
|
||
|
position: "absolute",
|
||
|
top: -5,
|
||
|
left: -5,
|
||
|
height: verticalScale(100),
|
||
|
width: scale(110)
|
||
|
}}
|
||
|
resizeMode={"contain"}
|
||
|
source={require("../../images/recommendation.png")}
|
||
|
/>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
componentDidMount(){
|
||
|
if(this.props.items.quota - this.props.items.sold == 0){
|
||
|
this.soldout = true
|
||
|
}else{
|
||
|
this.soldout = false
|
||
|
}
|
||
|
}
|
||
|
foodAttributes() {
|
||
|
return (
|
||
|
<View
|
||
|
style={{
|
||
|
position: "absolute",
|
||
|
top: -5,
|
||
|
right: 5
|
||
|
}}
|
||
|
>
|
||
|
<Image
|
||
|
style={{ height: verticalScale(40), width: scale(40) }}
|
||
|
source={require("../../images/spicy.png")}
|
||
|
/>
|
||
|
<Image
|
||
|
style={{ height: verticalScale(40), width: scale(40) }}
|
||
|
source={require("../../images/vegetarian.png")}
|
||
|
/>
|
||
|
</View>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
add() {
|
||
|
if(!this.soldout){
|
||
|
this.store.addCount(this.props.items.id);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
sum() {
|
||
|
if(!this.soldout){
|
||
|
this.store.sumCount(this.props.items.id);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
onClickAction() {
|
||
|
transaction(() => {
|
||
|
this.store.menuDetails.id = this.props.items.id;
|
||
|
if (!this.userStore.logined) {
|
||
|
this.store.menuDetails.tel = "";
|
||
|
} else {
|
||
|
this.store.menuDetails.tel = this.userStore.userData.data.mobile;
|
||
|
}
|
||
|
this.store.menuDetails.count = this.props.items.count;
|
||
|
this.store.menuDetails.price = this.props.items.price;
|
||
|
this.store.menuDetails.imageURL = this.props.items.cuisine.photo;
|
||
|
this.store.menuDetails.name = this.props.items.cuisine.name;
|
||
|
this.store.menuDetails.nameEn = this.props.items.cuisine.nameEn;
|
||
|
this.store.menuDetails.tags = this.props.items.cuisine.tags;
|
||
|
this.store.menuDetails.intro_ch = this.props.items.cuisine.description;
|
||
|
this.store.menuDetails.intro_en = this.props.items.cuisine.descriptionEn;
|
||
|
this.store.menuDetails.restaurant.name = this.props.items.cuisine.restaurant.name;
|
||
|
this.store.menuDetails.restaurant.nameEn = this.props.items.cuisine.restaurant.nameEn;
|
||
|
this.store.menuDetails.restaurant.addr = this.props.items.cuisine.restaurant.addr;
|
||
|
this.store.menuDetails.restaurant.addrEn = this.props.items.cuisine.restaurant.addrEn;
|
||
|
});
|
||
|
this.props.menu.foodInformationPagePopUp();
|
||
|
// firebase.analytics().logEvent('click_food_details', { foodName: this.store.menuDetails.nameEn });
|
||
|
log.firebaseLog('click_food_details',{foodName: this.store.menuDetails.nameEn,logined: this.userStore.logined})
|
||
|
}
|
||
|
|
||
|
getViewStye() {
|
||
|
if(this.props.index == this.store.menu.data.content.length-1) {
|
||
|
return {
|
||
|
marginBottom: 80, alignItems: "center"
|
||
|
}
|
||
|
} else {
|
||
|
return {
|
||
|
marginBottom: 20, alignItems: "center"
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
render() {
|
||
|
|
||
|
var lang = this.userStore.languageSelection;
|
||
|
return (
|
||
|
<View style={this.getViewStye()}>
|
||
|
<TouchableOpacity
|
||
|
style={{
|
||
|
width: width,
|
||
|
height: verticalScale(210),
|
||
|
alignItems: "center",
|
||
|
justifyContent: "center"
|
||
|
}}
|
||
|
onPress={() => this.onClickAction()}
|
||
|
>
|
||
|
<FastImage
|
||
|
style={{
|
||
|
width: this.props.screenWidth - scale(25),
|
||
|
height: verticalScale(200),
|
||
|
backgroundColor: theme.mainColor
|
||
|
}}
|
||
|
source={{ uri: this.props.items.cuisine.photo }}
|
||
|
>
|
||
|
<View
|
||
|
style={{
|
||
|
backgroundColor: theme.menuPriceBoxBackgroundColor,
|
||
|
alignItems: "center",
|
||
|
justifyContent: "center",
|
||
|
height: verticalScale(40),
|
||
|
width: scale(100),
|
||
|
flexDirection: "row",
|
||
|
position: "absolute",
|
||
|
right: 0,
|
||
|
top: 0
|
||
|
}}
|
||
|
>
|
||
|
<Text
|
||
|
style={{
|
||
|
color: theme.foodNameColor,
|
||
|
fontWeight: "bold",
|
||
|
fontSize: 20,
|
||
|
fontFamily: "CenturyGothic"
|
||
|
}}
|
||
|
numberOfLines={1}
|
||
|
>
|
||
|
HKD ${this.props.items.price}
|
||
|
</Text>
|
||
|
</View>
|
||
|
{
|
||
|
this.soldout?( <View
|
||
|
style={{
|
||
|
position: "absolute",
|
||
|
backgroundColor: "rgba(255,183,23,0.7)",
|
||
|
alignItems: "center",
|
||
|
justifyContent: "center",
|
||
|
width: this.props.screenWidth - scale(25),
|
||
|
height: verticalScale(200),
|
||
|
}}
|
||
|
>
|
||
|
<Text
|
||
|
style={{
|
||
|
color: 'white',
|
||
|
fontWeight: "bold",
|
||
|
fontSize: 30,
|
||
|
fontFamily: "CenturyGothic",
|
||
|
marginBottom:verticalScale(35)
|
||
|
}}
|
||
|
numberOfLines={1}
|
||
|
>
|
||
|
Sold out
|
||
|
</Text>
|
||
|
</View>):(
|
||
|
<View/>
|
||
|
)
|
||
|
|
||
|
}
|
||
|
</FastImage>
|
||
|
</TouchableOpacity>
|
||
|
|
||
|
{/* <View
|
||
|
style={{
|
||
|
width: this.props.screenWidth - 10,
|
||
|
height: verticalScale(70),
|
||
|
borderColor: "gray",
|
||
|
borderWidth: 1,
|
||
|
alignItems: "center"
|
||
|
}}
|
||
|
>
|
||
|
<Text style={{ marginTop: 20 }} numberOfLines={2}>
|
||
|
{this.props.items.cuisine.description}
|
||
|
|| {this.props.items.cuisine.descriptionEn}
|
||
|
</Text>
|
||
|
</View> */}
|
||
|
|
||
|
<View
|
||
|
style={{
|
||
|
width: this.props.screenWidth - 25,
|
||
|
justifyContent: "center",
|
||
|
alignItems: "center",
|
||
|
height: verticalScale(50),
|
||
|
backgroundColor: theme.menuPriceBoxBackgroundColor,
|
||
|
flexDirection: "row",
|
||
|
position: "absolute",
|
||
|
bottom: verticalScale(0)
|
||
|
}}
|
||
|
>
|
||
|
<View
|
||
|
style={{
|
||
|
width: "65%",
|
||
|
height: "100%",
|
||
|
paddingLeft: scale(10),
|
||
|
borderTopLeftRadius: verticalScale(25),
|
||
|
borderBottomLeftRadius: verticalScale(25),
|
||
|
justifyContent: "center"
|
||
|
}}
|
||
|
>
|
||
|
<Text
|
||
|
style={{
|
||
|
color: theme.foodNameColor,
|
||
|
fontFamily: Fonts.century,
|
||
|
fontWeight: "bold"
|
||
|
}}
|
||
|
numberOfLines={1}
|
||
|
>
|
||
|
{this.userStore.dataLanguage(this.props.items.cuisine, "name")}
|
||
|
</Text>
|
||
|
|
||
|
<Text
|
||
|
style={{
|
||
|
color: theme.foodNameColor,
|
||
|
fontFamily: Fonts.century,
|
||
|
fontSize: 11
|
||
|
}}
|
||
|
numberOfLines={1}
|
||
|
>
|
||
|
{this.userStore.dataLanguage(
|
||
|
this.props.items.cuisine.restaurant,
|
||
|
"name"
|
||
|
)}
|
||
|
</Text>
|
||
|
</View>
|
||
|
|
||
|
<View
|
||
|
style={{
|
||
|
width: "35%",
|
||
|
height: "100%",
|
||
|
borderTopRightRadius: verticalScale(25),
|
||
|
borderBottomRightRadius: verticalScale(25),
|
||
|
justifyContent: "space-between",
|
||
|
alignItems: "center",
|
||
|
flexDirection: "row"
|
||
|
}}
|
||
|
>
|
||
|
<Icon
|
||
|
name="minus-circle-outline"
|
||
|
size={size.getSize(24)}
|
||
|
color={theme.foodNameColor}
|
||
|
style={{ marginLeft: moderateScale(20) }}
|
||
|
onPress={() => this.sum()}
|
||
|
/>
|
||
|
<Text
|
||
|
style={{ color: theme.foodNameColor, fontFamily: Fonts.century }}
|
||
|
>
|
||
|
{this.props.items.count}
|
||
|
</Text>
|
||
|
<Icon
|
||
|
name="plus-circle-outline"
|
||
|
size={size.getSize(24)}
|
||
|
color={theme.foodNameColor}
|
||
|
style={{ marginRight: moderateScale(20) }}
|
||
|
onPress={() => this.add()}
|
||
|
/>
|
||
|
</View>
|
||
|
</View>
|
||
|
</View>
|
||
|
);
|
||
|
}
|
||
|
}
|