@fto-consult/expo-ui 5.7.9 → 5.7.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "5.7.9",
+  "version": "5.7.10",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

package/src/components/PhoneInput/index.js

@@ -66,10 +66,10 @@ export default function PhoneInputComponent(props){
     contentContainerProps.style = [styles.inputContainer,contentContainerProps.style];
     const ref = React.useRef(null);
     const [state,setState] = React.useState({
-        visible : false,
         ...prepareState({defaultValue,country})
-    })
-    const prevVisible = React.usePrevious(state.visible);
+    });
+    const [visible,setVisible] = React.useState(false);
+    const prevVisible = React.usePrevious(visible);
     label = defaultVal(label,text);
     React.useEffect(()=>{
         React.setRef(ref,ref.current,setRef);
@@ -82,8 +82,8 @@ export default function PhoneInputComponent(props){
         }
     },[defaultValue,country])
     const onPressFlag = (e)=>{
-        if(!state.visible){
-            setState({...state,visible:true})
+        if(!visible){
+            setVisible(true);
         }
     }
     inputProps = defaultObj(inputProps);
@@ -131,12 +131,17 @@ export default function PhoneInputComponent(props){
     return <SelectCountry
         label = {label}
         controlled = {true}
-        visible = {state.visible}
+        visible = {visible}
         defaultValue = {state.country}
         testID = {testID+"_SelectCountry"}
         onDismiss = {({value},force) =>{
-            if(force !== true && value === state.country && state.visible == prevVisible) return;
-            setState({...state,...prepareState({country:value,defaultValue:state.country==value?state.defaultValue:""}),visible:false})
+            if(force !== true && value === state.country && visible == prevVisible) return;
+            if(visible){
+                setVisible(false);
+            }
+        }}
+        onChange = {({value})=>{
+            setState({...state,...prepareState({country:value,defaultValue:state.country==value?state.defaultValue:""})});
         }}
         anchor = {
             <>

package/src/components/SimpleSelect/index.js

@@ -16,13 +16,15 @@ import { matchOperators,getSearchTimeout,canAutoFocusSearchField} from "$ecompon
 import Dialog from "$ecomponents/Dialog";
 
 const  SimpleSelect = React.forwardRef((props,ref)=>{
-    let {style : customStyle,onMount,mode,showSearch,anchorContainerProps,renderText,contentContainerProps,withCheckedIcon,testID,selectionColor,dialogProps,onShow,anchor,onUnmont,controlled,onDismiss,visible:controlledVisible,selectedColor,inputProps,itemProps,itemContainerProps,label,listProps,editable,readOnly,text,filter,renderItem,itemValue,getItemValue,defaultValue,items:menuItems,onPress,onChange,disabled,...rest} = props;
+    let {style : customStyle,onMount,mode,showSearch,anchorContainerProps,renderText,contentContainerProps,withCheckedIcon,testID,selectionColor,dialogProps,onShow,anchor,onUnmont,controlled:cr,onDismiss,visible:controlledVisible,selectedColor,inputProps,itemProps,itemContainerProps,label,listProps,editable,readOnly,text,filter,renderItem,itemValue,getItemValue,defaultValue,items:menuItems,onPress,onChange,disabled,...rest} = props;
     const flattenStyle = StyleSheet.flatten(customStyle) || {};
+    const controlledRef = React.useRef(typeof controlledVisible ==='boolean'? true : false);
+    const controlled = controlledRef.current;
     const [layout,setLayout] = React.useState({
         height: 0,
         width: 0,
     });
-    const [visible,setVisible] = React.useState(controlled?controlledVisible:false)
+    const [visible,setVisible] = controlled ? [controlledVisible] : React.useState(controlled?controlledVisible:false);
     const [value,setValue] = React.useState(defaultValue !== undefined? defaultValue:undefined);
     contentContainerProps = defaultObj(contentContainerProps);
     const prevLayout = React.usePrevious(layout);
@@ -94,13 +96,12 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         if(update !== true && compare(value,node.value)) return;
         selectedRef.current = node;
         if(update === true){
+            setValue(node.value);
             if(controlled && onDismiss){
                 if(onDismiss({visible,value,items,defaultValue},defaultObj(selectedRef.current)) === false) return;
             }
-            setValue(node.value);
-            const vv = controlled?undefined:false;
-            if(typeof vv =='boolean' && vv !==visible){
-                setVisible(vv);
+            if(!controlled && visible){
+                setVisible(false);
             }
         }
     }