myself/Hangry
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

edited

Browse Source
This commit is contained in:
Philip Cheung
2024-02-27 16:19:55 +08:00
commit feebeffcd9
141 changed files with 25124 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
app/components/Menu/googleAutoComplete.js Executable file
View File

@@ -0,0 +1,189 @@
import React, { Component } from "react";
import {
Platform,
StyleSheet,
View,
Alert,
NetInfo,
Geolocation,
TouchableOpacity,
SafeAreaView,
StatusBar,
Image
} from "react-native";
import Header from "../../components/Public/header";
import Text from "react-native-text";
import { SearchBar } from "react-native-elements";
import { observer, inject } from "mobx-react/native";
import { observable, transaction } from "mobx";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import { width, height } from "../../config/screen";
import MapView, { Polyline } from "react-native-maps";
import MapViewDirections from "react-native-maps-directions";
import AsyncStorageHelper from "../../config/asyncStorageHelper";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import theme from "../../config/colors";
import Size from "../../config/size";
import { Fonts } from "../../config/fonts";
import MyStatusBar from "../../components/Public/statusBar";
const asyncStorageHelper = new AsyncStorageHelper();
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
const origin = { latitude: 22.320508, longitude: 114.170222 };
const destination = { latitude: 22.320568, longitude: 114.171273 };
const GOOGLE_MAPS_APIKEY = "AIzaSyBM8eEWcSWBuZcM0lGH_JSoDjgImlqHwPs";
const size = new Size();
@observer
@inject(["menuStore"], ["userStore"])
export default class GoogleAutoComplete extends Component {
constructor(props) {
super(props);
this.store = this.props.menuStore;
this.userStore = this.props.userStore;
}
blur() {
// this.secondTextInput.onBlur();
}
getIndex(id) {
var index = this.userStore.pickupPointLabel.findIndex(function(item, i) {
return item.id == parseInt(id);
});
return index;
}
onTextChange(id) {
this.locationRef._onBlur();
this.locationRef.setAddressText(
this.userStore.pickupPointLabel[this.getIndex(id)].value
);
}
componentWillUnmount() {
if (this.props.onRef) {
this.props.onRef(undefined);
}
}
getIndex(id){
var index = this.userStore.pickupPointLabel.findIndex(function(item, i){
return item.id == parseInt(id)
});
return index
}
componentDidMount() {
if (this.props.onRef) {
this.props.onRef(this);
}
// this.secondTextInput.blur();
}
render() {
console.log("pickupPointId " + this.userStore.pickupPointId);
return (
<View
style={{
alignItems: "center",
backgroundColor: theme.mainColor
}}
>
<GooglePlacesAutocomplete
ref={instance => {
this.locationRef = instance;
}}
placeholder={this.userStore.text.googleSearch}
placeholderTextColor="white"
placeholderStyle={{ fontFamily: Fonts.century, fontWeight: "bold" }}
minLength={1} // minimum length of text to search
autoFocus={false}
returnKeyType={"search"} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
listViewDisplayed="false" // true/false/undefined
fetchDetails={true}
renderDescription={row => row.description} // custom description render
onPress={(data, details = null) => {
this.props.onPress && this.props.onPress(data, details);
console.log(details)
}}
textInputProps={{
onFocus: () => {
this.props.onFocus && this.props.onFocus();
}
// onBlur:() => {
// this.props.onBlur && this.props.onBlur();
// },
// onEndEditing:() => {
// this.props.onEndEditing && this.props.onEndEditing();
// },
}}
getDefaultValue={() =>
this.userStore.pickupPointLabel[this.getIndex(this.userStore.pickupPointId)]
.value
}
query={{
// available options: https://developers.google.com/places/web-service/autocomplete
key: GOOGLE_MAPS_APIKEY,
language: "zh-TW||en", // language of the results
types: ["(cities)", "(country)"],
components: "country:hk" // default: 'geocode'
}}
styles={{
textInputContainer: {
backgroundColor: theme.mainColor,
borderTopWidth: 0,
borderBottomWidth: 0,
width: width,
paddingRight: 20,
paddingLeft: 20,
marginBottom: 10
},
textInput: {
textAlign: "center",
height: verticalScale(40),
color: "white",
fontSize: 16,
borderWidth: 0,
backgroundColor: theme.searchMapInputColor,
fontFamily: Fonts.century,
fontWeight: "bold"
},
description: {
fontWeight: "bold"
},
listView: {
backgroundColor: "white"
},
predefinedPlacesDescription: {
color: "#1faadb",
}
}}
currentLocation={false} // Will add a 'Current location' button at the top of the predefined places list
currentLocationLabel="Current location"
nearbyPlacesAPI="GooglePlacesSearch" // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
GoogleReverseGeocodingQuery={
{
// available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
}
}
GooglePlacesSearchQuery={{
// available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
rankby: "distance",
types: "food"
}}
filterReverseGeocodingByTypes={[
"locality",
"administrative_area_level_3"
]} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
predefinedPlaces={this.props.perdefinedPlaces}
debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
// renderLeftButton={() => <Image source={require('path/custom/left-icon')} />}
//renderRightButton={() => <Text>Custom text </Text>}
/>
</View>
);
}
}

307
app/components/Menu/listItem.js Executable file
View File

@@ -0,0 +1,307 @@
//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>
);
}
}

248
app/components/Menu/map.js Executable file
View File

