@fto-consult/expo-ui 6.2.1 → 6.4.0

package/babel.config.alias.js

@@ -20,36 +20,26 @@ module.exports = (opts)=>{
     r["$econfirm"] = path.resolve(r["$expo-components"],"Dialog","confirm");
     r["$confirm"] = r["$confirm"] || r["$econfirm"];
     r["$eauth"] = path.resolve(expo,"auth");
-    r["$etableLink"] = r["$eTableLink"] = path.resolve(r["$ecomponents"],"TableLink");
-    r.$tableLink = r.$TableLink = r.$tableLink || r.$TableLink || path.resolve(r.$etableLink,"default");
     r["$components"] = r["$components"] || r["$ecomponents"];
     r["$elayouts"] = path.resolve(expo,"layouts");
     r["$emedia"] = path.resolve(expo,"media");
     r["$enavigation"] = path.resolve(expo,"navigation");
     r["$escreens"] = path.resolve(expo,"screens");
-    r["$emainScreens"] = path.resolve(expo,"screens","mainScreens");
     ///les screens principaux de l'application
-    r["$mainScreens"] = r["$mainScreens"] || r["$emainScreens"];
     r["$escreen"] = r["$eScreen"] = path.resolve(expo,"layouts/Screen");
-    r["$eTableDataScreen"] = path.resolve(expo,"layouts","Screen","TableData");
-    r["$TableDataScreen"] = r["$tableDataScreen"] = r["$TableDataScreen"] || r["$tableDataScreen"] || r["$eTableDataScreen"]
     r["$eassets"] = path.resolve(dir,"assets");
     r["$ethemeSelectorComponent"] = path.resolve(expo,"auth","ThemeSelector");
     /*** le composant permettant de sélectionner un theme utilisateur */
     r["$themeSelectorComponent"] = r["$themeSelectorComponent"] || r["$ethemeSelectorComponent"];
-
+    r.$tableLink = r.$TableLink = r["$etableLink"] = r["$eTableLink"] = path.resolve(r["$ecomponents"],"TableLink");
+    
     r["$Screen"] = r["$Screen"] || r["$eScreen"];
-    ///pour personnaliser les écrans de l'application, il suffit de redefinir l'alis $screens, pointant vers le repertoire racine des écrans personnalisés
-    ///cependant, ce repertoire doit contenir un fichier mainScreens.js qui contient la liste de tous les écrans de lapplicaiton
     r["$screens"] = r["$screens"] || r["$escreens"];
     
     r["$expo"] = r["$expo-ui"] = expo;
     r["$epreloader"] = path.resolve(expo,"components/Preloader");
     r["$eform"] = path.resolve(expo,"components","Form");
 
-    //l'alias $extendFormFields, pour étendre les formFields qu'on veut définir
-    r["$extendFormFields"] = r["$extendFormFields"] || path.resolve(r["$eform"],"Fields","$extendFormFields")
-    
     r["$form"] = r["$form"] || r["$eform"];
     r["$eform-data"] = r["$eformData"]= path.resolve(expo,"components","Form","FormData");
     r["$formData"] = r["$formData"] || r["$eformData"];
@@ -72,26 +62,10 @@ module.exports = (opts)=>{
     if(!r["$file-system"]){
         r["$file-system"] = r["$efile-system"];
     }
-    /*** cet alias est utilisé pour modifier les différents items par défaut, rendu par le composant Drawer
-     *  l'alias @drawerItems doit retourner en default, soit un tableau où un objet d'objet où une fonction
-     * si c'est une fonction, alors la function est exécutée pour obtenir la liste des items à utiliser par le drawer principal
-     */
-    if(!r["$drawerItems"]){
-        r["$drawerItems"] = path.resolve(expo,"navigation","Drawer","items","default")
-    }
     ///si l'alias $navigation n'a pas été définie par défaut, alors celui cet allias prendra la même valeur que celle de $envigation
     if(r["$navigation"] == r["$cnavigation"]){
         r["$navigation"] = r["$enavigation"];
     }
-    if(r["$loginComponent"] == r["$cloginComponent"]){
-        r["$loginComponent"] = path.resolve(expo,"auth","Login");
-    }
-
-    /*** alias pour le composant logo par défaut :  */
-    r["$elogoComponent"] = path.resolve(expo,"components","Logo","defaultComponent");
-    if(!r["$logoComponent"]){
-        r["$logoComponent"] = r["$elogoComponent"];
-    }
     if(typeof opts.mutator =='function'){
         opts.mutator(r);
     }
@@ -133,9 +107,9 @@ module.exports = (opts)=>{
     //le chemin ver le repertoire electron
     r.$eelectron = r["$e-electron"] = $electron;
     r.$electron = r.$electron || r.$eelectron;
-    r.$econtext = path.resolve(expo,"context");
+    r.$econtext/hooks = path.resolve(expo,"context");
     if(!r.$context){
-        r.$context = r.$econtext;
+        r.$context = r.$econtext/hooks;
     }
     const electronAssetsPath = path.resolve(dir,"electron","assets");
     if($assets){

package/index.js

@@ -18,9 +18,9 @@ import {isObj} from "$cutils";
  * }
  */
 export default function registerApp (options){
-    const {onMount,onUnmount,onRender,swrConfig,...rest} = isObj(options)? options : {};
+    const {onMount,onUnmount,onRender,render,swrConfig,...rest} = isObj(options)? options : {};
     registerRootComponent(function(props){
-        return <Provider {...props} {...rest} swrConfig={isObj(swrConfig) && swrConfig || {}} children={<App onMount={onMount} onUnmount={onUnmount} onRender={onRender}/>}/>
+        return <Provider {...props} {...rest} swrConfig={isObj(swrConfig) && swrConfig || {}} children={<App render={render} onMount={onMount} onUnmount={onUnmount} onRender={onRender}/>}/>
     });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.2.1",
+  "version": "6.4.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -40,7 +40,8 @@
     "find-licenses": "node ./find-licenses.js",
     "fix-dependencies": "expo-cli doctor --fix-dependencies",
     "delete-node-modules": "rimraf ./**/node_modules",
-    "modifier-url-remote-git": "git remote set-url origin 'https://borispipo@github.com/borispipo/smart-eneo.git'"
+    "modifier-url-remote-git": "git remote set-url origin 'https://borispipo@github.com/borispipo/smart-eneo.git'",
+    "update": "npm i @emotion/native@latest apexcharts@latest file-saver@latest fs-extra@latest google-libphonenumber@latest @pchmn/expo-material3-theme@latest @gorhom/portal@latest @emotion/native@latest @fto-consult/common@latest react-native-blob-util react-native-gesture-handler@latest react-native-iphone-x-helper@latest react-native-mime-types@latest react-native-paper@latest  react-native-paper-dates@latest @react-navigation/native@latest @react-navigation/native-stack@latest react-virtuoso@latest sharp-cli@latest tippy.js@latest websql@latest xlsx@latest && npx expo install --fix"
   },
   "bin": "./bin/index.js",
   "repository": {
@@ -61,15 +62,15 @@
     "@emotion/native": "^11.11.0",
     "@expo/html-elements": "^0.5.1",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.19.0",
+    "@fto-consult/common": "^3.19.2",
     "@gorhom/portal": "^1.0.14",
-    "@pchmn/expo-material3-theme": "^1.0.1",
+    "@pchmn/expo-material3-theme": "^1.3.1",
     "@react-native-async-storage/async-storage": "1.18.2",
     "@react-native-community/datetimepicker": "7.2.0",
     "@react-native-community/netinfo": "9.3.10",
     "@react-native/assets-registry": "^0.72.0",
-    "@react-navigation/native": "^6.1.6",
-    "@react-navigation/native-stack": "^6.9.12",
+    "@react-navigation/native": "^6.1.7",
+    "@react-navigation/native-stack": "^6.9.13",
     "@shopify/flash-list": "1.4.3",
     "apexcharts": "^3.41.0",
     "expo": "^49.0.3",
@@ -91,12 +92,12 @@
     "react": "^18.2.0",
     "react-content-loader": "^6.2.1",
     "react-dom": "^18.2.0",
-    "react-native": "0.72.1",
+    "react-native": "0.72.3",
     "react-native-big-list": "^1.6.1",
     "react-native-blob-util": "^0.18.3",
-    "react-native-gesture-handler": "~2.12.0",
+    "react-native-gesture-handler": "^2.12.0",
     "react-native-iphone-x-helper": "^1.3.1",
-    "react-native-mime-types": "^2.3.0",
+    "react-native-mime-types": "^2.4.0",
     "react-native-paper": "^5.9.1",
     "react-native-paper-dates": "^0.18.12",
     "react-native-reanimated": "~3.3.0",
@@ -105,8 +106,7 @@
     "react-native-svg": "13.9.0",
     "react-native-web": "~0.19.6",
     "react-native-webview": "13.2.2",
-    "react-navigation": "^4.4.4",
-    "react-virtuoso": "^4.3.11",
+    "react-virtuoso": "^4.4.0",
     "sharp-cli": "^4.1.1",
     "tippy.js": "^6.3.7",
     "websql": "^2.0.3",

package/src/App.js

@@ -17,7 +17,7 @@ import { timeout as SWR_REFRESH_TIMEOUT} from '$ecomponents/Datagrid/SWRDatagrid
 import { Dimensions,Keyboard } from 'react-native';
 import {isTouchDevice} from "$platform";
 import * as Utils from "$cutils";
-import useContext from "$econtext";
+import {useContext} from "$econtext/hooks";
 import appConfig from "$capp/config";
 
 Object.map(Utils,(v,i)=>{
@@ -26,7 +26,7 @@ Object.map(Utils,(v,i)=>{
   }
 });
 
-export default function getIndex({onMount,onUnmount,onRender}){
+export default function getIndex({onMount,onUnmount,render,onRender}){
     const {swrConfig} = useContext();
     const isScreenFocusedRef = React.useRef(true);
     ///garde pour chaque écran sa date de dernière activité
@@ -141,7 +141,7 @@ export default function getIndex({onMount,onUnmount,onRender}){
       >
         <GestureHandlerRootView style={{ flex: 1 }}>
           <SafeAreaProvider>
-            <Index {...rest} onMount={onMount}/>
+            <Index onMount={onMount} render={render} onUnmount={onUnmount} onRender={onRender}/>
           </SafeAreaProvider>
         </GestureHandlerRootView>
       </SWRConfig>

package/src/auth/Login.js

@@ -21,13 +21,13 @@ import {isWeb} from "$cplatform";
 import ProviderSelector from "./ProviderSelector";
 import { ScrollView } from "react-native";
 import PropTypes from "prop-types";
-import getLoginProps from "$getLoginProps";
-const getProps = typeof getLoginProps =='function'? getLoginProps : x=>null;
+import useContext from "$econtext/hooks";
 
 const WIDTH = 400;
 
 export default function LoginComponent(props){
     let {formName,step,appBarProps,onSuccess,withPortal,testID} = props;
+    const {components:{loginPropsMutator}} = useContext();
     const loginTitle = getTitle();
     testID = defaultStr(testID,"RN_Auth.LoginComponent");
     formName = React.useRef(uniqid(defaultStr(formName,"login-formname"))).current;
@@ -91,7 +91,7 @@ export default function LoginComponent(props){
         containerProps : customContainerProps,
         withHeaderAvatar,
         contentProps : customContentProps,
-        withScrollView:customWithScrollView,children,initialize,contentTop,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,mutateData,beforeSubmit:beforeSubmitForm,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
+        withScrollView:customWithScrollView,children,initialize,contentTop,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,mutateData,beforeSubmit:beforeSubmitForm,canSubmit:canSubmitForm,onStepChange,...loginProps} = loginPropsMutator({
         ...state,
         setState,
         state,
@@ -105,7 +105,7 @@ export default function LoginComponent(props){
         nextButtonRef,
         ProviderSelector,
         previousButtonRef,
-    }));
+    });
     const containerProps = defaultObj(customContainerProps);
     const contentProps = defaultObj(customContentProps);
 

package/src/components/AppBar/Content.js

@@ -55,7 +55,7 @@ const AppbarContent = ({
           ]}
           numberOfLines={1}
           accessible
-          accessibilityRole={
+          role={
             onPress
               ? 'none'
               : Platform.OS === 'web'
@@ -86,7 +86,7 @@ const AppbarContent = ({
       <TouchableWithoutFeedback
         testID={testID+"_Container"}
         {...containerProps}
-        accessibilityRole={touchableRole}
+        role={touchableRole}
         accessibilityTraits={touchableRole}
         accessibilityComponentType="button"
         onPress={onPress}

package/src/components/Chip/index.js

@@ -247,7 +247,7 @@ const styles = StyleSheet.create({
   text: {
     minHeight: 24,
     lineHeight: 24,
-    textAlignVertical: 'center',
+    verticalAlign: 'center',
     marginVertical: 4,
   },
   avatar: {

package/src/components/Datagrid/Common/utils.js

@@ -7,7 +7,7 @@ import DateLib from "$date";
 import Image from "$ecomponents/Image";
 import React from "$react";
 import Label from "$ecomponents/Label";
-import TableLink from "$TableLink";
+import TableLink from "$components/TableLink";
 import {Flag} from "$ecomponents/Countries";
 import { StyleSheet } from "react-native";
 import {isDesktopMedia} from "$dimensions";

package/src/components/Datagrid/SWRDatagrid.js

@@ -25,7 +25,7 @@ import {getRowsPerPagesLimits} from "./Common/utils";
 import PropTypes from "prop-types";
 import {Menu} from "$ecomponents/BottomSheet";
 import session from "$session";
-import useContext from "$econtext";
+import useContext from "$econtext/hooks";
 
 export const getSessionKey = ()=>{
     return Auth.getSessionKey("swrDatagrid");

package/src/components/Drawer/index.js

@@ -252,7 +252,8 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
                return isItemActive(opts);
             }
             return false;
-          },getState:getDrawerState,getDrawerRef}}>
+          },getState:getDrawerState,getDrawerRef
+          }}>
           <View style={styles.container} testID={`${testID}_Container`}>
               <DrawerLayout
                   testID = {`${testID}_DrawerLayout`}

package/src/components/Dropdown/index.js

@@ -882,12 +882,12 @@ class DropdownComponent extends AppComponent {
                 onPress={this.open.bind(this)}
                 disabled = {disabled}
                 onLayout={bindResizeEvents === false ? undefined : this.onLayout.bind(this)}
-                pointerEvents = {pointerEvents}
+                style = {{pointerEvents}}
                 accessibilityLabel={defaultStr(accessibilityLabel,label,text)}
                 testID = {testID}
             >
             {<React.Fragment>{
-                <View {...dropdownProps} {...contentContainerProps} style={[contentContainerProps.style,flattenStyle]}
+                <View {...dropdownProps} {...contentContainerProps} style={[contentContainerProps.style,{pointerEvents},flattenStyle]}
                     ref = {this.anchorRef}
                     collapsable = {false}
                 >
@@ -900,15 +900,14 @@ class DropdownComponent extends AppComponent {
                         mode = {mode}
                         enableCopy = {enableCopy}
                         label = {labelTextField}
-                        pointerEvents = "none"
+                        style = {[inputProps.style,textInputProps.style,{pointerEvents:"none"}]}
                         disabled = {disabled}
                         readOnly = {readOnly}
                         //divider = {canHandle}
                         alwaysUseLabel = {renderTag?true : false}
                         contentContainerProps = {{
                             ...contentContainerProps,
-                            pointerEvents:iconDisabled && (!enableCopy && disabled)?'none':'auto',
-                            style : [renderTag? styles.inputContainerTag:null,contentContainerProps.style],
+                            style : [renderTag? styles.inputContainerTag:null,{pointerEvents:iconDisabled && (!enableCopy && disabled)?'none':'auto'},contentContainerProps.style],
                         }}
                         containerProps = {{...containerProps,style:[containerProps.style,styles.mbO]}}
                         error = {!!error}
@@ -932,7 +931,7 @@ class DropdownComponent extends AppComponent {
                         onPress = {this.open.bind(this)}
                         placeholder={placeholder}
                         render = {!renderTag?inputProps.render : (tagProps)=>{
-                            return <View pointerEvents={pointerEvents} style={[styles.tagsContentContainer,isFlatMode?styles.tagsContentContainerFlatMode:null]}>
+                            return <View style={[styles.tagsContentContainer,{pointerEvents},isFlatMode?styles.tagsContentContainerFlatMode:null]}>
                                 {tagsContent}
                             </View>
                         }}
@@ -1001,8 +1000,8 @@ class DropdownComponent extends AppComponent {
                             height : !isMob?contentContainerHeight:'90%',
                         },
                         isMob && {flex:1},
+                        {pointerEvents}
                     ]}
-                    pointerEvents = {pointerEvents}
                     testID = {testID+"_Container"}
                 >
                     {showSearch !== false && <>

package/src/components/Form/Fields/SelectTableData/Component.js

@@ -11,7 +11,7 @@ import {getFetchOptions,prepareFilters} from "$cutils/filters";
 import fetch from "$capi"
 import {willConvertFiltersToSQL} from "$ecomponents/Datagrid/utils";
 import React from "$react";
-import useApp from "$econtext";
+import useApp from "$econtext/hooks";
 
 /*** la tabledataSelectField permet de faire des requêtes distantes pour rechercher les données
  *  Elle doit prendre en paramètre et de manière requis : les props suivante : 

package/src/components/Form/Fields/index.js

@@ -16,12 +16,10 @@ import Image from "./Image";
 import Tel from "./Tel";
 import SelectCountry from "./SelectCountry";
 import Html from "./Html";
-import * as eFormFields from "$extendFormFields";
 import "$cutils";
 import React from "$react";
 import SelectDateFormat from "./SelectDateFormat";
 import CurrencyFormat from "./CurrencyFormat";
-export * from "$extendFormFields";
 
 const defFormFields = {
     Field,
@@ -46,13 +44,6 @@ const defFormFields = {
     ,Html
 }
 
-//pour étendre les FormFields par défaut
-Object.map(eFormFields,(F,i)=>{
-    if(React.isComponent(F)){
-        defFormFields[i] = F;
-    }
-})
-
 export default defFormFields;
 
 export {

package/src/components/Logo/Logo.js

@@ -4,11 +4,11 @@ import React from "$react";
 import theme,{remToPixel,Colors,flattenStyle} from '$theme';
 import {StyleSheet} from "react-native";
 import {defaultStr,defaultObj,defaultNumber} from "$cutils";
-import LogoComponent from "$logoComponent";
-
+import useContext from "$econtext/hooks";
 export const height = 150;
 export const width = undefined;//300;
 export default function Logo (props) {
+    const {components:{logo:LogoComponent}} = useContext();
     let {icon,color,style,testID,containerProps,smallStyle,largeStyle,mediumStyle,height:customHeight,withImage,withText} = props;
         testID = defaultStr(testID,"RN_LogoComponent");
         containerProps = defaultObj(containerProps);

package/src/components/TableLink/index.js

@@ -14,9 +14,10 @@ import Tooltip from "$ecomponents/Tooltip";
 import {navigateToTableData} from "$enavigation/utils";
 import Auth from "$cauth";
 import fetch from "$capi/fetch";
-
+import useContext from "$econtext/hooks";
 const TableLinKComponent = React.forwardRef((props,ref)=>{
-    let {disabled,readOnly,labelProps,server,containerProps,perm,id,fetchForeignData,foreignKeyTable,foreignKeyColumn,data,testID,Component,routeName,routeParams,component,primary,triggerProps,onPress,children, ...rest} = props;
+    const {components:{tableLinkPropsMutator}} = useContext();
+    let {disabled,readOnly,labelProps,server,containerProps,perm,id,fetchForeignData,foreignKeyTable,foreignKeyColumn,data,testID,Component,routeName,routeParams,component,primary,triggerProps,onPress,children, ...rest} = tableLinkPropsMutator(props);
     testID = defaultStr(testID,"RN_TableDataLinkContainer")
     foreignKeyTable = defaultStr(foreignKeyTable).trim();
     foreignKeyColumn = defaultStr(foreignKeyColumn).trim();
@@ -24,11 +25,11 @@ const TableLinKComponent = React.forwardRef((props,ref)=>{
     containerProps = defaultObj(containerProps)
     labelProps = defaultObj(labelProps);
     data = defaultObj(data);
-    id = defaultStr(id);
+    id = typeof id =='number'? String(id) : defaultStr(id);
     if(!id || !foreignKeyTable){
         readOnly = true;
     }
-    const pointerEvents = disabled || readOnly || !id? 'none' : 'auto';
+    const pointerEvents = disabled || readOnly ? 'none' : 'auto';
     const onPressLink = (event)=>{
         React.stopEventPropagation(event);
         if((isNonNullString(perm) && !Auth.isAllowedFromString(perm)) || !Auth.isTableDataAllowed({table:foreignKeyTable,action:'read'})){
@@ -55,9 +56,9 @@ const TableLinKComponent = React.forwardRef((props,ref)=>{
             cb().finally(closePreloader);
         }
     }
-    rest.style = [rest.style,_styles.cursorPointer];
+    rest.style = [rest.style,{pointerEvents},_styles.cursorPointer];
     const CP = disabled || readOnly ? View : Pressable;
-    return <CP testID={testID} onLongPres={(e)=>React.stopEventPropagation(e)} {...containerProps} onPress={disabled? undefined : onPressLink} style={[styles.container,containerProps.style]}>
+    return <CP testID={testID} onLongPres={(e)=>React.stopEventPropagation(e)} {...containerProps} onPress={disabled || readOnly? undefined : onPressLink} style={[styles.container,containerProps.style]}>
         <Tooltip testID={testID+"_Tooltip"} {...rest} Component={Component}  onPress={disabled || readOnly?undefined:onPressLink} ref={ref} pointerEvents={pointerEvents} readOnly={readOnly} disabled = {disabled}>
             <Label testID={testID+"_Label"} underlined primary {...labelProps} style={[_styles.lh15,labelProps.style]} disabled={disabled} readOnly={readOnly}>{children}</Label>
         </Tooltip>
@@ -76,7 +77,7 @@ TableLinKComponent.propTypes = {
     ///les props à utiliser pour afficher la table de données en cas de click sur le lien
     triggerProps : PropTypes.object,
     /*** l'id de la données à récupérer en cas de clic sur le lien */
-    id : PropTypes.string,
+    id : PropTypes.oneOfType([PropTypes.number,PropTypes.string]),
     routeName : PropTypes.string,///la route via laquelle on devra naviguer
     routeParam : PropTypes.object,///les props à passer à la route en question
     children : PropTypes.node

package/src/components/TextField/index.js

@@ -347,7 +347,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
                 backgroundColor : 'transparent',
                 color : !error && !isFocused && Colors.isValid(flattenStyle.color)?flattenStyle.color : inputColor,
                 fontSize,
-                textAlignVertical: 'center',//multiline ? 'top' : 'center',
+                verticalAlign: 'center',//multiline ? 'top' : 'center',
                 overflow : 'hidden',
             },
             isWeb && { outline: 'none'},

package/src/context/Provider.js

@@ -0,0 +1,103 @@
+import React from "$react";
+import appConfig from "$capp/config";
+import {MD3LightTheme,MD3DarkTheme} from "react-native-paper";
+import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
+import {colorsAlias,Colors} from "$theme";
+import {isObj} from "$cutils";
+import eMainScreens from "$escreens/mainScreens";
+import {ExpoUIContext} from "./hooks";
+import Login from "$eauth/Login";
+
+/*****
+    les utilitaires disponibles à passer au provider : 
+    FontsIconsFilter : (font{object},fontName{string},fontNameLower{string})=><boolean> //porte le nom de la props de appConfig dans lequel définir les filtres à utiliser pour charger l'iconSet désirée pour l'appication
+    ///fonction de rappel appelée avant d'exit l'application, doit retourner une promesse que lorsque résolue, exit l'application
+    beforeExit : ()=><Promise>     
+    getTableData : ()=>{object|array}
+    getStructData : ()=>{object|array}
+    tablesData : {object}, la liste des tables de données
+    strucsData : {object}, la liste des données de structures
+    components : {
+        logo : {
+            object |
+            ReactNode,
+            ReactComponent
+        },
+        loginPropsMutator : ({object})=><{object}>, la fonction permettant de muter les props du composant Login,
+        tableLinkPropsMutator : ({object})=><{object}>, la fonction permettant de muter les props du composant TableLink
+    },
+    navigation : {
+      screens : {Array}, les écrans de navigation,
+      drawerItems : {object|array|function}, la fonction permettant d'obtenir les items du drawer principal de l'application
+    }
+*/
+const Provider = ({children,getTableData,navigation,components,getStructData,tablesData,structsData,...props})=>{
+    const {extendAppTheme} = appConfig;
+    const { theme : pTheme } = useMaterial3Theme();
+    navigation = defaultObj(navigation);
+    components = defaultObj(components);
+    const {screens} = navigation;
+    navigation.screens = [...(Array.isArray(screens)? screens : []),...eMainScreens];
+    structsData = isObj(structsData)? structsData : null;
+    appConfig.tablesData = tablesData;
+    appConfig.structsData = appConfig.structsData = isObj(structsData)? structsData : null;
+    appConfig.getTableData = getTableData;
+    appConfig.getStructData = getStructData;
+    appConfig.LoginComponent = Login;
+    //const colorScheme = useColorScheme();
+    appConfig.extendAppTheme = (theme)=>{
+        if(!isObj(theme)) return;
+        const newTheme = theme.dark || theme.isDark ? { ...MD3DarkTheme, colors: pTheme.dark } : { ...MD3LightTheme, colors: pTheme.light };
+        for(let i in newTheme){
+          if(i !== 'colors' && !(i in theme)){
+            theme[i] = newTheme[i];
+          }
+        }
+        if(isObj(theme.colors)){
+          colorsAlias.map((color)=>{
+            color = color.trim();
+            const cUpper = color.ucFirst();
+            //math theme colors to material desgin V3
+            const textA = `${color}Text`,onColor=`on${cUpper}`//,containerA = `${color}Container`,onColorContainer=`on${cUpper}Container`;
+            const c = Colors.isValid(theme.colors[onColor])? theme.colors[onColor] : (theme.colors[textA]) || undefined;
+            if(c){
+              theme.colors[onColor] = c;
+            }
+          });
+          for(let i in newTheme.colors){
+            if(!(i in theme.colors)){
+              theme.colors[i] = newTheme.colors[i];
+            }
+          }
+        }
+        theme.fonts = newTheme.fonts;
+        return typeof extendAppTheme == 'function'? extendAppTheme(theme)  : theme;
+    }
+    return <ExpoUIContext.Provider 
+      value={{
+        ...props,
+        navigation,
+        components : {
+            ...components,
+            loginPropsMutator : (props)=>{
+               return extendProps(components.loginPropsMutator,props);
+            },
+            tableLinkPropsMutator : (props)=>{
+                return extendProps(components.tableLinkPropsMutator,props);
+            }
+        },
+        getTableData,getStructData,tablesData,structsData,appConfig
+      }} 
+      children={children}
+    />;
+}
+
+const extendProps = (cb,props)=>{
+  const prs = defaultObj(props);
+  const o = typeof  cb ==='function'? cb(props) : null;
+  if(isObj(o)){
+      return {...prs,...o};
+  }
+  return prs
+}
+export default Provider;

package/src/context/hooks.js

@@ -0,0 +1,11 @@
+import { createContext,useContext as useReactContext } from "react";
+
+export const ExpoUIContext = createContext(null);
+
+export const useExpoUI = ()=> useReactContext(ExpoUIContext);
+
+export default useExpoUI;
+
+export const useContext = useExpoUI;
+
+export const useApp = useContext;

package/src/context/index.js

@@ -1,74 +1,5 @@
-import React from "$react";
-import appConfig from "$capp/config";
-import {MD3LightTheme,MD3DarkTheme} from "react-native-paper";
-import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
-import {colorsAlias,Colors} from "$theme";
-import {isObj} from "$cutils";
+export * from "./hooks";
 
-const ExpoUIContext = React.createContext(null);
+export {default} from "./hooks";
 
-
-export const useExpoUI = ()=> React.useContext(ExpoUIContext);
-
-
-/*****
-    les utilitaires disponibles à passer au provider : 
-    FontsIconsFilter : (font{object},fontName{string},fontNameLower{string})=><boolean> //porte le nom de la props de appConfig dans lequel définir les filtres à utiliser pour charger l'iconSet désirée pour l'appication
-    ///fonction de rappel appelée avant d'exit l'application, doit retourner une promesse que lorsque résolue, exit l'application
-    beforeExit : ()=><Promise>     
-    getTableData : ()=>{object|array}
-    getStructData : ()=>{object|array}
-    tablesData : {object}, la liste des tables de données
-    strucsData : {object}, la liste des données de structures
-*/
-export const Provider = ({children,getTableData,getStructData,tablesData,structsData,...props})=>{
-    const {extendAppTheme,structsData,getTableData} = appConfig;
-    const { theme : pTheme } = useMaterial3Theme();
-    structsData = isObj(structsData)? structsData : null;
-    tablesData = isObj(tablesData) ? tablesData : null;
-    if(!isObj(appConfig.tablesData)){
-      appConfig.tablesData = tablesData;
-    }
-    if(!isObj(appConfig.structsData)){
-       appConfig.structsData = structsData;
-    }
-    
-    appConfig.getTableData = getTableData = typeof getTableData =='function'? getTableData : undefined;
-    appConfig.getStructData = getStructData =  typeof getStructData =='function' ? getStructData : undefined;
-    //const colorScheme = useColorScheme();
-    appConfig.extendAppTheme = (theme)=>{
-        if(!isObj(theme)) return;
-        const newTheme = theme.dark || theme.isDark ? { ...MD3DarkTheme, colors: pTheme.dark } : { ...MD3LightTheme, colors: pTheme.light };
-        for(let i in newTheme){
-          if(i !== 'colors' && !(i in theme)){
-            theme[i] = newTheme[i];
-          }
-        }
-        if(isObj(theme.colors)){
-          colorsAlias.map((color)=>{
-            color = color.trim();
-            const cUpper = color.ucFirst();
-            //math theme colors to material desgin V3
-            const textA = `${color}Text`,onColor=`on${cUpper}`//,containerA = `${color}Container`,onColorContainer=`on${cUpper}Container`;
-            const c = Colors.isValid(theme.colors[onColor])? theme.colors[onColor] : (theme.colors[textA]) || undefined;
-            if(c){
-              theme.colors[onColor] = c;
-            }
-          });
-          for(let i in newTheme.colors){
-            if(!(i in theme.colors)){
-              theme.colors[i] = newTheme.colors[i];
-            }
-          }
-        }
-        theme.fonts = newTheme.fonts;
-        return typeof extendAppTheme == 'function'? extendAppTheme(theme)  : theme;
-    }
-    return <ExpoUIContext.Provider value={{...props,getTableData,getStructData,tablesData,structsData,appConfig}} children={children}/>;
-}
-
-export default useExpoUI;
-
-export const useContext = useExpoUI;
-
-export const useApp = useContext;
+export {default as Provider} from "./Provider";

package/src/index.js

@@ -39,7 +39,7 @@ import  {updateTheme,defaultTheme} from "$theme";
 import StatusBar from "$ecomponents/StatusBar";
 import {Provider as PaperProvider } from 'react-native-paper';
 import FontIcon from "$ecomponents/Icon/Font";
-import useContext from "$econtext";
+import useContext from "$econtext/hooks";
 
 let MAX_BACK_COUNT = 1;
 let countBack = 0;
@@ -57,9 +57,9 @@ const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
  *  initialRouteName : la route initiale par défaut
  *  getStartedRouteName : la route par défaut de getStarted lorsque l'application est en mode getStarted, c'est à dire lorsque la fonction init renvoie une erreur (reject)
  */
-function App({init:initApp,initialRouteName:appInitialRouteName,render,onMount,preferences:appPreferences,getStartedRouteName}) {
+function App({init:initApp,initialRouteName:appInitialRouteName,render,onMount}) {
   AppStateService.init();
-  const {FontsIconsFilter,beforeExit} = useContext();
+  const {FontsIconsFilter,beforeExit,preferences:appPreferences,getStartedRouteName} = useContext();
   const [initialState, setInitialState] = React.useState(undefined);
   const appReadyRef = React.useRef(true);
   const [state,setState] = React.useState({

package/src/layouts/ProfilAvatar/index.js

@@ -100,7 +100,6 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
             }
             Auth.upsertUser({...u,avatar:u.avatar},false);
       }
-
       return <View ref ={ref}>
             <Menu
              anchor = { (aProps)=>{
@@ -131,34 +130,30 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
                         />
                     </View>
                 }
-                return <Button
+                return <Pressable
                         normal
                         upperCase = {false}
                         disableRipple
                         title = {tooltip}
                         {...aProps}
                         style = {[styles.container]}
-                        surfaceProps = {{style:[theme.styles.noMargin,theme.styles.noPadding]}}
+                        //surfaceProps = {{style:[theme.styles.noMargin,theme.styles.noPadding]}}
                         onLongPress = {onLongPress}
-                        left={props1 => <Image
+                    >
+                        <Image
                             {...props} 
-                            {...props1}
                             size={size}
                             style = {styles.itemLeft}
                             testID = {"RN_ProfilAvatar_AvatarImage"}
                             readOnly = {false}
                             defaultSource ={avatarProps.defaultSrc}
                             onChange = {onChangeAvatar}
-                        />}
-                        right = {(p)=>{
-                            return <Icon 
-                                {...p} 
-                                {...chevronIconProps}
-                            />
-                        }}
-                    >
-                    {children}
-                    </Button>
+                        />
+                        {children}
+                        <Icon 
+                            {...chevronIconProps}
+                        />
+                    </Pressable>
             } }  
             items={menItems}
         />
@@ -173,6 +168,10 @@ const styles = StyleSheet.create({
     container : {
         marginLeft : 0,
         marginVertical : 10,
+        flex : 1,
+        flexDirection : "row",
+        justifyContent : "start",
+        alignItems : "center",
     },
     labelContainer : {
         flexDirection : 'column',

package/src/layouts/Screen/ScreenWithoutAuthContainer.js

@@ -2,9 +2,8 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-/*** afin d'éviter les redondances cycliques avec le module $loginComponent, ce composant doit être utiliser pour 
- * le rendu de tous les composants implémentés définis dans le fichier $loginComponent car ne necessite pas de test sur 
-  le fait que l'utilisateur soit connecté où pas
+/*** 
+ *le fait que l'utilisateur soit connecté où pas
  */
 
 import ScreenWithOrWithoutAuthContainer from "./ScreenWithOrWithoutAuthContainer";

package/src/navigation/Drawer/index.js

@@ -1,7 +1,7 @@
 import Drawer,{DrawerItems} from "$ecomponents/Drawer";
 import ProfilAvatar from "$elayouts/ProfilAvatar";
 import React from "$react";
-import items,{isItemActive,refresh as refreshItems} from "./items";
+import useGetItems,{isItemActive} from "./items";
 import APP from "$capp/instance";
 import Auth from "$cauth";
 import Login from "$eauth/Login";
@@ -12,6 +12,20 @@ import Logo  from "$ecomponents/Logo";
 const DrawerNavigator = React.forwardRef(({content,children,state,...props},ref)=>{
     const drawerRef = React.useRef(null);
     const mergedRefs = React.useMergeRefs(drawerRef,ref);
+    const items = useGetItems({refresh:()=>{
+        if(drawerRef.current && drawerRef.current && drawerRef.current.forceRenderNavigationView){
+            return  drawerRef.current.forceRenderNavigationView();
+        }
+    }});
+    React.useEffect(()=>{
+        const onLogoutUser = ()=>{
+            setIsLoggedIn(false);
+        }
+        APP.on(APP.EVENTS.AUTH_LOGOUT_USER,onLogoutUser);
+        return ()=>{
+            APP.off(APP.EVENTS.AUTH_LOGOUT_USER,onLogoutUser);
+        }
+    },[])
     const headerCB = ({isMinimized})=>{
         if(isMinimized) return null;
         if(!theme.showProfilAvatarOnDrawer){
@@ -26,28 +40,6 @@ const DrawerNavigator = React.forwardRef(({content,children,state,...props},ref)
     state = defaultObj(state);
     const itemRefs = React.useRef(null);
     const uProfileRef = React.useRef(null);
-    React.useEffect(()=>{
-        const onRefreshItems = (a)=>{
-            refreshItems();
-            if(drawerRef.current && drawerRef.current && drawerRef.current.forceRenderNavigationView){
-                return  drawerRef.current.forceRenderNavigationView();
-            }
-        }
-        const onLoginUser = ()=>{
-            onRefreshItems();
-        }
-        const onLogoutUser = ()=>{
-            setIsLoggedIn(false);
-        }
-        APP.on(APP.EVENTS.REFRESH_MAIN_DRAWER,onRefreshItems);
-        APP.on(APP.EVENTS.AUTH_LOGIN_USER,onLoginUser);
-        APP.on(APP.EVENTS.AUTH_LOGOUT_USER,onLogoutUser);
-        return ()=>{
-            APP.off(APP.EVENTS.REFRESH_MAIN_DRAWER,onRefreshItems);
-            APP.off(APP.EVENTS.AUTH_LOGIN_USER,onLoginUser);
-            APP.off(APP.EVENTS.AUTH_LOGOUT_USER,onLogoutUser);
-        }
-    },[]);
     React.useEffect(()=>{
         if(prevIsLoggedIn === isLoggedIn) return;
         navigate("Home");

package/src/navigation/Drawer/items/index.js

@@ -3,66 +3,77 @@
 // license that can be found in the LICENSE file.
 
 import { isRouteActive} from "$cnavigation";
-import "$cutils";
+import {defaultObj} from "$cutils";
 import appConfig from "$capp/config";
-import APP from "$capp";
+import useContext from "$econtext/hooks";
+import {useMemo,useEffect,useRef} from "react";
 ///les items du drawer
-import items from "$drawerItems";
 import { screenName as aboutScreenName} from "$escreens/Help/About";
 import theme from "$theme";
+import APP from "$capp/instance";
 
-export const getItems = (force)=>{
-    const name = !theme.showProfilAvatarOnDrawer ? 'Dashboard' : APP.getName();
-    const itx = typeof items === "function" ? items() : items;
+const useGetItems = (options)=>{
+    const {navigation:{drawerItems}} = useContext(); 
+    options = defaultObj(options);
+    const {refresh,force} = options;
+    const showProfilOnDrawer = theme.showProfilAvatarOnDrawer;
     const handleHelp =  appConfig.get("handleHelpScreen") !== false ? true : false;
-    const r = [
-        {
-            label : name,
-            icon : 'view-dashboard',
-            title : 'Dashboard',
-            routeName : "Home",
-            divider : true,
-        },
-    ];
-    Object.map(itx,(item,i)=>{
-        if(isObj(item)){
-            r.push(item);
+    const refreshItemsRef = useRef(false);
+    useEffect(()=>{
+        const refreshItems = (...a)=>{
+            refreshItemsRef.current = !refreshItemsRef.current;
+            if(typeof refresh =='function'){
+                refresh(...a);
+            }
         }
-    })
-    if(handleHelp){
-        r.push({divider:true});
-        const dataHelp = {
-            key : 'dataHelp',
-            label : 'Aide',
-            section : true,
-            divider : false,
-            items : [
-                {
-                    icon : 'help',
-                    label : 'A propos de '+APP.getName(),
-                    routeName : aboutScreenName,
-                }
-            ]
-        };
-        r.push(dataHelp);
-    }
-    return r;
-}
-
-
-let CACHED_ITEMS = []
-
-export const refresh = ()=>{
-    CACHED_ITEMS = getItems();
-    return CACHED_ITEMS;
+        APP.on(APP.EVENTS.REFRESH_MAIN_DRAWER,refreshItems);
+        APP.on(APP.EVENTS.AUTH_LOGIN_USER,refreshItems);
+        APP.on(APP.EVENTS.AUTH_LOGOUT_USER,refreshItems);
+        return ()=>{
+            APP.off(APP.EVENTS.REFRESH_MAIN_DRAWER,refreshItems);
+            APP.off(APP.EVENTS.AUTH_LOGIN_USER,refreshItems);
+            APP.off(APP.EVENTS.AUTH_LOGOUT_USER,refreshItems);
+        }
+    },[])
+    return useMemo(()=>{
+        const name = !showProfilOnDrawer ? 'Dashboard' : appConfig.name;
+        const itx = typeof drawerItems === "function" ? drawerItems() : drawerItems;
+        const r = [
+            {
+                label : name,
+                icon : 'view-dashboard',
+                title : 'Dashboard',
+                routeName : "Home",
+                divider : true,
+            },
+        ];
+        Object.map(itx,(item,i)=>{
+            if(isObj(item)){
+                r.push(item);
+            }
+        })
+        if(handleHelp){
+            r.push({divider:true});
+            const dataHelp = {
+                key : 'dataHelp',
+                label : 'Aide',
+                section : true,
+                divider : false,
+                items : [
+                    {
+                        icon : 'help',
+                        label : 'A propos de '+APP.getName(),
+                        routeName : aboutScreenName,
+                    }
+                ]
+            };
+            r.push(dataHelp);
+        }
+        return r;
+    },[showProfilOnDrawer,handleHelp,refreshItemsRef.current,force])
 }
 
-export default function mainDrawerItems(options){
-    if(!CACHED_ITEMS.length){
-        refresh();
-    }
-    return CACHED_ITEMS;
-};
+export default useGetItems;
 
 export const isItemActive = (opts)=>{
     if(isRouteActive(opts)){

package/src/navigation/index.js

@@ -3,6 +3,7 @@ import {handleContent,sanitizeName} from '$escreens';
 import {Stack,setInitialRouteName } from "$cnavigation";
 import React from "$react";
 import DrawerNavigator from "./Drawer";
+import useContext from "$econtext/hooks";
 
 export * from "./utils";
 
@@ -11,7 +12,8 @@ export * from "./utils";
 */
 export default function NavigationComponent (props){
     let {state,hasGetStarted,onGetStart,initialRouteName,extra} = props;
-    const allScreens = initScreens({Factory:Stack,ModalFactory:Stack,filter:({name,Screen})=>{
+    const {navigation:{screens}} = useContext();
+    const allScreens = initScreens({Factory:Stack,screens,ModalFactory:Stack,filter:({name})=>{
         if(name === initialRouteName){
             extra = defaultObj(extra);
             extra.onGetStart = onGetStart;

package/src/screens/Auth/Profile.js

@@ -2,7 +2,7 @@ import FormDataScreen from "$elayouts/Screen/FormData";
 import {defaultStr,defaultObj,isObjOrArray,isObj} from "$cutils";
 import Auth from "$cauth";
 import {navigate} from "$cnavigation";
-import SelectTheme from "$themeSelectorComponent";
+import SelectTheme from "$ethemeSelectorComponent";
 import Preloader from "$epreloader";
 import {SignIn2SignOut} from "$cauth";
 import React from "$react";

package/src/screens/index.js

@@ -1,10 +1,10 @@
 import {defaultBool,defaultArray,defaultVal,isObj,isNonNullString,defaultObj,isArray,defaultStr} from "$cutils";
 import {sanitizeName,GROUP_NAMES} from "./utils";
-import mainScreens from "$mainScreens"
 import React from "$react";
 import ScreenWrapper from "./ScreenWrapper";
 import { SCREEN_OPTIONS } from "./utils";
 
+
 export * from "./utils";
 
 export const handleScreen = ({Screen,Factory,ModalFactory,result,filter,index})=>{
@@ -96,7 +96,7 @@ export const handleScreen = ({Screen,Factory,ModalFactory,result,filter,index})=
  */
 export default function initScreens ({Factory,ModalFactory,screens,result,filter}){
     if(!isArray(screens) || !screens.length){
-        screens = mainScreens;
+        screens = [];
     }
     result = defaultObj(result);
     result.screens = defaultObj(result.screens);

package/src/components/Logo/defaultComponent.js

@@ -1,5 +0,0 @@
-// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-export default ()=> null;