89 lines
2.9 KiB
JavaScript
89 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import {ScrollView, SafeAreaView, Text, View, TouchableOpacity, Platform} from 'react-native';
|
|
import {Divider} from 'react-native-elements';
|
|
import Theme from '../../components/theme.style.js';
|
|
import CustomHeader from '../../components/header.js';
|
|
|
|
import SearchFragment from './fragments/searchbar.js';
|
|
import CustomSafeArea from '../../components/safeArea.component.js';
|
|
|
|
class PayatpumpStationSearch extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
searchValue: this.props.route.params.value || "",
|
|
cities: "",
|
|
cityDropDown: this.props.route.params.stations
|
|
}
|
|
|
|
search = (value) => {
|
|
if(value) {
|
|
let newValue = this.state.cityDropDown.filter(city => city.storeName.toUpperCase().includes(this.state.searchValue.toUpperCase()));
|
|
|
|
this.setState({ searchValue: value, cityDropDown: newValue })
|
|
return;
|
|
}
|
|
|
|
this.setState({ searchValue: value, cityDropDown: this.props.route.params.stations })
|
|
}
|
|
|
|
renderDropDown = () => {
|
|
if(this.state.cityDropDown.length === 0) {
|
|
return this.renderNoSearchFound();
|
|
}
|
|
|
|
return this.state.cityDropDown.map((city, i) => {
|
|
return (
|
|
<TouchableOpacity onPress={() => {
|
|
this.props.route.params.navigate(city);
|
|
}} key={i} style={{flex: 1}}>
|
|
<Text style={{ padding: 20, color: Theme.colors.textPrimary}}>{city.storeName.toUpperCase()}</Text>
|
|
<Divider />
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
}
|
|
|
|
renderNoSearchFound = () => {
|
|
return (
|
|
<Text style={{marginTop: 50, alignSelf: 'center', color: this.props.app_theme?.theme.dark? this.props.app_theme?.theme.colors.text : Theme.colors.gray}}>No search found</Text>
|
|
)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
<View style={{flex: 1}}>
|
|
<CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
|
|
<View style={{flex: 1, flexDirection: 'column', height: Theme.screen.h, width: Theme.screen.w}}>
|
|
<SearchFragment
|
|
autofocus={true}
|
|
value={this.state.searchValue}
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
searchBackgroundColor={this.props.app_theme?.theme.colors.border}
|
|
onChangeText={(value) => this.search(value)}
|
|
onClear={() => this.setState({ searchValue: "", cityDropDown: [] })}/>
|
|
<View style={{flex: 1, marginTop: 70}}>
|
|
<ScrollView>
|
|
{this.renderDropDown()}
|
|
</ScrollView>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(PayatpumpStationSearch) |