@@ -0,0 +1,248 @@
import React, { Component } from "react";
import {
Platform,
StyleSheet,
View,
Alert,
NetInfo,
Geolocation,
TouchableOpacity,
SafeAreaView,
StatusBar,
Image,
TouchableHighlight
} from "react-native";
import Header from "../../components/Public/header";
import Text from "react-native-text";
import { SearchBar } from "react-native-elements";
import { observer, inject } from "mobx-react/native";
import { observable, transaction } from "mobx";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import { width, height } from "../../config/screen";
import Permissions from "react-native-permissions";
import MapView, { Polyline } from "react-native-maps";
import MapViewDirections from "react-native-maps-directions";
import AsyncStorageHelper from "../../config/asyncStorageHelper";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import theme from "../../config/colors";
import MyStatusBar from "../../components/Public/statusBar";
const asyncStorageHelper = new AsyncStorageHelper();
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
const origin = { latitude: 22.320508, longitude: 114.170222 };
const destination = { latitude: 22.320568, longitude: 114.171273 };
const GOOGLE_MAPS_APIKEY = "AIzaSyB_9Wi7BcAgqMPxZvW_5DWb8UxF5W9tWz0";
@inject(["menuStore"], ["userStore"])
@observer
export default class Map extends Component {
@observable
markerId = null;
@observable
region = {
latitude: 22.396427,
longitude: 114.109497,
latitudeDelta: 1,
longitudeDelta: 1
};
constructor(props) {
super(props);
this.store = this.props.menuStore;
this.userStore = this.props.userStore;
this.state = {
region: {
latitude: null,
longitude: null,
latitudeDelta: 1,
longitudeDelta: 1
}
};
}
_requestPermission() {
Permissions.request("location").then(response => {
// Returns once the user has chosen to 'allow' or to 'not allow' access
// Response is one of: 'authorized', 'denied', 'restricted', or 'undetermined'
// this.setState({ photoPermission: response })
if (
response == "allow" ||
response == "restricted" ||
response == "authorized"
) {
navigator.geolocation.getCurrentPosition(
position => {
console.log(position.coords.latitude);
this.map.animateToRegion({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: 0.02,
longitudeDelta: 0.02
});
},
error => {
console.log(error);
this.region = {
latitude: 22.396427,
longitude: 114.109497,
latitudeDelta: 1,
longitudeDelta: 1
};
},
{ enableHighAccuracy: false, timeout: 4000, maximumAge: 10000 }
);
} else {
this.region = {
latitude: 22.396427,
longitude: 114.109497,
latitudeDelta: 1,
longitudeDelta: 1
};
}
});
}
goPosition(data, details) {
this.map.animateToRegion({
latitude: details.geometry.location.lat,
longitude: details.geometry.location.lng,
latitudeDelta: 0.02,
longitudeDelta: 0.02
});
for (var i = 0; i < this.props.perfdefinedPlaces.length; i++) {
if (
this.props.perfdefinedPlaces[i].geometry.location.lat ==
details.geometry.location.lat &&
this.props.perfdefinedPlaces[i].geometry.location.lng ==
details.geometry.location.lng
) {
this.markerId = this.props.perfdefinedPlaces[i].id
break;
}
}
console.log(details);
}
clickMarkerAction(id) {
this.markerId = id;
this.store.pickupPointId = id;
this.userStore.pickupPointId = id;
}
picked(id) {
asyncStorageHelper.saveData("pickupPointId", id);
this.store.getMenuItem(this);
//this.props.navigation.navigate('menu')
}
confirmButton() {
if (!this.markerId) {
return null;
} else {
return (
<TouchableHighlight
style={{
height: verticalScale(60),
width: width,
backgroundColor: theme.mainColor,
alignItems: "center",
justifyContent: "center"
}}
onPress={() => {
this.props.onPress && this.props.onPress(this.markerId);
}}
>
<Text style={{ color: "white", fontWeight: "bold" }}>
{this.userStore.text.confirm}
</Text>
</TouchableHighlight>
);
}
}
componentWillMount() {
this.setUserLocation();
this._requestPermission();
if (this.props.onRef) {
this.props.onRef(undefined);
}
}
componentDidMount() {
if (this.props.onRef) {
this.props.onRef(this);
}
}
setUserLocation() {
console.log(this.userStore.userLocation);
if (this.userStore.userLocation === null) {
this.setState({
region: {
latitude: 22.396427,
longitude: 114.109497,
latitudeDelta: 1,
longitudeDelta: 1
}
});
} else {
this.setState({
region: {
latitude: this.userStore.userLocation.coords.latitude,
longitude: this.userStore.userLocation.coords.longitude,
latitudeDelta: 0.02,
longitudeDelta: 0.02
}
});
}
}
render() {
return (
<View style={styles.container}>
<MapView
ref={ref => {
this.map = ref;
}}
style={{ width: width, flex: 1 }}
showsUserLocation={true}
initialRegion={this.region}
>
{this.userStore.pickupPointLabel.map(marker => (
<MapView.Marker
coordinate={{ latitude: marker.lat, longitude: marker.lng }}
title={marker.name}
onPress={() => this.clickMarkerAction(marker.id)}
>
<Image
resizeMode={"contain"}
source={require("../../images/maplocator.png")}
style={{ width: scale(50), height: scale(50) }}
/>
</MapView.Marker>
))}
</MapView>
{this.confirmButton()}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 5
}
});

160
app/components/Menu/menuDetailsView.js Executable file
View File

