@fto-consult/expo-ui 8.82.1 → 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.
|
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))){
|
@@ -6,7 +6,7 @@ import Menu from "$ecomponents/Menu";
|
|
6
6
|
import List from "$ecomponents/List";
|
7
7
|
import theme from "$theme";
|
8
8
|
import Icon from "$ecomponents/Icon";
|
9
|
-
import { defaultStr
|
9
|
+
import { defaultStr} from "$cutils";
|
10
10
|
import { HStack } from "$ecomponents/Stack";
|
11
11
|
import Label from "$ecomponents/Label";
|
12
12
|
import Divider from "$ecomponents/Divider";
|
@@ -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 {
|
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
|
-
|
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
|
-
|
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
|
-
|
183
|
-
|
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
|
-
|
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 "$
|
8
|
+
import {defaultDecimal} from "$cutils";
|
9
9
|
import {LogoProgress} from "$ecomponents/Logo";
|
10
10
|
import styles, {
|
11
11
|
_solidBackground,
|