Newer
Older
import React, { useState } from 'react';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { useTranslation } from "react-i18next";
import {
Pressable,
StyleSheet,
View,
Keyboard,
TextInput,
Text,
} from 'react-native';
import { StackScreenProps } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/core';
import { borderRadius, ColorPallet, TextTheme } from 'src/theme/theme';
import useNotifications from 'src/hooks/notifications';
import SettingsSvg from 'src/assets/svg/settings.svg';
import SearchSvg from 'src/assets/svg/search.svg';
import BellSvg from 'src/assets/svg/bell.svg';
import { SettingStackParams, Stacks } from 'src/type/navigators';
interface Props {
searchPhrase: string;
setSearchPhrase: (text: string) => void;
}
const SearchBar: React.FC<Props> = ({ searchPhrase, setSearchPhrase }) => {
const { t } = useTranslation();
const [focused, setFocused] = useState(false);
const navigation = useNavigation<StackScreenProps<SettingStackParams>>();
const notifications = useNotifications();
const cancel = () => {
Keyboard.dismiss();
setFocused(false);
setSearchPhrase('');
};
return (
<View style={styles.container}>
<View style={styles.searchBar}>
<SearchSvg style={styles.searchIcon} />
<TextInput
style={[styles.input, focused ? styles.inputFocused : undefined]}
returnKeyType="done"
placeholder={t<string>('SearchBar.placeholder')}
value={searchPhrase}
placeholderTextColor={ColorPallet.baseColors.lightGrey}
onChangeText={setSearchPhrase}
onBlur={() => {
if (searchPhrase.trim() === '') {
cancel();
}
}}
onFocus={() => {
setFocused(true);
}}
/>
<TouchableOpacity onPress={cancel}>
<Icon
name="close"
color={ColorPallet.grayscale.darkGrey}
size={24}
style={styles.closeIcon}
/>
</TouchableOpacity>
</View>
style={styles.iconContainer}
onPress={() => {
navigation.navigate(Stacks.NotificationStack);
}}
>
<BellSvg style={styles.bellIcon} />
{notifications.length > 0 && (
<View style={styles.notificationBadge}>
<Text style={styles.badgeText}>{notifications.length < 100 ? notifications.length : 99}</Text>
</View>
)}
style={styles.iconContainer}
onPress={() => {
navigation.navigate(Stacks.SettingsStack);
}}
>
<SettingsSvg style={styles.settingsIcon} />
</View>
);
};
export default SearchBar;
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
},
settingsIcon: {
width: 32,
height: 32,
fill: ColorPallet.baseColors.black,
alignSelf: 'center',
},
closeIcon: {
marginTop: 8,
},
searchIcon: {
width: 20,
height: 20,
fill: ColorPallet.baseColors.black,
alignSelf: 'center',
},
searchBar: {
marginLeft: 15,
height: 40,
flexDirection: 'row',
flex: 1,
backgroundColor: ColorPallet.grayscale.veryLightGrey,
borderRadius: borderRadius,
},
input: {
marginLeft: 8,
fontSize: 18,
alignSelf: 'center',
color: ColorPallet.grayscale.mediumGrey,
flex: 1,
},
inputFocused: {
marginLeft: 0,
},
position: 'relative',
flexDirection: 'row',
},
bellIcon: {
width: 32,
height: 32,
fill: ColorPallet.baseColors.black,
alignSelf: 'center',
},
notificationBadge: {
position: 'absolute',
right: -4,
top: 14,
width: 20,
height: 20,
backgroundColor: '#d51e32',
borderRadius: 24,
alignItems: 'center',
justifyContent: 'center',
},
badgeText: {
...TextTheme.label,
fontSize: 12,
color: ColorPallet.baseColors.white,
},
});