@fto-consult/expo-ui 1.0.4

package/src/layouts/Screen/Screen.js

@@ -0,0 +1,173 @@
+import React from '$react';
+import {StyleSheet} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import PropTypes from "prop-types";
+import {defaultObj,defaultStr,defaultNumber,defaultBool} from "$utils";
+import ScrollView from '$ecomponents/ScrollView';
+import View from "$ecomponents/View";
+import { useNavigation } from '$enavigation/utils';
+import Fab from "$elayouts/Fab";
+import {getScreenProps} from '$enavigation/utils';
+import APP from "$capp";
+import AppBar,{createAppBarRef} from "$elayouts/AppBar";
+import ErrorBoundary from "$ecomponents/ErrorBoundary";
+import Portal from "$ecomponents/Portal";
+import theme from "$theme";
+import StatusBar from "$ecomponents/StatusBar";
+import Auth from "$cauth";
+
+const getDefaultTitle = (nTitle,returnStr)=>{
+  let titleStr = React.getTextContent(nTitle);
+  if(!titleStr){
+      titleStr = APP.getName();
+  } 
+  const dbLabel = "";
+  if(!titleStr.toLowerCase().contains(dbLabel.toLowerCase())){
+      titleStr += " ["+dbLabel+"]";
+  }
+  if(returnStr) return titleStr;
+  return typeof nTitle =='string' ? titleStr : nTitle;
+}
+
+export default function MainScreenLayoutComponent(props) {
+  let {
+    children,
+    withScrollView = false,
+    withStatusBar = true,
+    style,
+    contentContainerStyle,
+    options,
+    backAction,
+    appBarProps,
+    authProps,
+    elevation,
+    withFab,
+    appBar,
+    authRequired,
+    withDrawer,
+    allowDrawer,
+    title,
+    subtitle,
+    modal,
+    fabProps,
+    screenName,
+    containerProps,
+    testID,
+    ...rest
+  } = getScreenProps(props);
+  const insets = useSafeAreaInsets();
+  testID = defaultStr(testID,"RN_MainScreenLayoutComponent")
+  containerProps = defaultObj(containerProps);
+  const backgroundColor = theme.colors.background;
+  const containerStyle = [
+    styles.container,
+    {
+      backgroundColor,
+      paddingBottom: insets.bottom,
+      paddingLeft: insets.left,
+      paddingRight: insets.right,
+    },
+  ];
+  options = defaultObj(options);
+  appBarProps = defaultObj(appBarProps)
+  title = defaultVal(appBarProps.title,options.title,title);
+  subtitle = defaultVal(appBarProps.subtitle,options.subtitle,subtitle);
+  const appBarRef = createAppBarRef();
+  const navigation = useNavigation();
+  authProps = Object.assign({},authProps),
+  fabProps = defaultObj(fabProps);
+  authRequired = defaultBool(authProps.required,authRequired,false);
+  withDrawer = typeof withDrawer =='boolean'? withDrawer : authRequired;
+  if(allowDrawer === false){
+     withDrawer = false;
+  }
+  if(authRequired === false){
+    withFab = false;
+  }
+  if(typeof withFab !=='boolean'){
+    withFab = withDrawer;
+  }
+  React.useEffect(() => {
+    if((title||subtitle) && navigation && navigation.setOptions){
+      const appName = APP.getName().toUpperCase();
+      subtitle = React.getTextContent(subtitle);
+      let screenTitle = getDefaultTitle(title,true);
+      if(subtitle){
+          screenTitle += " | "+subtitle;
+      }
+      if(!screenTitle.toUpperCase().contains(appName)){
+          screenTitle+=" | "+appName;
+      }
+      navigation.setOptions({
+        ...options,
+        appBarProps:{...options.appBarProps,...appBarProps,title,subtitle},
+        subtitle :subtitle,
+        title : screenTitle,
+      });
+    }
+  }, [title,subtitle]);
+  const Wrapper =  modal ? Portal : React.Fragment;
+  const fab = withFab !== false ? <Fab 
+      {...fabProps}
+      screenName={screenName}
+  />  : null;
+  return <Wrapper>
+          <Auth.Container  {...authProps} required ={authRequired}>
+              {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}/>}
+                  {withScrollView !== false ? (
+                    <ScrollView
+                      testID = {testID+'_ScreenContentScrollView'}
+                      {...rest}
+                      contentContainerStyle={[contentContainerStyle]}
+                      style={[containerStyle,styles.container, style]}
+                    >
+                      {children}
+                      {fab}
+                    </ScrollView>
+                  ) : (
+                    <View  testID={testID+'_ScreenContent'} {...rest} style={[containerStyle,styles.wrapper,styles.container, style]}>
+                      {children}
+                      {fab}
+                    </View>
+                  )}
+                </View>
+              </ErrorBoundary>
+          </Auth.Container>
+    </Wrapper>
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  wrapper : {
+    flexDirection:'column',
+    /*flex : 1,
+    flexGrow : 1,
+    alignItems:'center'*/
+  },
+  modal : {
+    ...StyleSheet.absoluteFillObject,
+    top : 0,
+    left:0,
+    flex:1,
+    width : '100%',
+    height : '100%'
+  }
+});
+
+MainScreenLayoutComponent.propTypes = {
+  children: PropTypes.any,
+  withScrollView : PropTypes.bool,
+  style:PropTypes.object,
+  appBarProps : PropTypes.object,
+  elevation : PropTypes.number,
+  //appBar : PropTypes.bool,
+  contentContainerStyle : PropTypes.object,
+  withFab : PropTypes.bool,
+  withDrawer : PropTypes.bool,//si l'on doit afficher un drawer dans le contenu
+  fabProps : PropTypes.object,
+}

