@fto-consult/expo-ui 6.65.6 → 6.66.0

package/App.js

@@ -1,5 +1,5 @@
 import AppEntry from "./src";
-import {disableAuth} from "$econtext/hooks";
+import {disableAuth} from "$cauth/perms";
 
 export default function MainExpoApp(props){
     return <AppEntry

package/bin/create-app/App.js

@@ -29,13 +29,16 @@ export default function AppMainEntry(){
             },
             screenOptions : {},//les options du composant Stack.Navigator de react-navigation, voir https://reactnavigation.org/docs/native-stack-navigator/
         }}
+        auth = {{
+            enabled : false,//la gestion de l'authentification est désactivée par défaut
+            loginPropsMutator : {},//({object})=><{object}>, la fonction permettant de muter les props du composant Login,
+            profileFieldsMutator : (fields)=>fields,//la fonction permettant de muter les champs liés à l'écran de mise à jour d'un profil utilisateur
+        }}
         components = {{
             /*** logo : ReactNode|ReactElement | ReactComponent | object {
                image{ReactComponent} :,text {ReactComponent}
             },*/
             logo : Logo,//logo component's properties
-            loginPropsMutator : {},//({object})=><{object}>, la fonction permettant de muter les props du composant Login,
-            authEnabled : false,//la gestion de l'authentification est désactivée par défaut
             customFormFields : {},//custom form fields
             /*** la fonction permettant de muter les props du composant TableLink, permetant de lier les tables entre elles */
             tableLinkPropsMutator : (props)=>{ 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.65.6",
+  "version": "6.66.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "main",
   "scripts": {
@@ -71,7 +71,7 @@
     "@expo/html-elements": "^0.5.1",
     "@expo/vector-icons": "^13.0.0",
     "@faker-js/faker": "^8.0.2",
-    "@fto-consult/common": "^3.55.5",
+    "@fto-consult/common": "^3.55.6",
     "@pchmn/expo-material3-theme": "^1.3.1",
     "@react-native-async-storage/async-storage": "1.18.2",
     "@react-native-community/datetimepicker": "7.2.0",

package/src/AppEntry/App.js

@@ -63,7 +63,7 @@ const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
  */
 function App({init:initApp,initialRouteName:appInitialRouteName,render}) {
   AppStateService.init();
-  const {FontsIconsFilter,beforeExit,preferences:appPreferences,navigation,getStartedRouteName} = useContext();
+  const {FontsIconsFilter,beforeExit,preferences:appPreferences,navigation,getStartedRouteName,auth} = useContext();
   const {containerProps} = navigation;
   const [initialState, setInitialState] = React.useState(undefined);
   const appReadyRef = React.useRef(true);
@@ -271,7 +271,7 @@ function App({init:initApp,initialRouteName:appInitialRouteName,render}) {
         />
   </NavigationContainer>  : null;
   const content = isLoaded ? typeof render == 'function'? render({children:child,appConfig,config:appConfig}) : child : null;
-  return <AuthProvider>
+  return <AuthProvider {...auth}>
         <SafeAreaProvider>
             <GestureHandlerRootView testID={"RN_MainAppGestureHanleRootView"}  style={styles.gesture}>
                 <AppEntryRootView>

package/src/auth/Login.js

@@ -27,7 +27,7 @@ const WIDTH = 400;
 
 export default function LoginComponent(props){
     let {formName,step,appBarProps,onSuccess,withPortal,testID} = props;
-    const {components:{loginPropsMutator}} = useContext();
+    const {auth:{loginPropsMutator}} = useContext();
     const loginTitle = getTitle();
     testID = defaultStr(testID,"RN_Auth.LoginComponent");
     formName = React.useRef(uniqid(defaultStr(formName,"login-formname"))).current;

package/src/context/Provider.js

@@ -7,7 +7,7 @@ import {colorsAlias,Colors} from "$theme";
 import {isObj,isNonNullString,defaultStr,extendObj} from "$cutils";
 import {getMainScreens} from "$escreens/mainScreens";
 import {ExpoUIContext} from "./hooks";
-import {enableAuth,disableAuth} from "$cauth/session";
+import {enableAuth,disableAuth} from "$cauth/perms";
 import Login from "$eauth/Login";
 import {modes} from "$ecomponents/TextField";
 import {isMobileMedia} from "$cdimensions";
@@ -39,7 +39,6 @@ import {extendFormFields} from "$ecomponents/Form/Fields";
           ///les props par défaut à passer au composant Datagrid
         },
         customFormFields{Object}, //les composant personalisés des forms fields
-        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,
         TableDataScreen | TableDataScreenItem : {ReactComponent}, le composant TableDataScreenItem, à utiliser pour le rendu des écrans
         TableDataScreenList | TableDataListScreen {ReactComponent}, le composant TableDataList à utiliser pour le rendu des écrans listants les éléments du table data
@@ -56,14 +55,24 @@ import {extendFormFields} from "$ecomponents/Form/Fields";
       drawerItemsMutator  : {function}, la fonction permettant de muter les drawerItems à chaque fois qu'on appelle la fonction de récupératioin des drawerItems
       containerProps : {object}, les props à passer au composant NavigationContainer de react-navigation
     },
+    auth : {
+      profileFieldsMutator : {({object})=><{object}> | {object})}, la fonction permettant de muter les champs  à passer à l'écran de mise à jour du profil utilisateur
+      loginPropsMutator : ({object})=><{object}>, la fonction permettant de muter les props du composant Login,
+    }
     swrConfig : {object},//les paramètres de configuration de l'objet swr utilisée dans le composant SWRDatagrid
     realm : {}, //les options de configurations de la base de données realmdb
 */
-const Provider = ({children,getTableData,handleHelpScreen,navigation,swrConfig,components:cComponents,convertFiltersToSQL,getStructData,tablesData,structsData,...props})=>{
+const Provider = ({children,getTableData,handleHelpScreen,navigation,swrConfig,auth:cAuth,components:cComponents,convertFiltersToSQL,getStructData,tablesData,structsData,...props})=>{
     const {extendAppTheme} = appConfig;
     const { theme : pTheme } = useMaterial3Theme();
     navigation = defaultObj(navigation);
     const {customFormFields,...components} = defaultObj(cComponents);
+    const auth = {
+      ...Object.assign({},cAuth),
+      loginPropsMutator : (props)=>{
+        return extendProps(cAuth.loginPropsMutator,props);
+      },
+    }
     extendFormFields(customFormFields);
     structsData = isObj(structsData)? structsData : null;
     appConfig.tablesData = tablesData;
@@ -78,7 +87,7 @@ const Provider = ({children,getTableData,handleHelpScreen,navigation,swrConfig,c
     }
     const colorScheme = useColorScheme();
     const isColorShemeDark = colorScheme ==="dark";
-    if(components.authEnabled === false){
+    if(auth.enabled === false){
       disableAuth();
     } else enableAuth();
     appConfig.extendAppTheme = (theme,Theme,...rest)=>{
@@ -166,11 +175,9 @@ const Provider = ({children,getTableData,handleHelpScreen,navigation,swrConfig,c
         handleHelpScreen,
         navigation,
         convertFiltersToSQL,
+        auth,
         components : {
             ...components,
-            loginPropsMutator : (props)=>{
-               return extendProps(components.loginPropsMutator,props);
-            },
             tableLinkPropsMutator : (props)=>{
                 return extendProps(components.tableLinkPropsMutator,props);
             },

package/src/context/hooks.js

@@ -33,6 +33,8 @@ export const useAppGetComponent = (componentName)=>{
 
 export const useAppComponent = useAppGetComponent;
 
+export const useGetComponent = useAppComponent;
+
 /*** permet d'attacher un lister sur la modification des props de manière responsive : 
     permet de récupérer la fonction à attacher par défaut au listener DimensionChange, pour la mise à jour automatique de la propriété style
    * @param mediaQueryUpdateStyleCb{function}, la fonction permettant de mettre à jour les props lorsque la taille de l'écran change

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

@@ -76,7 +76,6 @@ const useGetItems = (options)=>{
             if(!tableName || table.showInDrawer === false || !Auth.isTableDataAllowed({table:tableName})){
                 return;
             }
-            console.log("is table allowed ",table);
             if(isNonNullString(table.perm) && !Auth.isAllowedFromStr(table.perm)) return;
             const section = (table.drawerSection).trim();
             if(!items[section]){

package/src/screens/Auth/Profile.js

@@ -7,6 +7,7 @@ import Preloader from "$epreloader";
 import {SignIn2SignOut} from "$cauth";
 import React from "$react";
 import avatarProps from "$eauth/avatarProps";
+import useContext from "$econtext/hooks";
 
 import {screenName} from "./utils";
 
@@ -15,7 +16,8 @@ export default function UserProfileScreen(props){
     const testID = defaultStr(props.testID,"RN_UserProfile_FormData");
     const themeRef = React.useRef(defaultObj(user.theme));
     const hasChangeRef = React.useRef(false);
-    const authProfileFields = typeof SignIn2SignOut.authProfileFields =='function'?SignIn2SignOut.authProfileFields(props) : SignIn2SignOut.authProfileFields;
+    const {auth:{profileFieldsMutator}} = useContext();
+    const authProfileFields = typeof profileFieldsMutator =='function'?profileFieldsMutator(props) : profileFieldsMutator;
     const fields = isObj(authProfileFields)? Object.clone(authProfileFields) : {};
     const formFields = {
         avatar : {

package/src/context/Provider copy 2.js

@@ -1,8 +0,0 @@
-import React from "$react";
-import appConfig from "$capp/config";
-import {View,Text} from "react-native";
-export default function Provider(props){
-  return <View style={{justifyContent:"center",flex:1,alignItems:"center"}}>
-      <Text style={{fontSize:16}}>La vie de material</Text>
-  </View>
-}

package/src/context/Provider copy.js

@@ -1,205 +0,0 @@
-import React from "$react";
-import appConfig from "$capp/config";
-import {MD3LightTheme,MD3DarkTheme} from "react-native-paper";
-import { useMaterial3Theme,isDynamicThemeSupported} from '@pchmn/expo-material3-theme';
-import { useColorScheme } from 'react-native';
-import {colorsAlias,Colors} from "$theme";
-import {isObj,isNonNullString,defaultStr,extendObj} from "$cutils";
-import {getMainScreens} from "$escreens/mainScreens";
-import {ExpoUIContext} from "./hooks";
-import Login from "$eauth/Login";
-import {modes} from "$ecomponents/TextField";
-import {isMobileMedia} from "$cdimensions";
-import { prepareScreens } from "./TableData";
-import {extendFormFields} from "$ecomponents/Form/Fields";
-
-
-/*****
-    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:{
-      table1:{drawerSortOrder:{number,l'ordre d'apparition dans le drawer},showInDrawer:{boolean|{funct<{boolean}>},si l'on affichera la table de données dans le drawers}},
-      table2:{},
-      table3:{},...[tableN]:{}}
-    }, la liste des tables de données
-    structsData : {object}, la liste des données de structures
-    handleHelpScreen : {boolean}, //si l'écran d'aide sera pris en compte, l'écran d'aide ainsi que les écrans des termes d'utilisations et autres
-    convertFiltersToSQL : {boolean}, si les filtres de datagrid ou filtres seront convertis au format SQL
-    components : {
-        logo : ReactNode | ReactComponent | object {
-           image{ReactComponent} :,
-           text {ReactComponent}
-        },
-        datagrid : {
-          ///les props par défaut à passer au composant Datagrid
-        },
-        customFormFields{Object}, //les composant personalisés des forms fields
-        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,
-        TableDataScreen | TableDataScreenItem : {ReactComponent}, le composant TableDataScreenItem, à utiliser pour le rendu des écrans
-        TableDataScreenList | TableDataListScreen {ReactComponent}, le composant TableDataList à utiliser pour le rendu des écrans listants les éléments du table data
-    },
-    navigation : {
-      screens : {Array}, les écrans de navigation,
-      screenOptions : {object}, les options du composant Stack.Navigator, voir https://reactnavigation.org/docs/native-stack-navigator/
-      drawerItems : {object|array|function}, la fonction permettant d'obtenir les items du drawer principal de l'application, Chaque item du drawer doit avoir la chaine drawerSection, chaine de caractère determinant le code de la section dans lequel l'afficher
-      drawerSections : {object : {
-          [key{string}]:{string}} |
-          [key{string}] : {object { code:{string},label:{Node},order:{number, l'ordre de trie de la section}}}
-      } //les différentes sections à utiliser pour le rendu du drawer, deux sections par défaut existent : 
-      les sectionis help et dashboard; help pour le rendu des items de la section Aide et Dashboard pour le rendu des items de la section Dashboard/Home
-      drawerItemsMutator  : {function}, la fonction permettant de muter les drawerItems à chaque fois qu'on appelle la fonction de récupératioin des drawerItems
-      containerProps : {object}, les props à passer au composant NavigationContainer de react-navigation
-    },
-    realm : {}, //les options de configurations de la base de données realmdb
-*/
-const Provider = ({children,getTableData,handleHelpScreen,navigation,swrConfig,components:cComponents,convertFiltersToSQL,getStructData,tablesData,structsData,...props})=>{
-    const {extendAppTheme} = appConfig;
-    const { theme : pTheme } = useMaterial3Theme();
-    navigation = defaultObj(navigation);
-    const {customFormFields,...components} = defaultObj(cComponents);
-    extendFormFields(customFormFields);
-    structsData = isObj(structsData)? structsData : null;
-    appConfig.tablesData = tablesData;
-    handleHelpScreen = handleHelpScreen === false ? false : true;
-    appConfig.structsData = appConfig.structsData = isObj(structsData)? structsData : null;
-    getTableData = appConfig.getTable = appConfig.getTableData = getTableOrStructDataCall(tablesData,getTableData);
-    getStructData = appConfig.getStructData = getTableOrStructDataCall(structsData,getStructData);
-    appConfig.LoginComponent = Login;
-    swrConfig = defaultObj(swrConfig);
-    if(convertFiltersToSQL !== undefined){
-      appConfig.set("convertFiltersToSQL",convertFiltersToSQL);
-    }
-    const colorScheme = useColorScheme();
-    const isColorShemeDark = colorScheme ==="dark";
-    appConfig.extendAppTheme = (theme,Theme,...rest)=>{
-        if(!isObj(theme)) return;
-        const isDark = theme.dark || theme.isDark || isDynamicThemeSupported && isColorShemeDark ;
-        const elevation = defaultObj(theme.elevation,isDark ? pTheme.dark?.elevation : pTheme.light?.elevation)
-        const newTheme = 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;
-        const r = typeof extendAppTheme == 'function'? extendAppTheme(theme,Theme,...rest)  : theme;
-        const _theme = (isObj(r) ? r : theme);
-        const customCSS = _theme.customCSS;
-        extendObj(Theme,{
-          elevations : elevation,
-          elevation,
-          colorScheme,
-          isDynamicThemeSupported,
-        })
-        return {
-          ..._theme,
-          get customCSS(){
-             const prevCSS = defaultStr(typeof customCSS ==='function'? customCSS(theme) : customCSS);
-             return `
-                #root {
-                  overflow:hidden!important;
-                  width : 100%!important;
-                  height : 100%important;
-                  left : 0!important;
-                  top : 0!important;
-                }
-                .virtuoso-table-component,
-                .virtuoso-table-component th,
-                .virtuoso-table-component tr,
-                .virtuoso-table-component td{
-                  border-collapse : collapse!important;
-                }
-                ${prevCSS}
-             `;
-          },
-          get textFieldMode (){
-            /***** possibilité de charger le mode d'affichage par défaut des champs textuels dans le theme de l'application */
-            if(typeof theme.textFieldMode =='string' && theme.textFieldMode && modes[theme.textFieldMode]){
-                return modes[theme.textFieldMode];
-            }
-            return isMobileMedia()? modes.shadow : modes.flat;
-          }
-        }
-    }
-    const {screens} = navigation;
-    navigation.screens = React.useMemo(()=>{
-       const r = prepareScreens({
-        tables:tablesData,
-        screens,
-        TableDataScreen:components.TableDataScreen || components.TableDataScreenItem,
-        TableDataScreenList:components.TableDataScreenList||components.TableDataListScreen,
-      });
-      return [...r,...getMainScreens(handleHelpScreen)];
-    },[]);
-    navigation.containerProps = defaultObj(navigation.containerProps);
-    const {linking} = navigation;
-    return <ExpoUIContext.Provider 
-      value={{
-        ...props,
-        handleHelpScreen,
-        navigation,
-        convertFiltersToSQL,
-        components : {
-            ...components,
-            loginPropsMutator : (props)=>{
-               return extendProps(components.loginPropsMutator,props);
-            },
-            tableLinkPropsMutator : (props)=>{
-                return extendProps(components.tableLinkPropsMutator,props);
-            },
-            datagrid : Object.assign({},components.datagrid),
-        },
-        getTableData,
-        getTable : getTableData,
-        getStructData,
-        tablesData,
-        structsData,
-        appConfig,
-        swrConfig,
-      }} 
-      children={children}
-    />;
-}
-const getTableOrStructDataCall = (tablesOrStructDatas,getTableOrStructDataFunc)=>{
-  return (tableName,...rest)=>{
-      if(!isNonNullString(tableName)) return null;
-      tableName = tableName.trim();
-      const ret2 = typeof getTableOrStructDataFunc ==='function' ? getTableOrStructDataFunc (tableName,...rest) : null;
-      if(isObj(ret2) && Object.size(ret2,true)) return ret2;
-      if(!isObj(tablesOrStructDatas)) return null;
-      const ret = tablesOrStructDatas[tableName] || tablesOrStructDatas[tableName.toLowerCase()] || tablesOrStructDatas[tableName.toUpperCase];
-      if(isObj(ret)) return ret;
-      return null;
-  }
-}
-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;