@@ -0,0 +1,160 @@
import React, { Component } from "react";
import {
TextInput,
View,
ScrollView,
StyleSheet,
TouchableOpacity,
Image
} from "react-native";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Size from "../../config/size";
import Text from "react-native-text";
import FastImage from "react-native-fast-image";
import { width, height } from "../../config/screen";
import Icon from "react-native-vector-icons/dist/Ionicons";
import theme from "../../config/colors";
import { Fonts } from "../../config/fonts";
import { observable, transaction } from "mobx";
import { observer, inject } from "mobx-react/native";
const size = new Size();
@inject(["menuStore"], ["userStore"])
@observer
export default class MenuDetailsView extends Component {
constructor(props) {
super(props);
this.store = this.props.menuStore;
this.userStore = this.props.userStore;
}
separate(index) {
// console.log(index + " "+ this.store.menuDetails.tags.size)
if (index < 2) {
return (
<View
style={{
backgroundColor: theme.mainColor,
width: 2,
height: size.getSize(10),
marginRight: 3
}}
/>
);
}
}
tags() {}
render() {
console.log(this.userStore.languageSelection);
console.log(this.store.menuDetails.tags);
const tagsLoop = this.store.menuDetails.tags.map((tags, index) => (
<View style={{ flexDirection: "row" }}>
<Text style={[styles.TextStyle, { fontSize: 13, marginRight: 3 }]}>
{this.userStore.dataLanguage(tags, "name")}
</Text>
{this.separate(index)}
</View>
));
return (
<View style={{ flex: 1 }}>
<TouchableOpacity
style={{ backgroundColor: "#E6E6E6", width: width }}
onPress={() => this.props.self.foodInformationPageDismiss()}
>
<View
style={{
width: "100%",
height: 50,
alignItems: "center",
justifyContent: "center",
backgroundColor: "white"
}}
>
<Icon name="ios-arrow-down" size={size.getSize(25)} color="black" />
</View>
</TouchableOpacity>
<FastImage
style={{
width: width - 40,
height: verticalScale(200),
borderRadius: 4,
alignItems: "center",
marginLeft: 20
}}
source={{ uri: this.store.menuDetails.imageURL }}
>
<View
style={{
backgroundColor: theme.menuPriceBoxBackgroundColor,
alignItems: "center",
justifyContent: "center",
height: verticalScale(40),
width: scale(100),
flexDirection: "row",
position: "absolute",
right: 0,
bottom: 0
}}
>
<Text
style={{
color: theme.foodNameColor,
fontWeight: "bold",
fontSize: 20,
fontFamily: "CenturyGothic"
}}
numberOfLines={1}
>
HKD ${this.store.menuDetails.price}
</Text>
</View>
</FastImage>
<ScrollView style={{ paddingTop: 10, paddingRight: 20, paddingLeft: 20 }}>
<Text style={[styles.TextStyle, { fontSize: 15 }]}>
{this.userStore.dataLanguage(this.store.menuDetails, "name")}
</Text>
<Text style={[styles.TextStyle, { fontSize: 13, paddingTop: 5 }]}>
{this.userStore.dataLanguage(
this.store.menuDetails.restaurant,
"name"
)}
</Text>
<Text style={[styles.TextStyle, { fontSize: 13,paddingTop: 5 }]}>
{this.userStore.dataLanguage(
this.store.menuDetails.restaurant,
"addr"
)}
</Text>
<View style={{ flexDirection: "row" ,paddingTop: 5}}>
{tagsLoop}
</View>
<Text style={[styles.TextStyle, { fontSize: 13, paddingTop: 5, marginBottom: 40, }]}>
{this.userStore.dataLanguage(this.store.menuDetails, "intro")}
</Text>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
marginSide: {
marginRight: 10,
marginLeft: 10
},
introView: {
marginRight: 10,
marginLeft: 10,
marginTop: 15,
fontSize: 20
},
TextStyle: {
fontFamily: Fonts.century,
color: theme.coolGrey
}
});

109
app/components/Menu/menuFlatList.js Executable file
View File

@@ -0,0 +1,109 @@
import React, { Component } from 'react';
import Text from 'react-native-text';
import {StyleSheet, View, FlatList,ActivityIndicator} from 'react-native';
import Size from '../../config/size'
import { observer,inject } from 'mobx-react/native'
import ListItem from './listItem'
import { width, height } from '../../config/screen';
@inject(["menuStore"], ["userStore"])
@observer
export default class MenuFlatList extends Component{
constructor(props) {
super(props);
this.store = this.props.menuStore
this.userStore = this.props.userStore
}
_renderFooter(){
if (this.store.pageNo == this.store.totalPage) {
console.log('no more')
return (
<View style={{height:30,alignItems:'center',justifyContent:'flex-start',}}>
<Text style={{color:'#999999',fontSize:14,marginTop:5,marginBottom:5,}}>
No more
</Text>
</View>
);
} else if(this.store.pageNo < this.store.totalPage) {
console.log('loading')
return (
<View style={styles.footer}>
<ActivityIndicator />
<Text>Loading...</Text>
</View>
);
}else{
return null
}
}
_onEndReached(){
if(this.store.loading){
console.log('pull loading')
return ;
}
if((this.store.pageNo!=1) && (this.store.pageNo>=this.store.totalPage)){
console.log('last page')
return;
} else {
console.log( 'pull load more ')
this.store.pageNo++;
console.log(this.store.pageNo)
this.store.menuloadmore()
}
}
render(){
return(
<FlatList
data = {this.props.data.data.content}
renderItem = {({item,index}) => <ListItem items = {item} index = {index}
screenWidth = {width}
menu = {this.props.menu}
/>}
//refreshing={this.store.loading}
//onRefresh = {()=>{console.log('reload'); this.store.getMenuItem(this);}}
// ListFooterComponent={this._renderFooter.bind(this)}
// onEndReached= {this._onEndReached.bind(this)}
// onEndReachedThreshold={10}//执行上啦的时候10%执行
/>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
title: {
fontSize: 15,
color: 'blue',
},
footer:{
flexDirection:'row',
height:24,
justifyContent:'center',
alignItems:'center',
marginBottom:10,
},
content: {
fontSize: 15,
color: 'black',
}
});

189
app/components/Menu/topMessageText.js Executable file
View File

@@ -0,0 +1,189 @@
import React, { Component } from "react";
import Text from "react-native-text";
import { StyleSheet, View } from "react-native";
import { observable, transaction } from "mobx";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import { observer, inject } from "mobx-react/native";
import Size from "../../config/size";
import theme from "../../config/colors";
import { Fonts } from "../../config/fonts";
const size = new Size();
@inject(["menuStore"])
@observer
export default class TopMessageText extends Component {
orderClose = false;
constructor(props) {
super(props);
this.store = this.props.menuStore;
this.state = {
time: this.timeInit(),
amPm: "am",
countDownTime: ""
};
this.getTime = this.getTime.bind(this);
}
getInitialState() {
return {
time: "00:00:00",
amPm: "am"
};
}
secToCountDownTimer() {
var time1 = this.props.date.getTime();
var time2 = new Date().getTime();
var diff = Math.abs(time1 - time2);
addZero = n => (n < 10 ? "0" + n : n);
var min = addZero(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)));
var second = addZero(Math.floor((diff % (1000 * 60)) / 1000));
this.setState({ countDownTime: `${min}:${second}` });
}
countDownTimer() {
if (
this.props.date.getDate() == new Date().getDate() &&
this.props.date.getMonth() == new Date().getMonth() &&
this.props.date.getHours() - new Date().getHours() == 1
) {
return (
<View
style={{
width: "50%",
justifyContent: "center",
alignItems: "flex-end",
}}
>
<Text
style={{ color: "white", fontSize: 12, ontFamily: Fonts.century }}
>
{this.state.countDownTime + " remain"}
</Text>
</View>
);
} else {
return <View />;
}
}
timeInit() {
const takeTwelve = n => (n > 12 ? n - 12 : n),
addZero = n => (n < 10 ? "0" + n : n);
let d, h, m, s, t, amPm;
d = this.props.date;
h = addZero(takeTwelve(d.getHours()));
m = addZero(d.getMinutes());
s = addZero(d.getSeconds());
amPm = d.getHours() >= 12 ? "p.m" : "a.m";
t = `${h}:${m}${amPm}`;
return t;
}
componentDidMount() {
this.loadInterval = setInterval(this.getTime, 1000);
}
getTime() {
this.secToCountDownTimer();
}
componentWillMount() {
this.secToCountDownTimer();
this.setState({ time: this.timeInit() });
}
message() {
var month = new Array(12);
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var date = this.props.date;
return (
"Menu For " +
date.getUTCDate() +
"-" +
month[date.getMonth()] +
"-" +
date.getFullYear()
);
}
cutoffDateHandle() {
this.props.date;
}
render() {
const countDown = this.store.date;
if (this.orderClose == false) {
return (
<View
style={{
flex: 1,
alignItems: "center",
paddingLeft: 30,
paddingRight: 30
}}
>
<View style={{ width: "100%", marginTop: verticalScale(8) }}>
<Text
style={{
color: "white",
fontSize: 17,
fontFamily: Fonts.century,
fontWeight: "bold",
textDecorationLine: "underline"
}}
>
{this.message()}
</Text>
</View>
<View style={{ flexDirection: "row", width: "100%", marginTop:2 }}>
<View
style={{
width: "50%",
justifyContent: "center",
alignItems: "flex-start",
}}
>
<Text
style={{
color: "white",
fontSize: 12,
ontFamily: Fonts.century
}}
>
{"Orders Close at " + this.timeInit()}
</Text>
</View>
{this.countDownTimer()}
</View>
{/* <View
style={{
width: "33%",
justifyContent: "center",
alignItems: "center"
}}
>
<Text style={{ color: "white" }}>{this.store.timestamp.getHours()}</Text>
</View> */}
</View>
);
}
}
}

