@fto-consult/expo-ui 8.76.8 → 8.77.2

package/bin/create-app/dependencies.js

@@ -1,38 +1,38 @@
-
-    module.exports = {
-	"@emotion/native": "^11.11.0",
-	"@expo/html-elements": "^0.5.1",
-	"@expo/vector-icons": "^14.0.0",
-	"@pchmn/expo-material3-theme": "^1.3.2",
-	"@react-native-community/netinfo": "11.1.0",
-	"@react-native/assets-registry": "^0.72.0",
-	"react-native-get-random-values": "~1.8.0",
-	"@react-navigation/native": "^6.1.17",
-	"@react-navigation/native-stack": "^6.9.26",
-	"@react-navigation/stack": "^6.3.29",
-	"@shopify/flash-list": "1.6.3",
-	"expo": "^50.0.17",
-	"expo-camera": "~14.1.3",
-	"expo-clipboard": "~5.0.1",
-	"expo-font": "~11.10.3",
-	"expo-image-picker": "~14.7.1",
-	"expo-linking": "~6.2.2",
-	"expo-sharing": "~11.10.0",
-	"expo-sqlite": "~13.4.0",
-	"expo-status-bar": "~1.11.1",
-	"expo-system-ui": "~2.9.4",
-	"expo-web-browser": "~12.8.2",
-	"react": "18.2.0",
-	"react-native": "0.73.6",
-	"react-native-safe-area-context": "4.8.2",
-	"react-native-screens": "~3.29.0",
-	"react-native-svg": "14.1.0",
-	"react-native-webview": "13.6.4",
-	"react-native-gesture-handler": "~2.14.0",
-	"react-native-reanimated": "~3.6.2",
-	"react-native-view-shot": "3.8.0",
-	"expo-intent-launcher": "~10.11.0",
-	"expo-image-manipulator": "~11.8.0",
-	"expo-document-picker": "~11.10.1"
-};
+
+    module.exports = {
+	"@emotion/native": "^11.11.0",
+	"@expo/html-elements": "^0.5.1",
+	"@expo/vector-icons": "^14.0.0",
+	"@pchmn/expo-material3-theme": "^1.3.2",
+	"@react-native-community/netinfo": "11.1.0",
+	"@react-native/assets-registry": "^0.72.0",
+	"react-native-get-random-values": "~1.8.0",
+	"@react-navigation/native": "^6.1.17",
+	"@react-navigation/native-stack": "^6.9.26",
+	"@react-navigation/stack": "^6.3.29",
+	"@shopify/flash-list": "1.6.3",
+	"expo": "^50.0.17",
+	"expo-camera": "~14.1.3",
+	"expo-clipboard": "~5.0.1",
+	"expo-font": "~11.10.3",
+	"expo-image-picker": "~14.7.1",
+	"expo-linking": "~6.2.2",
+	"expo-sharing": "~11.10.0",
+	"expo-sqlite": "~13.4.0",
+	"expo-status-bar": "~1.11.1",
+	"expo-system-ui": "~2.9.4",
+	"expo-web-browser": "~12.8.2",
+	"react": "18.2.0",
+	"react-native": "0.73.6",
+	"react-native-safe-area-context": "4.8.2",
+	"react-native-screens": "~3.29.0",
+	"react-native-svg": "14.1.0",
+	"react-native-webview": "13.6.4",
+	"react-native-gesture-handler": "~2.14.0",
+	"react-native-reanimated": "~3.6.2",
+	"react-native-view-shot": "3.8.0",
+	"expo-intent-launcher": "~10.11.0",
+	"expo-image-manipulator": "~11.8.0",
+	"expo-document-picker": "~11.10.1"
+};
                             

package/bin/create-app/eas.json

@@ -1,18 +1,18 @@
-{
-  "build": {
-    "development": {
-      "developmentClient": true,
-      "distribution": "internal"
-    },
-    "preview": {
-      "distribution": "internal",
-      "android": {
-        "buildType": "apk"
-      }
-    },
-    "production": {}
-  },
-  "submit": {
-    "production": {}
-  }
-}
+{
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal",
+      "android": {
+        "buildType": "apk"
+      }
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}

