feat: version 0.5.0

AstrOOnauta · Sep 12, 2023 · 318d478 · 318d478
1 parent e4476d6
commit 318d478
Show file tree

Hide file tree

Showing 24 changed files with 15,706 additions and 4,324 deletions.
diff --git a/README.md b/README.md
diff --git a/gif/preview.gif b/gif/preview.gif
diff --git a/images/preview.png b/images/preview.png
diff --git a/lib/constants/countries.js b/lib/constants/countries.js
diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -1,4 +1,6 @@
+import { ITheme } from './interfaces/theme';
 import { ICountry } from './interfaces/country';
+import { ILanguage } from './interfaces/language';
 import { IPhoneInputRef } from './interfaces/phoneInputRef';
 import { PhoneInputProps } from './interfaces/phoneInputProps';
 
@@ -10,25 +12,27 @@ declare function getCountryByPhoneNumber(
   phoneNumber: string
 ): ICountry | undefined;
 
-declare function getCountryByCca2(
-  phoneNumber: string
-): ICountry | undefined;
+declare function getCountryByCca2(cca2: string): ICountry | undefined;
 
 declare function getCountriesByCallingCode(
-  phoneNumber: string
+  callingCode: string
 ): ICountry[] | undefined;
 
 declare function getCountriesByName(
-  phoneNumber: string
+  name: string,
+  language: ILanguage
 ): ICountry[] | undefined;
 