package/src/layouts/Screen/index.js

@@ -0,0 +1,11 @@
+import Screen from "./Screen";
+import FormData from "./FormData";
+import List from "./FormData/List";
+
+
+Screen.FormData = FormData;
+Screen.List = List;
+
+export default Screen;
+
+export {FormData,List};

package/src/media/Assets/index.js

@@ -0,0 +1,6 @@
+import * as Asset from "./utils";
+
+export * from "./utils";
+export * from "expo-asset";
+
+export default Asset;

package/src/media/Assets/utils.js

@@ -0,0 +1,28 @@
+import { Asset} from 'expo-asset';
+import {isObj,isNonNullString} from "$utils";
+
+export const loadAsset = async (asset)=>{
+    if(isObj(asset) && isAssets(asset)){
+        return Promise.resolve(asset);
+    }
+    return await new Promise((resolve,reject)=>{
+        try {
+            Asset.loadAsync(asset).then((index)=>{
+                if(isAssets(index[0])){
+                    resolve(index[0]);
+                } else {
+                    reject({message:"ressource non trouvée",asset:index})
+                }
+            }).catch(reject);
+        } catch(e){
+            reject(e);
+        }
+    })
+}
+export const load = loadAsset;
+
+export const isAssets = (asset,staticAssets)=>{
+    return isObj(asset) && "width" in (asset) && "height" in (asset) && isNonNullString(asset.uri) && (staticAssets ? asset.uri.contains("/static/"):true);
+}
+export const isValid = isAssets;
+export const isValidAssets = isAssets;

package/src/media/camera.js

@@ -0,0 +1 @@
+export default {};

package/src/media/camera.native.js

@@ -0,0 +1,4 @@
+import { Camera } from 'expo-camera';
+export {Camera};
+
+export default Camera;

package/src/media/camera.web.js

@@ -0,0 +1,9 @@
+import React from "$react";
+const Camera = React.forwardRef((props,ref)=>{
+    return null;
+})
+export {Camera};
+
+export default Camera;
+
+Camera.displayName = "CameraComponent";

