23 lines
2.1 KiB
JavaScript
23 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
import { View, TextInput, TouchableOpacity } from 'react-native';
|
|
import Elements from '../../../../components/elements.js';
|
|
import Theme from '../../../../components/theme.style.js';
|
|
import Icon from '../../../../components/icons';
|
|
|
|
export default function SearchBar(props){
|
|
return (
|
|
<Elements.shadowView style={{ position: 'absolute', width: '90%', backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, border: 1, marginTop: 10, alignSelf: 'center', height: 50, padding: 0, top: 5, justifyContent: 'flex-start', alignItems: 'center', borderRadius: 5}}>
|
|
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
|
|
<View style={{backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, width: 50, justifyContent: 'center', alignItems: 'center', borderTopLeftRadius: 50, borderBottomLeftRadius: 50}}>
|
|
<Icon.MaterialIcons name="search" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />
|
|
</View>
|
|
<View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}>
|
|
<TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 16, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder={props.placeHolder ? props.placeHolder : "Search for the nearest station"} placeholderTextColor={props.isDarkMode ? Theme.colors.white : Theme.colors.placeHolder} />
|
|
</View>
|
|
{props.clear ? <TouchableOpacity onPress={props.onClear} activeOpacity={1} style={{backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, width: 50, justifyContent: 'center', alignItems: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}>
|
|
<Icon.MaterialIcons name="close" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />
|
|
</TouchableOpacity> : null}
|
|
</View>
|
|
</Elements.shadowView>
|
|
)
|
|
} |