Hangry/app/components/Menu/googleAutoComplete.js

190 lines
6.4 KiB
JavaScript
Raw Normal View History

2024-02-27 16:19:55 +08:00
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>
);
}
}