package/src/media/file-system/index.js

@@ -0,0 +1,20 @@
+import { readAsStringAsync } from "./utils";
+import { loadAsset } from "../Assets/utils";
+
+export * from "./utils";
+
+export const readFileAsText = async (asset)=>{
+    return await new Promise((resolve,reject)=>{
+        loadAsset(asset).then((a)=>{
+            readAsStringAsync(a.localUri).then((data) => {
+                resolve(data);
+            }).catch(reject);
+        }).catch(reject);
+    })
+}
+export const readFile = readFileAsText;
+
+export default {
+    readFileAsText,
+    readFile,
+}

package/src/media/file-system/utils/index.js

@@ -0,0 +1,32 @@
+import { isAssets } from "../../Assets/utils";
+import {defaultStr,isNonNullString} from "$utils";
+
+export const readBlob = (asset)=>{
+    const uri = isAssets(asset)? asset.uri :isNonNullString(asset)? asset : undefined;
+    if(!uri){
+        return Promise.reject({
+            message :"Vous devez spécifier une uri valide où un paramètre de type asset valide la lecture du fichier",
+        });
+    }
+    return new Promise((resolve,reject)=>{
+        fetch(uri).then((response)=>{
+            response.blob().then(resolve).catch(reject);
+        }).catch(reject);
+    })
+}
+const readAs = async (asset,fn)=>{
+    return await new Promise((resole,reject)=>{
+        readBlob(asset).then((response)=>{
+            const fileReader = new FileReader();
+            fn = typeof fn =="string" && fn && typeof fileReader[fn] =="function"? fileReader[fn] : "readAsText";
+            fileReader[fn](response)
+            fileReader.onload = function () {
+                resole(fileReader.result);
+            }; 
+            fileReader.onerror = reject;
+        }).catch(reject);
+    })
+}
+export const readAsStringAsync = async (asset)=>{
+    return readAs(asset);
+}

package/src/media/file-system/utils.native/index.js

@@ -0,0 +1 @@
+export * from "expo-file-system";

package/src/media/index.js

