@fto-consult/expo-ui 2.16.3 → 2.16.6

package/src/components/Logo/Logo.js

@@ -1,19 +1,20 @@
-import { Component } from "react";
 import {isNativeMobile} from "$cplatform";
 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 +24,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]),
     };
 }
 
@@ -74,7 +79,7 @@ const styles = StyleSheet.create({
     },
     small : {
         fontSize:remToPixel(2.5),
-        marginLeft:isNativeMobile()? -25 : -20
+        marginLeft:isNativeMobile()? -15 : -10
     },
     medium : {
         fontSize:remToPixel(3),
@@ -88,4 +93,5 @@ const styles = StyleSheet.create({
 })
 
 Logo.height = height;
-Logo.width = width;
+Logo.width = width;
+Logo.displayName = "ExpoLogoComponent";

package/src/layouts/DatabaseStatistics/DatabaseStatistic.js

@@ -59,7 +59,7 @@ export default function DatabaseStatisticContainer (props){
         left = {(aProps)=>{
             return <Avatar suffix={index} {...aProps} icon= {icon} size={40} label={title}/>
         }}
-        title = {<Label splitText numberOfLines={1} primary style={[{fontSize:15}]}>{title}</Label>}
+        title = {<Label splitText numberOfLines={1} color={theme.colors.primaryOnSurface} style={[{fontSize:15}]}>{title}</Label>}
         titleProps = {{primary : true}}
         description = {isLoading?<View style={[theme.styles.justifyContentFlexStart,theme.styles.alignItemsFlexStart]}>
             <ActivityIndicator color={theme.colors.primary}/>

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.showProfilAvatarOnDrawer;
+    }
+     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,!withLabel && theme.styles.justifyContentCenter]}>
+        <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,18 @@ export default function MainScreenScreenWithOrWithoutAuthContainer(props) {
     screenName,
     containerProps,
     testID,
+    profilAvatarProps,
+    profilAvatarContainerProps,
+    withProfilAvatarOnAppBar:cWithPorilAvatarOnAppbar,
     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 +89,7 @@ export default function MainScreenScreenWithOrWithoutAuthContainer(props) {
   if(authRequired === false){
     withFab = false;
   }
+  const withProfilAvatarOnAppBar = cWithPorilAvatarOnAppbar !== false && withDrawer && !theme.showProfilAvatarOnDrawer ? true : false;
   React.useEffect(() => {
     if((title||subtitle) && navigation && navigation.setOptions){
       const appName = APP.getName().toUpperCase();
@@ -107,11 +114,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/navigation/Drawer/index.js

@@ -1,17 +1,23 @@
 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 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.showProfilAvatarOnDrawer){
+            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.showProfilAvatarOnDrawer ? 'Dashboard' : APP.getName();
     const itx = typeof items === "function" ? items() : items;
     const handleHelp =  appConfig.get("handleHelpScreen") !== false ? true : false;
     const r = [
@@ -38,7 +39,7 @@ export const getItems = (force)=>{
             items : [
                 {
                     icon : 'help',
-                    label : 'A propos de '+name,
+                    label : 'A propos de '+APP.getName(),
                     routeName : aboutScreenName,
                 }
             ]

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/auth/ThemeSelector/utils.js

@@ -1,141 +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.
-
-import { lightColors,darkColors,primary as defaultPrimary,secondary as defaultSecondary} from "$theme/defaultTheme";
-import {modesObject} from "$ecomponents/TextField/utils";
-
-export const fields = {
-    name : {
-        type : 'text',
-        maxLength : 30,
-        text : 'Nom du thème',
-        required : true,
-        upper : true,
-    }, 
-    dark : {
-        type : 'switch',
-        checkedValue : true,
-        uncheckedValue : false,
-        label : 'Mode Sombre',
-        checkedTooltip : 'Mode sombre actif',
-        uncheckedTooltip : 'Mode sombre inactif',
-        onChange : ({value,checked,context})=>{
-            if(checked === undefined) return;
-            if(context && context.getField){
-                const darkFields = checked ? darkColors  : lightColors;
-                Object.map(darkFields,(dF,i)=>{
-                    const dFContext = context.getField(i);
-                    if(dFContext && dFContext.setValue){
-                        dFContext.validate({value:dF});
-                    }
-                })
-            }
-        }
-    },
-    textFieldMode : {
-        type : 'select',
-        items : {...modesObject,none:{code:'',label:'Dynamique'}},
-        text : 'Mode d\'affichage des champs de texte'
-    },
-    primary : {
-        type : 'color',
-        text : 'Couleur principale [primary]',
-        required : true,
-        onChange : ({value,context})=>{
-            if(context && context.getField){
-                const pOnSurface = context.getField("primaryOnSurface");
-                if(pOnSurface){
-                    pOnSurface.setValue(value);
-                }
-            }
-        }
-    },
-    primaryText : {
-        type :'color',
-        text :'Texte sur couleur principale [primaryText]',
-        required : true,
-    },
-    secondary : {
-        type : 'color',
-        text : ' Couleur secondaire [secondary]',
-        required : true,
-        onChange : ({value,context})=>{
-            if(context && context.getField){
-                const sOnSurface = context.getField("secondaryOnSurface");
-                if(sOnSurface){
-                    sOnSurface.setValue(value);
-                }
-            }
-        }
-    },
-    secondaryText : {
-        type :'color',
-        text :'Texte sur couleur secondaire [secondaryText]',
-        required : true,
-    },
-    text : {
-        type :'color',
-        text : 'Couleur de texte [text]',
-        required : true,
-    },
-    disabled : {
-        type :'color',
-        text :'Texte Inactif [disabeld]'
-    },
-    divider : {
-        type : 'color',
-        text : 'Couleur|Soulignement [divider]'
-    },
-    background : {
-        type : 'color',
-        text : 'Couleur d\'arrière plan [background]',
-    },
-    surface : {
-        type :'color',
-        text :'Couleur de surface [surface]',
-    },
-    surfaceText : {
-        type :'color',
-        text :'Texte sur surface [surfaceText]',
-    },
-    primaryOnSurface : {
-        type :'color',
-        text :'Couleur principale sur surface  [primaryOnSurface]',
-    },
-    secondaryOnSurface : {
-        type :'color',
-        text :'Couleur secondaire sur surface  [secondaryOnSurface]',
-    },
-    info : {
-        type :'color',
-        text :'Notification|info [info]'
-    },
-    success : {
-        type :'color',
-        text :'Notification|Succès [success]'
-    },
-    warning : {
-        type :'color',
-        text :'Notification|Alerte [warning]'
-    },
-    error : {
-        type :'color',
-        text :'Notification|Erreur [error]'
-    },
-};
-export const getThemeData = (value)=>{
-    const theme = {name:value.name,colors:{}};
-    const validValue = {};
-    Object.map(fields,(f,i)=>{
-        if(!f) return;
-        if(f.type =='color'){
-            const fText = i+"Color";
-            theme.colors[i] = value[i] || value[fText];
-        } else {
-            theme[i] = value[i];
-        }
-        validValue[i] = value[i];
-    });
-    return {theme,value:validValue};
-}