react-native-country-select 0.2.5 → 0.3.0

package/lib/components/FullscreenModal/index.tsx

@@ -0,0 +1,85 @@
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import {
+  Modal,
+  ModalProps,
+  NativeSyntheticEvent,
+  Pressable,
+  View,
+} from 'react-native';
+
+import {ICountrySelectStyle} from '../../interface';
+
+interface FullscreenModalProps extends ModalProps {
+  visible: boolean;
+  onRequestClose: (event: NativeSyntheticEvent<any>) => void;
+  statusBarTranslucent?: boolean;
+  removedBackdrop?: boolean;
+  disabledBackdropPress?: boolean;
+  onBackdropPress?: () => void;
+  accessibilityLabelBackdrop?: string;
+  accessibilityHintBackdrop?: string;
+  styles: ICountrySelectStyle;
+  countrySelectStyle?: ICountrySelectStyle;
+  header?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const FullscreenModal: React.FC<FullscreenModalProps> = ({
+  visible,
+  onRequestClose,
+  statusBarTranslucent,
+  removedBackdrop,
+  disabledBackdropPress,
+  onBackdropPress,
+  accessibilityLabelBackdrop,
+  accessibilityHintBackdrop,
+  styles,
+  countrySelectStyle,
+  header,
+  children,
+  ...props
+}) => {
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onRequestClose}
+      statusBarTranslucent={statusBarTranslucent}
+      {...props}>
+      <View
+        testID="countrySelectContainer"
+        style={[
+          styles.container,
+          countrySelectStyle?.container,
+          {flex: 1, width: '100%', height: '100%'},
+        ]}>
+        <Pressable
+          testID="countrySelectBackdrop"
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabelBackdrop}
+          accessibilityHint={accessibilityHintBackdrop}
+          disabled={disabledBackdropPress || removedBackdrop}
+          style={[
+            styles.backdrop,
+            {alignItems: 'center', justifyContent: 'center'},
+            countrySelectStyle?.backdrop,
+            removedBackdrop && {backgroundColor: 'transparent'},
+          ]}
+          onPress={onBackdropPress || onRequestClose}
+        />
+        <View
+          testID="countrySelectContent"
+          style={[
+            styles.content,
+            countrySelectStyle?.content,
+            {borderRadius: 0, width: '100%', height: '100%'},
+          ]}>
+          {header}
+          <View style={{flex: 1, flexDirection: 'row'}}>{children}</View>
+        </View>
+      </View>
+    </Modal>
+  );
+};

package/lib/components/PopupModal/index.tsx

@@ -0,0 +1,77 @@
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import {
+  Modal,
+  ModalProps,
+  NativeSyntheticEvent,
+  Pressable,
+  View,
+} from 'react-native';
+
+import {ICountrySelectStyle} from '../../interface';
+
+interface PopupModalProps extends ModalProps {
+  visible: boolean;
+  onRequestClose: (event: NativeSyntheticEvent<any>) => void;
+  statusBarTranslucent?: boolean;
+  removedBackdrop?: boolean;
+  disabledBackdropPress?: boolean;
+  onBackdropPress?: () => void;
+  accessibilityLabelBackdrop?: string;
+  accessibilityHintBackdrop?: string;
+  styles: ICountrySelectStyle;
+  countrySelectStyle?: ICountrySelectStyle;
+  header?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const PopupModal: React.FC<PopupModalProps> = ({
+  visible,
+  onRequestClose,
+  statusBarTranslucent,
+  removedBackdrop,
+  disabledBackdropPress,
+  onBackdropPress,
+  accessibilityLabelBackdrop,
+  accessibilityHintBackdrop,
+  styles,
+  countrySelectStyle,
+  header,
+  children,
+  ...props
+}) => {
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onRequestClose}
+      statusBarTranslucent={statusBarTranslucent}
+      {...props}>
+      <View
+        testID="countrySelectContainer"
+        style={[styles.container, countrySelectStyle?.container]}>
+        <Pressable
+          testID="countrySelectBackdrop"
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabelBackdrop}
+          accessibilityHint={accessibilityHintBackdrop}
+          disabled={disabledBackdropPress || removedBackdrop}
+          style={[
+            styles.backdrop,
+            {alignItems: 'center', justifyContent: 'center'},
+            countrySelectStyle?.backdrop,
+            removedBackdrop && {backgroundColor: 'transparent'},
+          ]}
+          onPress={onBackdropPress || onRequestClose}
+        />
+        <View
+          testID="countrySelectContent"
+          style={[styles.content, countrySelectStyle?.content]}>
+          {header}
+          <View style={{flex: 1, flexDirection: 'row'}}>{children}</View>
+        </View>
+      </View>
+    </Modal>
+  );
+};