@@ -0,0 +1,137 @@
+import {isObj} from "$utils";
+import {notify} from "$ecomponents/Dialog";
+import Camera from "./camera";
+import {isMobileNative} from "$cplatform";
+import React from "react";
+
+let cameraRef = null;
+
+export {cameraRef}
+
+export const createCameraRef = ()=>{
+    const ref = React.useRef(null);
+    React.useEffect(()=>{
+        cameraRef = ref.current;
+    },[ref.current])
+    return ref;
+}
+
+const ImagePicker = {
+    MediaTypeOptions : {},
+    mediaTypes : {},
+};
+///import * as ImagePicker from 'expo-image-picker';
+
+export const MEDIA_TYPES = {
+    ALL : ImagePicker.MediaTypeOptions.All,
+    IMAGES : ImagePicker.MediaTypeOptions.Images,
+    VIDEOS : ImagePicker.MediaTypeOptions.Videos,
+}
+
+export {ImagePicker};
+
+export function checkPermission (){
+    return new Promise((resolve,reject)=>{
+        ImagePicker.requestMediaLibraryPermissionsAsync().then((r)=>{
+            if(isObj(r) && (r.granted || r.status =='granted')){
+                resolve(r);
+                return true;
+            } else {
+                reject(r);
+            }
+        }).catch((e)=>{
+            console.log(e," unable to grand media permission");
+            notify.error("Permission à l'accès aux médias refusée par l'utilisateur");
+            reject(e);
+        });
+    })
+}
+
+/**** @see : https://docs.expo.dev/versions/latest/sdk/imagepicker/#imagepickeroptions 
+ *  form more options.
+ */
+export const pickImageOrVideo = (options)=>{
+    return checkPermission().then(()=>{
+        return new Promise((resolve,reject)=>{
+            ImagePicker.launchImageLibraryAsync(extendObj({},{
+                allowsEditing : true,
+                allowsMultipleSelection : false,///web only
+                aspect : [4,3], //[number, number]An array with two entries [x, y] specifying the aspect ratio to maintain if the user is allowed to edit the image (by passing allowsEditing: true). This is only applicable on Android, since on iOS the crop rectangle is always a square.
+                base64 : false, //Whether to also include the image data in Base64 format.
+                exif : false, //Whether to also include the EXIF data for the image. On iOS the EXIF data does not include GPS tags in the camera case.
+                mediaTypes : ImagePicker.MediaTypeOptions.All, //@see : https://docs.expo.dev/versions/latest/sdk/imagepicker/#mediatypeoptions
+                quality : 1, //Specify the quality of compression, from 0 to 1. 0 means compress for small size, 1 means compress for maximum quality.
+            },options)).then((result)=>{
+                if(!result.cancelled) resolve(result);
+                else {
+                    notify.warning("Opération annulée par l'utilisateur");
+                    reject(result);
+                }
+                return null;
+            }).catch(reject);
+        })
+    })
+}
+
+export const pickImage = (options)=>{
+    options = defaultObj(options);
+    options.mediaTypes = ImagePicker.MediaTypeOptions.Images;
+    return pickImageOrVideo(options)
+}
+
+export const pickVideo = (options)=>{
+    options = defaultObj(options);
+    options.mediaTypes = ImagePicker.MediaTypeOptions.Videos;
+    return pickImageOrVideo(options)
+}
+
+export const nonZeroMin = function(args){
+    let arra = Array.prototype.slice.call(arguments,0).sort();
+    let min = 0;
+    for(let i in arra){
+       if(isNumber(arra[i]) && arra[i] > 0) {
+           if(min <= 0){
+             min = arra[i]
+           } else if(arra[i]< min ){
+              min = arra[i]
+           }
+       }
+    }
+    return min;
+};
+
+export {Camera};
+
+export async function canTakePhoto(){
+    if(!isMobileNative()) return false;
+    return true;
+    const canTake = await Camera.isAvailableAsync();
+    return canTake;
+    return isMobileNative() || canTake;
+}
+
+export const takePhoto = (options)=>{
+    console.log(cameraRef," is camera ref")
+    if(!cameraRef){
+        return Promise.reject({
+            msg : "Camera non initialisée"
+        })
+    }
+    return new Promise((resolve,reject)=>{
+        (async ()=>{
+            let takeP = await canTakePhoto();
+            if(takeP){
+                //const types = await Camera.getAvailableCameraTypesAsync();
+                //console.log(types," is stypes hein")
+                const permission = await Camera.requestCameraPermissionsAsync();
+                if(permission.status === 'granted' || permission.granted){
+                    return cameraRef.takePictureAsync(options).then(resolve).catch(reject);
+                } else {
+                    notify.error("Impossible d'utiliser l'appareil photo car vous avez interdit l'utilisation de votre camera.")
+                    reject(permission)
+                }
+            }
+        })();
+    })
+}
+

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

