-
Notifications
You must be signed in to change notification settings - Fork 18
/
index.js
102 lines (94 loc) · 3 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/**
* Copyright (c) 2017-present, Justin Nguyen.
* All rights reserved.
*
* @author tuan3.nguyen@gmail.com
*
* @flow
* @format
*/
"use strict"
import React, { Component } from "react"
import { Text } from "react-native"
import { View, Input, InputGroup, Toast } from "native-base"
import styles from "./styles"
import Icon from "react-native-vector-icons/FontAwesome"
import PropTypes from "prop-types"
import RNGooglePlaces from "react-native-google-places"
import { showError } from "../../../../global"
export class SearchBox extends Component {
choosePickupLocation = () => {
const latLngBounds = {}
const { pickupLocation } = this.props
if (pickupLocation) {
latLngBounds.latitude = pickupLocation.latitude
latLngBounds.longitude = pickupLocation.longitude
}
this.pickALocation(latLngBounds, this.props.setPickupLocation)
}
chooseDropoffLocation = () => {
const latLngBounds = {}
const { dropoffLocation } = this.props
if (dropoffLocation) {
latLngBounds.latitude = dropoffLocation.latitude
latLngBounds.longitude = dropoffLocation.longitude
}
this.pickALocation(latLngBounds, this.props.setDropLocation)
}
pickALocation(latLngBounds = {}, successCallback) {
latLngBounds.radius = 0.1
RNGooglePlaces.openPlacePickerModal(latLngBounds)
.then(place => successCallback(place))
.catch(error => showError(error.message))
}
getLocationDisplayText = location => {
return location
? location.name || location.address || `${location.latitude},${location.longitude}`
: ""
}
render() {
const dropoffText = this.getLocationDisplayText(this.props.dropoffLocation)
const pickupText = this.getLocationDisplayText(this.props.pickupLocation)
return (
<View style={styles.searchBox}>
<View style={styles.inputWrapper}>
<InputGroup>
<Icon name="search" size={15} color="green" />
<Input
style={styles.inputSearch}
placeholder="Choose pick-up location"
value={pickupText}
onFocus={this.choosePickupLocation}
/>
</InputGroup>
<InputGroup>
<Icon name="search" size={15} color="orangered" />
<Input
style={styles.inputSearch}
placeholder="Choose drop-off location"
value={dropoffText}
onFocus={this.chooseDropoffLocation}
/>
</InputGroup>
</View>
</View>
)
}
}
SearchBox.propTypes = {
setPickupLocation: PropTypes.func.isRequired,
pickupLocation: PropTypes.shape({
name: PropTypes.string,
address: PropTypes.string,
latitude: PropTypes.number.isRequired,
longitude: PropTypes.number.isRequired
}),
setDropLocation: PropTypes.func.isRequired,
dropoffLocation: PropTypes.shape({
name: PropTypes.string,
address: PropTypes.string,
latitude: PropTypes.number.isRequired,
longitude: PropTypes.number.isRequired
})
}
export default SearchBox