package/lib/components/SearchInput/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import {TextInput} from 'react-native';
+
+import {createStyles} from '../styles';
+import {translations} from '../../utils/getTranslation';
+import {ISearchInputProps, ICountrySelectLanguages} from '../../interface';
+
+export const SearchInput: React.FC<ISearchInputProps> = ({
+  theme,
+  language,
+  value,
+  onChangeText,
+  countrySelectStyle,
+  searchPlaceholder,
+  searchPlaceholderTextColor,
+  searchSelectionColor,
+  accessibilityLabelSearchInput,
+  accessibilityHintSearchInput,
+}) => {
+  const styles = createStyles(theme);
+  return (
+    <TextInput
+      testID="countrySelectSearchInput"
+      accessibilityRole="text"
+      accessibilityLabel={
+        accessibilityLabelSearchInput ||
+        translations.accessibilityLabelSearchInput[language]
+      }
+      accessibilityHint={
+        accessibilityHintSearchInput ||
+        translations.accessibilityHintSearchInput[language]
+      }
+      style={[styles.searchInput, countrySelectStyle?.searchInput]}
+      placeholder={
+        searchPlaceholder ||
+        translations.searchPlaceholder[language as ICountrySelectLanguages]
+      }
+      placeholderTextColor={
+        searchPlaceholderTextColor ||
+        (theme === 'dark' ? '#FFFFFF80' : '#00000080')
+      }
+      selectionColor={searchSelectionColor}
+      value={value}
+      onChangeText={onChangeText}
+    />
+  );
+};

package/lib/components/index.ts

@@ -1,2 +1 @@
 export {CountrySelect} from './CountrySelect';
-export {CountryItem} from './CountryItem';

package/lib/components/styles.js

@@ -29,24 +29,22 @@ export const createStyles = (theme, modalType, isFullScreen) =>
             height: '60%',
             backgroundColor: theme === 'dark' ? '#202020' : '#FFFFFF',
             borderRadius: 20,
-            padding: 16,
+            paddingVertical: 16,
           }
         : {
             marginTop: StatusBar.currentHeight,
             width: '100%',
+            borderTopLeftRadius: 20,
+            borderTopRightRadius: 20,
             backgroundColor: theme === 'dark' ? '#202020' : '#FFFFFF',
-            padding: 16,
-            paddingTop: 0,
           },
     dragHandleContainer: {
       width: '100%',
       height: 24,
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: theme === 'dark' ? '#202020' : '#FFFFFF',
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
-      marginBottom: -1,
     },
     dragHandleIndicator: {
       width: 40,
@@ -55,8 +53,8 @@ export const createStyles = (theme, modalType, isFullScreen) =>
       borderRadius: 2,
     },
     searchContainer: {
-      marginBottom: 16,
-      paddingTop: 8,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
       flexDirection: 'row',
     },
     searchInput: {
@@ -71,6 +69,8 @@ export const createStyles = (theme, modalType, isFullScreen) =>
     },
     list: {
       flex: 1,
+      padding: 16,
+      paddingTop: 0,
     },
     countryItem: {
       flex: 1,
@@ -83,6 +83,10 @@ export const createStyles = (theme, modalType, isFullScreen) =>
       borderWidth: 1,
       borderRadius: 8,
     },
