Skip to content
Snippets Groups Projects
SearchBar.tsx 4.1 KiB
Newer Older
  • Learn to ignore specific revisions
  • 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,
    
    Alexey Lunin's avatar
    Alexey Lunin committed
      TouchableOpacity,
    
    } 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);
              }}
            />
    
    Alexey Lunin's avatar
    Alexey Lunin committed
              <TouchableOpacity onPress={cancel}>
                <Icon
                  name="close"
                  color={ColorPallet.grayscale.darkGrey}
                  size={24}
                  style={styles.closeIcon}
                />
              </TouchableOpacity>
    
    Alexey Lunin's avatar
    Alexey Lunin committed
          <TouchableOpacity
    
            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>
            )}
    
    Alexey Lunin's avatar
    Alexey Lunin committed
          </TouchableOpacity>
          <TouchableOpacity
    
            style={styles.iconContainer}
            onPress={() => {
              navigation.navigate(Stacks.SettingsStack);
            }}
          >
            <SettingsSvg style={styles.settingsIcon} />
    
    Alexey Lunin's avatar
    Alexey Lunin committed
          </TouchableOpacity>
    
        </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,
      },
    });