@fto-consult/expo-ui 8.82.8 → 8.82.9

package/src/components/Form/Fields/Field.js

@@ -16,6 +16,7 @@ import {StyleSheet} from "react-native";
 import {isDevEnv} from "$cplatform";
 import {isMobileMedia} from "$cplatform/dimensions";
 import APP from "$capp/instance";
+import { prepareState as preparePhoneInput } from "$ecomponents/PhoneInput";
 ///la combinaison à appliquer pour modifier le contenu textuel de la valeur
 let sanitizeKeyEvent = 'ctrl+m' //le type hashtag
 import defaultKeyboardEvents from "../utils/keyboardEvents";
@@ -317,7 +318,8 @@ export default class Field extends AppComponent {
                         return "Veuillez saisir une addresse email valide";
                     }
                 } else if(this.type ==="tel" || this.type =="phone"){
-                    if(!isValidPhoneNumber(args.displayValue || value)){
+                    const nState = preparePhoneInput({...args,defaultValue:args.displayValue||args.value});
+                    if(!isValidPhoneNumber(nState?.displayValue)){
                         return "Merci d'entrer un numéro de téléphone valide";
                     }
                 }  else if(((this.props.allowWhiteSpaces === false) || ((this.type ==='id' || this.type =='piece') && this.props.allowWhiteSpaces !== true))){

package/src/components/PhoneInput/index.js

@@ -19,7 +19,7 @@ const asYouTypeFormatter = libPhoneNumber.AsYouTypeFormatter;
 
 // eslint-disable-next-line class-methods-use-this
 export const format = (number, iso2) => {
-    const formatter = new asYouTypeFormatter(iso2); // eslint-disable-line new-cap
+    const formatter = new asYouTypeFormatter(defaultStr(iso2).toUpperCase().trim()); // eslint-disable-line new-cap
     let formatted;
     number.replace(/-/g, '')
         .replace(/ /g, '')
@@ -32,21 +32,23 @@ export const format = (number, iso2) => {
 
     return formatted;
 }
-const prepareState = ({defaultValue,country})=>{
-    defaultValue = defaultStr(defaultValue);
+export const prepareState = ({defaultValue,country})=>{
+    defaultValue = defaultStr(defaultValue).trim();
     country = defaultStr(country,appConfig.countryCode).toLowerCase();
-    if (defaultValue) {
-        if (defaultValue[0] !== '+') {
-            defaultValue = `+${defaultValue}`;
+    country = isNonNullString(defaultValue)? PhoneNumber.getCountryCodeOfNumber(defaultValue) || country : country;
+    const countryData = country ? PhoneNumber.getCountryDataByCode(country) : null;
+    const prefix = getDialCodePrefix(countryData?.dialCode);
+    if (defaultValue) { 
+        let defValue = defaultValue;
+        if(prefix && !defaultValue.startsWith("+") && !defaultValue.startsWith(prefix)){
+            defValue = prefix+defaultValue;
         }
-        country = PhoneNumber.getCountryCodeOfNumber(defaultValue) || country;
-        const displayValue = format(defaultValue,country);
+        const displayValue = format(defValue,country);
         if(displayValue){
             return {displayValue,defaultValue,country}
         }
-    } else if(country) {
-        const countryData = PhoneNumber.getCountryDataByCode(country);
-        return {displayValue:countryData ? `+${countryData.dialCode}` : '',defaultValue:'',country};
+    } else if(prefix) {
+        return {displayValue:countryData ? prefix : '',defaultValue:'',country};
     }
     return {defaultValue:'',displayValue:'',country:''};
 }
@@ -85,7 +87,7 @@ export default function PhoneInputComponent(props){
     },[])
     React.useEffect(()=>{
         const nState = prepareState({defaultValue,country:country || state.country})
-        if(nState.defaultValue !== state.defaultValue && nState.country !== state.country){
+        if(nState.defaultValue !== state.defaultValue && nState.country !== state.country && nState.displayValue !== state.displayValue){
             setState({...state,...nState});
         }
     },[defaultValue,country])