+    countryItemSelected: {
+      backgroundColor: 'rgba(33, 150, 243, 0.15)',
+      borderColor: '#2196F3',
+    },
     flag: {
       flex: 0.1,
       marginRight: 10,
@@ -107,12 +111,18 @@ export const createStyles = (theme, modalType, isFullScreen) =>
       fontSize: 14,
       color: theme === 'dark' ? '#FFFFFF80' : '#00000080',
     },
+    callingCodeSelected: {
+      color: '#1976D2',
+    },
     countryName: {
       flex: 0.8,
       fontSize: 16,
       fontWeight: '500',
       color: theme === 'dark' ? '#FFFFFF' : '#000000',
     },
+    countryNameSelected: {
+      color: '#1976D2',
+    },
     sectionTitle: {
       fontSize: 16,
       fontWeight: '600',
@@ -143,4 +153,33 @@ export const createStyles = (theme, modalType, isFullScreen) =>
       fontSize: 16,
       color: theme === 'dark' ? '#FFFFFF' : '#000000',
     },
+    alphabetContainer: {
+      marginRight: 16,
+    },
+    alphabetLetter: {
+      width: 24,
+      height: 24,
+      borderRadius: 12,
+      marginVertical: 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'transparent',
+    },
+    alphabetLetterActive: {
+      backgroundColor: theme === 'dark' ? '#FFFFFF30' : '#00000020',
+    },
+    alphabetLetterDisabled: {
+      opacity: 0.4,
+    },
+    alphabetLetterText: {
+      fontSize: 12,
+      color: theme === 'dark' ? '#FFFFFFB3' : '#000000B3',
+      fontWeight: '600',
+    },
+    alphabetLetterTextActive: {
+      color: theme === 'dark' ? '#FFFFFF' : '#000000',
+    },
+    alphabetLetterTextDisabled: {
+      color: theme === 'dark' ? '#FFFFFF80' : '#00000080',
+    },
   });

package/lib/interface/alfabeticFilterProps.ts

@@ -0,0 +1,18 @@
+import {IThemeProps} from './theme';
+import {ICountrySelectStyle} from './countrySelectStyles';
+import {ICountrySelectLanguages} from './countrySelectLanguages';
+import {IListItem} from './itemList';
+
+export interface AlphabeticFilterProps {
+  theme?: IThemeProps;
+  activeLetter: string | null;
+  onPressLetter: (index: number) => void;
+  language: ICountrySelectLanguages;
+  countries: IListItem[];
+  allCountriesStartIndex: number;
+  countrySelectStyle?: ICountrySelectStyle;
+  accessibilityLabelAlphabetFilter?: string;
+  accessibilityHintAlphabetFilter?: string;
+  accessibilityLabelAlphabetLetter?: string;
+  accessibilityHintAlphabetLetter?: string;
+}

package/lib/interface/closeButtonProps.ts

@@ -0,0 +1,12 @@
+import {ICountrySelectLanguages} from './countrySelectLanguages';
+import {ICountrySelectStyle} from './countrySelectStyles';
+import {IThemeProps} from './theme';
+
+export interface ICloseButtonProps {
+  theme?: IThemeProps;
+  language: ICountrySelectLanguages;
+  onClose: () => void;
+  countrySelectStyle?: ICountrySelectStyle;
+  accessibilityLabelCloseButton?: string;
+  accessibilityHintCloseButton?: string;
+}

package/lib/interface/countryItemProps.ts

@@ -1,13 +1,14 @@
 import {ICountry} from './country';