176
app/components/Menu/totalPriceView.js Executable file
View File

@@ -0,0 +1,176 @@
// plugin
import React, { Component } from 'react';
import Text from 'react-native-text';
import { StyleSheet, View, FlatList, TouchableOpacity, Alert } from 'react-native';
import { observer, inject } from 'mobx-react/native'
import { observable, transaction } from 'mobx';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
// function
import Size from '../../config/size';
import Log from '../../config/log'
import { width, height } from '../../config/screen';
const size = new Size;
import AsyncStorageHelper from '../../config/asyncStorageHelper'
import theme from '../../config/colors'
const log = new Log()
const asyncStorageHelper = new AsyncStorageHelper
@inject(["menuStore"], ["userStore"])
@observer
export default class TotalPriceView extends Component {
constructor(props) {
super(props);
this.store = this.props.menuStore;
this.userStore = this.props.userStore;
}
getIndex(id){
var index = this.userStore.pickupPointLabel.findIndex(function(item, i){
return item.id == parseInt(id)
});
return index
}
deg2rad(deg) {
return deg * (Math.PI / 180)
}
getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
var R = 6371; // Radius of the earth in km
var dLat = this.deg2rad(lat2 - lat1); // deg2rad below
var dLon = this.deg2rad(lon2 - lon1);
var a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
Math.sin(dLon / 2) * Math.sin(dLon / 2)
;
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c; // Distance in km
return d;
}
clickAction() {
if (this.userStore.logined) {
asyncStorageHelper.getData('pickupPointId', pickupPointId => {
if (pickupPointId != null) {
if(this.userStore.addedCard ){
log.firebaseLog("press_order_now_button",{logined:this.userStore.logined})
this.userStore.pickupIndex = this.getIndex(pickupPointId)
this.store.getOrderedItems(this.props.self,this.userStore.userData.data.token)
}else{
Alert.alert(
'',
'Please input your credit Card info',
[
{ text: 'Cancel', onPress: () => {console.log('Cancel'),log.firebaseLog('press_creditCard_info_cancel_onMenu_alert',{logined:this.userStore.logined}) }},
{ text: 'Ok', onPress: () => {this.props.self.navigatieAction('account'),log.firebaseLog('press_creditCard_info_ok_onMenu_alert',{logined:this.userStore.logined}) }},
],
)
}
}
else {
if (this.userStore.userLocation != null) {
var Param = {}
try {
this.userStore.pickupLoactionPoint.data.content.forEach(element => {
var km = this.getDistanceFromLatLonInKm(element.lat,element.lng,this.userStore.userLocation.coords.latitude,this.userStore.userLocation.coords.longitude)
console.log(km)
if(km<1){
Param = {'title': 'Pick the loaction'}
}
});
} catch (e) {
console.log(e)
}
Alert.alert(
'',
'Please select the pickup location',
[
{ text: 'Cancel', onPress: () => console.log('Cancel') },
{ text: 'Go', onPress: () => this.props.self.navigatieAction('Location',Param) },
],
)
}else{
Alert.alert(
'',
'Please select the pickup location',
[
{ text: 'Cancel', onPress: () => console.log('Cancel') },
{ text: 'Go', onPress: () => this.props.self.navigatieAction('account') },
],
)
}
}
})
} else {
Alert.alert(
'',
'Please login',
[
{ text: 'Cancel', onPress: () => console.log('Cancel') },
{ text: 'Login', onPress: () => this.props.self.navigatieAction('Login') },
],
)
}
}
render() {
if (!this.store.selected) {
return null
} else {
return (
<View style={{
position: 'absolute',
bottom: 0,
width: width,
height: verticalScale(50),
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: theme.mainColor
}}>
<View style={{
flexDirection: 'row',
alignItems: 'center',
marginLeft: moderateScale(10),
}}>
<Icon name="md-close-circle" size={size.getSize(24)} color='white'
onPress={() => this.store.cleanAll()} />
<Text style={{ color: 'white', marginLeft: 10 }}>
HKD {this.store.totalMoney.toFixed(2)}
</Text>
</View>
<TouchableOpacity style={{
flexDirection: 'row',
alignItems: 'center',
marginRight: moderateScale(10)
}}
onPress={() => this.clickAction()}>
<Text style={{ color: 'white', marginRight: 10 }}>
ORDER NOW
</Text>
<Icon name="ios-arrow-forward" size={size.getSize(24)} color='white' />
</TouchableOpacity>
</View>
)
}
}
}

