@fto-consult/expo-ui 8.82.2 → 8.82.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fto-consult/expo-ui",
3
- "version": "8.82.2",
3
+ "version": "8.82.3",
4
4
  "description": "Bibliothèque de composants UI Expo,react-native",
5
5
  "react-native-paper-doc": "https://github.com/callstack/react-native-paper/tree/main/docs/docs/guides",
6
6
  "scripts": {
@@ -317,7 +317,7 @@ export default class Field extends AppComponent {
317
317
  return "Veuillez saisir une addresse email valide";
318
318
  }
319
319
  } else if(this.type ==="tel" || this.type =="phone"){
320
- if(!isValidPhoneNumber(value)){
320
+ if(!isValidPhoneNumber(args.displayValue || value)){
321
321
  return "Merci d'entrer un numéro de téléphone valide";
322
322
  }
323
323
  } else if(((this.props.allowWhiteSpaces === false) || ((this.type ==='id' || this.type =='piece') && this.props.allowWhiteSpaces !== true))){
@@ -14,7 +14,7 @@ export const parse = (number,iso2)=>{
14
14
  try {
15
15
  return phoneUtil.parse(number, defaultStr(iso2).toLowerCase());
16
16
  } catch (err) {
17
- console.log(`Exception was thrown on parsing phone number : ${err.toString()}`);
17
+ console.log(`Exception was thrown on parsing phone number : ${err.toString()}`,number," country : ",iso2);
18
18
  return null;
19
19
  }
20
20
  }
@@ -4,7 +4,7 @@ import TextField,{inputModes} from "$ecomponents/TextField";
4
4
  import { StyleSheet,Image,Pressable} from 'react-native';
5
5
  import PropTypes from "prop-types";
6
6
  import theme,{DISABLED_OPACITY} from "$theme";
7
- import {keyboardTypes,flatMode} from "$ecomponents/TextField";
7
+ import {flatMode} from "$ecomponents/TextField";
8
8
  import Icon from "$ecomponents/Icon";
9
9
  import PhoneNumber from "./PhoneNumber";
10
10
  import SelectCountry from "$ecomponents/Countries/SelectCountry";
@@ -34,12 +34,12 @@ export const format = (number, iso2) => {
34
34
  }
35
35
  const prepareState = ({defaultValue,country})=>{
36
36
  defaultValue = defaultStr(defaultValue);
37
- country = defaultStr(country,appConfig.countryCode);
37
+ country = defaultStr(country,appConfig.countryCode).toLowerCase();
38
38
  if (defaultValue) {
39
39
  if (defaultValue[0] !== '+') {
40
40
  defaultValue = `+${defaultValue}`;
41
41
  }
42
- country = PhoneNumber.getCountryCodeOfNumber(defaultValue);
42
+ country = PhoneNumber.getCountryCodeOfNumber(defaultValue) || country;
43
43
  const displayValue = format(defaultValue,country);
44
44
  if(displayValue){
45
45
  return {displayValue,defaultValue,country}
@@ -59,9 +59,18 @@ const possiblyEliminateZeroAfterCountryCode = (number) => {
59
59
  : number;
60
60
  }
61
61
 
62
+ const getValue = (text) => {
63
+ return isNonNullString(text) ? text.replace(/[^0-9]/g, '') : defaultStr(text);
64
+ }
65
+
66
+ const getDialCodePrefix = (countryDialCode)=>{
67
+ return isNonNullString(countryDialCode) ? `+${countryDialCode.trim().ltrim("+")}` : "";
68
+ }
69
+
62
70
  export default function PhoneInputComponent(props){
63
- let {country,onChange,contentContainerProps,allowZeroAfterCountryCode,testID,inputProps,selectionColor,label,error,errorText,helperText,defaultValue,text,setRef,...rest} = props;
71
+ let {country,onChange,contentContainerProps,dialCodePrefix:dCodePrefix,allowZeroAfterCountryCode,testID,inputProps,selectionColor,label,error,errorText,helperText,defaultValue,text,setRef,...rest} = props;
64
72
  rest = defaultObj(rest);
73
+ const displayDialCodePrefix = dCodePrefix != false ? true : false;
65
74
  contentContainerProps = defaultObj(contentContainerProps);
66
75
  contentContainerProps.style = [styles.inputContainer,contentContainerProps.style];
67
76
  const ref = React.useRef(null);
@@ -73,10 +82,9 @@ export default function PhoneInputComponent(props){
73
82
  label = defaultVal(label,text);
74
83
  React.useEffect(()=>{
75
84
  React.setRef(ref,ref.current,setRef);
76
- setState({...state})
77
85
  },[])
78
86
  React.useEffect(()=>{
79
- const nState = prepareState({defaultValue,country});
87
+ const nState = prepareState({defaultValue,country:country || state.country})
80
88
  if(nState.defaultValue !== state.defaultValue && nState.country !== state.country){
81
89
  setState({...state,...nState});
82
90
  }
@@ -89,13 +97,9 @@ export default function PhoneInputComponent(props){
89
97
  inputProps = defaultObj(inputProps);
90
98
  const disabledStyle = props.disabled ?{opacity:DISABLED_OPACITY}:undefined;
91
99
  const flagImageSource = getFlag(state.country);
92
- const getValue = (text) => {
93
- return isNonNullString(text) ? text.replace(/[^0-9]/g, '') : defaultStr(state.defaultValue);
94
- }
95
-
100
+
96
101
  const updateValue = (number) => {
97
102
  let modifiedNumber = getValue(number);
98
-
99
103
  if (modifiedNumber[0] !== '+' && number.length) {
100
104
  modifiedNumber = `+${modifiedNumber}`;
101
105
  }
@@ -109,20 +113,24 @@ export default function PhoneInputComponent(props){
109
113
  const countryData = PhoneNumber.getCountryDataByCode(iso2);
110
114
  countryDialCode = countryData.dialCode;
111
115
  }
112
-
113
116
  let displayValue;
114
- if (modifiedNumber === `+${countryDialCode}`) {
117
+ const dialCodePrefix = getDialCodePrefix(countryDialCode);
118
+ if (modifiedNumber === dialCodePrefix) {
115
119
  displayValue = modifiedNumber;
116
120
  } else {
117
121
  displayValue = format(modifiedNumber);
118
122
  }
123
+ if(!displayDialCodePrefix){
124
+ modifiedNumber = defaultStr(modifiedNumber).trim().ltrim(dialCodePrefix);
125
+ displayValue = dialCodePrefix+defaultStr(displayValue).trim().ltrim(dialCodePrefix);
126
+ }
119
127
  const nState = {
120
128
  country : iso2,
121
129
  displayValue,
122
130
  defaultValue : modifiedNumber,
123
- countryDialCode
131
+ countryDialCode,
132
+ dialCodePrefix
124
133
  }
125
- setState(nState);
126
134
  return nState;
127
135
  }
128
136
  const pointerEvents = props.disabled || props.readOnly ? "none":"auto";
@@ -179,14 +187,19 @@ export default function PhoneInputComponent(props){
179
187
  const {value:nValue} = args;
180
188
  const prevState = state;
181
189
  const nState = updateValue(nValue);
182
- let value = defaultStr(nState.defaultValue).trim();
183
- if(prevState.defaultValue === value) return;
184
- if(value =="+" || value =="("){
185
- value = "";
186
- }
187
- if(prevState.defaultValue === value) return;
190
+ setState({...state,...nState});
191
+ const dialCodePrefix = getDialCodePrefix(prevState.countryDialCode) || getDialCodePrefix(state.countryDialCode);
188
192
  if(onChange){
189
- onChange({...nState,value,country:nState.country,displayValue:nState.displayValue,realValue:nState.defaultValue})
193
+ let value = defaultStr(nState.defaultValue).trim();
194
+ if(value =="+" || value =="("){
195
+ value = "";
196
+ }
197
+ const prevVal = defaultStr(prevState.defaultValue).trim();
198
+ if(prevVal.ltrim(dialCodePrefix) === value.ltrim(dialCodePrefix)) return;
199
+ const canChange = value.length < 5 || PhoneNumber.parse(nState.displayValue,nState.countryCode);
200
+ if(canChange) {
201
+ onChange({...nState,value,country:nState.country,displayValue:nState.displayValue,realValue:nState.defaultValue})
202
+ }
190
203
  }
191
204
  }}
192
205
  ref = {ref}
@@ -227,4 +240,5 @@ PhoneInputComponent.propTypes = {
227
240
  onChange : PropTypes.func,
228
241
  autoFormat : PropTypes.bool, //si le texte de telephone sera formatté automatiquement
229
242
  allowZeroAfterCountryCode : PropTypes.bool,
243
+ dialCodePrefix : PropTypes.bool, //si le prefix du pays sera supprimée de la valeur du nombre
230
244
  }
@@ -5,7 +5,7 @@ import * as React from "react"
5
5
  import {Animated, StyleSheet } from "react-native";
6
6
  import View from "$ecomponents/View";
7
7
  import {isNativeMobile} from "$platform";
8
- import {defaultDecimal} from "$utils";
8
+ import {defaultDecimal} from "$cutils";
9
9
  import {LogoProgress} from "$ecomponents/Logo";
10
10
  import styles, {
11
11
  _solidBackground,