den/SearchScreen.js at master · react-native-dev/den · GitHub

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
103
'use strict';

var React = require('react-native');
var {
	TouchableOpacity,
	ScrollView,
	StyleSheet,
	Text,
	View,
} = React;

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');

var PropertyTypePicker = require('./components/PropertyTypePicker.js');
var BuiltRangePicker = require('./components/BuiltRangePicker.js');
var PriceRangePicker = require('./components/PriceRangePicker.js');
var ZipCodeEntry = require('./components/ZipCodeEntry.js');
var NumberPicker = require('./components/NumberPicker.js');

var SearchResults = require('./components/SearchResults.js');

var globalVariables = require('./globalVariables.js');


var SearchScreen = React.createClass({

	getInitialState: function() {
		return {
			propertyType: 'DETACHD',
			builtRange: [1900, 2020],
			priceRange: [300, 800],
			zipCodes: ['97202'],
			bedrooms: 3,
			bathrooms: 1
		};
	},

	render: function() {
		return (
			<ScrollView style={styles.container}>
				<View style={styles.page}>
					<PropertyTypePicker value={this.state.propertyType} onChange={this.saveQueryOptions} />
					<BuiltRangePicker value={this.state.builtRange} onChange={this.saveQueryOptions} />
					<PriceRangePicker value={this.state.priceRange} onChange={this.saveQueryOptions} />
					<ZipCodeEntry value={this.state.zipCodes} onChange={this.saveQueryOptions} />
					<NumberPicker varName='bedrooms' label='Bedrooms (at least)' value={this.state.bedrooms} onChange={this.saveQueryOptions} />
					<NumberPicker varName='bathrooms' label='Bathrooms (at least)' value={this.state.bathrooms} onChange={this.saveQueryOptions} />
					<TouchableOpacity onPress={this.onSearch} activeOpacity={0.9}>
						<View style={styles.searchButton}>
							<Text style={styles.searchButtonText}>
								Search
							</Text>
						</View>
					</TouchableOpacity>
				</View>
			</ScrollView>
		);
	},

	onSearch: function() {
		this.props.navigator.push({
			component: SearchResults,
			title: 'Search Results',
			passProps: {
				search: this.state
			},
		});
	},

	saveQueryOptions: function(key, value) {
		// console.log('saveQueryOptions', key, value);
		var temp = {};
		temp[key] = value;
		this.setState(temp);
	},
});

var styles = StyleSheet.create({
	container: {
		flex: 1,
		padding: 15,
		backgroundColor: globalVariables.background
	},

	page: {
		paddingBottom: 50
	},

	searchButton: {
		padding: 14,
		backgroundColor: globalVariables.green,
	},

	searchButtonText: {
		fontSize: 16,
		color: 'white',
		textAlign: 'center'
	}
});

module.exports = SearchScreen;