@fto-consult/expo-ui 8.79.0 → 8.81.0

package/babel.config.alias.js

@@ -5,11 +5,11 @@ module.exports = (opts)=>{
     const dir = path.resolve(__dirname);
     const isDev = String(process.env.NODE_ENV).toLowerCase() !="production";
     const projectRoot = typeof opts.projectRoot =='string' && fs.existsSync(opts.projectRoot.trim()) && opts.projectRoot.trim() || process.cwd();
-    const assets = path.resolve(dir,"assets");
     opts = typeof opts =='object' && opts ? opts : {};
     opts.platform = "expo";
-    opts.assets = opts.assets || opts.alias && typeof opts.alias =='object' && opts.alias.$assets || assets;
     opts.projectRoot = opts.projectRoot || projectRoot;
+    const assets = fs.existsSync(path.resolve(opts.projectRoot,"assets")) ? path.resolve(opts.projectRoot,"assets") : path.resolve(dir,"assets");
+    opts.assets = opts.assets || opts.alias && typeof opts.alias =='object' && opts.alias.$assets || assets;
     opts.withPouchDB = opts.withPouchDB !== false && opts.withPouchdb !== false ? true : false;
     delete opts.withPouchdb;
     const expoUI = require("./expo-ui-path")();

package/bin/create-app/dependencies.js

@@ -33,6 +33,8 @@
 	"react-native-view-shot": "3.8.0",
 	"expo-intent-launcher": "~10.11.0",
 	"expo-image-manipulator": "~11.8.0",
-	"expo-document-picker": "~11.10.1"
+	"expo-document-picker": "~11.10.1",
+	"react-native-web": "~0.19.6",
+    "react-dom": "18.2.0"
 };
                             

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.79.0",
+  "version": "8.81.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "react-native-paper-doc": "https://github.com/callstack/react-native-paper/tree/main/docs/docs/guides",
   "scripts": {
@@ -48,7 +48,7 @@
     "delete-node-modules": "rimraf ./**/node_modules",
     "dev": "npx expo start --no-dev --minify -c",
     "modifier-url-remote-git": "git remote set-url origin 'https://borispipo@github.com/borispipo/smart-eneo.git'",
-    "update": "npm i @fto-consult/common@latest react-native-web react-native-big-list@latest apexcharts@latest file-saver@latest google-libphonenumber@latest  react-native-iphone-x-helper@latest react-native-mime-types@latest react-native-paper@latest react-native-paper-dates@latest react-virtuoso@latest tippy.js@latest xlsx@latest && npm run update-apexchart && npm run find-licenses"
+    "update": "npm i @fto-consult/common@latest react-native-big-list@latest apexcharts@latest file-saver@latest google-libphonenumber@latest  react-native-iphone-x-helper@latest react-native-mime-types@latest react-native-paper@latest react-native-paper-dates@latest react-virtuoso@latest tippy.js@latest xlsx@latest && npm run update-apexchart && npm run find-licenses"
   },
   "bin": {
     "expo-ui": "bin/index.js"
@@ -81,13 +81,11 @@
     "jsbarcode": "^3.11.6",
     "prop-types": "^15.8.1",
     "react-content-loader": "^6.2.1",
-    "react-dom": "^18.2.0",
     "react-native-big-list": "^1.6.1",
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-mime-types": "^2.5.0",
     "react-native-paper": "^5.12.3",
     "react-native-paper-dates": "^0.22.7",
-    "react-native-web": "^0.19.11",
     "react-virtuoso": "^4.7.10",
     "readable-stream": "^4.5.2",
     "sanitize-filename": "^1.6.3",

package/src/AppEntry/index.js

@@ -5,6 +5,7 @@ import BackHandler from "$ecomponents/BackHandler";
 import * as Linking from 'expo-linking';
 import APP from "$capp";
 import {AppStateService,trackIDLE,stop as stopIDLE} from "$capp/idle";
+import {Provider as DrawerProvider} from "$ecomponents/Drawer";
 import { NavigationContainer} from '@react-navigation/native';
 import {navigationRef} from "$cnavigation"
 import NetInfo from '$cutils/NetInfo';
@@ -299,6 +300,7 @@ function App({init:initApp,initialRouteName:appInitialRouteName,children}) {
                       /> : myChildren}
                     </ErrorBoundary>
                   </Portal.Host>
+                  <DrawerProvider testID="RN_DrawerProviderRight"/>
               </PaperProvider>
             </AppEntryRootView>
    </SafeAreaProvider>

package/src/auth/Login.js

@@ -144,10 +144,10 @@ export default function LoginComponent(props){
         if(cS !== false && beforeSubmit(args) !== false){
             Preloader.open("vérification ...");
             setIsLoading(nextButtonRef,true);
-            return auth.signIn(data).then((a)=>{
-                if(typeof onSuccesRef.current =='function' && onSuccesRef.current(a)=== false) return;
+            return auth.signIn(data).then((result)=>{
+                if(typeof onSuccesRef.current =='function' && onSuccesRef.current({data,result})=== false) return;
                 if(isFunction(onSuccess)){
-                    onSuccess(data);
+                    onSuccess({data,result});
                 } else {
                     navigate("Home");
                 } 
@@ -171,6 +171,34 @@ export default function LoginComponent(props){
         appBarProps = {appBarProps}
         onSuccess = {onSuccess}
         auth = {auth}
+        formName = {formName}
+        /***
+         * permet de connecter un utilisatgeur au backend
+         * @param {object} data, la données liée à l'utilisateur à connecter
+         * @param {object} options, les options de connexion
+         * @return {object}, la données résultat à la fonction de connexion de l'utilisateur
+         */
+        signIn = {(data,options,...rest)=>{
+            options = defaultObj(options);
+            if(!isObj(data) || !Object.size(data,true)){
+                data = getData();
+            }
+            Preloader.open("Connexion ...");
+            return auth.signIn(data,...rest).then((result)=>{
+                if(typeof options.onSuccess === "function"){
+                    if(options.onSuccess({data,result}) === false) return;
+                } else if(typeof options.callback === "function" && options.callback({data,result}) === false){
+                    return;
+                } 
+                if(isFunction(onSuccess) && onSuccess({data,result}) === false){
+                } else {
+                    navigate("Home");
+                } 
+                return result;
+            }).finally(()=>{
+                Preloader.close();
+            });
+        }}
         mediaQueryUpdateStyle={mediaQueryUpdateStyle}
     />
     const callArgs = {

package/src/components/Datagrid/Accordion/index.js

@@ -221,7 +221,7 @@ export default class DatagridAccordionComponent extends Datagrid {
         return this.props.hasScrollViewParent ? true : false;
     }
     bindResizeEvents(){
-        return true;
+        return false;
     }
     getPageSize (){
         return INFINITE_SCROLL_PAGE_SIZE;

package/src/components/Drawer/Drawer.js

@@ -0,0 +1,409 @@
+import DrawerLayout from './DrawerLayout';
+import {isIos} from "$cplatform";
+import React from "$react";
+import PropTypes from "prop-types";
+import {defaultObj,isObj,isNonNullString} from "$cutils";
+import theme,{Colors} from "$theme";
+import Dimensions,{isDesktopMedia} from "$cplatform/dimensions";
+import {open} from "$epreloader";
+import {DRAWER_POSITIONS,DRAWER_TYPES,MINIMIZED_WIDTH,getDrawerWidth} from './utils';
+import {closeDrawer} from './DrawerItems/utils';
+import {DrawerContext} from "./context";
+import NavigationView from "./NavigationView";
+import { canBeMinimizedOrPermanent } from './utils';
+import { useSession } from './hooks';
+
+const canHandleExtra = x=> true;
+
+
+const DrawerComponent = React.forwardRef((props,ref)=>{
+    let {position,permanent,onDrawerSlide,sessionName,content,
+      drawerItemsContainerProps,contentContainerStyle,drawerItemsProps,minimizable,
+      minimized,drawerItems,hideStatusBar,overlayColor, onDrawerMinimize,onDrawerToggleMinimize,
+      onDrawerOpen,onDrawerClose,onDrawerToggle,header,headerProps,toggleIconProps,
+      permanentToggleIcon,minimizedToggleIcon,temporaryToggleIcon,withMinimizedIcon,
+      isItemActive,onPageResize,navigationViewRef,children:customChildren,testID,drawerType,...restP} = props;
+    const isPortal = !!restP.isPortal;
+    const children = React.useMemo(()=>customChildren,[customChildren]);
+    testID = defaultStr(testID,"RN_DrawerComponent")
+    const session = useSession(sessionName);
+    sessionName = session.sessionName;
+    const sessionValue = session.get();
+    const drawerRef = React.useRef(null);
+    const onSlideCallbackRef = React.useRef(null);
+    drawerItemsContainerProps = defaultObj(drawerItemsContainerProps);
+    position = defaultStr(position);
+    position = DRAWER_POSITIONS[position] || (isNonNullString(sessionValue.position) && DRAWER_POSITIONS[sessionValue.position]? DRAWER_POSITIONS[sessionValue.position]:undefined) || DRAWER_POSITIONS.left
+    const isLeftPosition = position === DRAWER_POSITIONS.left ? true : false;
+    drawerType = defaultStr(drawerType).toLowerCase() || isNonNullString(sessionValue.drawerType) && DRAWER_TYPES[sessionValue.drawerType]? DRAWER_TYPES[sessionValue.drawerType] : "";
+    if(!DRAWER_TYPES[drawerType]){
+      drawerType = isIos()? DRAWER_TYPES.slide : DRAWER_TYPES.front;
+    }
+    overlayColor = Colors.isValid(overlayColor)?overlayColor:undefined;
+    if(!overlayColor){
+      overlayColor  = theme.colors.backdrop;// drawerType === DRAWER_TYPES.front ? 'black' : '#00000000';
+    }
+    let drawerWidth = getDrawerWidth();
+    const isDesktop = isDesktopMedia();
+    const _canBeMinimizedOrPermanent = canBeMinimizedOrPermanent();
+    permanent = _canBeMinimizedOrPermanent ? (sessionValue.permanent !== undefined ? sessionValue.permanent : permanent) : false;
+    minimized = _canBeMinimizedOrPermanent ? (sessionValue.minimized !== undefined ? sessionValue.minimized: minimized) : false;
+    if(permanent === undefined){
+      permanent = canBeMinimizedOrPermanent()? true : false;
+    }
+    if(minimized === undefined){
+       minimized = false;
+    }
+    const [state,_setState] = React.useState({
+        minimized,
+        permanent,
+    });
+    if(sessionValue.permanent ===undefined){
+      session.set(state);
+    }
+    const setState = (s,s2)=>{
+        s = typeof s =='object' && s ? s : {};
+        s2 = typeof s2 =='object' && s2 ? s2 : {};
+        s2 = {...state,...s,...s2};
+        session.set(s2);
+        return _setState(s2);
+    }
+
+    const [context] = React.useState({});
+    
+    
+    const callbackRef = React.useRef(null);
+    const callback = callbackRef.current;
+    callbackRef.current = null;
+    ///permet de minimiser le drawer
+    context.minimize = (callback)=>{
+        if(!Dimensions.isDesktopMedia() || isMinimized){
+            return typeof callback =='function'? callback(context.getState()) : null;
+        }
+        callbackRef.current = callback;
+        setState({minimized:true});
+    }
+    /*** permet de restaurer le drawer */
+    context.restore = (callback)=>{
+        if(!Dimensions.isDesktopMedia() || !context.isMinimized() || !context.isPermanent()){
+            return typeof callback =='function'? callback(context.getState()) : null;
+        }
+        callbackRef.current = callback;
+        setState({minimized:false,permanent:true});
+    }
+    const checkToggleBtn = (cb)=>{
+      if(!Dimensions.isDesktopMedia() && drawerRef?.current?.isPermanent()){
+          setState({permanent:false});
+          if(typeof cb ==='function'){
+            cb(getDrawerState());
+          }
+          return false;
+      }
+      return true;
+    }
+    
+    context.toggleMinimized = (minimized,s2)=>{
+        if(!checkToggleBtn()) return;
+        if(!Dimensions.isDesktopMedia() || typeof minimized !== 'boolean' || !drawerRef.current || !drawerRef.current.isOpen()) return;
+        if(!minimizable === false) return;
+        let nS = {minimized};
+        if(isObj(s2)){
+            nS = {...s2,...nS};
+        }
+        setState(nS);
+    }
+    context.getPosition = ()=>position;
+    context.hasLeftPositon = ()=> position === DRAWER_POSITIONS.left;
+    context.hasRightPosition = ()=> position === DRAWER_POSITIONS.right;
+    context.isLeftPosition = ()=> isLeftPosition;
+    context.canToggle = x=> canHandleExtra() ? true : permanent? false : true;
+    context.canMinimize = x => minimizable !== false && canBeMinimizedOrPermanent() ? true : false;
+    context.togglePermanent = (x,cb)=>{
+      if(typeof x !== "boolean") return;
+      if(!checkToggleBtn(cb)) return;
+      const isPerm = drawerRef?.current?.isPermanent();
+      if(x && ! isPerm || !x && isPerm){
+        setState({permanent:x});
+      } 
+      if(typeof cb =="function"){
+        cb(getDrawerState());
+      }
+    }
+                    
+    let {permanent:isPermanent,minimized:isMinimized} = session.get();
+    if(isPortal){
+      isPermanent = false;
+    }
+    if(_canBeMinimizedOrPermanent && isPermanent){
+        overlayColor = 'transparent';
+        if(isMinimized){
+            drawerWidth = MINIMIZED_WIDTH;
+        }
+        restP.drawerLockMode = "locked-open";
+    } else {
+      isPermanent = false;
+      isMinimized = false;
+      restP.drawerLockMode = "unlocked";
+      drawerWidth = drawerWidth;
+    }
+    context.isMinimizable = ()=>{
+      return minimizable !== false && canBeMinimizedOrPermanent() ? true : false;
+    }
+    context.isMinimized = ()=>{
+      return minimizable !== false && canBeMinimizedOrPermanent() && isDesktopMedia() && session.get("minimized")? true : false;
+    }
+    const hasContext = ()=>drawerRef && isObj(drawerRef?.current) && Object.size(drawerRef?.current,true);
+    context.canBeMinimizedOrPermanent = canBeMinimizedOrPermanent;
+    context.isPermanent = x=>{
+       if(!drawerRef.current || !drawerRef.current.isOpen()) return false;
+       return canBeMinimizedOrPermanent() && session.get('permanent') ? true : false;
+    }
+    const prevMinimized = React.usePrevious(isMinimized);
+    React.useEffect(()=>{
+        if(prevMinimized === isMinimized || !Dimensions.isDesktopMedia()) return;
+        const args = getDrawerState();
+        if(isMinimized && onDrawerMinimize){
+            onDrawerMinimize(args);
+        }
+        if(onDrawerToggleMinimize){
+          onDrawerToggleMinimize(args);
+        }
+        if(typeof callback =='function'){
+            callback(args);
+        }
+        session.set("minimized",isMinimized);
+    },[isMinimized])
+  const prevIsDesktop = React.usePrevious(isDesktop);
+  React.useEffect(()=>{
+    if(!drawerRef.current) return;
+    if(isDesktopMedia() && isPermanent){
+       drawerRef.current.openDrawer();
+    }
+    if(prevIsDesktop !== isDesktopMedia() && typeof onPageResize ==='function'){
+      onPageResize(getDrawerState());
+    }
+  },[isDesktop])
+   const getDrawerState = context.getState = (args)=>{
+      const isOpen = drawerRef.current && drawerRef.current.isOpen ? drawerRef.current.isOpen () : false;
+      return {
+          ...session.get(),context:drawerRef.current,permanent:isPermanent,
+          sessionName,
+          minimized : isMinimized,
+          permanent : isPermanent,
+          isPermanent,
+          isMinimized,
+          isClosed : !isOpen, closed:!isOpen,isOpen ,opened:isOpen,status: isOpen ? 'open':'closed',
+          ...defaultObj(args),
+      }
+    }
+    const customOnToggle = (args)=>{
+        args = getDrawerState(args);
+        if(onDrawerToggle){
+            onDrawerToggle(args)
+        }
+        if(typeof callback =='function'){
+          callback(args);
+        }
+    }
+    toggleIconProps = defaultObj(toggleIconProps);
+    headerProps = defaultObj(headerProps);
+
+    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 = "window-close";//isLeftPosition ? "arrow-left" : "arrow-right";
+    const chevronIcon = isLeftPosition ? "chevron-left":"chevron-right";
+    context.temporaryToggleIcon = temporaryToggleIcon = React.isValidElement(temporaryToggleIcon)? temporaryToggleIcon : backIcon;
+    context.permanentToggleIcon = permanentToggleIcon = React.isValidElement(permanentToggleIcon)? permanentToggleIcon : chevronIcon;
+    context.minimizedToggleIcon = minimizedToggleIcon = React.isValidElement(minimizedToggleIcon)? minimizedToggleIcon : chevronIcon//MENU_ICON;
+    
+    let toggleIconTooltip = null;
+    let toggleIcon = null, mobileToggleIconTooltip = "Cliquez pour "+(open?'Masquer':'Afficher')+ " le drawer";
+    if(!isPermanent){
+        toggleIconTooltip = mobileToggleIconTooltip;
+        toggleIcon = temporaryToggleIcon;
+    } else {
+        if(isMinimized){
+            toggleIconTooltip = "Cliquez pour restaurer le drawer dans son status précédent";
+            if(withMinimizedIcon !== false){
+                toggleIcon = minimizedToggleIcon;
+            }
+        } else {
+          toggleIcon = permanentToggleIcon;
+          toggleIconTooltip = 'Cliquer pour minimiser le drawer.\n si vous souhaitez passer le drawer en mode affichage temporaire, faite un long click (pressez le pour longtemps) sur ce bouton. ';
+        }
+    }
+    return (
+      <DrawerContext.Provider 
+      value={{
+          ...context,
+          context,
+          drawerRef,
+          session,
+          hasContext,
+          close : (cb,force) =>closeDrawer(drawerRef,cb,force),
+          sessionName,
+          isItemActive : (opts)=>{
+            if(isItemActive){
+               return isItemActive(opts);
+            }
+            return false;
+          },getState:getDrawerState,getDrawerRef
+          }}>
+              <DrawerLayout
+                  testID = {`${testID}_DrawerLayout`}
+                  {...restP}
+                  permanent = {isPermanent}
+                  onDrawerSlide={onDrawerSlide}
+                  onDrawerOpen = {(a)=>{
+                    if(drawerRef.current){
+                      drawerRef.current.drawerShown = true;
+                    }
+                    if(onDrawerOpen){
+                      onDrawerOpen({context:drawerRef.current})
+                    }
+                    customOnToggle({...getDrawerState(),closed:false, isClosed : false,isOpen:true,opened:true,status:'open'});
+                  }}
+                  onDrawerClose = {()=>{
+                    if(drawerRef.current){
+                      drawerRef.current.drawerShown = false;
+                    }
+                    if(typeof onSlideCallbackRef.current ==='function'){
+                          //close();
+                          onSlideCallbackRef.current();
+                    }
+                    onSlideCallbackRef.current = undefined;
+                    if(onDrawerClose){
+                      onDrawerClose({context:drawerRef.current})
+                    }
+                    customOnToggle({...getDrawerState(),isClosed : true, closed:true,isOpen : false ,opened:false,status:'closed'})
+                  }}
+                  ref={(el)=>{
+                    drawerRef.current = el;
+                    if(drawerRef.current){
+                      Object.map(context,(v,i)=>{
+                        if(drawerRef.current[i] === undefined){
+                          drawerRef.current[i] = v;
+                        }
+                      });
+                      drawerRef.current.open = drawerRef.current.openDrawer;
+                      drawerRef.current.runAfterSlide = (cb,force)=>{
+                          if(!permanent){
+                              //force !== true ? open() : false;
+                              onSlideCallbackRef.current = cb;
+                              return drawerRef.current.closeDrawer();
+                          }
+                            if(typeof cb =='function'){
+                              cb(getDrawerState());
+                            }
+                        }
+                        drawerRef.current.close = drawerRef.current.runAfterSlide;
+                        drawerRef.current.isOpen = context.isOpen = typeof drawerRef.current.isOpen =='function'? drawerRef.current.isOpen.bind(drawerRef.current) : x=> drawerRef && drawerRef.current ? drawerRef.current.drawerShown : false;
+                        drawerRef.current.isClosed = context.isClosed = x => !drawerRef.current.isOpen();
+                        context.toggle = drawerRef.current.toggleDrawer = drawerRef.current.toggle = cb =>{
+                          if(!checkToggleBtn(cb)) return;
+                          if(isPermanent || isMinimized) {
+                            if(typeof cb ==='function'){
+                                cb(getDrawerState());
+                            }
+                            return;
+                          }
+                          callbackRef.current = cb;
+                          if(drawerRef.current.isOpen()){
+                              drawerRef.current.closeDrawer();
+                          } else {
+                              drawerRef.current.openDrawer();
+                          }
+                      }
+                      drawerRef.current.getState = getDrawerState;
+                    }
+                    React.setRef(ref,drawerRef.current);
+                  }}
+                  drawerWidth={drawerWidth}
+                  keyboardDismissMode="on-drag"
+                  drawerPosition={position}
+                  drawerType={drawerType}
+                  hideStatusBar = {defaultBool(hideStatusBar,true)}
+                  overlayColor = {overlayColor}
+                  renderNavigationView={(opts)=>{
+                    const cArgs = {...getDrawerState()}
+                    const h = typeof header === 'function'? header(cArgs) : header;
+                    const c = typeof content =='function'? content (cArgs) : content;
+                    return <NavigationView
+                      opts = {opts}
+                      ref = {navigationViewRef}
+                      {...{context,toggleIcon,toggleIconTooltip,header:h,content:c,isPermanent,drawerItemsProps,drawerType,drawerItems,drawerRef,setState,toggleIconProps,isLeftPosition,drawerWidth,minimizable,headerProps,isMinimized,drawerItemsContainerProps}}
+                    />
+                  }}
+                  contentContainerStyle={[
+                    {paddingBottom:30},
+                    contentContainerStyle
+                  ]
+            }>  
+              {children}
+            </DrawerLayout>
+    </DrawerContext.Provider>
+    );
+})
+
+  export default DrawerComponent;
+
+
+
+
+const iconType = PropTypes.oneOfType([
+  PropTypes.node,
+  PropTypes.string,
+]);
+
+DrawerComponent.propTypes = {
+  ...defaultObj(DrawerLayout.propTypes),
+  position : PropTypes.oneOf(Object.keys(DRAWER_POSITIONS)),
+  minimizable : PropTypes.bool,
+  permanent : PropTypes.bool,
+  minimized : PropTypes.bool,
+  bindResizeEvent : PropTypes.bool,
+  children : PropTypes.node,
+  onMount : PropTypes.func,
+  onUnmount : PropTypes.func,
+  onDrawerOpen : PropTypes.func,
+  onDrawerClose : PropTypes.func,
+  onDrawerSlide : PropTypes.func,
+  onDrawerToggle : PropTypes.func,
+  drawerItemsProps : PropTypes.object,
+  drawerItems : PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.elementType,
+    PropTypes.func
+  ]),
+  isItemActive : PropTypes.func,///vérifie si un item est actif où pas
+  permanent : PropTypes.bool,
+  onDrawerToggle : PropTypes.func,
+  onDrawerToggleMinimize : PropTypes.func,
+  onDrawerMinimize : PropTypes.func,
+  children : PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.node,
+  ]),
+  /*** le header à afficher sur le drawer */
+  header : PropTypes.oneOfType([
+      PropTypes.node,
+      PropTypes.func,
+  ]),
+  headerProps : PropTypes.object,//les props à passer drawerHeader
+  onDrawerClose : PropTypes.func,
+  onDrawerClose : PropTypes.func,
+  onDrawerOpen : PropTypes.func,
+  /***l'icone toggle lorsque le drawer est en mode temporaire, dont mobile */
+  temporaryToggleIcon : iconType,
+  //l'icone du button toggle lorsque le drawer est en mode permament
+  permanentToggleIcon : iconType, 
+  //l'icone de toggle lorsque le drawer est en mode persistant
+  persistentToggleIcon : iconType,
+  minimizedToggleIcon : iconType, //l'icone du drawer lorsque celui si est en mode minimisté
+  /*** si l'icone minimisé est affiché lorsque le drawer est en mode minimisé */
+  withMinimizedIcon : PropTypes.bool,
+}
+
+DrawerComponent.displayName = "DrawerComponent";

package/src/components/Drawer/DrawerItems/DrawerItem.js

@@ -2,7 +2,7 @@ import {isNonNullString,defaultStr,uniqid} from "$cutils";
 import PropTypes from "prop-types"
 import _DrawerItem from "./_DrawerItem";
 import {navigate,setActiveRoute} from "$cnavigation";
-import { useDrawer } from "../Provider";
+import { useDrawer } from "../context";
 import { setActiveItem,getOnPressAction,closeDrawer as nCloseDrawer,previousActiveItemRef,activeItemRef} from "./utils";
 import {useIsScreenFocused} from "$enavigation/hooks";
 import React from "$react";

package/src/components/Drawer/DrawerItems/index.js

@@ -7,7 +7,7 @@ import PropTypes from "prop-types";
 import Divider from "$ecomponents/Divider";
 import View from "$ecomponents/View";
 import Auth from "$cauth";
-import { useDrawer } from '../Provider';
+import { useDrawer } from '../context';
 
 export * from "./utils";
 

package/src/components/Drawer/DrawerLayout/index.js

@@ -8,6 +8,7 @@ import {
     TouchableWithoutFeedback,
     I18nManager,
 } from 'react-native';
+import { Portal } from 'react-native-paper';
 import PropTypes from "prop-types";
 import View from "$ecomponents/View";
 import {defaultStr} from "$cutils";
@@ -37,6 +38,7 @@ export default class DrawerLayout extends React.PureComponent {
 
     constructor(props) {
         super(props);
+        const isPortal = !! props.isPortal;
         this._panResponder = PanResponder.create({
             onMoveShouldSetPanResponder: this._shouldSetPanResponder,
             onPanResponderGrant: this._panResponderGrant,
@@ -45,14 +47,17 @@ export default class DrawerLayout extends React.PureComponent {
             onPanResponderRelease: this._panResponderRelease,
             onPanResponderTerminate: () => {},
         });
-        const drawerShown = props.permanent? true : false;
+        const drawerShown = !isPortal && props.permanent? true : false;
         this.state = {
             accessibilityViewIsModal: false,
             drawerShown,
+            isPortal,
             openValue: new Animated.Value(drawerShown?1:0),
         };
     }
-
+    isPortal(){
+        return !!this.state.isPortal;
+    }
     getDrawerPosition() {
         const { drawerPosition } = this.props;
         const rtl = I18nManager.isRTL;
@@ -170,39 +175,43 @@ export default class DrawerLayout extends React.PureComponent {
         if(permanent){
             dynamicDrawerStyles.position = "relative";
         }
+        const Wrapper = this.isPortal()? Portal  : React.Fragment;
+        const canRender = this.isPortal()? this.state.drawerShown : true;
         return (
-            <View
-                testID = {testID}
-                style={{ flex: 1, backgroundColor: 'transparent',flexDirection:permanent?'row':'column'}}
-                {...this._panResponder.panHandlers}
-            >
-                {!permanent && <TouchableWithoutFeedback
-                    style={{pointerEvents}}
-                    testID = {testID+"_TouchableWithoutFeedBack"}
-                    onPress={this._onOverlayClick}
+            <Wrapper>
+                <View
+                    testID = {testID}
+                    style={[{ flex: canRender && 1 || 0, backgroundColor: 'transparent',flexDirection:permanent?'row':'column'},canRender?styles.portalVisibleContainer:styles.portalNotVisibleContainer]}
+                    {...this._panResponder.panHandlers}
                 >
+                    {!permanent && <TouchableWithoutFeedback
+                        style={{pointerEvents}}
+                        testID = {testID+"_TouchableWithoutFeedBack"}
+                        onPress={this._onOverlayClick}
+                    >
+                        <Animated.View
+                            testID={testID+"_Backdrow"}
+                            ref = {this._backdropRef}
+                            style={[styles.overlay,{backgroundColor:theme.colors.backdrop},{pointerEvents}, animatedOverlayStyles]}
+                        />
+                    </TouchableWithoutFeedback>}
+                    {posRight && this.renderContent({testID})}
                     <Animated.View
-                        testID={testID+"_Backdrow"}
-                        ref = {this._backdropRef}
-                        style={[styles.overlay,{backgroundColor:theme.colors.backdrop},{pointerEvents}, animatedOverlayStyles]}
-                    />
-                </TouchableWithoutFeedback>}
-                {posRight && this.renderContent({testID})}
-                <Animated.View
-                    testID={testID+"_NavigationViewContainer"}
-                    ref={React.mergeRefs(navigationViewRef,this._navigationViewRef)}
-                    accessibilityViewIsModal={accessibilityViewIsModal}
-                    style={[
-                        styles.drawer,
-                        dynamicDrawerStyles,
-                        elev,
-                        animatedDrawerStyles,
-                    ]}
-                >
-                    {this.props.renderNavigationView()}
-                </Animated.View>
-                {!posRight && this.renderContent({testID})}
-            </View>
+                        testID={testID+"_NavigationViewContainer"}
+                        ref={React.mergeRefs(navigationViewRef,this._navigationViewRef)}
+                        accessibilityViewIsModal={accessibilityViewIsModal}
+                        style={[
+                            styles.drawer,
+                            dynamicDrawerStyles,
+                            elev,
+                            animatedDrawerStyles,
+                        ]}
+                    >
+                        {this.props.renderNavigationView()}
+                    </Animated.View>
+                    {!posRight && this.renderContent({testID})}
+                </View>
+            </Wrapper>
         );
     }
 
@@ -449,10 +458,17 @@ const styles = StyleSheet.create({
         right: 0,
         zIndex: 1000,
     },
+    portalVisibleContainer : {
+        ...StyleSheet.absoluteFill,
+    },
+    portalNotVisibleContainer : {
+        opacity : 0,
+    }
 });
 
 DrawerLayout.propTypes = {
-    children: PropTypes.any.isRequired,
+    isPortal : PropTypes.bool,
+    children: PropTypes.any,
     drawerBackgroundColor : PropTypes.string,
     drawerLockMode: PropTypes.oneOf(['unlocked','locked-closed', 'locked-open']),
     drawerPosition: PropTypes.oneOf(['left', 'right']),

package/src/components/Drawer/NavigationView.js

@@ -71,7 +71,7 @@ const DrawerNavigationViewComponent = React.forwardRef((props,ref)=>{
                 <DrawerItems
                     drawerRef = {drawerRef}
                     {...defaultObj(drawerItemsProps)}
-                    items = {drawerItems}
+                    items = {drawerItems || []}
                     drawerType = {drawerType}
                     isDrawerOpen = {drawerRef.current?.isOpen() || false}
                     minimized = {isMinimized}

package/src/components/Drawer/Provider.js

@@ -1,6 +1,73 @@
+import Drawer from "./Drawer";
 import React from "$react";
-export const DrawerContext = React.createContext(null);
+import {View,StyleSheet} from "react-native";
+let drawerRef = null;
 
-export const useDrawer = ()=>{
-    return React.useContext(DrawerContext) || {hasContext:x=>false};
-}
+export const createProviderRef = (cb)=>{
+    const ref = React.useRef(null);
+    React.useEffect(()=>{
+        if(typeof cb =='function'){
+            cb(ref.current);
+        } else if(cb !== false) {
+            drawerRef = ref.current;
+        }
+    },[ref.current])
+    return ref;
+};
+
+export const getProviderRef = ()=> drawerRef;
+
+export const open = (props,innerProviderRef)=>{
+    innerProviderRef = innerProviderRef || getProviderRef();
+    if(!innerProviderRef) return false;
+    if(innerProviderRef.current && innerProviderRef.current.open){
+        innerProviderRef = innerProviderRef.current;
+    }
+    if(innerProviderRef && typeof innerProviderRef.open =='function') {
+        return innerProviderRef.open(props);
+    }
+    return false;
+}
+
+export const close = (props,innerProviderRef)=>{
+    innerProviderRef = innerProviderRef || getProviderRef();
+    if(!innerProviderRef) return false;
+    if(innerProviderRef.current && innerProviderRef.current.open){
+        innerProviderRef = innerProviderRef.current;
+    }
+    if(innerProviderRef && typeof innerProviderRef.close =='function') return innerProviderRef.close(props);
+    return false;
+}
+
+const Provider = React.forwardRef((props,innerRef)=>{
+    return <Drawer
+        ref = {innerRef || createProviderRef()}
+        position="right" 
+        sessionName = {sessionName} 
+        {...props}
+        permanent={false}
+        isPortal
+    />
+});
+
+const sessionName = "custom-drawer-provider-right";
+
+Provider.displayName = "DrawerProviderComponent";
+
+export default Provider;
+
+Provider.open = open;
+
+Provider.close = close;
+
+Provider.sessionName = sessionName;
+
+const styles = StyleSheet.create({
+    visible : {
+        opacity : 1,
+        ...StyleSheet.absoluteFill,
+    },
+    notVisible : {
+        opacity : 0,
+    }
+})

package/src/components/Drawer/context.js

@@ -0,0 +1,6 @@
+import React from "$react";
+export const DrawerContext = React.createContext(null);
+
+export const useDrawer = ()=>{
+    return React.useContext(DrawerContext) || {hasContext:x=>false};
+}

package/src/components/Drawer/index.js

@@ -1,23 +1,10 @@
-import {StyleSheet} from 'react-native';  
-import DrawerLayout from './DrawerLayout';
-import {isIos} from "$cplatform";
-import React from "$react";
-import PropTypes from "prop-types";
-import {defaultObj,isObj,isNonNullString} from "$cutils";
-import theme,{Colors,flattenStyle} from "$theme";
+import {default as Drawer} from "./Drawer";
+import Provider from "./Provider";
 import DrawerItems from './DrawerItems';
-import Dimensions,{isDesktopMedia,getCurrentMedia} from "$cplatform/dimensions";
-import {open,close} from "$epreloader";
-import {DRAWER_POSITIONS,DRAWER_TYPES,MINIMIZED_WIDTH,getDrawerWidth} from './utils';
-import Icon,{MENU_ICON} from "$ecomponents/Icon";
-import View from "$ecomponents/View";
-import {closeDrawer} from './DrawerItems/utils';
-import {DrawerContext} from "./Provider";
-import NavigationView from "./NavigationView";
-import { canBeMinimizedOrPermanent } from './utils';
-import { useSession } from './hooks';
 
+export * from "./Drawer";
 export * from "./Provider";
+export * from "./context";
 
 export {DrawerItems};
 export {default as DrawerItem} from "./DrawerItems/DrawerItem";
@@ -25,440 +12,7 @@ export {default as DrawerItem} from "./DrawerItems/DrawerItem";
 export * from "./utils";
 export * from "./hooks";
 
-const canHandleExtra = x=> true;
+Drawer.Provider = Provider;
+export default Drawer;
+export {Provider};
 
-
-const DrawerComponent = React.forwardRef((props,ref)=>{
-    let {position,permanent,onDrawerSlide,sessionName,content,
-      drawerItemsContainerProps,contentContainerStyle,drawerItemsProps,minimizable,
-      minimized,drawerItems,hideStatusBar,overlayColor, onDrawerMinimize,onDrawerToggleMinimize,
-      onDrawerOpen,onDrawerClose,onDrawerToggle,header,headerProps,toggleIconProps,
-      permanentToggleIcon,minimizedToggleIcon,temporaryToggleIcon,withMinimizedIcon,
-      isItemActive,onPageResize,navigationViewRef,children:customChildren,testID,drawerType} = props;
-    
-    const children = React.useMemo(()=>customChildren,[customChildren]);
-    testID = defaultStr(testID,"RN_DrawerComponent")
-    const session = useSession(sessionName);
-    sessionName = session.sessionName;
-    const sessionValue = session.get();
-    const drawerRef = React.useRef(null);
-    const onSlideCallbackRef = React.useRef(null);
-    drawerItemsContainerProps = defaultObj(drawerItemsContainerProps);
-    position = defaultStr(position);
-    position = DRAWER_POSITIONS[position] || (isNonNullString(sessionValue.position) && DRAWER_POSITIONS[sessionValue.position]? DRAWER_POSITIONS[sessionValue.position]:undefined) || DRAWER_POSITIONS.left
-    const isLeftPosition = position === DRAWER_POSITIONS.left ? true : false;
-    drawerType = defaultStr(drawerType).toLowerCase() || isNonNullString(sessionValue.drawerType) && DRAWER_TYPES[sessionValue.drawerType]? DRAWER_TYPES[sessionValue.drawerType] : "";
-    if(!DRAWER_TYPES[drawerType]){
-      drawerType = isIos()? DRAWER_TYPES.slide : DRAWER_TYPES.front;
-    }
-    overlayColor = Colors.isValid(overlayColor)?overlayColor:undefined;
-    if(!overlayColor){
-      overlayColor  = theme.colors.backdrop;// drawerType === DRAWER_TYPES.front ? 'black' : '#00000000';
-    }
-    let drawerWidth = getDrawerWidth();
-    const restP = {};
-    const isDesktop = isDesktopMedia();
-    const _canBeMinimizedOrPermanent = canBeMinimizedOrPermanent();
-    permanent = _canBeMinimizedOrPermanent ? (sessionValue.permanent !== undefined ? sessionValue.permanent : permanent) : false;
-    minimized = _canBeMinimizedOrPermanent ? (sessionValue.minimized !== undefined ? sessionValue.minimized: minimized) : false;
-    if(permanent === undefined){
-      permanent = canBeMinimizedOrPermanent()? true : false;
-    }
-    if(minimized === undefined){
-       minimized = false;
-    }
-    const [state,_setState] = React.useState({
-        minimized,
-        permanent,
-    });
-    if(sessionValue.permanent ===undefined){
-      session.set(state);
-    }
-    const setState = (s,s2)=>{
-        s = typeof s =='object' && s ? s : {};
-        s2 = typeof s2 =='object' && s2 ? s2 : {};
-        s2 = {...state,...s,...s2};
-        session.set(s2);
-        return _setState(s2);
-    }
-
-    const [context] = React.useState({});
-    
-    
-    const callbackRef = React.useRef(null);
-    const callback = callbackRef.current;
-    callbackRef.current = null;
-    ///permet de minimiser le drawer
-    context.minimize = (callback)=>{
-        if(!Dimensions.isDesktopMedia() || isMinimized){
-            return typeof callback =='function'? callback(context.getState()) : null;
-        }
-        callbackRef.current = callback;
-        setState({minimized:true});
-    }
-    /*** permet de restaurer le drawer */
-    context.restore = (callback)=>{
-        if(!Dimensions.isDesktopMedia() || !context.isMinimized() || !context.isPermanent()){
-            return typeof callback =='function'? callback(context.getState()) : null;
-        }
-        callbackRef.current = callback;
-        setState({minimized:false,permanent:true});
-    }
-    const checkToggleBtn = (cb)=>{
-      if(!Dimensions.isDesktopMedia() && drawerRef?.current?.isPermanent()){
-          setState({permanent:false});
-          if(typeof cb ==='function'){
-            cb(getDrawerState());
-          }
-          return false;
-      }
-      return true;
-    }
-    
-    context.toggleMinimized = (minimized,s2)=>{
-        if(!checkToggleBtn()) return;
-        if(!Dimensions.isDesktopMedia() || typeof minimized !== 'boolean' || !drawerRef.current || !drawerRef.current.isOpen()) return;
-        if(!minimizable === false) return;
-        let nS = {minimized};
-        if(isObj(s2)){
-            nS = {...s2,...nS};
-        }
-        setState(nS);
-    }
-    context.getPosition = ()=>position;
-    context.hasLeftPositon = ()=> position === DRAWER_POSITIONS.left;
-    context.hasRightPosition = ()=> position === DRAWER_POSITIONS.right;
-    context.isLeftPosition = ()=> isLeftPosition;
-    context.canToggle = x=> canHandleExtra() ? true : permanent? false : true;
-    context.canMinimize = x => minimizable !== false && canBeMinimizedOrPermanent() ? true : false;
-    context.togglePermanent = (x,cb)=>{
-      if(typeof x !== "boolean") return;
-      if(!checkToggleBtn(cb)) return;
-      const isPerm = drawerRef?.current?.isPermanent();
-      if(x && ! isPerm || !x && isPerm){
-        setState({permanent:x});
-      } 
-      if(typeof cb =="function"){
-        cb(getDrawerState());
-      }
-    }
-                    
-    let {permanent:isPermanent,minimized:isMinimized} = session.get();
-    if(_canBeMinimizedOrPermanent && isPermanent){
-        overlayColor = 'transparent';
-        if(isMinimized){
-            drawerWidth = MINIMIZED_WIDTH;
-        }
-        restP.drawerLockMode = "locked-open";
-    } else {
-      isPermanent = false;
-      isMinimized = false;
-      restP.drawerLockMode = "unlocked";
-      drawerWidth = drawerWidth;
-    }
-    context.isMinimizable = ()=>{
-      return minimizable !== false && canBeMinimizedOrPermanent() ? true : false;
-    }
-    context.isMinimized = ()=>{
-      return minimizable !== false && canBeMinimizedOrPermanent() && isDesktopMedia() && session.get("minimized")? true : false;
-    }
-    const hasContext = ()=>drawerRef && isObj(drawerRef?.current) && Object.size(drawerRef?.current,true);
-    context.canBeMinimizedOrPermanent = canBeMinimizedOrPermanent;
-    context.isPermanent = x=>{
-       if(!drawerRef.current || !drawerRef.current.isOpen()) return false;
-       return canBeMinimizedOrPermanent() && session.get('permanent') ? true : false;
-    }
-    const prevMinimized = React.usePrevious(isMinimized);
-    React.useEffect(()=>{
-        if(prevMinimized === isMinimized || !Dimensions.isDesktopMedia()) return;
-        const args = getDrawerState();
-        if(isMinimized && onDrawerMinimize){
-            onDrawerMinimize(args);
-        }
-        if(onDrawerToggleMinimize){
-          onDrawerToggleMinimize(args);
-        }
-        if(typeof callback =='function'){
-            callback(args);
-        }
-        session.set("minimized",isMinimized);
-    },[isMinimized])
-  const prevIsDesktop = React.usePrevious(isDesktop);
-  React.useEffect(()=>{
-    if(!drawerRef.current) return;
-    if(isDesktopMedia() && isPermanent){
-       drawerRef.current.openDrawer();
-    }
-    if(prevIsDesktop !== isDesktopMedia() && typeof onPageResize ==='function'){
-      onPageResize(getDrawerState());
-    }
-  },[isDesktop])
-   const getDrawerState = context.getState = (args)=>{
-      const isOpen = drawerRef.current && drawerRef.current.isOpen ? drawerRef.current.isOpen () : false;
-      return {
-          ...session.get(),context:drawerRef.current,permanent:isPermanent,
-          sessionName,
-          minimized : isMinimized,
-          permanent : isPermanent,
-          isPermanent,
-          isMinimized,
-          isClosed : !isOpen, closed:!isOpen,isOpen ,opened:isOpen,status: isOpen ? 'open':'closed',
-          ...defaultObj(args),
-      }
-    }
-    const customOnToggle = (args)=>{
-        args = getDrawerState(args);
-        if(onDrawerToggle){
-            onDrawerToggle(args)
-        }
-        if(typeof callback =='function'){
-          callback(args);
-        }
-    }
-    toggleIconProps = defaultObj(toggleIconProps);
-    headerProps = defaultObj(headerProps);
-
-    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 = "window-close";//isLeftPosition ? "arrow-left" : "arrow-right";
-    const chevronIcon = isLeftPosition ? "chevron-left":"chevron-right";
-    context.temporaryToggleIcon = temporaryToggleIcon = React.isValidElement(temporaryToggleIcon)? temporaryToggleIcon : backIcon;
-    context.permanentToggleIcon = permanentToggleIcon = React.isValidElement(permanentToggleIcon)? permanentToggleIcon : chevronIcon;
-    context.minimizedToggleIcon = minimizedToggleIcon = React.isValidElement(minimizedToggleIcon)? minimizedToggleIcon : chevronIcon//MENU_ICON;
-    
-    let toggleIconTooltip = null;
-    let toggleIcon = null, mobileToggleIconTooltip = "Cliquez pour "+(open?'Masquer':'Afficher')+ " le drawer";
-    if(!isPermanent){
-        toggleIconTooltip = mobileToggleIconTooltip;
-        toggleIcon = temporaryToggleIcon;
-    } else {
-        if(isMinimized){
-            toggleIconTooltip = "Cliquez pour restaurer le drawer dans son status précédent";
-            if(withMinimizedIcon !== false){
-                toggleIcon = minimizedToggleIcon;
-            }
-        } else {
-          toggleIcon = permanentToggleIcon;
-          toggleIconTooltip = 'Cliquer pour minimiser le drawer.\n si vous souhaitez passer le drawer en mode affichage temporaire, faite un long click (pressez le pour longtemps) sur ce bouton. ';
-        }
-    }
-    return (
-      <DrawerContext.Provider 
-      value={{
-          ...context,
-          context,
-          drawerRef,
-          session,
-          hasContext,
-          close : (cb,force) =>closeDrawer(drawerRef,cb,force),
-          sessionName,
-          isItemActive : (opts)=>{
-            if(isItemActive){
-               return isItemActive(opts);
-            }
-            return false;
-          },getState:getDrawerState,getDrawerRef
-          }}>
-          <View style={styles.container} testID={`${testID}_Container`}>
-              <DrawerLayout
-                  testID = {`${testID}_DrawerLayout`}
-                  {...restP}
-                  permanent = {isPermanent}
-                  onDrawerSlide={onDrawerSlide}
-                  onDrawerOpen = {(a)=>{
-                    if(drawerRef.current){
-                      drawerRef.current.drawerShown = true;
-                    }
-                    if(onDrawerOpen){
-                      onDrawerOpen({context:drawerRef.current})
-                    }
-                    customOnToggle({...getDrawerState(),closed:false, isClosed : false,isOpen:true,opened:true,status:'open'});
-                  }}
-                  onDrawerClose = {()=>{
-                    if(drawerRef.current){
-                      drawerRef.current.drawerShown = false;
-                    }
-                    if(typeof onSlideCallbackRef.current ==='function'){
-                          //close();
-                          onSlideCallbackRef.current();
-                    }
-                    onSlideCallbackRef.current = undefined;
-                    if(onDrawerClose){
-                      onDrawerClose({context:drawerRef.current})
-                    }
-                    customOnToggle({...getDrawerState(),isClosed : true, closed:true,isOpen : false ,opened:false,status:'closed'})
-                  }}
-                  ref={(el)=>{
-                    drawerRef.current = el;
-                    if(drawerRef.current){
-                      Object.map(context,(v,i)=>{
-                        if(drawerRef.current[i] === undefined){
-                          drawerRef.current[i] = v;
-                        }
-                      });
-                      drawerRef.current.open = drawerRef.current.openDrawer;
-                      drawerRef.current.runAfterSlide = (cb,force)=>{
-                          if(!permanent){
-                              //force !== true ? open() : false;
-                              onSlideCallbackRef.current = cb;
-                              return drawerRef.current.closeDrawer();
-                          }
-                            if(typeof cb =='function'){
-                              cb(getDrawerState());
-                            }
-                        }
-                        drawerRef.current.close = drawerRef.current.runAfterSlide;
-                        drawerRef.current.isOpen = context.isOpen = typeof drawerRef.current.isOpen =='function'? drawerRef.current.isOpen.bind(drawerRef.current) : x=> drawerRef && drawerRef.current ? drawerRef.current.drawerShown : false;
-                        drawerRef.current.isClosed = context.isClosed = x => !drawerRef.current.isOpen();
-                        context.toggle = drawerRef.current.toggleDrawer = drawerRef.current.toggle = cb =>{
-                          if(!checkToggleBtn(cb)) return;
-                          if(isPermanent || isMinimized) {
-                            if(typeof cb ==='function'){
-                                cb(getDrawerState());
-                            }
-                            return;
-                          }
-                          callbackRef.current = cb;
-                          if(drawerRef.current.isOpen()){
-                              drawerRef.current.closeDrawer();
-                          } else {
-                              drawerRef.current.openDrawer();
-                          }
-                      }
-                      drawerRef.current.getState = getDrawerState;
-                    }
-                    React.setRef(ref,drawerRef.current);
-                  }}
-                  drawerWidth={drawerWidth}
-                  keyboardDismissMode="on-drag"
-                  drawerPosition={position}
-                  drawerType={drawerType}
-                  hideStatusBar = {defaultBool(hideStatusBar,true)}
-                  overlayColor = {overlayColor}
-                  renderNavigationView={(opts)=>{
-                    const cArgs = {...getDrawerState()}
-                    const h = typeof header === 'function'? header(cArgs) : header;
-                    const c = typeof content =='function'? content (cArgs) : content;
-                    return <NavigationView
-                      opts = {opts}
-                      ref = {navigationViewRef}
-                      {...{context,toggleIcon,toggleIconTooltip,header:h,content:c,isPermanent,drawerItemsProps,drawerType,drawerItems,drawerRef,setState,toggleIconProps,isLeftPosition,drawerWidth,minimizable,headerProps,isMinimized,drawerItemsContainerProps}}
-                    />
-                  }}
-                  contentContainerStyle={[
-                    {paddingBottom:30},
-                    contentContainerStyle
-                  ]
-            }>  
-              {children}
-            </DrawerLayout>
-        </View>
-    </DrawerContext.Provider>
-    );
-})
-
-  export default DrawerComponent;
-
-
-
-
-const iconType = PropTypes.oneOfType([
-  PropTypes.node,
-  PropTypes.string,
-]);
-
-DrawerComponent.propTypes = {
-  ...defaultObj(DrawerLayout.propTypes),
-  position : PropTypes.oneOf(Object.keys(DRAWER_POSITIONS)),
-  minimizable : PropTypes.bool,
-  permanent : PropTypes.bool,
-  minimized : PropTypes.bool,
-  bindResizeEvent : PropTypes.bool,
-  children : PropTypes.node,
-  onMount : PropTypes.func,
-  onUnmount : PropTypes.func,
-  onDrawerOpen : PropTypes.func,
-  onDrawerClose : PropTypes.func,
-  onDrawerSlide : PropTypes.func,
-  onDrawerToggle : PropTypes.func,
-  drawerItemsProps : PropTypes.object,
-  drawerItems : PropTypes.oneOfType([
-    PropTypes.array,
-    PropTypes.node,
-    PropTypes.element,
-    PropTypes.elementType,
-    PropTypes.func
-  ]),
-  isItemActive : PropTypes.func,///vérifie si un item est actif où pas
-  permanent : PropTypes.bool,
-  onDrawerToggle : PropTypes.func,
-  onDrawerToggleMinimize : PropTypes.func,
-  onDrawerMinimize : PropTypes.func,
-  children : PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.node,
-  ]),
-  /*** le header à afficher sur le drawer */
-  header : PropTypes.oneOfType([
-      PropTypes.node,
-      PropTypes.func,
-  ]),
-  headerProps : PropTypes.object,//les props à passer drawerHeader
-  onDrawerClose : PropTypes.func,
-  onDrawerClose : PropTypes.func,
-  onDrawerOpen : PropTypes.func,
-  /***l'icone toggle lorsque le drawer est en mode temporaire, dont mobile */
-  temporaryToggleIcon : iconType,
-  //l'icone du button toggle lorsque le drawer est en mode permament
-  permanentToggleIcon : iconType, 
-  //l'icone de toggle lorsque le drawer est en mode persistant
-  persistentToggleIcon : iconType,
-  minimizedToggleIcon : iconType, //l'icone du drawer lorsque celui si est en mode minimisté
-  /*** si l'icone minimisé est affiché lorsque le drawer est en mode minimisé */
-  withMinimizedIcon : PropTypes.bool,
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  drawerContainer: {
-    flex: 1,
-    paddingTop : 0,// isMobileNative()? 25:0,
-  },
-  drawerText: {
-    margin: 10,
-    fontSize: 15,
-    textAlign: 'left',
-  },
-  drawerHeaderContainer : {
-      flexDirection : 'column',
-      alignItems : 'center',
-      justifyContent : 'flex-start',
-  },
-  drawerHeaderContent : {
-    margin : 0, 
-    justifyContent : 'space-between',
-    flexDirection : 'row',
-    alignItems : 'center',
-    paddingHorizontal : 10,
-    width : '100%',
-  },
-  drawerHeaderContentMinimized : {
-      textAlign : 'center',
-      alignSelf : 'center',
-      justifyContent : 'center',
-      alignContent : 'center',
-      paddingTop : 10,
-  },
-  drawerHeaderContainerLeft : {
-    flexDirection : 'row',
-    //paddingRight : 20,
-  },  
-  drawerHeaderContainerRight : {
-    flexDirection : 'row-reverse',
-    //paddingLeft : 20,
-  },
-});
-
-DrawerComponent.displayName = "DrawerComponent";

package/src/components/Form/Action.js

@@ -90,7 +90,7 @@ const FormActionComponent = React.forwardRef(({
             const formInstance = getFormInstance(formName);
             if(!formInstance || typeof formInstance.isValid != 'function' && isObj(formInstance.props)) return;
             if(formInstance.isValid()){
-                onPress({...args,data:formInstance.getData({handleChange})})
+                onPress({...args,formInstance,form:formInstance,data:formInstance.getData({handleChange})})
             }
         }
     };

package/src/layouts/AppBar/index.js

@@ -1,14 +1,11 @@
 import AppBar from "$ecomponents/AppBar";
-import { Appbar } from "react-native-paper";
 import React from "$react";
 import {MENU_ICON} from "$ecomponents/Icon";
 import {defaultObj} from "$cutils";
 import {useDrawer} from "$ecomponents/Drawer";
 import Icon from "$ecomponents/Icon";
 import {useGetComponent} from "$econtext/hooks";
-import {navigate as cNavigate,sanitizeName} from "$cnavigation";
 import { StackActions } from '@react-navigation/native';
-
 export * from "./utils";
 
 const AppBarLayout = React.forwardRef(({backActionProps,withDrawer,withNotifications,backAction,backActionRef,options,...props},ref)=>{
@@ -29,8 +26,6 @@ const AppBarLayout = React.forwardRef(({backActionProps,withDrawer,withNotificat
                     goBack();
                     return false;
                 }
-                const home = sanitizeName("Home");
-                console.log(navigation," is navigation heeee ",args);
                 if(typeof navigation?.dispatch =='function'){
                     try {
                         navigation.dispatch(StackActions.popToTop());

package/src/navigation/Drawer/index.js

@@ -8,7 +8,6 @@ import Login from "$eauth/Login";
 import {navigate} from "$cnavigation";
 import theme from "$theme";
 import Logo  from "$ecomponents/Logo";
-import appConfig from "$capp/config";
 
 const DrawerNavigator = React.forwardRef(({content,children:customChildren,state,...props},ref)=>{
     const drawerRef = React.useRef(null);