+import {IThemeProps} from './theme';
 import {ICountrySelectStyle} from './countrySelectStyles';
 import {ICountrySelectLanguages} from './countrySelectLanguages';
 
 export interface ICountryItemProps {
-  item: ICountry;
+  country: ICountry;
+  theme?: IThemeProps;
+  isSelected?: boolean;
   onSelect: (country: ICountry) => void;
-  onClose: () => void;
   language: ICountrySelectLanguages;
-  theme?: 'light' | 'dark';
   countrySelectStyle?: ICountrySelectStyle;
   accessibilityLabel?: string;
   accessibilityHint?: string;

package/lib/interface/countrySelectProps.ts

@@ -1,24 +1,25 @@
 import * as React from 'react';
 import {ModalProps} from 'react-native';
+
 import {ICountry} from './country';
+import {IThemeProps} from './theme';
 import {ICountryCca2} from './countryCca2';
-import {ICountrySelectLanguages} from './countrySelectLanguages';
-import {ICountrySelectStyle} from './countrySelectStyles';
 import {ISectionTitle} from './sectionTitle';
+import {ICountrySelectStyle} from './countrySelectStyles';
+import {ICountrySelectLanguages} from './countrySelectLanguages';
 
-export interface ICountrySelectProps extends ModalProps {
+interface ICountrySelectBaseProps extends ModalProps, IThemeProps {
   visible: boolean;
   onClose: () => void;
-  onSelect: (country: ICountry) => void;
   modalType?: 'bottomSheet' | 'popup';
   countrySelectStyle?: ICountrySelectStyle;
-  theme?: 'light' | 'dark';
   isFullScreen?: boolean;
   popularCountries?: string[];
   visibleCountries?: ICountryCca2[];
   hiddenCountries?: ICountryCca2[];
   language?: ICountrySelectLanguages;
   showSearchInput?: boolean;
+  showAlphabetFilter?: boolean;
   searchPlaceholder?: string;
   searchPlaceholderTextColor?: string;
   searchSelectionColor?: string;
@@ -47,4 +48,23 @@ export interface ICountrySelectProps extends ModalProps {
   accessibilityHintCountriesList?: string;
   accessibilityLabelCountryItem?: string;
   accessibilityHintCountryItem?: string;
+  accessibilityLabelAlphabetFilter?: string;
+  accessibilityHintAlphabetFilter?: string;
+  accessibilityLabelAlphabetLetter?: string;
+  accessibilityHintAlphabetLetter?: string;
 }
+
+interface ICountrySelectSingleProps extends ICountrySelectBaseProps {
+  isMultiSelect?: false;
+  onSelect: (country: ICountry) => void;
+}
+
+interface ICountrySelectMultiProps extends ICountrySelectBaseProps {
+  isMultiSelect: true;
+  selectedCountries: ICountry[];
+  onSelect: (country: ICountry[]) => void;
+}
+
+export type ICountrySelectProps =
+  | ICountrySelectSingleProps
+  | ICountrySelectMultiProps;

package/lib/interface/countrySelectStyles.ts

@@ -19,4 +19,11 @@ export interface ICountrySelectStyle {
   countryName?: StyleProp<TextStyle>;
   countryNotFoundContainer?: StyleProp<ViewStyle>;
   countryNotFoundMessage?: StyleProp<TextStyle>;
+  alphabetContainer?: StyleProp<ViewStyle>;
+  alphabetLetter?: StyleProp<ViewStyle>;
+  alphabetLetterText?: StyleProp<TextStyle>;
+  alphabetLetterActive?: StyleProp<ViewStyle>;
+  alphabetLetterDisabled?: StyleProp<ViewStyle>;
+  alphabetLetterTextActive?: StyleProp<TextStyle>;
+  alphabetLetterTextDisabled?: StyleProp<TextStyle>;
 }

package/lib/interface/index.ts

@@ -6,3 +6,6 @@ export * from './countryItemProps';
 export * from './sectionTitle';
 export * from './itemList';
 export * from './countrySelectStyles';
+export * from './closeButtonProps';
+export * from './searchInputProps';
+export * from './theme';

package/lib/interface/searchInputProps.ts

@@ -0,0 +1,16 @@
+import {ICountrySelectLanguages} from './countrySelectLanguages';
+import {ICountrySelectStyle} from './countrySelectStyles';
+import {IThemeProps} from './theme';
+
+export interface ISearchInputProps {
+  theme?: IThemeProps;
+  language: ICountrySelectLanguages;
+  value: string;
+  onChangeText: (text: string) => void;
+  countrySelectStyle?: ICountrySelectStyle;
+  searchPlaceholder?: string;
+  searchPlaceholderTextColor?: string;
+  searchSelectionColor?: string;
+  accessibilityLabelSearchInput?: string;
+  accessibilityHintSearchInput?: string;
+}

package/lib/interface/theme.ts

@@ -0,0 +1,3 @@
+export interface IThemeProps {
+  theme?: 'light' | 'dark';
+}

package/lib/utils/createAlphabet.ts

@@ -0,0 +1,3 @@
+export const createAlphabet = (): string[] => {
+  return Array.from({length: 26}, (_v, i) => String.fromCharCode(65 + i));
+};

package/lib/utils/getCountriesList.ts

@@ -0,0 +1,100 @@
+import {translations} from './getTranslation';
+import countries from '../constants/countries.json';
+import {normalizeCountryName} from './normalizeCountryName';
+import {ICountry, ICountrySelectLanguages, IListItem} from '../interface';
+import {sortCountriesAlphabetically} from './sortCountriesAlphabetically';
+
+type Params = {
+  searchQuery: string;
+  popularCountries: string[];
+  language: ICountrySelectLanguages;
+  visibleCountries: string[];
+  hiddenCountries: string[];
+};
+
+export function getCountriesList({
+  searchQuery,
+  popularCountries,
+  language,
+  visibleCountries,
+  hiddenCountries,
+}: Params): IListItem[] {
+  const query = searchQuery.toLowerCase().trim();
+
+  let countriesData = countries as unknown as ICountry[];
+
+  if (visibleCountries.length > 0 && hiddenCountries.length > 0) {
+    countriesData = (countries as unknown as ICountry[]).filter(country => {
+      return (
+        visibleCountries.includes(country.cca2) &&
+        !hiddenCountries.includes(country.cca2)
+      );
+    });
+  }
+
+  if (visibleCountries.length > 0 && hiddenCountries.length === 0) {
+    countriesData = (countries as unknown as ICountry[]).filter(country =>
+      visibleCountries.includes(country.cca2),
+    );
+  }
+
+  if (hiddenCountries.length > 0 && visibleCountries.length === 0) {
+    countriesData = (countries as unknown as ICountry[]).filter(
+      country => !hiddenCountries.includes(country.cca2),
+    );
+  }
+
+  if (query.length > 0) {
+    const filteredCountries = countriesData.filter(country => {
+      const countryName =
+        country.translations[language]?.common || country.name.common || '';
+      const normalizedCountryName = normalizeCountryName(
+        countryName.toLowerCase(),
+      );
+      const normalizedQuery = normalizeCountryName(query);
+      const callingCode = country.idd.root.toLowerCase();
+      const flag = country.flag.toLowerCase();
+      const countryCode = country.cca2.toLowerCase();
+
+      return (
+        normalizedCountryName.includes(normalizedQuery) ||
+        countryName.toLowerCase().includes(query) ||
+        callingCode.includes(query) ||
+        flag.includes(query) ||
+        countryCode.includes(query)
+      );
+    });
+
+    return sortCountriesAlphabetically(filteredCountries, language);
+  }
+
+  const popularCountriesData = sortCountriesAlphabetically(
+    countriesData.filter(country => popularCountries.includes(country.cca2)),
+    language,
+  );
+
+  const otherCountriesData = sortCountriesAlphabetically(
+    countriesData.filter(country => !popularCountries.includes(country.cca2)),
+    language,
+  );
+
+  const result: IListItem[] = [];
+
+  if (popularCountriesData.length > 0) {
+    result.push({
+      isSection: true as const,
+      title:
+        translations.popularCountriesTitle[language as ICountrySelectLanguages],
+    });
+
+    result.push(...popularCountriesData);
+    result.push({
+      isSection: true as const,
+      title:
+        translations.allCountriesTitle[language as ICountrySelectLanguages],
+    });
+  }
+
+  result.push(...otherCountriesData);
+  return result;
+}

package/lib/utils/getCountryNameInLanguage.ts

@@ -0,0 +1,8 @@
+import {ICountrySelectLanguages, ICountry} from '../interface';
+
+export const getCountryNameInLanguage = (
+  country: ICountry,
+  language: ICountrySelectLanguages = 'eng',
+): string => {
+  return country.translations[language]?.common || country.name.common || '';
+};