@@ -0,0 +1 @@
+export default "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8NDw4PDRAPDQ4NDg0RDRAPDQ8NDQ0PFhIWFxURExMYHSggGBolGxMVITEhJSkrLi4uFx8zODMsNygtLisBCgoKDg0ODw8PDysZFRkrKystLSstLSsrKysrLTctKysrKysrKysrKysrLSsrKysrKysrKysrKysrKysrKysrK//AABEIAOEA4QMBIgACEQEDEQH/xAAaAAEAAwEBAQAAAAAAAAAAAAAAAQQFAwIH/8QAMBABAAIABAQEBgEEAwAAAAAAAAECAwQRMSFBUWEFEiJxMnKBkaGxwRRSYvAjM0L/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAMAwEAAhEDEQA/APpwDLYAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACaxrOkLeXyUzxvwjpzkFN0rg3nas/Zq0w61+GIh7VNZX9JidPy52wbxvWfs2QNYY2MXArfePrzZ2Yys047169PdDXBCQUQkAAAJAAAECUAkAAAAAQAAdMLBtf4Y952h2yuU8/G3CvLrLQrWKxpEaRGymuWVwPJHGI80789HcBAAAAAmNd+IAz81k/L6q8Y5x0U24z87ltPVXbnHTuKpgIAAAAAAAAAAoAAAIOuXwZvOnLnPSHJqZCulI7zMqO9a6RpHJKQZQJBUCQECQECQEEwkBlZvLeSdY+GZ4duyu28SkWiYnaWNesxMxO8CvICAAAAAAAAKAAACDXycf8dfZkNXJTrh17awpVgAQAAAAAAAAAAZfiFdL+8RP+/ZqMzxH44+WP3IRVARQAAAAAAAUAAAEGj4bb02jpP7Zy14dbS+nWFK0xCRAAAAAAAAAABm+JfHHyx+5aTJz19bz20gI4AIoAAAAAAAKAAACDT8Pr6NeczPuzGtkv8Arr9dffVSu4AgAAAAAAAAAAx81Gl7e7YY2YnW9vmkI5gIoAAAAAAAKACAADR8Nt6bR0n9s5ZyOL5b9rcPryUagAgAAAAAAAAACJnTjPJi3trMz1mZaedv5aT34QyhYAIAAAAAAAAoAIAAAA1MpmItWImfVG+vPusMNsZadaV+WFR1AAAAAAAAETOka9FDEz2saRGkzHGZ/gHLOY/ntpG1eEd1cEUAAAAAAAAAFABAAAABp+H31pp/bM/ZmO+TxfJbjtbhINYBUAAAAAAcM5fy0t34fdkrniV+MV5RGv1lTFgAgAAAAAAAAACgAgAAAAmJQ9UpNpiI3lRtVnWI9oSisaREdIhIgAAAAADN8Rw5i3m5TER7SqNrFw4tGk7M/HyU1419UfmBVUBAAAAAAAAAAFABAE1rM8IjWewIFrCyNp39Mflaw8lSu/qnuooYOBa+0cOvJpZfLxSOs855usRpskQAAAAAAAAABwxsrW/HaesKuJkLR8MxP4logMS+HavxRMfR5bkxrur4uTpbaPLPbb7BrLFnGydq7eqO2/2VkUAAAABNazM6RGsyKh0wsC19o4ddoXctk4jjbjPTlC2rOqeFkIj4p17RwhbpSK7REez0AAAAAAAAAAAAAAAAAAAOGYy1b8drdXcBi4mHNZ0mNP5eG1fDi0aTGsMvM5ecOetZ2kVxABMRrwjeWplsvFI/ynef4VfDqa2mZ/8AP7aIUShIgAAIBEgAAAAAAgVIAAAAAAhIAADzesTGkxrD0Aqf0NO4tgao+GbW94/S6BCiQBAAAACABKABKJSAAAiUgAiEgCABIkAAAAAAB//Z"

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

