HeaderSearch.js 3.66 KB
Newer Older
Giang Tran committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
import React, {useState} from 'react';
import {
  View,
  Text,
  Image,
  StatusBar,
  StyleSheet,
  SafeAreaView,
  ImageBackground,
  TouchableOpacity,
  Platform,
  Button,
  TouchableWithoutFeedback,
  TextInput,
} from 'react-native';
import R from '../../assets/R';
import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
import {connect} from 'react-redux';
import {HEIGHTXD} from '../../Config/Functions';
import Modal from 'react-native-modal';
import Drawer from './Drawer';
import Icon from 'react-native-vector-icons/Ionicons';
Giang Tran committed
23
import SnackBar from '../SnackBar';
Giang Tran committed
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
const HeaderSearch = (props) => {
  const {title, isWhite} = props;

  const [isModalVisible, setModalVisible] = useState(false);

  const [openSearch, setOpenSearch] = useState(false);
  const [txtSearch, setTxtSearch] = useState('');

  const toggleSearch = () => {
    setTxtSearch('');
    setOpenSearch(!openSearch);
  };

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <ImageBackground
Giang Tran committed
43
      imageStyle={{resizeMode: 'stretch'}}
Giang Tran committed
44 45 46 47 48 49 50 51 52 53
      style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]}
      source={R.images.bgHeader}>
      <StatusBar backgroundColor="transparent" translucent={true} />
      <View style={styles.headerContainer}>
        <TouchableOpacity onPress={toggleModal}>
          <Image source={R.images.iconMenu} style={styles.imgIcon} />
        </TouchableOpacity>

        {openSearch ? (
          <TextInput
Giang Tran committed
54
            placeholderTextColor={R.colors.placeHolder}
Giang Tran committed
55 56 57 58 59
            style={styles.txtInput}
            onChangeText={(val) => setTxtSearch(val)}
            value={txtSearch}
          />
        ) : (
Giang Tran committed
60
          <AppText i18nKey={title} style={styles.txtTitle}></AppText>
Giang Tran committed
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 104
        )}
        <TouchableOpacity onPress={toggleSearch}>
          {openSearch ? (
            <Icon name={'refresh-outline'} size={28} color={R.colors.white} />
          ) : (
            <Icon name={'search-sharp'} size={28} color={R.colors.white} />
          )}
        </TouchableOpacity>
      </View>
      <Modal
        animationIn={'fadeInLeft'}
        animationOut={'fadeOutLeft'}
        isVisible={isModalVisible}
        backdropOpacity={0.5}>
        <View
          style={[
            {flex: 1, flexDirection: 'row'},
            Platform.OS == 'ios' ? {paddingVertical: 15} : {},
          ]}>
          <View style={styles.container}>
            <Drawer toggleModal={toggleModal} />
          </View>
          <TouchableWithoutFeedback onPress={toggleModal}>
            <View
              style={{
                flex: 1,
              }}></View>
          </TouchableWithoutFeedback>
        </View>
      </Modal>
    </ImageBackground>
  );
};

const mapStateToProps = (state) => {
  return {
    user: state.userReducer,
  };
};

export default connect(mapStateToProps, {})(HeaderSearch);

const styles = StyleSheet.create({
  img: {
Giang Tran committed
105
    height: 95,
Giang Tran committed
106
    width: '100%',
Giang Tran committed
107
    paddingTop: 30,
Giang Tran committed
108 109
  },
  headerContainer: {
Giang Tran committed
110
    height: 40,
Giang Tran committed
111
    paddingTop: 10,
Giang Tran committed
112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141
    width: '100%',
    alignItems: 'center',
    flexDirection: 'row',
    paddingHorizontal: 20,
    justifyContent: 'space-between',
  },
  imgIcon: {
    width: 25,
    height: 20,
  },
  txtTitle: {
    fontSize: getFontXD(52),
    color: R.colors.white,
    fontWeight: 'bold',
  },
  container: {
    backgroundColor: 'white',
    height: '100%',
    width: 300,
    borderRadius: 20,
  },
  txtInput: {
    backgroundColor: R.colors.white,
    flex: 1,
    padding: 2,
    height: HEIGHTXD(100),
    fontSize: getFontXD(42),
    borderRadius: 10,
    marginHorizontal: 10,
    paddingHorizontal: 10,
Giang Tran committed
142
    color: 'black',
Giang Tran committed
143 144 145 146 147 148
  },
  btnIcon: {
    backgroundColor: R.colors.lightBlue2,
    padding: 5,
  },
});