From 25e0dace45b1526264ae5a35277ebdc721e521b4 Mon Sep 17 00:00:00 2001 From: "Rafael X. Morales Georgi" Date: Tue, 8 Oct 2024 12:30:45 +0200 Subject: [PATCH 1/4] fix confluc --- index.tsx | 533 +++++++++++++++++++++++++--------------------- package-lock.json | 13 ++ 2 files changed, 300 insertions(+), 246 deletions(-) create mode 100644 package-lock.json diff --git a/index.tsx b/index.tsx index da34249..9247b29 100644 --- a/index.tsx +++ b/index.tsx @@ -1,270 +1,311 @@ -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'; - +import React, { JSXElementConstructor } from "react"; +import { + View, + Text, + StyleSheet, + FlatList, + TouchableOpacity, + Animated, + TextInput, + Image, + ViewStyle, +} 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>, - /** - * Function to set the country - */ - setCountryDetails?: React.Dispatch>, - /** - * State variable for storing the phone number - */ - phone?: string, - /** - * Function to set the phone number state variable - */ - setPhone?: React.Dispatch>, - /** - * 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, - /** + /** + * Selected Country Dial Code + */ + selected: string; + /** + * Function to set the country + */ + setSelected: React.Dispatch>; + /** + * Function to set the country + */ + setCountryDetails: React.Dispatch>; + /** + * State variable for storing the phone number + */ + phone?: string; + /** + * Function to set the phone number state variable + */ + setPhone?: React.Dispatch>; + /** + * Style the Country Code Container + */ + countryCodeContainerStyles?: ViewStyle; + /** + * Style the text inside Country Code + */ + countryCodeTextStyles?: ViewStyle; + /** + * 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?: ViewStyle; + /** /** * Search Dropdown Container Styles */ - dropdownStyles?: ViewStyle, - /** - * Search Dropdown Text Styles - */ - dropdownTextStyles?: TextStyle - + dropdownStyles?: ViewStyle; + /** + * Search Dropdown Text Styles + */ + dropdownTextStyles?: ViewStyle; + /** + * Search Dropdown Text Container Styles + */ + dropdownTextContainerStyles?: ViewStyle; } - - const CountryCodeDropdownPicker: React.FC = ({ - selected, - setSelected, - setCountryDetails= () => {}, - phone, - setPhone, - countryCodeContainerStyles={}, - countryCodeTextStyles={}, - phoneStyles={}, - searchIcon, - closeIcon, - searchStyles={}, - searchTextStyles={}, - dropdownStyles={}, - dropdownTextStyles={}, + 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 [_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 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 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)); - }; + 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); - } - - + function _searchCountry(country) { + _setSearch(country); + let c = countries.filter((item) => { + return item.name.includes(country); + }); + _setCountries(c); + } - const RenderBtn = () => { - - if(!_selected){ - return( - - {_setCountries(countries); slideDown()} }> - - {_getFlag(selected)} - {selected} - - - { - (phone != undefined && setPhone != undefined) - ? - - : - <> - } - - - - ) - }else{ - return( - - - - - - - slideUp()} style={{marginHorizontal: 10}}> - - + const RenderBtn = () => { + if (!_selected) { + return ( + + { + _setCountries(countries); + slideDown(); + }} + > + + + {_getFlag(selected)} + + {selected} + + + {phone != undefined && setPhone != undefined ? ( + + ) : ( + <> + )} + + ); + } else { + return ( + + + + + - - ) - } + slideUp()} + style={{ marginHorizontal: 10 }} + > + + + + ); } + }; + const renderCountryItem = ({ item }) => { + return ( + { + setSelected(item.dial_code); + setCountryDetails(item); + slideUp(); + }} + > + {item?.flag} + + {item?.name} + + + ); + }; - const renderCountryItem = ({item}) => { - return( - {setSelected(item.dial_code); setCountryDetails(item); slideUp();} }> - { item?.flag } - { item?.name } - - ) - } - - - return( - - { RenderBtn() } + return ( + + {RenderBtn()} - { - (_selected) - ? - - item.code} - ListEmptyComponent={ No Result Found } - /> - - : - <> + {_selected ? ( + + item.code} + ListEmptyComponent={ + + No Result Found + } - - - ) -} - + /> + + ) : ( + <> + )} + + ); +}; 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 - } -}); \ No newline at end of file + 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, + }, +}); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..9b781f7 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "react-native-dropdown-country-picker", + "version": "1.0.11", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "react-native-dropdown-country-picker", + "version": "1.0.11", + "license": "MIT" + } + } +} From fcd8cd05868dfc10a580ec034beff03466fc897b Mon Sep 17 00:00:00 2001 From: Aaron Maier Date: Fri, 9 Feb 2024 11:43:15 +0100 Subject: [PATCH 2/4] Add correct typing for text styles --- index.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/index.tsx b/index.tsx index 9247b29..15ef204 100644 --- a/index.tsx +++ b/index.tsx @@ -9,6 +9,7 @@ import { TextInput, Image, ViewStyle, + TextStyle, } from "react-native"; import { countries, _getFlag } from "./_inc/_lib/enhanced"; @@ -40,7 +41,7 @@ interface CountryCodeProps { /** * Style the text inside Country Code */ - countryCodeTextStyles?: ViewStyle; + countryCodeTextStyles?: TextStyle; /** * Phone Text Input Styles */ @@ -60,7 +61,7 @@ interface CountryCodeProps { /** * Search Input Text Styles */ - searchTextStyles?: ViewStyle; + searchTextStyles?: TextStyle; /** /** * Search Dropdown Container Styles @@ -69,7 +70,7 @@ interface CountryCodeProps { /** * Search Dropdown Text Styles */ - dropdownTextStyles?: ViewStyle; + dropdownTextStyles?: TextStyle; /** * Search Dropdown Text Container Styles */ @@ -90,6 +91,7 @@ const CountryCodeDropdownPicker: React.FC = ({ searchTextStyles = {}, dropdownStyles = {}, dropdownTextStyles = {}, + dropdownTextContainerStyles = {}, }) => { const [_selected, _setSelected] = React.useState(false); const [_search, _setSearch] = React.useState(""); From 8677c4a2eddced10e5a5ef2ae1c2882252c89898 Mon Sep 17 00:00:00 2001 From: Aaron Maier Date: Fri, 9 Feb 2024 12:07:19 +0100 Subject: [PATCH 3/4] Add Typing for list items and update index.d.ts --- index.d.ts | 128 +++++++++++++++++++++++++++++------------------------ index.tsx | 34 ++++++++++---- 2 files changed, 94 insertions(+), 68 deletions(-) diff --git a/index.d.ts b/index.d.ts index c4f41e5..0d52311 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,62 +1,72 @@ -import {ViewStyle, TextStyle} from 'react-native'; - +import React from "react"; +import { ViewStyle, TextStyle } from "react-native"; export interface CountryCodeProps { - /** - * Selected Country Dial Code - */ - selected: string, - /** - * Function to set the country - */ - setSelected: React.Dispatch>, - /** - * Function to set the country - */ - setCountryDetails?: React.Dispatch>, - /** - * State variable for storing the phone number - */ - phone?: string, - /** - * Function to set the phone number state variable - */ - setPhone?: React.Dispatch>, - /** - * 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 + /** + * Selected Country Dial Code + */ + selected: string; + /** + * Function to set the country + */ + setSelected: React.Dispatch>; + /** + * Function to set the country + */ + setCountryDetails: React.Dispatch>; + /** + * State variable for storing the phone number + */ + phone?: string; + /** + * Function to set the phone number state variable + */ + setPhone?: React.Dispatch>; + /** + * 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; + /** + * Search Dropdown List Item Styles + */ + dropdownTextContainerStyles?: ViewStyle; +} -} \ No newline at end of file +export interface CountryCodeDropdownItemProps { + name: string; + dial_code: string; + code: string; + flag: string; +} diff --git a/index.tsx b/index.tsx index 15ef204..f4a4203 100644 --- a/index.tsx +++ b/index.tsx @@ -13,6 +13,8 @@ import { } from "react-native"; import { countries, _getFlag } from "./_inc/_lib/enhanced"; +const Countries: CountryCodeDropdownItemProps[] = countries; + interface CountryCodeProps { /** * Selected Country Dial Code @@ -21,11 +23,13 @@ interface CountryCodeProps { /** * Function to set the country */ - setSelected: React.Dispatch>; + setSelected: React.Dispatch>; /** * Function to set the country */ - setCountryDetails: React.Dispatch>; + setCountryDetails: React.Dispatch< + React.SetStateAction + >; /** * State variable for storing the phone number */ @@ -33,7 +37,7 @@ interface CountryCodeProps { /** * Function to set the phone number state variable */ - setPhone?: React.Dispatch>; + setPhone?: React.Dispatch>; /** * Style the Country Code Container */ @@ -72,10 +76,18 @@ interface CountryCodeProps { */ dropdownTextStyles?: TextStyle; /** - * Search Dropdown Text Container Styles + * Search Dropdown List Item Styles */ dropdownTextContainerStyles?: ViewStyle; } + +interface CountryCodeDropdownItemProps { + name: string; + dial_code: string; + code: string; + flag: string; +} + const CountryCodeDropdownPicker: React.FC = ({ selected, setSelected, @@ -95,7 +107,7 @@ const CountryCodeDropdownPicker: React.FC = ({ }) => { const [_selected, _setSelected] = React.useState(false); const [_search, _setSearch] = React.useState(""); - const [_countries, _setCountries] = React.useState(countries); + const [_countries, _setCountries] = React.useState(Countries); const slideAnim = React.useRef(new Animated.Value(0)).current; @@ -121,9 +133,9 @@ const CountryCodeDropdownPicker: React.FC = ({ }).start(() => _setSelected(false)); }; - function _searchCountry(country) { + function _searchCountry(country: string) { _setSearch(country); - let c = countries.filter((item) => { + let c = Countries.filter((item) => { return item.name.includes(country); }); _setCountries(c); @@ -136,7 +148,7 @@ const CountryCodeDropdownPicker: React.FC = ({ { - _setCountries(countries); + _setCountries(Countries); slideDown(); }} > @@ -208,7 +220,11 @@ const CountryCodeDropdownPicker: React.FC = ({ } }; - const renderCountryItem = ({ item }) => { + const renderCountryItem = ({ + item, + }: { + item: CountryCodeDropdownItemProps; + }) => { return ( Date: Fri, 9 Feb 2024 15:17:05 +0100 Subject: [PATCH 4/4] Fix setCountryDetails definition and only display icons if existent --- index.tsx | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/index.tsx b/index.tsx index f4a4203..35361e9 100644 --- a/index.tsx +++ b/index.tsx @@ -91,7 +91,7 @@ interface CountryCodeDropdownItemProps { const CountryCodeDropdownPicker: React.FC = ({ selected, setSelected, - setCountryDetails = () => {}, + setCountryDetails = (details: CountryCodeDropdownItemProps) => {}, phone, setPhone, countryCodeContainerStyles = {}, @@ -161,7 +161,7 @@ const CountryCodeDropdownPicker: React.FC = ({ {selected} - {phone != undefined && setPhone != undefined ? ( + {phone != undefined && setPhone != undefined && ( = ({ onChangeText={setPhone} value={phone} /> - ) : ( - <> )} ); @@ -190,11 +188,13 @@ const CountryCodeDropdownPicker: React.FC = ({ return ( - + {_static.search && ( + + )} = ({ onPress={() => slideUp()} style={{ marginHorizontal: 10 }} > - + {_static.close && ( + + )} ); @@ -247,7 +249,7 @@ const CountryCodeDropdownPicker: React.FC = ({ {RenderBtn()} - {_selected ? ( + {_selected && ( = ({ } /> - ) : ( - <> )} );