package/bin/create-app/src/auth/index.js

@@ -47,9 +47,17 @@ export default {
         la fonction loginPropsMutator de muter les props du composant Login par défaut, prise en compte lorsque le composant de connexion n'est pas remplacer par celui définit dans la prop login,
         @param {object} props : les propriétés de la fonction login, les props ont des propriétés suivantes : 
         {
+            signIn : ()=><any>, la fonction permettant de connecter l'utilisateur, 
             onSuccess : ({object})=><Any>, la fonction appelée en cas de success
             setState : (newState)=>(...newState),//la fonction utilisée pour update le state du composant. elle doit remplacer le state du composant
-            state : <Object: data,...rest>, le state actuel à l'instant t du composant
+            state : <Object: data,...rest>, le state actuel à l'instant t du composant,
+            
+            //prend en paramètre une référence pointant sur le composant $ecomponents/Button et retourne les actions possible sur ledit button
+            getButtonAction : (buttonRef) => <{
+                enable : x=>typeof buttonRef?.current?.enable =="function" && buttonRef.current.enable(),
+                disable : x=> typeof buttonRef?.current?.disable =="function" && buttonRef?.current.disable(),
+                isDisabled : x=> typeof buttonRef?.current?.isDisabled ==="function" && buttonRef.current?.isDisabled(),
+            },
             nextButton : <Object : 
                 {
                     ref : nextButtonRef, //la référence vers le bouton next (le boutn Suivant)
@@ -72,6 +80,7 @@ export default {
             formName <string>, //le nom du formulaire Form, passé à la formData
             nextButtonRef <{current:<any>}>, la référence vers le bouton next
             previousButtonRef <{current:<any>}, la référence vers le bouton previous
+            formProps : (object), //les props à passer au composant FormData
         }   
         @return <{object}>, l'objet a retourné doit être de la forme : 
         {
@@ -80,6 +89,13 @@ export default {
             containerProps : <object>, les props du composant <Surface/>, le composant qui est le wrapper du composant FormData en charge de récupérer les données de l'interface de connexion
             canSubmit : ({step,...rest})=> <boolean>, //si les donées du formulaire peuvent être submit
             beforeSubmit : ({step,data,...rest})=><void>, //la fonction appélée immédiatement avant le submit des donénes
+            renderNextButton : <boolean>, //si le bouton next sera rendu
+            renderPreviousButton : <boolean>, //si le bouton previous sera rendu
+            title : <string>, //le titre de l'interface de connexion, titre personnalisé s'il y a lieu
+            wrapperProps : <func({withScreen,withScrollView,state,...rest})=><object>,object>, //les props du composant wrapper, 
+            containerProps : <object>, //les props du composant container, idem à ceux du composant $ecomponents/Surface
+            contentProps : <object>, //les props du composant parent direct à la form rendu par le composatn formData, idem à ceux du composant $ecomponents/Surface
+            onSuccess : (object)=><boolean | any>, la fonction de rappel appelée lorsque l'utilisateur a été connecté, via la fonction signIn. si onSuccess retourne false, alors l'action par défaut de redirection de l'utilisateur via l'interface de connexion ne sera pas appelée. 
             ...loginProps {object}, les props Supplémentaires à passer au composant FormData utilisé pour le rendu du formulaire de connexion
         }
     */

package/expo-ui.json

@@ -1,11 +1,11 @@
-{
-	"name": "@fto-consult/expo-ui",
-	"version": "6.44.4",
-	"description": "Bibliothèque de composants UI Expo,react-native",
-	"bin": {
-		"expo-ui": "./bin/index.js"
-	},
-	"author": "Boris Fouomene",
-	"license": "ISC",
-	"homepage": "https://github.com/borispipo/expo-ui#readme"
+{
+	"name": "@fto-consult/expo-ui",
+	"version": "6.44.4",
+	"description": "Bibliothèque de composants UI Expo,react-native",
+	"bin": {
+		"expo-ui": "./bin/index.js"
+	},
+	"author": "Boris Fouomene",
+	"license": "ISC",
+	"homepage": "https://github.com/borispipo/expo-ui#readme"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.76.8",
+  "version": "8.77.2",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "react-native-paper-doc": "https://github.com/callstack/react-native-paper/tree/main/docs/docs/guides",
   "scripts": {
@@ -70,7 +70,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@faker-js/faker": "^8.0.2",
-    "@fto-consult/common": "^4.48.3",
+    "@fto-consult/common": "^4.50.8",
     "@fto-consult/expo-ui": "^8.73.1",
     "apexcharts": "^3.49.0",
     "file-saver": "^2.0.5",

package/src/auth/Login.js

@@ -2,6 +2,7 @@ import React from "$react";
 import {isNonNullString,isObj,defaultNumber,defaultStr,uniqid,extendObj,isFunction} from "$cutils";
 import {navigate} from "$cnavigation";
 import FormData from "$ecomponents/Form/FormData/FormData";
+import { Action } from "$ecomponents/Form";
 import {getForm} from "$ecomponents/Form/utils";
 import Button from "$ecomponents/Button";
 import notify from "$notify";
@@ -28,7 +29,7 @@ const WIDTH = 400;
 export default function LoginComponent(props){
     let {formName,step,appBarProps,onSuccess,withPortal,testID} = props;
     const {auth:{loginPropsMutator,Login}} = useContext();
-    const loginTitle = getTitle();
+    let loginTitle = getTitle();
     testID = defaultStr(testID,"RN_Auth.LoginComponent");
     formName = React.useRef(uniqid(defaultStr(formName,"login-formname"))).current;
     const nextButtonRef = React.useRef(null);
@@ -106,23 +107,79 @@ export default function LoginComponent(props){
         onSuccess = {onSuccess}
         auth = {auth}
     />
-    const getButtonAction = (buttonRef)=>{
-        return {
-            ref : buttonRef,
-            isDisabled : x=> typeof buttonRef?.current?.isDisabled ==="function" && buttonRef.current?.isDisabled(),
-            enable : x=>typeof buttonRef?.current?.enable =="function" && buttonRef.current.enable(),
-            disable : x=> typeof buttonRef?.current?.disable =="function" && buttonRef?.current.disable(),
+    const getButtonAction = React.useMemo(()=>{
+        return (buttonRef)=>{
+            buttonRef = buttonRef || React.createRef();
+            return {
+                ref : buttonRef,
+                isDisabled : x=> typeof buttonRef?.current?.isDisabled ==="function" && buttonRef.current?.isDisabled(),
+                enable : x=>{
+                    return typeof buttonRef?.current?.enable =="function" && buttonRef.current.enable();
+                },
+                disable : x=> {
+                    return typeof buttonRef?.current?.disable =="function" && buttonRef?.current.disable()
+                },
+            }
         }
-    }
+    },[]);
     const nextButton = getButtonAction(nextButtonRef),
     prevButton = getButtonAction(previousButtonRef);
-    const {header,
+    const setIsLoading = (buttonRef,bool)=>{
+        if(typeof buttonRef?.current?.setIsLoading == 'function'){
+            return buttonRef.current?.setIsLoading(bool)
+        }
+    }
+    const beforeSubmitRef = React.useRef(null);
+    const canSubmitRef = React.useRef(null);
+    const onSuccesRef = React.useRef(null);
+    const signIn = ()=>{
+        const form = _getForm();
+        if(!form){
+            notifyUser("Impossible de valider le formulaire car celui-ci semble invalide")
+            return;
+        }
+        if(!form.isValid()){
+            notifyUser(form.getErrorText());
+            return;
+        }
+        const data = getData();
+        const canSubmit = typeof canSubmitRef.current == 'function'? canSubmitRef.current : w=>true;
+        const beforeSubmit = typeof beforeSubmitRef.current === 'function' ? beforeSubmitRef.current : ()=> true;
+        const args = {...state,data,form,state,setState,nextButtonRef,previousButtonRef};
+        const cS = canSubmit(args);
+        if(typeof cS === 'string' && cS){
+            return notifyUser(cS);
+        }
+        if(cS !== false && beforeSubmit(args) !== false){
+            Preloader.open("vérification ...");
+            setIsLoading(nextButtonRef,true);
+            return auth.signIn(data).then((a)=>{
+                if(typeof onSuccesRef.current =='function' && onSuccesRef.current(a)=== false) return;
+                if(isFunction(onSuccess)){
+                    onSuccess(data);
+                } else {
+                    navigate("Home");
+                } 
+            }).finally(()=>{
+                Preloader.close();
+                setIsLoading(nextButtonRef,false);
+            })
+        }
+    }
+    const {header : Header,
         headerTopContent:HeaderTopContent,
         containerProps : customContainerProps,
         contentProps : customContentProps,
-        withScrollView:customWithScrollView,children,initialize,contentTop,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,mutateData,beforeSubmit:beforeSubmitForm,canSubmit:canSubmitForm,onStepChange,...loginProps} = loginPropsMutator({
+        formProps,
+        wrapperProps : cWrapperProps,
+        title : customTitle,
+        withScrollView:customWithScrollView,children,initialize,contentTop,renderNextButton,renderPreviousButton,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,beforeSubmit:beforeSubmitForm,canSubmit:canSubmitForm,onStepChange,...loginProps} = loginPropsMutator({
         ...state,
+        getButtonAction,
+        data : getData(),
+        signIn,
         setState,
+        setIsLoading,
         state,
         nextButton,
         prevButton,
@@ -138,13 +195,18 @@ export default function LoginComponent(props){
         ProviderSelector,
         previousButtonRef,
     });
+    if(isNonNullString(customTitle)){
+        loginTitle = customTitle;
+    }
     const containerProps = defaultObj(customContainerProps);
     const contentProps = defaultObj(customContentProps);
     /****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 canSubmitForm =='function'? canSubmitForm : ({step})=>step >= 2;
-    const beforeSubmit = typeof beforeSubmitForm =='function'? beforeSubmitForm : x=> true;
+    canSubmitRef.current = typeof canSubmitForm =='function'? canSubmitForm : ({step})=>step >= 2;
+    beforeSubmitRef.current  = typeof beforeSubmitForm =='function'? beforeSubmitForm : x=> true;
+    onSuccesRef.current = onLoginSuccess;
+    
     const goToNext = ()=>{
         let step = state.step;
         const data = getData();
@@ -175,27 +237,7 @@ export default function LoginComponent(props){
             nextButtonRef.current?.enable();
         }
         if(step > 1){
-            const cS = canSubmit(args);
-            if(typeof cS === 'string' && cS){
-                return notifyUser(cS);
-            }
-            if(cS && beforeSubmit(args) !== false){
-                ///pour modifier automatiquement la données à mettre à jour
-                if(typeof mutateData =='function'){
-                    mutateData(data);
-                }
-                Preloader.open("vérification ...");
-                return auth.signIn(data).then((a)=>{
-                    if(typeof onLoginSuccess =='function' && onLoginSuccess(a)=== false) return;
-                    if(isFunction(onSuccess)){
-                        onSuccess(data);
-                    } else {
-                        navigate("Home");
-                    } 
-                }).finally(()=>{
-                    Preloader.close();
-                })
-            }
+            signIn();
         } else {
             setState({...state,step:step+1,data})
         }
@@ -219,8 +261,10 @@ export default function LoginComponent(props){
     const mediaQueryUpdateStyle = (a)=>{
         return StyleSheet.flatten([updateMediaQueryStyle(),contentProps.style]);
     };
-    const wrapperProps = withPortal ? {appBarProps,authRequired:false,title:loginTitle,withScrollView} : { style:styles.wrapper};
+    const wProps = defaultObj(typeof cWrapperProps =="function"? cWrapperProps({...state,setState,formName,state,withPortal,withScreen:withPortal,withScrollView,state,formName}) : cWrapperProps);
+    const wrapperProps = withPortal ? {appBarProps,authRequired:false,title:loginTitle,withScrollView,...wProps} : { ...wProps,style:[styles.wrapper,wProps.style]};
     const sH = React.isComponent(HeaderTopContent)? <HeaderTopContent mediaQueryUpdateStyle = {mediaQueryUpdateStyle} /> : React.isValidElement(HeaderTopContent)? HeaderTopContent : null;
+    const header = React.isComponent(Header) ? <Header mediaQueryUpdateStyle = {mediaQueryUpdateStyle}/> : React.isValidElement(Header)? Header : null;
     return <Wrapper testID = {testID+"_Wrapper" }{...wrapperProps}>
         <DialogProvider ref={dialogProviderRef}/>
         {sH}
@@ -237,32 +281,34 @@ export default function LoginComponent(props){
                     responsive  = {false}
                     {...loginProps}
                     fields = {loginFields}
-                    formProps = {{
+                    formProps = {extendObj(true,{},{
                         keyboardEvents : {
-                            ...defaultObj(keyboardEvents),
                             enter : ({formInstance})=>{
                                 goToNext();
-                            }
+                            },
                         }
-                    }}
+                    },formProps)}
                     data = {extendObj(state.data,loginData)}
                 >
                     <>
                         {React.isValidElement(contentTop)? contentTop : null}
-                        {hasLoginFields?<View testID={testID+"_ButtonsContainer"} style={[styles.buttonWrapper]}>
-                            <Button 
+                        {renderNextButton !== false || renderPreviousButton !== false ? <>
+                            {hasLoginFields?<View testID={testID+"_ButtonsContainer"} style={[styles.buttonWrapper]}>
+                            {renderNextButton !== false ? <Action
                                 ref = {nextButtonRef}
                                 primary
+                                formName={formName}
                                 mode = "contained"
                                 rounded
                                 style = {styles.button}
                                 onPress = {goToNext}
                                 icon = {state.step == 1? 'arrow-right':'login'}
                                 surface
+                                testID = {testID+"_NextButton"}
                             >
                                 {state.step == 1? 'Suivant' : 'Connexion' }
-                            </Button>
-                            {state.step>=2 ? <Button 
+                            </Action> : null}
+                            {renderPreviousButton !== false && state.step>=2 ? <Button
                                 onPress = {goToFirstStep}
                                 ref = {previousButtonRef}
                                 mode = "contained"
@@ -272,10 +318,12 @@ export default function LoginComponent(props){
                                 secondary
                                 surface
                                 icon = {'arrow-left'}
+                                testID = {testID+"_PrevButton"}
                             >
                                 Précédent
                             </Button> : null}
                         </View> : null}
+                     </> : null}
                     </>
                 </FormData>
                 {React.isValidElement(children) ? children : null}
@@ -344,6 +392,25 @@ const styles = StyleSheet.create({
 });
 
 LoginComponent.propTypes = {
+    /****
+        les props du composant Wrapper, peut être une fonction où un objet
+        - s'il s'agit d'une fonction : elle est définie comme suit : 
+            ({withScreen<boolean>,withPortal<boolean>,withScrolView<boolean>})=> <object>,
+        
+    */
+    wrapperProps : PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.object,
+    ]),
+    /***
+        les props du composant Container, enfant  hiérachique au composant Wrapper
+        idem aux props du composant Surface
+    */
+    containerProps : PropTypes.shape(defaultObj(Surface.propTypes)),
+    //les props du composant Surface, parent direct du composant FormData utile pour le rendu du form
+    contentProps : PropTypes.shape(defaultObj(Surface.propTypes)),
+    //les props du form data, idem à ceux du composant FormData
+    formProps : PropTypes.object,
     headerTopContent : PropTypes.oneOfType([
         PropTypes.func,
         PropTypes.node,
@@ -352,12 +419,10 @@ LoginComponent.propTypes = {
     header : PropTypes.oneOfType([
         PropTypes.node,
         PropTypes.element,
+        PropTypes.func,
     ]),
+    onSuccess : PropTypes.func, //la fonctino appelée lorsque l'utilisateur a été connecté, lorsque l'action liée à la fonction signIn de auth s'est terminée correctement
+    renderNextButton : PropTypes.bool,//si le bouton next sera rendu
+    renderPreviousButton : PropTypes.bool,//si le bouton previous sera rendu
 }
 
-/*** les loginProps sont les porps à passer au composant FormData
-*/
-const loginPropTypes = {
-    containerProps : PropTypes.object, //les props à passer au container
-    ...FormData.propTypes, //les props type du composant form data
-}