import React,{JSXElementConstructor} from 'react'; import { View, Text, StyleSheet,FlatList, TouchableOpacity, Animated, TextInput, Image, ViewStyle, TextStyle } from 'react-native'; import { countries, _getFlag } from './_inc/_lib/enhanced'; interface CountryCodeProps { /** * Selected Country Dial Code */ selected: string, /** * Function to set the country */ setSelected: React.Dispatch<React.SetStateAction<undefined>>, /** * Function to set the country */ setCountryDetails?: React.Dispatch<React.SetStateAction<undefined>>, /** * State variable for storing the phone number */ phone?: string, /** * Function to set the phone number state variable */ setPhone?: React.Dispatch<React.SetStateAction<undefined>>, /** * Style the Country Code Container */ countryCodeContainerStyles?: ViewStyle, /** * Style the text inside Country Code */ countryCodeTextStyles?: TextStyle, /** * Phone Text Input Styles */ phoneStyles?: ViewStyle, /** * URL for the search Icon */ searchIcon?: string, /** * URL for the close Icon */ closeIcon?: string, /** * Search Input Container Styles */ searchStyles?: ViewStyle, /** * Search Input Text Styles */ searchTextStyles?: TextStyle, /** /** * Search Dropdown Container Styles */ dropdownStyles?: ViewStyle, /** * Search Dropdown Text Styles */ dropdownTextStyles?: TextStyle } const CountryCodeDropdownPicker: React.FC<CountryCodeProps> = ({ selected, setSelected, setCountryDetails= () => {}, phone, setPhone, countryCodeContainerStyles={}, countryCodeTextStyles={}, phoneStyles={}, searchIcon, closeIcon, searchStyles={}, searchTextStyles={}, dropdownStyles={}, dropdownTextStyles={}, }) => { const [_selected, _setSelected] = React.useState(false); const [_search, _setSearch] = React.useState(''); const [_countries, _setCountries] = React.useState(countries); const slideAnim = React.useRef(new Animated.Value(0)).current; const _static = { search: searchIcon ?? require('./_inc/images/search.png'), close: closeIcon ?? require('./_inc/images/close.png') }; const slideDown = () => { _setSelected(true); Animated.timing(slideAnim, { toValue: 235, duration: 1200, useNativeDriver: false }).start(); }; const slideUp = () => { Animated.timing(slideAnim, { toValue: 0, duration: 300, useNativeDriver: false }).start(() => _setSelected(false)); }; function _searchCountry(country) { _setSearch(country); let c = countries.filter((item) => { return item.name.includes(country) }) _setCountries(c); } const RenderBtn = () => { if(!_selected){ return( <View style={[styles.row]}> <TouchableOpacity style={{ flexDirection: 'row' }} onPress={ () => {_setCountries(countries); slideDown()} }> <View style={[styles.selectedContainer, countryCodeContainerStyles]}> <Text style={{color: '#000', marginRight: 5}}>{_getFlag(selected)}</Text> <Text style={[countryCodeTextStyles]}>{selected}</Text> </View> </TouchableOpacity> { (phone != undefined && setPhone != undefined) ? <TextInput style={[{ marginLeft: 5, paddingVertical: 5, paddingLeft: 15, flex: 1, borderWidth: 1, borderRadius: 8, borderColor: "#dddddd" }, phoneStyles]} placeholder={"Enter Mobile Number"} keyboardType={'phone-pad'} placeholderTextColor={'#dddddd'} onChangeText={setPhone} value={phone} /> : <></> } </View> ) }else{ return( <View style={[styles.inputBoxContainer, searchStyles]}> <View style={[styles.row, {width: '90%'}]}> <Image source={_static.search} resizeMode={'contain'} style={[styles.icon, {width: 15, height: 15, marginLeft: 10}]} /> <TextInput style={[{ marginLeft: 5, paddingVertical: 3, flex: 1 }, searchTextStyles]} onChangeText={ _searchCountry } value={ _search } /> </View> <TouchableOpacity onPress={() => slideUp()} style={{marginHorizontal: 10}}> <Image source={_static.close} resizeMode={'contain'} style={styles.icon} /> </TouchableOpacity> </View> ) } } const renderCountryItem = ({item}) => { return( <TouchableOpacity style={ styles.countryContainer } key={item.code} onPress={ () => {setSelected(item.dial_code); setCountryDetails(item); slideUp();} }> <Text style={styles.countryFlag}>{ item?.flag }</Text> <Text style={ [styles.countryText, dropdownTextStyles] } >{ item?.name }</Text> </TouchableOpacity> ) } return( <View style={styles.container}> { RenderBtn() } { (_selected) ? <Animated.View style={{ maxHeight: slideAnim }} > <FlatList data={_countries} style={[styles.valuesContainer, dropdownStyles]} showsVerticalScrollIndicator={false} renderItem={renderCountryItem} keyExtractor={(item) => item.code} ListEmptyComponent={ <Text style={{padding: 15, textAlign: 'center'}}>No Result Found</Text> } /> </Animated.View> : <></> } </View> ) } export default CountryCodeDropdownPicker; const styles = StyleSheet.create({ row: { flexDirection: 'row', alignItems: 'center' }, container: { width: '100%', }, selectedContainer: { padding: 10, flexDirection: 'row', minWidth: '20%', alignItems: 'center', justifyContent: 'space-between', borderWidth: 1, borderColor: '#dddddd', borderRadius: 8, backgroundColor: 'white' }, valuesContainer: { borderWidth: 1, borderColor: '#dddddd', borderRadius: 8, maxHeight: 235, backgroundColor: 'white', marginTop: 8 }, countryContainer: { flexDirection: 'row', paddingHorizontal: 15, paddingVertical: 13, borderBottomWidth: 1, borderColor: '#dedede', alignItems: 'center' }, countryFlag: { marginRight: 8, color: 'black' }, countryText: { fontWeight: 'bold' }, inputBoxContainer: { width: '100%', borderWidth: 1, borderColor: '#dddddd', borderRadius: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }, icon: { width: 10, height: 10 } });