@@ -0,0 +1,142 @@
+import {defaultObj} from "$utils";
+import i18n from "$i18n"
+import Auth from "$cauth";
+import Menu from "$ecomponents/Menu";
+import React from "$react";
+import Tooltip from "$ecomponents/Tooltip";
+import Image from "$ecomponents/Image";
+import { StyleSheet,View} from "react-native";
+import defaultSource from "./defaultAvatar";
+import Button from "$ecomponents/Button";
+import Label from "$ecomponents/Label";
+import Icon from "$ecomponents/Icon";
+import {navigate} from "$enavigation/utils";
+import theme from "$theme";
+import {isMobileNative} from "$cplatform";
+
+const UserProfileAvatarComponent = React.forwardRef(({drawerRef,...props},ref)=>{
+    let u = defaultObj(Auth.getLoggedUser());
+    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 : {
+                                code : defaultStr(u.code),
+                                user : u,
+                            }
+                        })
+                    });
+                }
+            },
+            {
+                label : i18n.lang("logout",'Déconnexion'),
+                icon : "logout",
+                onPress : (a)=>{
+                    closeDrawer(Auth.logout);
+                }
+            }
+        ];
+      let pseudo = defaultStr(u.code);
+      let pT = pseudo;
+      if(pseudo.length > 8){
+          pT = pseudo.substring(0,7)+".."
+      }
+      pseudo = <Tooltip title={defaultStr(u.label)+" ["+pseudo+"]"}>{pT}</Tooltip>;
+      return <View ref ={ref}>
+            <Menu
+             anchor = { (aProps)=>{
+                return <Button
+                        normal
+                        disableRipple
+                        {...aProps}
+                        style = {[styles.container]}
+                        left={props1 => <Image
+                            {...props} 
+                            {...props1}
+                            size={60}
+                            style = {styles.itemLeft}
+                            testID = {"RN_ProfilAvatar_Avatar"}
+                            editable
+                            defaultSource ={defaultSource}
+                            onChange = {({dataURL})=>{
+                                if(u.avatar === dataURL) {
+                                    return;
+                                }
+                                if(!dataURL){
+                                    u.avatar = null;
+                                } else {
+                                    u.avatar = dataURL;
+                                }
+                                Auth.upsertUser({code:u.code,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 style={{color:theme.colors.primaryOnSurface}}>{u.code}</Label>
+                        <Label splitText style={{fontSize:12,color:theme.colors.secondaryOnSurface,marginTop:6}}>
+                            {u.label}
+                        </Label>
+                    </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 : 130,
+    },
+    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/navigation/Drawer/ProfilAvatar/style.css

@@ -0,0 +1,18 @@
+.profil-avatar-table{
+    margin-top: 0px;
+    padding-bottom: 0px;
+}
+
+.profil-avatar-table tr,
+.profil-avatar-table td{
+    vertical-align: middle!important;
+}
+.profil-avatar-table .profil-avatar-avatar{
+    padding-right: 7px;
+}
+
+.ftc-appbar .ftc-appbar-toolbar .ftc-appbar-action {
+    white-space: nowrap;
+    margin-right: 10px;
+    min-width: auto!important;
+}

package/src/navigation/Drawer/index.js

@@ -0,0 +1,81 @@
+import Drawer,{DrawerItems} from "$ecomponents/Drawer";
+import ProfilAvatar from "./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 "$enavigation/utils";
+
+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}/>;
+    };
+    const isAuthLoggedIn = Auth.isLoggedIn();
+    const [isLoggedIn,setIsLoggedIn] = React.useState(isAuthLoggedIn);
+    const prevIsLoggedIn = React.usePrevious(isLoggedIn);
+    const navigationViewRef = React.useRef(null);
+    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");
+    },[isLoggedIn])
+    if(!isLoggedIn) {
+        return <Login withPortal/>
+    }
+    return <Drawer
+        isItemActive = {isItemActive}
+        {...props}
+        navigationViewRef = {navigationViewRef}
+        sessionName = "main-drawer-drawer-navigator"
+        ref = {mergedRefs}
+        header = {headerCB}
+        content = {({sessionManager,isMinimized,context})=>{
+            return <DrawerItems
+                ref = {itemRefs}
+                items = {items}
+                minimized = {isMinimized}
+                sessionManager = {sessionManager}
+                drawerRef = {context}
+            />
+        }}
+    >
+        {children}
+    </Drawer>
+});
+
+DrawerNavigator.displayName = "DrawerNavigator"
+
+DrawerNavigator.propTypes = {
+    ...Drawer.propTypes,
+}
+
+export default DrawerNavigator;
+
+export * from "./utils";