@fto-consult/expo-ui 8.80.0 → 8.81.0

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};
+}