@fto-consult/expo-ui 1.0.37 → 1.1.1

package/babel.config.alias.js

@@ -53,6 +53,9 @@ module.exports = (opts)=>{
     if(r["$navigation"] == r["$cnavigation"]){
         r["$navigation"] = r["$enavigation"];
     }
+    if(r["$loginComponent"] == r["$cloginComponent"]){
+        r["$loginComponent"] = path.resolve(expo,"auth","Login");
+    }
     if(typeof opts.mutator =='function'){
         opts.mutator(r);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "1.0.37",
+  "version": "1.1.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -60,7 +60,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/metro-config": "^0.4.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.1.11",
+    "@fto-consult/common": "^1.1.13",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/netinfo": "9.3.0",

package/src/auth/Login.js

@@ -18,6 +18,7 @@ import {Provider as DialogProvider} from "$ecomponents/Dialog";
 import Screen from "$escreen";
 import {getTitle} from "$escreens/Auth/utils";
 import {isWeb} from "$cplatform";
+import getLoginProps from "$getLoginProps";
 
 const WIDTH = 400;
 
@@ -58,14 +59,7 @@ export default function LoginComponent(props){
         }
     }
     
-    React.useEffect(()=>{
-        Preloader.closeAll();
-    },[]);
-    React.useEffect(()=>{
-        if(typeof formProps.focusField =='function'){
-            return formProps.focusField({...state,focusField,nextButtonRef,data:getData()})
-        }
-    },[state.step]);
+    
     if(withPortal){
         appBarProps = defaultObj(appBarProps);
         appBarProps.backAction = false;
@@ -77,18 +71,29 @@ export default function LoginComponent(props){
             },1000)
         }
     },[withPortal])
-    const formProps = defaultObj(LoginComponent.getProps(LoginComponent.getProps({
+    const getProps = typeof getLoginProps =='function'? getLoginProps : x=>null;
+    const {header,children,data:loginData,validate,keyboardEvents,onSuccess:onLoginSuccess,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
         ...state,
         data : getData(),
-        focusField,
         state,
+        formName,
         setState,
         nextButtonRef,
-    })));
+    }));
+    React.useEffect(()=>{
+        Preloader.closeAll();
+    },[]);
+    const prevStep = React.usePrevious(state.step);
+    React.useEffect(()=>{
+        /*** lorsque le state du composant change */
+        if(typeof onStepChange =='function'){
+            return onStepChange({...state,previousStep:prevStep,focusField,nextButtonRef,data:getData()})
+        }
+    },[state.step]);
     /****la fonction à utiliser pour vérifier si l'on peut envoyer les données pour connextion
      * par défaut, on envoie les données lorssqu'on est à l'étappe 2
      * **/
-    const canSubmit = typeof formProps.canSubmit =='function'? formProps.canSubmit : ({step})=>step >= 2;
+    const canSubmit = typeof canSubmitForm =='function'? canSubmitForm : ({step})=>step >= 2;
     const goToNext = ()=>{
         let step = state.step;
         let data = getData();
@@ -99,8 +104,8 @@ export default function LoginComponent(props){
             return;
         }
         const args = {data,form,step,nextButtonRef};
-        if(typeof formProps.validate =='function'){
-            const s = formProps.validate(args);
+        if(typeof validate =='function'){
+            const s = validate(args);
             if(s === false) return;
             if(isNonNullString(s)){
                 notifyUser(s);
@@ -110,7 +115,7 @@ export default function LoginComponent(props){
         if(canSubmit(args) && step > 1){
             Preloader.open("vérification ...");
             return auth.signIn(data).then((a)=>{
-                if(typeof formProps.onSuccess =='function' && formProps.onSuccess(a)=== false) return;
+                if(typeof onLoginSuccess =='function' && onLoginSuccess(a)=== false) return;
                 if(isFunction(onSuccess)){
                     onSuccess(true);
                 } else {
@@ -138,18 +143,19 @@ export default function LoginComponent(props){
                     header = {<View style = {[styles.header]}>
                         <Avatar testID={testID+"_Avatar"} size={50} secondary icon = 'lock'/>
                         <Label testID={testID+"_HeaderText"} bool style={{color:theme.colors.primaryOnSurface,fontSize:18,paddingTop:10}}>Connectez vous SVP</Label>
+                        {React.isValidElement(header)? header : null}
                     </View>}
                     responsive  = {false}
-                    {...formProps}
+                    {...loginProps}
                     formProps = {{
                         keyboardEvents : {
-                            ...defaultObj(formProps.keyboardEvents),
+                            ...defaultObj(keyboardEvents),
                             enter : ({formInstance})=>{
                                 goToNext();
                             }
                         }
                     }}
-                    data = {extendObj(props.data,formProps.data)}
+                    data = {extendObj(props.data,loginData)}
                 >
                     <View testID={testID+"_ButtonsContainer"} style={[styles.buttonWrapper]}>
                         <Button 
@@ -179,20 +185,12 @@ export default function LoginComponent(props){
                         </Button> : null}
                     </View>
                 </FormData>
+                {React.isValidElement(children) ? children : null}
             </Surface>
         </Surface>
     </Wrapper>;
 }   
 
-/**** cette fonction est utilisée, pour modifier dynamiquement les champs et les props de connexion au formulaire */
-LoginComponent.getProps = ({data,step,state,nextButtonRef})=>{
-    return {
-        ///les champ à utiliser pour l'authentification de l'utilisateur
-        fields : {
-        
-        }
-    }
-}
 
 const updateMediaQueryStyle = ()=>{
     const isSmallPhone = Dimensions.isSmallPhoneMedia(),isTablet = Dimensions.isTabletMedia(),

package/src/auth/index.js

@@ -1,9 +0,0 @@
-import AuthGuard from "$cauth/AuthGuard";
-import Login from "./Login";
-AuthGuard.Login = Login;
-
-export * from "$cauth";
-
-export {default} from "$cauth";
-
-export {Login};