86
app/components/MyOrders/foodsRow.js Executable file
View File

@@ -0,0 +1,86 @@
import React from "react";
import { View } from "react-native";
import Text from "react-native-text";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Size from "../../config/size";
const size = new Size();
import theme from "../../config/colors";
import { Fonts } from "../../config/fonts";
import { width, height } from "../../config/screen";
const dataLanguage = (data, value, lang) => {
if (lang == "english") {
switch (value) {
case "name":
return data.nameEn;
break;
}
} else {
switch (value) {
case "name":
return data.name;
break;
}
}
};
const FoodsRow = props => {
return (
<View style={{ marginLeft: 5, marginRight: 5, marginTop: 10 }}>
<View style={{ flexDirection: "row", marginBottom: 10 }}>
<View style={{ width: "60%" }}>
<Text
style={{
color: theme.coolGrey,
fontFamily: Fonts.century,
fontWeight: "bold",
fontSize: 15
}}
>
{dataLanguage(props.items.cuisine, "name", props.lang)}
</Text>
<Text
style={{
paddingTop: 3,
color: theme.coolGrey,
fontFamily: Fonts.century,
fontSize: 13
}}
>
{dataLanguage(props.items.cuisine.restaurant, "name", props.lang)}
</Text>
<Text
style={{
paddingTop: 3,
color: theme.coolGrey,
fontFamily: Fonts.century,
fontSize: 13
}}
>
Quantity: {props.items.count}
</Text>
</View>
<View
style={{
width: "40%",
flexDirection: "row",
justifyContent: "flex-end"
}}
>
<Text
style={{
color: theme.coolGrey,
fontFamily: Fonts.century,
fontWeight: "bold",
fontSize: 15
}}
>
HKD ${(props.items.price*props.items.count).toFixed(2)}
</Text>
</View>
</View>
</View>
);
};
export default FoodsRow;

83
app/components/MyOrders/foodsRowForOrderDetails.js Executable file
View File

@@ -0,0 +1,83 @@
import React from "react";
import { View } from "react-native";
import Text from "react-native-text";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Size from "../../config/size";
const size = new Size();
import theme from "../../config/colors";
import { Fonts } from "../../config/fonts";
import { width, height } from "../../config/screen";
const dataLanguage = (data, value, lang) => {
if (lang == "english") {
switch (value) {
case "name":
return data.nameEn;
break;
}
} else {
switch (value) {
case "name":
return data.name;
break;
}
}
};
const FoodsRowForOrderDetails = props => {
return (
<View style={{ marginLeft: 5, marginRight: 5, marginTop: 10 }}>
<View style={{ flexDirection: "row", marginBottom: 10 }}>
<View style={{ width: "60%" }}>
<Text
style={{
color: theme.coolGrey,
fontFamily: Fonts.century,
fontWeight: "bold",
fontSize:15
}}
>
{dataLanguage(props.items.menu.cuisine, "name", props.lang)}
</Text>
<Text
style={{
paddingTop:3,
color: theme.coolGrey,
fontFamily: Fonts.century,
fontSize: 13,
}}>
{dataLanguage(props.items.menu.cuisine.restaurant, "name", props.lang)}
</Text>
<Text
style={{
paddingTop:3,
color: theme.coolGrey,
fontFamily: Fonts.century,
fontSize: 13,
}}>Quantity: {props.items.qty}</Text>
</View>
<View
style={{
width: "40%",
flexDirection: "row",
justifyContent: "flex-end"
}}
>
<Text
style={{
color: theme.coolGrey,
fontFamily: Fonts.century,
fontWeight: "bold",
fontSize:15
}}
>
HKD ${(props.items.price*props.items.qty).toFixed(2)}
</Text>
</View>
</View>
</View>
);
};
export default FoodsRowForOrderDetails;

63
app/components/MyOrders/orderFlatList.js Executable file
View File

