@fto-consult/expo-ui 2.16.2 → 2.16.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.16.2",
+  "version": "2.16.5",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^1.21.3",
+    "@fto-consult/common": "^1.22.8",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

package/src/auth/ThemeSelector/index.js

@@ -51,6 +51,7 @@ export const getThemeFieldProps = (props,ref)=>{
         const title = data && data.name ? ("Modifier ["+data.name+"]") : ('Nouv theme['+user.code+"]");
         const isEditing = isDocEditing(data);
         fields.textFieldMode.defaultValue = theme.textFieldMode;
+        fields.profilAvatarPosition.defaultValue = theme.profilAvatarPosition;
         Provider.open({
             cancelButton : true,
             dialogProps : {
@@ -81,7 +82,8 @@ export const getThemeFieldProps = (props,ref)=>{
                     }
                     data.custom = true;
                     customThemes[data.name] = data;
-                    itemsRef.current = user.customThemes = customThemes;
+                    itemsRef.current = {...customThemes,...getColors()};
+                    user.customThemes = customThemes;
                     open((isEditing?"Modification ":"Enregistrement ")+"du thème...");
                     Auth.upsertUser(user,false).then(()=>{
                         if(Auth.getLoggedUserCode() == user.code){

package/src/auth/ThemeSelector/utils.js

@@ -33,6 +33,13 @@ export const fields = {
             }
         }
     },
+    profilAvatarPosition : {
+        type : 'switch',
+        checkedValue : "drawer",
+        uncheckedValue : "appBar",
+        label : "Profil affiché sur le drawer",
+        checkedTooltip : "Votre profil avatar sera affiché sur la barre de navigation latéralle de l'application"
+    },
     textFieldMode : {
         type : 'select',
         items : {...modesObject,none:{code:'',label:'Dynamique'}},

package/src/components/AppBar/index.js

@@ -7,7 +7,7 @@ import theme,{Colors,flattenStyle} from "$theme";
 import {StyleSheet} from "react-native";
 import {goBack as navGoBack,useNavigation,useRoute,useScreenOptions } from "$cnavigation";
 import PropTypes from "prop-types";
-import { Dimensions,TouchableWithoutFeedback} from "react-native";
+import { Dimensions,View,TouchableWithoutFeedback} from "react-native";
 import Content from "./Content";
 import Icon from "$ecomponents/Icon";
 import {Elevations} from "$ecomponents/Surface";
@@ -35,6 +35,7 @@ const AppBarComponent = React.forwardRef((props,ref)=> {
       onUnmount,drawerType,options,allowDrawer,back,menuProps,appBarType, 
       drawerRef,beforeGoBack,title,subtitle,titleProps,backAction,backActionProps,
       subtitleProps,testID,
+      right,
       onBackActionPress : customOnBackActionPress,actions,backActionRef,route,
       ...appBarProps} = props;
     const customOptions = options;
@@ -99,6 +100,7 @@ const AppBarComponent = React.forwardRef((props,ref)=> {
     context.forceUpdate = ()=>{
       return setLayout({...Dimensions.get("window")});
     }
+    const rightContent = typeof right =='function' ? right ({drawerRef,context,isMobile:Dimensions.isMobileMedia(),isDesktop:Dimensions.isDesktopMedia(),isTablet:Dimensions.isTabletMedia(),isPhone:Dimensions.isPhoneMedia(),dimensions,...dimensions}): right;
     const splitedActions = isSplitedActions(actions)? actions:  splitActions({...appBarProps,windowWidth:layout.width,canGoBack:back || options.back?true:false,isAppBarAction:true,onBackActionPress,goBack,route,navigation,actions});
     const onPageResize = bindResizeEvent !== false ? (e)=>{
           if(!e || !e.nativeEvent || !e.nativeEvent.layout) return null;
@@ -128,6 +130,7 @@ const AppBarComponent = React.forwardRef((props,ref)=> {
             color : anchorStyle.color,
            }
         })}
+        {React.isValidElement(rightContent) && rightContent || right}
       </Appbar.Header>
     );
 });
@@ -144,7 +147,7 @@ const styles = StyleSheet.create({
   header : {
     paddingHorizontal : 5,
     paddingRight : 10,
-  }
+  },
 })
 
 AppBarComponent.GO_BACK_EVENT = GO_BACK_EVENT;

package/src/components/AppBar/utils.js

@@ -14,7 +14,7 @@ export const ACTION_ICON_SIZE = 30;
 export const TITLE_FONT_SIZE = 16;
 
 export const getMaxActions = (windowWidth) => {
-    let iWidth = typeof windowWidth =='number' && windowWidth > 200 ? windowWidth : getWindowSizes().width;
+    let iWidth = typeof windowWidth =='number' && windowWidth > 200 ? windowWidth : getWindowSizes().width - 100;
     return iWidth >= 3000 ? 8 : iWidth >= 2500? 7 : iWidth >= 2000 ? 6 : iWidth >= 1600 ? 5 : iWidth >= 1300 ? 4 : iWidth >= 800 ? 2 : iWidth >= 600 ? 1 : 0
 }
 

package/src/components/Dialog/Provider.js

@@ -46,19 +46,23 @@ const Provider = React.forwardRef((props,innerRef)=>{
     const [state,setState] = React.useState({
         visible : defaultBool(props.visible,false),
     });
-    const [context] = React.useState({
+    const context = {
         open : (props)=>{
+            if(state.visible) return;
             let bfOpen = typeof state.beforeOpen == 'function'? state.beforeOpen : typeof beforeOpen =='function'? beforeOpen : x=>true;
             if(bfOpen(state) === false) return;
             return setState({onDismiss:undefined,...defaultObj(props),visible:true})
         },
         close : (props)=>{
-            return setState({...state,...props,visible:false});
+            if(!state.visible) return;
+           return setState({...state,...props,visible:false});
         },
-    });
+    };
     React.setRef(ref,context);        
     return <Dialog {...props} {...state} controlled onDismiss = {(e)=>{
-        setState({...state,visible:false});
+        if(state.visible){
+            setState({...state,visible:false});
+        }
         if(typeof state.onDismiss =='function'){
             state.onDismiss({context,state});
         } else if(onDismiss){

package/src/components/Drawer/index.js

@@ -220,7 +220,7 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
 
     const getDrawerRef = x=> drawerRef;
     ///lorsque le drawer est en mode permanent, l'icone par défaut est l'icon devant le dépingler du mode permanent
-    const backIcon = isLeftPosition ? "arrow-left" : "arrow-right";
+    const backIcon = "window-close";//isLeftPosition ? "arrow-left" : "arrow-right";
     const chevronIcon = isLeftPosition ? "chevron-left":"chevron-right";
     temporaryToggleIcon = React.isValidElement(temporaryToggleIcon)? temporaryToggleIcon : backIcon;
     permanentToggleIcon = React.isValidElement(permanentToggleIcon)? permanentToggleIcon : chevronIcon;

package/src/components/Dropdown/utils.js

@@ -1,5 +1,5 @@
 import {isMobileOrTabletMedia} from "$cplatform/dimensions";
-import {isNativeMobile} from "$cplatform";
+import {isNativeMobile,isTouchDevice} from "$cplatform";
 
 export const matchOperators = /[|\\{}()[\]^$+*?.]/g;
 
@@ -15,5 +15,8 @@ export const getSearchTimeout = (itemCount)=>{
 /**** voir si le champ de recherche du composant peut être autofocus enf onction du nombre d'items et du type d'environnement */
 export const canAutoFocusSearchField = ({visible,items})=>{
     const count = typeof items =='number'? items : typeof (items) === 'object' ? Object.size(items) : 0;
-    return visible && (!isNativeMobile() || count > MAX_AUTO_FOCUS_ITEMS) ? true : false;
+    if(!visible) return false;
+    const ret = count > MAX_AUTO_FOCUS_ITEMS && true || false;
+    if(!isNativeMobile() && !isTouchDevice()) return ret;
+    return isNativeMobile()? ret : false;
 }

package/src/components/Form/FormData/DialogProvider.js

@@ -79,7 +79,9 @@ const FormDataDialogProvider = React.forwardRef((props,innerRef)=>{
         dialogProps = {dialogProps}
         controlled={false} 
         onDismiss = {(e)=>{
-            setState({...state,visible:false});
+            if(state.visible){
+                setState({...state,visible:false});
+            }
             if(typeof state.onDismiss =='function'){
                 state.onDismiss({context,state});
             } else if(onDismiss){

package/src/components/Logo/Logo.js

@@ -4,16 +4,18 @@ import View from "$ecomponents/View";
 import React from "$react";
 import theme,{remToPixel,Colors,flattenStyle} from '$theme';
 import {StyleSheet} from "react-native";
-import {defaultStr} from "$utils";
+import {defaultStr,defaultObj,defaultNumber} from "$utils";
 import LogoComponent from "$logoComponent";
 
 export const height = 150;
 export const width = undefined;//300;
-export default class Logo extends Component {
-    render(props){
-        let {icon,color,style,testID,logo,text} = this.props;
+export default function Logo (props) {
+    let {icon,color,style,testID,containerProps,smallStyle,largeStyle,mediumStyle,height:customHeight,withImage,withText} = props;
         testID = defaultStr(testID,"RN_LogoComponent");
-        const styles = getStyle(style,color);
+        containerProps = defaultObj(containerProps);
+        customHeight  =defaultNumber(customHeight,height);
+        const hasHeight = customHeight && customHeight != height? true : false;
+        const styles = getStyle({style,color,height:hasHeight?customHeight:undefined,smallStyle,largeStyle,mediumStyle});
         let logoImage = null,img,txt=null,hasTwice = false;
         if(LogoComponent){
             hasTwice = React.isComponent(LogoComponent.Image) && React.isComponent(LogoComponent.Text);
@@ -23,26 +25,30 @@ export default class Logo extends Component {
                 img = icon !== false ? <View testID={testID+"_ContentContainer"} style={styles.logoImage}>
                     <LogoComponent.Image styles={styles}/>
                 </View> : null;
-                txt = text !== false ? <LogoComponent.Text style={styles.logoContent} styles={styles}/> : null;
+                txt = withText !== false && React.isComponent(LogoComponent.Text) ? <LogoComponent.Text style={styles.logoContent} styles={styles}/> : null;
             }
         }
-        return <View testID={testID} style={styles.container}> 
-            {hasTwice ? img : null}
+        return <View testID={testID} style={[styles.container,hasHeight && {height:customHeight}]}> 
+            {hasTwice && withImage !== false ? img : null}
             {hasTwice? txt : null}
             {!hasTwice ? logoImage : null}
         </View>
-    }
-    
-}
+}   
 
-const getStyle = (style,color)=>{
-    const cColor = flattenStyle([{color:Colors.isValid(color)? color : theme.colors.primary}]);
+const getStyle = ({style,color,height:customHeight,smallStyle,mediumStyle,largeStyle})=>{
+    const cColor = flattenStyle([{color:Colors.isValid(color)? color : theme.colors.primaryOnSurface}]);
+    let size = 5;
+    if(typeof customHeight =='number' && customHeight <= customHeight){
+        const divider = Math.min(size,Math.max(Math.ceil(height/customHeight),2));
+        size = divider <= 2 ? 2 : divider;
+    }
+    let smallSize = size/2, medium = (3/4)*size;
     return  {
         ...styles,
-        container : flattenStyle([styles.container,cColor,style]),
-        firstText : flattenStyle([styles.medium,cColor]),
-        large : flattenStyle([styles.medium,styles.large,cColor]),
-        small : flattenStyle([styles.medium,cColor,styles.small]),
+        container : flattenStyle([styles.container,style]),
+        large : flattenStyle([styles.large,styles.large,{color:theme.colors.secondaryOnSurface,fontSize:remToPixel(size)},largeStyle]),
+        medium : flattenStyle([styles.medium,cColor,{fontSize:remToPixel(medium)},mediumStyle]),
+        small : flattenStyle([styles.small,cColor,styles.small,{fontSize:remToPixel(smallSize)},smallStyle]),
     };
 }
 
@@ -88,4 +94,5 @@ const styles = StyleSheet.create({
 })
 
 Logo.height = height;
-Logo.width = width;
+Logo.width = width;
+Logo.displayName = "ExpoLogoComponent";

package/src/layouts/ProfilAvatar/index.js

@@ -0,0 +1,200 @@
+import {defaultObj} from "$utils";
+import i18n from "$i18n"
+import Auth from "$cauth";
+import Menu from "$ecomponents/Menu";
+import React from "$react";
+import { screenName } from "$escreens/Auth/utils";
+import Image from "$ecomponents/Image";
+import { StyleSheet,View,Pressable} from "react-native";
+import avatarProps from "$eauth/avatarProps";
+import Button from "$ecomponents/Button";
+import Label from "$ecomponents/Label";
+import Icon from "$ecomponents/Icon";
+import {navigate} from "$cnavigation";
+import theme from "$theme";
+import {isMobileNative} from "$cplatform";
+import appConfig from "$capp/config";
+import Preloader from "$preloader";
+import {defaultNumber} from "$utils";
+import Tooltip from "$ecomponents/Tooltip";
+const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps:customChevronIconProps,size,withLabel,...props},ref)=>{
+    let u = defaultObj(Auth.getLoggedUser());
+    const deviceNameRef = React.useRef(null);
+    const deviceName = appConfig.deviceName;
+    customChevronIconProps = defaultObj(customChevronIconProps);
+    props = defaultObj(props);
+    const closeDrawer = cb => {
+        if(drawerRef && drawerRef.current && drawerRef.current.close){
+            return drawerRef && drawerRef.current && drawerRef.current.close(cb);
+        }
+        return typeof cb =='function'? cb() : null;
+    }
+    if(withLabel === undefined){
+        withLabel = theme.showAvatarProfileOnDrawer;
+    }
+    withLabel = withLabel !== false ? true : false;
+    props.src = u.avatar;
+    size = defaultNumber(size,!withLabel?40:40);
+    const userPseudo = Auth.getUserPseudo();
+    const pseudo = defaultStr(userPseudo,Auth.getUserEmail(),Auth.getUserCode());
+    const label = defaultStr(Auth.getUserFullName(),userPseudo);
+    const onLongPress = ()=>{
+        appConfig.setDeviceId().then((r)=>{
+            if(deviceNameRef.current && deviceNameRef.current.update){
+                deviceNameRef.current.update(r?("["+r+"]"):"");
+            }
+        });
+    };
+    const tooltip = "Pressez longtemps pour définir un identifiant unique pour l'appareil";
+    const children = <View style={styles.labelContainer}>
+        <Label splitText numberOfLines={1} style={{color:theme.colors.primaryOnSurface,fontSize:15}}>{pseudo}</Label>
+        <Label splitText numberOfLines={1} style={{fontSize:12,color:theme.colors.secondaryOnSurface,marginTop:6}}>
+            {label}
+        </Label>
+        {deviceName && <Label.withRef textBold splitText title={"Identifiant unique de l'application, installé sur cet appareil"} ref={deviceNameRef} secondary style={{fontSize:10}}>
+            [{deviceName}]
+        </Label.withRef> || null}
+    </View>
+      const menItems = [
+            !withLabel && {
+                text : <Tooltip tooltip={tooltip} Component={Pressable} onLongPress={onLongPress} testID={"RNProfilAvatar_ContainerMenu"}>
+                    {children}
+                </Tooltip>,
+                closeOnPress : false,
+                divider : true,
+            },
+            {
+                label : i18n.lang("preferences",'Préférences'),
+                icon : "account-cog",
+                onPress : (a)=>{
+                    closeDrawer(()=>{
+                        return navigate({
+                            routeName : screenName,
+                            params : {
+                                user : u,
+                            }
+                        })
+                    });
+                }
+            },
+            {
+                label : i18n.lang("logout",'Déconnexion'),
+                icon : "logout",
+                onPress : (a)=>{
+                    closeDrawer(()=>{
+                        Preloader.open("Déconnexion en cours...");
+                        Auth.signOut().finally(Preloader.close)
+                    });
+                }
+            }
+        ];
+      
+      const onChangeAvatar = ({dataURL})=>{
+            if(u.avatar === dataURL) {
+                return;
+            }
+            if(!dataURL){
+                u.avatar = null;
+            } else {
+                u.avatar = dataURL;
+            }
+            Auth.upsertUser({...u,avatar:u.avatar},false);
+      }
+
+      return <View ref ={ref}>
+            <Menu
+             anchor = { (aProps)=>{
+                const chevronIconProps = {
+                    size : 20,
+                    icon : "chevron-down",
+                    secondary : true,
+                    ...customChevronIconProps,
+                    ...aProps,
+                    style : [styles.icon,withLabel=== false && {color:theme.colors.primaryText},customChevronIconProps.style],
+                }
+                if(!withLabel){
+                    return <View testID={"RNProfilAvatar_AvatarContainer"} style={[theme.styles.row,theme.styles.alignItemsCenter]}>
+                        <Image
+                            {...props} 
+                            {...aProps}
+                            size={size}
+                            style = {styles.itemLeft}
+                            testID = {"RN_ProfilAvatar_Avatar"}
+                            editable
+                            defaultSource ={avatarProps.defaultSrc}
+                            onChange = {onChangeAvatar}
+                        />
+                        <Icon 
+                            {...chevronIconProps}
+                            {...aProps}
+                            style = {[chevronIconProps.style,{marginLeft:-5}]}
+                        />
+                    </View>
+                }
+                return <Button
+                        normal
+                        upperCase = {false}
+                        disableRipple
+                        title = {tooltip}
+                        {...aProps}
+                        style = {[styles.container]}
+                        surfaceProps = {{style:[theme.styles.noMargin,theme.styles.noPadding]}}
+                        onLongPress = {onLongPress}
+                        left={props1 => <Image
+                            {...props} 
+                            {...props1}
+                            size={size}
+                            style = {styles.itemLeft}
+                            testID = {"RN_ProfilAvatar_AvatarImage"}
+                            editable
+                            defaultSource ={avatarProps.defaultSrc}
+                            onChange = {onChangeAvatar}
+                        />}
+                        right = {(p)=>{
+                            return <Icon 
+                                {...p} 
+                                {...chevronIconProps}
+                            />
+                        }}
+                    >
+                    {children}
+                    </Button>
+            } }  
+            items={menItems}
+        />
+      </View>
+});
+
+const styles = StyleSheet.create({
+    itemLeft : {
+        marginHorizontal : 5,
+        marginTop : isMobileNative()? 10 : 0,
+    },
+    container : {
+        marginLeft : 0,
+        marginVertical : 10,
+    },
+    labelContainer : {
+        flexDirection : 'column',
+        paddingRight : 5,
+        maxWidth : 150,
+        minWidth : 100,
+    },
+    pseudo : {
+        flexDirection : "row",
+        justifyContent : "center",
+        alignItems : "center"
+    },
+    appName : {
+        marginLeft : 5,
+        fontWeight : "bold",
+    },
+    icon : {
+        marginHorizontal:0,
+        paddingHorizontal : 0,
+    }
+})
+
+export default UserProfileAvatarComponent;
+
+UserProfileAvatarComponent.displayName = "UserProfileAvatarComponent";

package/src/layouts/Screen/Screen.js

@@ -4,10 +4,14 @@
 
 import Container from "$cauth/Container";
 import ScreenWithOrWithoutAuthContainer from "./ScreenWithOrWithoutAuthContainer";
+import ProfilAvatar from "$elayouts/ProfilAvatar";
 
 export default function MainScreenComponent(props){
     return <ScreenWithOrWithoutAuthContainer
       {...props}
+      renderProfilAvatar = {(props)=>{
+          return <ProfilAvatar withLabel = {false}  {...props} />
+      }}
       renderChildren = {({containerProps,children})=>{
           return <Container {...containerProps}>
             {children}

package/src/layouts/Screen/ScreenWithOrWithoutAuthContainer.js

@@ -51,12 +51,17 @@ export default function MainScreenScreenWithOrWithoutAuthContainer(props) {
     screenName,
     containerProps,
     testID,
+    profilAvatarProps,
+    profilAvatarContainerProps,
     renderChildren,
+    renderProfilAvatar,
     ...rest
   } = getScreenProps(props);
   const insets = useSafeAreaInsets();
   testID = defaultStr(testID,"RN_MainScreenScreenWithOrWithoutAuthContainer")
   containerProps = defaultObj(containerProps);
+  profilAvatarContainerProps = defaultObj(profilAvatarContainerProps);
+  profilAvatarProps = defaultObj(profilAvatarProps);
   const backgroundColor = theme.colors.background;
   const containerStyle = [
     styles.container,
@@ -83,6 +88,7 @@ export default function MainScreenScreenWithOrWithoutAuthContainer(props) {
   if(authRequired === false){
     withFab = false;
   }
+  const withProfilAvatarOnAppBar = withDrawer && !theme.showAvatarProfileOnDrawer ? true : false;
   React.useEffect(() => {
     if((title||subtitle) && navigation && navigation.setOptions){
       const appName = APP.getName().toUpperCase();
@@ -107,11 +113,22 @@ export default function MainScreenScreenWithOrWithoutAuthContainer(props) {
       {...fabProps}
       screenName={screenName}
   />  : null;
+  const profilAvatar = typeof renderProfilAvatar =='function'? renderProfilAvatar(profilAvatarProps) : null;
   const child = <>
       {withStatusBar !== false ? <StatusBar/> : null}
       <ErrorBoundary testID={testID+"_ScreenLayoutErrorBoundary"}>
         <View testID={testID} {...containerProps}  style={[styles.container,{backgroundColor},modal && styles.modal]}>
-          {appBar === false ? null : React.isValidElement(appBar)? state.AppBar :  <AppBar testID={testID+'_AppBar'} {...appBarProps} backAction = {defaultVal(appBarProps.backAction,backAction)} elevation={defaultNumber(appBarProps.elevation,elevation)} withDrawer={withDrawer} options={options} ref={appBarRef} title={title} subtitle={subtitle}/>}
+          {appBar === false ? null : React.isValidElement(appBar)? state.AppBar :  <AppBar 
+              testID={testID+'_AppBar'} {...appBarProps} 
+              backAction = {defaultVal(appBarProps.backAction,backAction)} 
+              elevation={defaultNumber(appBarProps.elevation,elevation)} 
+              withDrawer={withDrawer} options={options} 
+              ref={appBarRef} title={title} 
+              subtitle={subtitle}
+              right = {withProfilAvatarOnAppBar && <View testID={testID+"_ProfilAvatar_Container"}  {...profilAvatarContainerProps} style={[profilAvatarContainerProps.style,styles.profilAvatarContainer]} >
+                {React.isValidElement(profilAvatar) && profilAvatar || null}
+            </View> || null}
+          />}
           {withScrollView !== false ? (
             <ScrollView
               testID = {testID+'_ScreenContentScrollView'}

package/src/layouts/Screen/TableData.js

@@ -113,7 +113,10 @@ export default class TableDataScreenComponent extends FormDataScreen{
                                             context.onNoValidate({...args,msg:message,message,context,validRule:context.getValidRule()});
                                         }
                                     }).catch((e)=>{
-
+                                        const message = defaultStr(e?.message,e?.msg);
+                                        if(message){
+                                            context.onNoValidate({...args,msg:message,message,error:e,context,validRule:context.getValidRule()});
+                                        }
                                     })
                                 } 
                             }

package/src/navigation/Drawer/index.js

@@ -1,17 +1,24 @@
 import Drawer,{DrawerItems} from "$ecomponents/Drawer";
-import ProfilAvatar from "./ProfilAvatar";
+import ProfilAvatar from "$elayouts/ProfilAvatar";
 import React from "$react";
 import items,{isItemActive,refresh as refreshItems} from "./items";
 import APP from "$capp/instance";
 import Auth from "$cauth";
 import Login from "$eauth/Login";
 import {navigate} from "$cnavigation";
+import theme from "$theme";
+import Label from "$ecomponents/Label";
+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 headerCB = ({isMinimized})=>{
-        return isMinimized ? null : <ProfilAvatar ref={uProfileRef} drawerRef={drawerRef}/>;
+        if(isMinimized) return null;
+        if(!theme.showAvatarProfileOnDrawer){
+            return <Logo height = {70} withImage = {false} style={[theme.styles.justifyContentFlexStart,{maxWidth:220,overflow:'hidden'}]}/>
+        }
+        return <ProfilAvatar ref={uProfileRef} drawerRef={drawerRef}/>;
     };
     const isAuthLoggedIn = Auth.isLoggedIn();
     const [isLoggedIn,setIsLoggedIn] = React.useState(isAuthLoggedIn);

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

@@ -9,9 +9,10 @@ import APP from "$capp";
 ///les items du drawer
 import items from "$drawerItems";
 import { screenName as aboutScreenName} from "$escreens/Help/About";
+import theme from "$theme";
 
 export const getItems = (force)=>{
-    const name = APP.getName();
+    const name = !theme.showAvatarProfileOnDrawer ? 'Dashboard' : APP.getName();
     const itx = typeof items === "function" ? items() : items;
     const handleHelp =  appConfig.get("handleHelpScreen") !== false ? true : false;
     const r = [

package/src/screens/Auth/Profile.js

@@ -8,7 +8,7 @@ import {SignIn2SignOut} from "$cauth";
 import React from "$react";
 import avatarProps from "$eauth/avatarProps";
 
-export const screenName = "UserProfile";
+import {screenName} from "./utils";
 
 export default function UserProfileScreen(prs){
     const props = getScreenProps(prs);

package/src/screens/Auth/utils.js

@@ -2,4 +2,6 @@ import APP from "$capp/instance";
 import i18n from "$i18n";
 
 export const getTitle = x => APP.name+" "+APP.version+"/"+i18n.lang("login");
-export const title = getTitle();
+export const title = getTitle();
+
+export const screenName = "UserProfile";

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

@@ -1,157 +0,0 @@
-import {defaultObj} from "$utils";
-import i18n from "$i18n"
-import Auth from "$cauth";
-import Menu from "$ecomponents/Menu";
-import React from "$react";
-import { screenName } from "$escreens/Auth/Profile";
-import Image from "$ecomponents/Image";
-import { StyleSheet,View} from "react-native";
-import avatarProps from "$eauth/avatarProps";
-import Button from "$ecomponents/Button";
-import Label from "$ecomponents/Label";
-import Icon from "$ecomponents/Icon";
-import {navigate} from "$cnavigation";
-import theme from "$theme";
-import {isMobileNative} from "$cplatform";
-import appConfig from "$capp/config";
-import Preloader from "$preloader";
-const UserProfileAvatarComponent = React.forwardRef(({drawerRef,...props},ref)=>{
-    let u = defaultObj(Auth.getLoggedUser());
-    const deviceNameRef = React.useRef(null);
-    const deviceName = appConfig.deviceName;
-    props = defaultObj(props);
-    const closeDrawer = cb => {
-        if(drawerRef && drawerRef.current && drawerRef.current.close){
-            return drawerRef && drawerRef.current && drawerRef.current.close(cb);
-        }
-        return typeof cb =='function'? cb() : null;
-    }
-    props.src = u.avatar;
-    props.size = 60;
-      const menItems = [
-            {
-                label : i18n.lang("preferences",'Préférences'),
-                icon : "account-cog",
-                onPress : (a)=>{
-                    closeDrawer(()=>{
-                        return navigate({
-                            routeName : screenName,
-                            params : {
-                                user : u,
-                            }
-                        })
-                    });
-                }
-            },
-            {
-                label : i18n.lang("logout",'Déconnexion'),
-                icon : "logout",
-                onPress : (a)=>{
-                    closeDrawer(()=>{
-                        Preloader.open("Déconnexion en cours...");
-                        Auth.signOut().finally(Preloader.close)
-                    });
-                }
-            }
-        ];
-      const userPseudo = Auth.getUserPseudo();
-      const pseudo = defaultStr(userPseudo,Auth.getUserEmail(),Auth.getUserCode());
-      const label = defaultStr(Auth.getUserFullName(),userPseudo)
-      return <View ref ={ref}>
-            <Menu
-             anchor = { (aProps)=>{
-                return <Button
-                        normal
-                        upperCase = {false}
-                        disableRipple
-                        title = {"Pressez longtemps pour définir un identifiant unique pour l'appareil"}
-                        {...aProps}
-                        style = {[styles.container]}
-                        onLongPress = {()=>{
-                            appConfig.setDeviceId().then((r)=>{
-                                if(deviceNameRef.current && deviceNameRef.current.update){
-                                    deviceNameRef.current.update(r?("["+r+"]"):"");
-                                }
-                            });
-                        }}
-                        left={props1 => <Image
-                            {...props} 
-                            {...props1}
-                            size={60}
-                            style = {styles.itemLeft}
-                            testID = {"RN_ProfilAvatar_Avatar"}
-                            editable
-                            defaultSource ={avatarProps.defaultSrc}
-                            onChange = {({dataURL})=>{
-                                if(u.avatar === dataURL) {
-                                    return;
-                                }
-                                if(!dataURL){
-                                    u.avatar = null;
-                                } else {
-                                    u.avatar = dataURL;
-                                }
-                                Auth.upsertUser({...u,avatar:u.avatar},false);
-                            }
-                        }
-                        />}
-                        right = {(p)=>{
-                            return <Icon 
-                                {...p} 
-                                {...aProps}
-                                secondary
-                                size={20} 
-                                icon={"chevron-down"}
-                                style = {styles.icon}
-                            />
-                        }}
-                    >
-                    <View style={styles.labelContainer}>
-                        <Label splitText numberOfLines={1} style={{color:theme.colors.primaryOnSurface,fontSize:14}}>{pseudo}</Label>
-                        <Label splitText numberOfLines={1} style={{fontSize:12,color:theme.colors.secondaryOnSurface,marginTop:6}}>
-                            {label}
-                        </Label>
-                        {deviceName && <Label.withRef textBold splitText title={"Identifiant unique de l'application, installé sur cet appareil"} ref={deviceNameRef} secondary style={{fontSize:10}}>
-                            [{deviceName}]
-                        </Label.withRef> || null}
-                    </View>
-                    </Button>
-            } }  
-            items={menItems}
-        />
-      </View>
-});
-
-const styles = StyleSheet.create({
-    itemLeft : {
-        marginHorizontal : 5,
-        marginTop : isMobileNative()? 10 : 0,
-    },
-    container : {
-        marginLeft : 0,
-        marginVertical : 10,
-    },
-    labelContainer : {
-        flexDirection : 'column',
-        paddingRight : 5,
-        maxWidth : 150,
-        minWidth : 100,
-    },
-    pseudo : {
-        flexDirection : "row",
-        justifyContent : "center",
-        alignItems : "center"
-    },
-    appName : {
-        marginLeft : 5,
-        fontWeight : "bold",
-    },
-    icon : {
-        marginHorizontal:0,
-        paddingHorizontal : 0,
-    }
-})
-
-export default UserProfileAvatarComponent;
-
-UserProfileAvatarComponent.displayName = "UserProfileAvatarComponent";