+export default PhoneInput;
+
 export {
-  PhoneInput,
   getAllCountries,
   getCountryByPhoneNumber,
   getCountryByCca2,
   getCountriesByCallingCode,
   getCountriesByName,
+  ITheme,
+  ILanguage,
   ICountry,
   IPhoneInputRef,
   PhoneInputProps,

diff --git a/lib/index.js b/lib/index.js
@@ -5,35 +5,49 @@ import React, {
   forwardRef,
 } from 'react';
 import {
-  StyleSheet,
-  Dimensions,
   View,
+  Text,
+  TouchableOpacity,
   TextInput,
 } from 'react-native';
-import CountryPicker, {
-  DARK_THEME,
-  DEFAULT_THEME,
-} from 'react-native-country-picker-modal';
+import { CountryPicker } from 'react-native-country-codes-picker';
 
+import styles from './styles';
+import getInputMask from './utils/getInputMask';
 import getAllCountries from './utils/getAllCountries';
 import getCountriesByName from './utils/getCountriesByName';
 import getCountriesByCallingCode from './utils/getCountriesByCallingCode';
 import getCountryByCca2 from './utils/getCountryByCca2';
 import getCountryByPhoneNumber from './utils/getCountryByPhoneNumber';
-import phoneMask from './utils/inputMask';
+import {
+  getCountryNotFoundMessage,
+  getPhoneNumberInputPlaceholder,
+  getSearchInputPlaceholder,
+} from './utils/getPlaceholders';
+import {
+  getContainerStyle,
+  getCountryPickerStyle,
+  getFlagContainerStyle,
+  getFlagTextStyle,
+  getInputStyle,
+} from './utils/getStyles';
 
 const PhoneInput = forwardRef(
   (
     {
+      theme,
+      language,
       placeholder,
       placeholderTextColor,
       selectionColor,
       containerStyle,
       flagContainerStyle,
+      flagTextStyle,
       inputStyle,
-      withDarkTheme,
       disabled,
       modalDisabled,
+      modalHeight,
+      defaultCountry,
       defaultValue,
       onChangePhoneNumber,
       selectedCountry,
@@ -43,9 +57,7 @@ const PhoneInput = forwardRef(
     },
     ref
   ) => {
-    const [containerWidth, setContainerWidth] = useState(
-      Dimensions.get('window').width
-    );
+    const [show, setShow] = useState(false);
     const [defaultCca2, setDefaultCca2] = useState('');
     const [inputValue, setInputValue] = useState(null);
     const [countryValue, setCountryValue] = useState(null);
@@ -61,19 +73,24 @@ const PhoneInput = forwardRef(
       getSelectedCountry: () => countryValue,
       selectedCountry: countryValue,
       props: {
+        theme,
+        language,
         placeholder,
         placeholderTextColor,
         selectionColor,
         containerStyle,
         flagContainerStyle,
+        flagTextStyle,
         inputStyle,
-        withDarkTheme,
         disabled,
         modalDisabled,
+        modalHeight,
+        defaultCountry,
         defaultValue,
         onChangePhoneNumber,
         selectedCountry,
         onChangeSelectedCountry,
+        customMask,
         ...rest,
       },
     };
@@ -96,6 +113,8 @@ const PhoneInput = forwardRef(
     }
 
     function onSelect(country) {
+      setShow(false);
+
       if (ref) {
         setInputValue('');
       } else {
@@ -105,9 +124,9 @@ const PhoneInput = forwardRef(
       if (onChangeSelectedCountry || ref) {
         const newValue = {
           name: country.name,
-          cca2: country.cca2,
+          cca2: country.code,
           flag: country.flag,
-          callingCode: `+${country.callingCode[0]}`,
+          callingCode: country.dial_code,
         };
 
         if (ref) {
@@ -120,11 +139,11 @@ const PhoneInput = forwardRef(
     }
 
     function onChangeText(phoneNumber, callingCode) {
-      const res = phoneMask(
+      const res = getInputMask(
         phoneNumber,
         callingCode ? callingCode : countryValue?.callingCode,
         countryValue?.cca2,
-        customMask ? customMask : null,
+        customMask ? customMask : null
       );
 
       if (ref) {
@@ -135,6 +154,17 @@ const PhoneInput = forwardRef(
       }
     }
 
+    useEffect(() => {
+      if (defaultCountry) {
+        if (ref) {
+          setCountryValue(getCountryByCca2(defaultCountry));
+          updateRef('', getCountryByCca2(defaultCountry));
+        } else {
+          onChangeSelectedCountry(getCountryByCca2(defaultCountry));
+        }
+      }
+    }, [defaultCountry]);
+
     useEffect(() => {
       if (ref) {
         setInputValue('');
@@ -172,12 +202,7 @@ const PhoneInput = forwardRef(
         }
       } else {
         if (!countryValue) {
-          const defaultCountry = {
-            callingCode: '+55',
-            cca2: 'BR',
-            flag: 'flag-br',
-            name: 'Brazil',
-          };
+          const defaultCountry = getCountryByCca2('BR');
 
           if (ref) {
             setCountryValue(defaultCountry);
@@ -259,130 +284,71 @@ const PhoneInput = forwardRef(
       );
     } else {
       return (
-        <View
-          style={[
-            withDarkTheme
-              ? {
-                  ...styles.darkContainer,
-                  backgroundColor: disabled
-                    ? '#858585'
-                    : styles.darkContainer.backgroundColor,
-                }
-              : {
-                  ...styles.lightContainer,
-                  backgroundColor: disabled
-                    ? '#E3E3E3'
-                    : styles.lightContainer.backgroundColor,
-                },
-            containerStyle ? containerStyle : {},
-          ]}
-          onLayout={(e) =>
-            setContainerWidth(e.nativeEvent.layout.width)
-          }
-        >
-          <CountryPicker
-            containerButtonStyle={[
-              flagContainerBase,
-              countryValue?.cca2 === 'VA' ? { width: 140 } : {},
-              flagContainerStyle ? flagContainerStyle : {},
-            ]}
-            onSelect={onSelect}
-            withFilter
-            withAlphaFilter
-            withCallingCode
-            withCallingCodeButton={countryValue || defaultCca2}
-            theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
-            countryCode={
-              countryValue ? countryValue?.cca2 : defaultCca2
-            }
-            modalProps={
-              disabled || modalDisabled ? { visible: false } : {}
-            }
-          />
-          <TextInput
-            style={[
-              withDarkTheme ? styles.darkInput : styles.lightInput,
-              { width: containerWidth - 100 },
-              inputStyle ? inputStyle : {},
-            ]}
-            placeholder={
-              placeholder ? placeholder : 'Insert your phone number'
-            }
-            placeholderTextColor={
-              placeholderTextColor
-                ? placeholderTextColor
-                : withDarkTheme
-                ? '#CCCCCC'
-                : '#DDDDDD'
-            }
-            selectionColor={
-              selectionColor
-                ? selectionColor
-                : withDarkTheme
-                ? 'rgba(255,255,255, .4)'
-                : 'rgba(0 ,0 ,0 , .4)'
-            }
-            editable={!disabled}
-            value={inputValue}
-            onChangeText={onChangeText}
-            keyboardType="numeric"
-            ref={textInputRef}
-            {...rest}
-          />
-        </View>
+        <>
+          <View
+            style={getContainerStyle(theme, containerStyle, disabled)}
+          >
+            <TouchableOpacity
+              activeOpacity={disabled || modalDisabled ? 1 : 0.6}
+              onPress={() =>
+                disabled || modalDisabled ? null : setShow(true)
+              }
+              style={getFlagContainerStyle(theme, flagContainerStyle)}
+            >
+              <Text style={styles.flag}>{countryValue?.flag}</Text>
+              <Text style={getFlagTextStyle(theme, flagTextStyle)}>
+                {countryValue?.callingCode}
+              </Text>
+            </TouchableOpacity>
+            <TextInput
+              style={getInputStyle(theme, inputStyle)}
+              placeholder={
+                placeholder ||
+                getPhoneNumberInputPlaceholder(language || 'en')
+              }
+              placeholderTextColor={
+                placeholderTextColor || theme === 'dark'
+                  ? '#CCCCCC'
+                  : '#AAAAAA'
+              }
+              selectionColor={
+                selectionColor || theme === 'dark'
+                  ? 'rgba(255,255,255, .4)'
+                  : 'rgba(0 ,0 ,0 , .4)'
+              }
+              editable={!disabled}
+              value={inputValue}
+              onChangeText={onChangeText}
+              keyboardType="numeric"
+              ref={textInputRef}
+              {...rest}
+            />
+          </View>
+          {!disabled && !modalDisabled && show ? (
+            <CountryPicker
+              show={show}
+              lang={language}
+              inputPlaceholder={getSearchInputPlaceholder(
+                language || 'en'
+              )}
+              searchMessage={getCountryNotFoundMessage(
+                language || 'en'
+              )}
+              enableModalAvoiding
+              style={getCountryPickerStyle(theme, modalHeight)}
+              pickerButtonOnPress={onSelect}
+              onBackdropPress={() => setShow(false)}
+            />
+          ) : null}
+        </>
       );
     }
   }
 );
 
-const containerBase = {
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  borderWidth: 1,
-  borderStyle: 'solid',
-  borderRadius: 8,
-  width: '100%',
-  height: 45,
-};
-
-const flagContainerBase = {
-  width: 100,
-  height: '99%',
-  alignItems: 'center',
-  justifyContent: 'center',
-};
-
-const inputBase = {
-  width: Dimensions.get('window').width - 140,
-  paddingVertical: 8,
-  paddingHorizontal: 16,
-  fontSize: 16,
-};
-
-const styles = StyleSheet.create({
-  lightContainer: {
-    ...containerBase,
-    backgroundColor: '#FFFFFF',
-    borderColor: '#AAAAAA',
-  },
-  darkContainer: {
-    ...containerBase,
-    backgroundColor: '#575757',
-    borderColor: '#F3F3F3',
-  },
-  lightInput: {
-    ...inputBase,
-    color: '#0A0A0A',
-  },
-  darkInput: {
-    ...inputBase,
-    color: '#F3F3F3',
-  },
-});
+export default PhoneInput;
 
 export {
-  PhoneInput,
   getAllCountries,
   getCountryByPhoneNumber,
   getCountryByCca2,