@@ -0,0 +1,63 @@
import React, { Component } from "react";
import Text from "react-native-text";
import { StyleSheet, View, FlatList, ActivityIndicator } from "react-native";
import Size from "../../config/size";
import { observer, inject } from "mobx-react/native";
import { width, height } from "../../config/screen";
import OrderListItems from "./orderListItems";
@inject(["menuStore"], ["userStore"])
@observer
export default class OrderFlatList extends Component {
constructor(props) {
super(props);
this.store = this.props.menuStore;
this.userStore = this.props.userStore;
}
render() {
console.log(this.store.passOrder);
return (
<FlatList
data={this.props.data}
renderItem={({ item }) => (
<OrderListItems
items={item}
navigation={this.props.navigation}
screenWidth={width}
whichOrder = {this.props.whichOrder}
/>
)}
//refreshing={this.store.loading}
// onRefresh = {()=>{console.log('reload'); this.store.getMenuItem(this);}}
// ListFooterComponent={this._renderFooter.bind(this)}
// onEndReached= {this._onEndReached.bind(this)}
// onEndReachedThreshold={10}//执行上啦的时候10%执行
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
title: {
fontSize: 15,
color: "blue"
},
footer: {
flexDirection: "row",
height: 24,
justifyContent: "center",
alignItems: "center",
marginBottom: 10
},
content: {
fontSize: 15,
color: "black"
}
});

276
app/components/MyOrders/orderListItems.js Executable file
View File

@@ -0,0 +1,276 @@
//plugin
import React, { Component } from "react";
import Text from "react-native-text";
import { View, FlatList, TouchableOpacity, StyleSheet,Linking } from "react-native";
import Icon from "react-native-vector-icons/dist/Ionicons";
import { observer, inject } from "mobx-react/native";
import FastImage from "react-native-fast-image";
import { width, height } from "../../config/screen";
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();
@inject(["menuStore"], ["userStore"])
@observer
export default class OrderListItems extends Component {
constructor(props) {
super(props);
this.store = this.props.menuStore;
this.userStore = this.props.userStore;
}
foodName() {
var name = "";
if (this.props.items.items.length == 1) {
name = this.props.items.items[0].menu.cuisine.name;
} else {
this.props.items.items.forEach(element => {
name += element.menu.cuisine.name + ", ";
});
}
return name;
}
linkToEmail(){
Linking.openURL('mailto:support@hangryfood.co?subject=&body=')
}
food(items) {
return (
<View style = {{marginBottom:6}}>
<View style = {{flexDirection:'row'}}>
<View style = {{width:'40%'}}>
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold'}]}>
Food name
</Text>
</View>
<View style = {{width:'60%'}}>
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
{this.userStore.dataLanguage(
items.menu.cuisine,
"name"
)}
</Text>
</View>
</View>
<View style = {{flexDirection:'row'}}>
<View style = {{width:'40%'}}>
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold'}]}>
Restauant
</Text>
</View>
<View style = {{width:'60%'}}>
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
{this.userStore.dataLanguage(
items.menu.cuisine.restaurant,
"name"
)}
</Text>
</View>
</View>
<View style = {{flexDirection:'row',paddingLeft:20}}>
<View style = {{width:'33%',flexDirection:'row'}}>
<Text style = {{color:theme.coolGrey,fontSize:10,fontWeight:'bold',fontFamily: Fonts.century}}>
Qty.
</Text>
<Text style = {{color:theme.coolGrey,fontSize:10,fontFamily: Fonts.century,paddingLeft:4}}>
{items.qty}
</Text>
</View>
<View style = {{width:'33%',flexDirection:'row'}}>
<Text style = {{color:theme.coolGrey,fontSize:10,fontWeight:'bold',fontFamily: Fonts.century}}>
Price
</Text>
<Text style = {{color:theme.coolGrey,fontSize:10,fontFamily: Fonts.century,paddingLeft:4}}>
{"$"+items.price}
</Text>
</View>
<View style = {{width:'33%',flexDirection:'row'}}>
<Text style ={{color:theme.coolGrey,fontSize:10,fontWeight:'bold',fontFamily: Fonts.century}}>
Subtatal
</Text>
<Text style = {{color:theme.coolGrey,fontSize:10,fontFamily: Fonts.century,paddingLeft:4}}>
{ "$"+items.price*items.qty}
</Text>
</View>
</View>
</View>
);
}
discountHandle(){
if(this.props.items.discount >0){
return(
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
{"- "+this.props.items.discount}
</Text>
)
}else{
return(
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
N/A
</Text>
)
}
}
clickAction() {
if(this.props.whichOrder){
this.store.goOrderDetail(this.props.items,this)
}
//this.props.navigation.navigate("OrderDetails", { data: this.props.items });
}
go(data,time){
this.props.navigation.navigate("OrderDetails", { data: data, time: time });
}
render() {
console.log("show up " + this.props.items.status);
if (this.props.items.status != "E") {
return (
<View
style={{
marginBottom: 10,
alignItems: "center",
backgroundColor: "white",
width: width - 1
}}
>
<TouchableOpacity
onPress={() => this.clickAction()}
style={{
flexDirection: "row"
}}
>
<View style={{ width: "65%" }}>
<Text style={[styles.textView, { fontWeight: "bold",color:theme.coolGrey,fontSize:16}]}>
Order details
</Text>
<Text
style={[
styles.textView,
{ fontSize: 10, fontWeight: "bold", color: theme.mainColor }
]}
>
{"Order No: " + this.props.items.id}
</Text>
{this.props.items.items.map((items, key) => {
return <View>{this.food(items)}</View>;
})}
<View style = {{flexDirection:'row'}}>
<View style = {{width:'40%'}}>
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold'}]}>
Pick up Point
</Text>
</View>
<View style = {{width:'60%'}}>
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
{this.userStore.dataLanguage(
this.props.items.pickUpLocation,
"name"
)}
</Text>
</View>
</View>
<View style = {{flexDirection:'row'}}>
<View style = {{width:'40%'}}>
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold'}]}>
Discount
</Text>
</View>
<View style = {{width:'60%'}}>
{this.discountHandle()}
</View>
</View>
<View style = {{flexDirection:'row'}}>
<View style = {{width:'30%'}}>
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold',fontSize:16}]}>
Total
</Text>
</View>
<View style = {{width:'50%'}}>
<Text style={[styles.textView, { fontWeight: "bold",color:theme.coolGrey,fontSize:16}]}>
HKD$ {this.props.items.payAmount}
</Text>
</View>
</View>
</View>
<View
style={{
width: "35%",
flex: 1,
justifyContent: "space-between"
}}
>
<Text style={[styles.textView, { fontWeight: "bold",color:theme.coolGrey,fontSize:16}]}>
Status
</Text>
<View
style={{
flex: 1,
justifyContent: "space-between"
}}
>
<View>
<Text style={{ fontFamily: Fonts.century,fontSize:16,color:theme.coolGrey,marginLeft:20}}>
{size.status(this.props.items.status)}
</Text>
</View>
<TouchableOpacity
onPress = {()=>this.linkToEmail()}
style={{
backgroundColor: theme.mainColor,
alignItems: "center",
justifyContent: "center",
marginLeft:20,
width: scale(80),
height: verticalScale(20),
borderRadius: 4,
marginBottom: 5
}}
>
<Text style={{ color: "white", fontWeight: "bold" }}>
contact us
</Text>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
<View
style={{
width: "70%",
backgroundColor: "gray",
height: 1,
marginTop: 10
}}
/>
</View>
);
} else {
return null;
}
}
}
const styles = StyleSheet.create({
textView: {
marginLeft: 20,
fontFamily: Fonts.century,
marginBottom: 5
}
});

53
app/components/Public/commonTextInput.js Executable file
View File

@@ -0,0 +1,53 @@
import React from "react";
import { TextInput, View } from "react-native";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Size from "../../config/size";
const size = new Size();
import theme from "../../config/colors";
import { width, height } from "../../config/screen";
import {Fonts} from "../../config/fonts"
const CommonTextInput = props => {
return (
<View
style={{
backgroundColor: theme.inputBgc,
marginLeft: 20,
marginRight: 20,
marginTop: 30,
height: verticalScale(40),
borderRadius:5
}}
>
<TextInput
style={{
// backgroundColor:theme.inputBgc,
color: theme.foodNameColor,
height: verticalScale(35),
marginBottom: moderateScale(30),
paddingBottom:0,
fontSize: size.getSize(15),
paddingRight: 20,
paddingLeft: 20,
fontFamily:Fonts.century
}}
key = {props.key}
value={props.value}
underlineColorAndroid="rgba(0,0,0,0)"
onChangeText={props.onChangeText}
placeholder={props.placeholder}
placeholderStyle={{fontWeight: 'bold', fontFamily:Fonts.century}}
placeholderTextColor = {theme.foodNameColor}
secureTextEntry={props.secureTextEntry}
blurOnSubmit={false}
{...props}
ref={(input) => props.inputRef && props.inputRef(input)}
returnKeyType = {props.returnKeyType}
onSubmitEditing = {props.onSubmitEditing && props.onSubmitEditing}
onFocus={props.onFocus}
/>
</View>
);
};
export default CommonTextInput;

61
app/components/Public/commonTextView.js Executable file
View File

@@ -0,0 +1,61 @@
import React from "react";
import { View, TextInput, TouchableOpacity } from "react-native";
import Text from "react-native-text";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Size from "../../config/size";
import { Fonts } from "../../config/fonts";
import theme from "../../config/colors";
const size = new Size();
import { width, height } from "../../config/screen";
const CommonTextView = props => {
return (
<View
style={{
borderBottomColor: "black",
borderBottomWidth: 1,
marginTop: 15,
marginBottom: 10,
width: "70%"
}}
>
<Text
style={{
color: theme.coolGrey,
fontFamily: Fonts.century,
fontSize: 13
}}
>
{props.title}
</Text>
{!props.input ? (
<Text
style={{
marginTop: 5,
color: theme.coolGrey,
fontFamily: Fonts.century,
fontSize: 13
}}
>
{props.content}
</Text>
) : (
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
<TextInput placeholder={"text here"} />
<TouchableOpacity
style={{
justifyContent: "center",
alignItems: "center",
borderWidth: 1,
borderColor: "black"
}}
>
<Text>{props.buttonTitle}</Text>
</TouchableOpacity>
</View>
)}
</View>
);
};
export default CommonTextView;

75
app/components/Public/drawerNavigationHeader.js Executable file
View File

@@ -0,0 +1,75 @@
import React, { Component } from 'react';
import { Platform, StyleSheet, View, TouchableOpacity } from 'react-native';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import Icon2 from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import Text from 'react-native-text';
//function
import { width, height } from '../../config/screen';
import Size from '../../config/size'
const size = new Size;
export default class DrawerNavigationHeader extends Component {
logoutIcon() {
if (this.props.logout == true) {
return(
<Icon2 name="logout-variant" size={size.getSize(50)} color='black'
onPress = {()=> this.props.onPress && this.props.onPress()} />
)
}
}
render() {
return (
<View style={{
width: width,
height: '10%',
alignItems: 'center',
justifyContent: 'center',
marginTop: 20,
flexDirection: 'row',
}}>
<View style={{
width: '30%',
height: '100%',
justifyContent: 'center',
paddingLeft:5,
}}>
<Icon name="md-menu" size={size.getSize(50)} color='black'
onPress={() => { this.props.navigation.navigate('DrawerOpen'); }} />
</View>
<View style={{
width: '40%',
height: '100%',
justifyContent: 'center',
alignItems: 'center'
}}>
<Text style={{ fontSize: 22, }}>
{this.props.title}
</Text>
</View>
<View style={{
width: '30%',
paddingRight: 5,
height: '100%',
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center'
}}>
{this.logoutIcon()}
</View>
</View>
);
}
}

48
app/components/Public/header.js Executable file
View File

@@ -0,0 +1,48 @@
import React, {Component} from 'react';
import {Platform, StyleSheet, View, TouchableOpacity} from 'react-native';
import {scale, verticalScale, moderateScale } from 'react-native-size-matters';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import Text from 'react-native-text';
import { width, height } from '../../config/screen';
import Size from '../../config/size'
const size = new Size;
export default class Header extends Component {
backAction(){
if(this.props.login){
this.props.navigation.navigate('menu')
}else{
this.props.navigation.goBack()
}
}
render() {
return (
<View style={{width:width,height:verticalScale(70),alignItems:'center',
justifyContent:'center', marginTop:20}}>
<Text style = {{fontSize: 22,}}>
{this.props.title}
</Text>
{ !this.props.order?(
<TouchableOpacity
style = {{position: 'absolute', left:scale(5),width:scale(40),
height:scale(40),alignItems:'center',justifyContent: 'center',}}
onPress = {()=>this.backAction()}>
<Icon name="ios-arrow-back-outline" size={size.getSize(40)} color={'black'}
/>
</TouchableOpacity>
):(
<TouchableOpacity
style = {{position: 'absolute', left:scale(5),width:scale(40),
height:scale(40),alignItems:'center',justifyContent: 'center',}}
onPress = {()=> this.props.onPress && this.props.onPress()} >
<Icon name="ios-arrow-back-outline" size={size.getSize(40)} color={'black'}
/>
</TouchableOpacity>
)
}
</View>
);
}
}

50
app/components/Public/loader.js Executable file
View File

@@ -0,0 +1,50 @@
import React, { Component } from 'react';
import {
StyleSheet,
View,
Modal,
ActivityIndicator
} from 'react-native';
const Loader = props => {
const {
loading,
...attributes
} = props;
return (
<Modal
transparent={true}
animationType={'none'}
visible={loading}
onRequestClose={() => {console.log('c lose modal')}}>
<View style={styles.modalBackground}>
<View style={styles.activityIndicatorWrapper}>
<ActivityIndicator
animating={loading} />
</View>
</View>
</Modal>
)
}
const styles = StyleSheet.create({
modalBackground: {
flex: 1,
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'space-around',
backgroundColor: '#00000040'
},
activityIndicatorWrapper: {
backgroundColor: '#FFFFFF',
height: 100,
width: 100,
borderRadius: 10,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-around'
}
});
export default Loader;

64
app/components/Public/signInUpHeader.js Executable file
View File

@@ -0,0 +1,64 @@
import React, { Component } from "react";
import {
Platform,
StyleSheet,
View,
TouchableOpacity,
Image
} from "react-native";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Icon from "react-native-vector-icons/dist/MaterialCommunityIcons";
import Text from "react-native-text";
import { width, height } from "../../config/screen";
import Size from "../../config/size";
import theme from "../../config/colors";
const size = new Size();
export default class SignInUpHeader extends Component {
backAction() {
this.props.navigation.goBack();
}
render() {
return (
<View
style={{
...Platform.select({
ios: {
height: verticalScale(100)
},
android: {
height: verticalScale(130)
}
}),
alignItems: "center",
justifyContent: "center",
backgroundColor: theme.mainColor
}}
>
<Image
style={{
tintColor: "white",
height: verticalScale(70),
width: scale(70)
}}
source={require("../../images/appicon.png")}
resizeMode={"contain"}
/>
<View style={{ position: "absolute", left: 10 }}>
{this.props.back ? (
<Icon
name="chevron-left"
size={size.getSize(40)}
color={'white'}
style={{ marginLeft: 10 }}
onPress={() => this.backAction()}
/>
) : (
<View />
)}
</View>
</View>
);
}
}

30
app/components/Public/statusBar.js Executable file
View File

@@ -0,0 +1,30 @@
import React, { Component } from 'react';
import {
StyleSheet,
View,
StatusBar,
Platform,
} from 'react-native';
import { ifIphoneX } from 'react-native-iphone-x-helper'
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
const MyStatusBar = ({backgroundColor, ...props}) => (
<View style={[styles.statusBar, { backgroundColor }]}>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</View>
)
const STATUSBAR_HEIGHT = Platform.OS === 'ios' ?verticalScale(10) : StatusBar.height;
const APPBAR_HEIGHT = Platform.OS === 'ios' ? verticalScale(44) : verticalScale(56);
const styles = StyleSheet.create({
statusBar: {
...ifIphoneX({
height:0,
},
{
height:15,
})
},
})
export default MyStatusBar;

1
app/components/README.md Executable file
View File

@@ -0,0 +1 @@
# Custom components

32
app/components/signUp/countdownButton.js Executable file
View File

@@ -0,0 +1,32 @@
import React from 'react'
import {TouchableOpacity,View} from 'react-native'
import Text from 'react-native-text'
import {scale, verticalScale, moderateScale } from 'react-native-size-matters';
import Size from '../../config/size'
const size = new Size;
import TimerCountdown from 'react-native-timer-countdown';
import { width, height } from '../../config/screen';
export default class CountDownButton {
render(){
if(this.props.resend){
return(
<TouchableOpacity>
<Text style = {{borderWidth: 1,borderColor:'black',}}>
RESEND
</Text>
</TouchableOpacity>
)
}
return(
<TimerCountdown
initialSecondsRemaining={1000*60}
allowFontScaling={true}
style={{ fontSize: 20 }}
/>
)
}
}