@fto-consult/expo-ui 1.0.11 → 1.0.13

package/babel.config.alias.js

@@ -10,6 +10,7 @@ module.exports = (opts)=>{
     const r = require("@fto-consult/common/babel.config.alias")(opts);
     r["$eauth"] = path.resolve(expo,"auth");
     r["$ecomponents"] = r["$expo-components"] = path.resolve(expo,"components");
+    r["$components"] = r["$components"] || r["$ecomponents"];
     r["$elayouts"] = path.resolve(expo,"layouts");
     r["$emedia"] = path.resolve(expo,"media");
     r["$enavigation"] = path.resolve(expo,"navigation");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -60,7 +60,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/metro-config": "^0.4.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.0.13",
+    "@fto-consult/common": "^1.0.20",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/netinfo": "9.3.0",
@@ -75,6 +75,7 @@
     "expo": "^46.0.15",
     "expo-camera": "~12.3.0",
     "expo-linking": "~3.2.2",
+    "expo-sqlite": "~10.3.0",
     "expo-status-bar": "~1.4.0",
     "expo-system-ui": "~1.3.0",
     "expo-web-browser": "~11.0.0",
@@ -87,10 +88,12 @@
     "react-native-big-list": "^1.5.5",
     "react-native-gesture-handler": "~2.5.0",
     "react-native-paper": "^4.12.5",
+    "react-native-paper-dates": "^0.9.2",
     "react-native-reanimated": "~2.9.1",
     "react-native-safe-area-context": "4.3.1",
     "react-native-svg": "12.3.0",
     "react-native-web": "~0.18.7",
+    "sharp-cli": "^2.1.0",
     "tippy.js": "^6.3.7"
   }
 }

package/src/App.js

@@ -62,4 +62,4 @@ export default function MainAppComponent() {
     </GestureHandlerRootView>
   );
 }
-AppRegistry.registerComponent(appConfig.name || appConfig.id, () => Main);
+AppRegistry.registerComponent(appConfig.name || appConfig.id, () => MainAppComponent);

package/src/components/Dialog/dialogs.js

@@ -1,70 +1,70 @@
-import {isFunction,defaultArray,isNonNullString} from "$utils";
-
-const isDialog = dialog => dialog && typeof dialog !='boolean' && dialog.getId && dialog.getId() ? true : false;
-const dialogs = {
-    current : null, //la boîte de dialogue actuelle
-    previous : null, //la boîte de dialogue précédente,
-    all : [], //la liste des Dialogs overts,
-    /*** retourne la dernière boîte de dialogue */
-    get current (){
-        dialogs.all = defaultArray(dialogs.all);
-        if(dialogs.all.length > 0) return dialogs.all[dialogs.all.length-1]
-        return null;
-    },
-    /*** définit la boîte de dialogue active */
-    set current(dialog){
-        return setCurrentDialog.call(APP,dialog)
-    },
-    /*** Démonte la boîte de dialogue passée en paramètre
-     *  @param dialog, si dialog est omi alors c'est la boîte de dialogue active qui est supprimée
-    */
-    unmount :function(dialog){
-        return unmountDialog.call(APP,dialog);
-    },
-    isDialog,
-    isValid : isDialog,
-    isCurrentActive :(dialog)=>{
-        return dialogs.current && dialogs.current.isVisible()? true : false;
-    },
-    /**** si la boîte de dialogue passé en paramètre est active */
-    isActive : (dialog)=>{
-        return isDialog(dialogs.current) && isDialog(dialog) && dialog.getId() === dialogs.current.getId() && dialog.isVisible()? true : false;
-    }
-};
-
-
-export const setCurrentDialog = dialogs.mount = dialogs.setCurrent = (dialog)=>{
-    if(isDialog(dialog) && dialog.isVisible() && dialogs.current !== dialog){
-        let _d = [];
-        dialogs.all = defaultArray(dialogs.all);
-        for(let i in dialogs.all){
-            if(dialogs.all[i] && dialogs.all[i].getId() != dialog.getId() && dialogs.all[i].isVisible()){
-                _d.push(dialogs.all[i]);
-            }
-        }
-        _d.push(dialog);
-        dialogs.all = _d;
-        return true;
-    }
-    return false;
-}
-
-export const unmountDialog = window.unmountDialog = (dialog) =>{
-    let _d = [];
-    dialog = isDialog(dialog) && isFunction(dialog.isVisible) ? dialog : dialogs.current;
-    let hasFound = false;
-    if(dialog){
-        dialogs.all = defaultArray(dialogs.all);
-        for(let i in dialogs.all){
-            if(dialogs.all[i] && dialogs.all[i].getId() == dialog.getId()){
-                hasFound = true;
-            } else if(dialogs.all[i] && dialogs.all[i].isVisible()){
-                _d.push(dialogs.all[i]);
-            }
-        } 
-    }
-    dialogs.all = _d;
-    return hasFound;
-}
-
+import {isFunction,defaultArray,isNonNullString} from "$utils";
+
+const isDialog = dialog => dialog && typeof dialog !='boolean' && dialog.getId && dialog.getId() ? true : false;
+const dialogs = {
+    current : null, //la boîte de dialogue actuelle
+    previous : null, //la boîte de dialogue précédente,
+    all : [], //la liste des Dialogs overts,
+    /*** retourne la dernière boîte de dialogue */
+    get current (){
+        dialogs.all = defaultArray(dialogs.all);
+        if(dialogs.all.length > 0) return dialogs.all[dialogs.all.length-1]
+        return null;
+    },
+    /*** définit la boîte de dialogue active */
+    set current(dialog){
+        return setCurrentDialog.call(APP,dialog)
+    },
+    /*** Démonte la boîte de dialogue passée en paramètre
+     *  @param dialog, si dialog est omi alors c'est la boîte de dialogue active qui est supprimée
+    */
+    unmount :function(dialog){
+        return unmountDialog.call(APP,dialog);
+    },
+    isDialog,
+    isValid : isDialog,
+    isCurrentActive :(dialog)=>{
+        return dialogs.current && dialogs.current.isVisible()? true : false;
+    },
+    /**** si la boîte de dialogue passé en paramètre est active */
+    isActive : (dialog)=>{
+        return isDialog(dialogs.current) && isDialog(dialog) && dialog.getId() === dialogs.current.getId() && dialog.isVisible()? true : false;
+    }
+};
+
+
+export const setCurrentDialog = dialogs.mount = dialogs.setCurrent = (dialog)=>{
+    if(isDialog(dialog) && dialog.isVisible() && dialogs.current !== dialog){
+        let _d = [];
+        dialogs.all = defaultArray(dialogs.all);
+        for(let i in dialogs.all){
+            if(dialogs.all[i] && dialogs.all[i].getId() != dialog.getId() && dialogs.all[i].isVisible()){
+                _d.push(dialogs.all[i]);
+            }
+        }
+        _d.push(dialog);
+        dialogs.all = _d;
+        return true;
+    }
+    return false;
+}
+
+export const unmountDialog = window.unmountDialog = (dialog) =>{
+    let _d = [];
+    dialog = isDialog(dialog) && isFunction(dialog.isVisible) ? dialog : dialogs.current;
+    let hasFound = false;
+    if(dialog){
+        dialogs.all = defaultArray(dialogs.all);
+        for(let i in dialogs.all){
+            if(dialogs.all[i] && dialogs.all[i].getId() == dialog.getId()){
+                hasFound = true;
+            } else if(dialogs.all[i] && dialogs.all[i].isVisible()){
+                _d.push(dialogs.all[i]);
+            }
+        } 
+    }
+    dialogs.all = _d;
+    return hasFound;
+}
+
 export default dialogs;

package/src/components/Dialog/showConfirmOrAlertOrPrompt.js

@@ -1,90 +1,90 @@
-import {isDecimal,isObj,defaultObj,extendObj,isNonNullString,isArray,defaultFunc,defaultStr,defaultVal} from "$utils";
-import {getTheme,flattenStyle} from "$theme";
-import React from "$react";
-import {NotificationManager} from 'react-notifications';
-
-export default function showConfirm (p,cb){
-    let {
-        yes,
-        title,
-        text,
-        defaultValue,
-        message,
-        msg,
-        onCancel,
-        onSuccess,
-        alert,
-        ok,
-        prompt,
-        confirm,
-        no,
-        type,
-        alertType,
-        buttons,
-        ...options
-    } = defaultObj(p);
-    const theme = getTheme();
-    if(isDecimal(text)){
-        text = text+"";
-    }
-    title = defaultStr(title)
-
-    if(isNonNullString(no)){
-        no = {text:no}
-    }
-    if(isNonNullString(yes)){
-        yes = {text:yes}
-    }
-    if(buttons !== false && buttons !== null){
-        if(!isArray(buttons)){
-            buttons = [];
-        }    
-        no = defaultObj(no)
-        if(!alert && no !== false){
-            no.text  = defaultStr(no.text,'Non')
-            /*if(typeof no.onClick !=='function'){
-                no.onClick = defaultFunc(onCancel,cb);
-            }*/
-            no.style = flattenStyle([{color:theme.secondaryText,backgroundColor:theme.secondary},no.style]);
-            buttons.push(no);
-        } else no = null;
-        if(yes !== false){
-            yes = defaultObj(yes,ok)
-            yes.text = defaultStr(yes.text,alert?'OK':'Oui');
-            yes.style = flattenStyle([{color:theme.primaryText,backgroundColor:theme.primary},yes.style]);
-            /*if(typeof yes.onClick !=='function'){
-                yes.onClick = defaultFunc(onSuccess,cb);
-            }*/
-            buttons.push(yes);
-        }
-    } else {
-        buttons = [];
-    }
-    message = defaultVal(message,msg)
-    options = defaultObj(options);
-    if(isObj(yes)){
-        options.okButtonProps = extendObj(true,{},options.okButtonProps,yes);
-        options.okText = defaultVal(options.okText,yes.text,yes.label);
-    }
-    if(isObj(no)){
-        options.cancelButtonProps = extendObj(true,{},options.cancelButtonProps,no);
-        options.cancelText = defaultVal(options.cancelText,no.text,no.label);
-        options.closeIcon = React.isValidElement(no.icon)? no.icon : options.closeIcon;
-    }
-    //options.closeIcon = React.isValidElement(options.closeIcon)? options.closeIcon : <CloseOutlined />
-    options.onOk = defaultFunc(onSuccess,cb);
-    options.onCancel = onCancel;
-    if(alert){
-        options.closable = confirm? false : true;
-        type = "info";
-    }
-    type = defaultStr(alertType,type,"confirm").toLowerCase().trim();
-    const cB = defaultFunc(NotificationManager[type],NotificationManager.confirm);
-    return cB(message,title);
-    return cB({
-        ...options,
-        content : message,
-        title,
-        onCancel,
-    })
-}
+import {isDecimal,isObj,defaultObj,extendObj,isNonNullString,isArray,defaultFunc,defaultStr,defaultVal} from "$utils";
+import {getTheme,flattenStyle} from "$theme";
+import React from "$react";
+import {NotificationManager} from 'react-notifications';
+
+export default function showConfirm (p,cb){
+    let {
+        yes,
+        title,
+        text,
+        defaultValue,
+        message,
+        msg,
+        onCancel,
+        onSuccess,
+        alert,
+        ok,
+        prompt,
+        confirm,
+        no,
+        type,
+        alertType,
+        buttons,
+        ...options
+    } = defaultObj(p);
+    const theme = getTheme();
+    if(isDecimal(text)){
+        text = text+"";
+    }
+    title = defaultStr(title)
+
+    if(isNonNullString(no)){
+        no = {text:no}
+    }
+    if(isNonNullString(yes)){
+        yes = {text:yes}
+    }
+    if(buttons !== false && buttons !== null){
+        if(!isArray(buttons)){
+            buttons = [];
+        }    
+        no = defaultObj(no)
+        if(!alert && no !== false){
+            no.text  = defaultStr(no.text,'Non')
+            /*if(typeof no.onClick !=='function'){
+                no.onClick = defaultFunc(onCancel,cb);
+            }*/
+            no.style = flattenStyle([{color:theme.secondaryText,backgroundColor:theme.secondary},no.style]);
+            buttons.push(no);
+        } else no = null;
+        if(yes !== false){
+            yes = defaultObj(yes,ok)
+            yes.text = defaultStr(yes.text,alert?'OK':'Oui');
+            yes.style = flattenStyle([{color:theme.primaryText,backgroundColor:theme.primary},yes.style]);
+            /*if(typeof yes.onClick !=='function'){
+                yes.onClick = defaultFunc(onSuccess,cb);
+            }*/
+            buttons.push(yes);
+        }
+    } else {
+        buttons = [];
+    }
+    message = defaultVal(message,msg)
+    options = defaultObj(options);
+    if(isObj(yes)){
+        options.okButtonProps = extendObj(true,{},options.okButtonProps,yes);
+        options.okText = defaultVal(options.okText,yes.text,yes.label);
+    }
+    if(isObj(no)){
+        options.cancelButtonProps = extendObj(true,{},options.cancelButtonProps,no);
+        options.cancelText = defaultVal(options.cancelText,no.text,no.label);
+        options.closeIcon = React.isValidElement(no.icon)? no.icon : options.closeIcon;
+    }
+    //options.closeIcon = React.isValidElement(options.closeIcon)? options.closeIcon : <CloseOutlined />
+    options.onOk = defaultFunc(onSuccess,cb);
+    options.onCancel = onCancel;
+    if(alert){
+        options.closable = confirm? false : true;
+        type = "info";
+    }
+    type = defaultStr(alertType,type,"confirm").toLowerCase().trim();
+    const cB = defaultFunc(NotificationManager[type],NotificationManager.confirm);
+    return cB(message,title);
+    return cB({
+        ...options,
+        content : message,
+        title,
+        onCancel,
+    })
+}

package/src/components/Dialog/style.css

@@ -1,103 +1,103 @@
-.ftc-dialog.dialog,
-.ftc-dialog.dialog .dialog-container,
-.ftc-dialog.ftc-dialog-fullscreen .dialog-container > .dialog-content-container{
-    overflow: hidden!important;
-    overflow-y: hidden!important;
-    overflow-x: hidden!important;
-    width: 100%;
-    height: 100%;
-    padding-left: 0px!important;
-    padding-right: 0px!important;
-    margin: 0px!important;
-}
-.ftc-dialog.dialog,
-.ftc-dialog.ftc-dialog-fullscreen .dialog-container{
-    width: 100%!important;
-    height: 100%!important;
-}
-.ftc-dialog.ftc-dialog-modal > .dialog-container {
-    display: flex!important;
-    flex-direction: column!important;
-    justify-content: center!important;
-    align-items: center!important;
-}
-.ftc-dialog.dialog .dialog-container > .dialog-content-container{
-    position: relative!important;
-    background-color: white;
-}
-.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container {
-    max-width: 600px;
-    max-height: 80%;
-    padding: 0px!important;
-    margin: auto!important;
-    overflow-y: hidden!important;
-    overflow-x: hidden!important;
-    flex-grow:0!important;
-}
-
-.ftc-dialog.ftc-dialog-fullscreen > .dialog-container .dialog-content-container,
-.ftc-dialog.ftc-dialog-fullscreen > .dialog-container{
-    display:  block!important;
-    max-width: 100%!important;
-    max-height: 100%!important;
-}
-.ftc-dialog.ftc-dialog-fullscreen > .dialog-container {
-    padding-top: 56px;
-}
-.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content {
-    overflow: auto;
-    max-height: inherit;
-    max-width: inherit;
-    overflow-y: auto;
-    overflow-x: auto;
-    padding-bottom: 30px;
-}
-.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content > * {
-    padding-bottom: 30px;
-    padding-bottom: 0px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-}
-.ftc-dialog.ftc-dialog-modal > .dialog-container .dialog-content-container .dialog-content > *{
-    margin-top: 0px!important;
-}
-.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content.has-scrollbar > * {
-    padding-bottom: 50px!important;
-    display: block;
-}
-
-.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-header{
-    padding-top: 0;
-    padding-bottom: 0;
-    width: 100%;
-}
-.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-footer {
-    position: absolute!important;
-    right: 0;
-    bottom: 0;
-    top: auto!important;
-    left : auto!important;
-    padding: 0px!important;
-    padding-top: 5px!important;
-    padding-bottom: 5px!important;
-    margin: 0px!important;
-    margin-bottom: 0px!important;
-    background-color:inherit;
-    width: 100%!important;
-}
-
-.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-content .md-grid .md-cell{
-    width: 100%!important;
-    margin-left: auto!important;
-    margin-right: auto!important;
-}
-
-.ftc-dialog.ftc-dialog.ftc-dialog-fullscreen .dialog-container > .dialog-content-container .dialog-content{
-    max-height: 100%!important;
-    max-width: 100%!important;
-}
-
-.ftc-btn.ftc-dialog-action {
-    padding: 5px;
-    border-radius: 1px;
+.ftc-dialog.dialog,
+.ftc-dialog.dialog .dialog-container,
+.ftc-dialog.ftc-dialog-fullscreen .dialog-container > .dialog-content-container{
+    overflow: hidden!important;
+    overflow-y: hidden!important;
+    overflow-x: hidden!important;
+    width: 100%;
+    height: 100%;
+    padding-left: 0px!important;
+    padding-right: 0px!important;
+    margin: 0px!important;
+}
+.ftc-dialog.dialog,
+.ftc-dialog.ftc-dialog-fullscreen .dialog-container{
+    width: 100%!important;
+    height: 100%!important;
+}
+.ftc-dialog.ftc-dialog-modal > .dialog-container {
+    display: flex!important;
+    flex-direction: column!important;
+    justify-content: center!important;
+    align-items: center!important;
+}
+.ftc-dialog.dialog .dialog-container > .dialog-content-container{
+    position: relative!important;
+    background-color: white;
+}
+.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container {
+    max-width: 600px;
+    max-height: 80%;
+    padding: 0px!important;
+    margin: auto!important;
+    overflow-y: hidden!important;
+    overflow-x: hidden!important;
+    flex-grow:0!important;
+}
+
+.ftc-dialog.ftc-dialog-fullscreen > .dialog-container .dialog-content-container,
+.ftc-dialog.ftc-dialog-fullscreen > .dialog-container{
+    display:  block!important;
+    max-width: 100%!important;
+    max-height: 100%!important;
+}
+.ftc-dialog.ftc-dialog-fullscreen > .dialog-container {
+    padding-top: 56px;
+}
+.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content {
+    overflow: auto;
+    max-height: inherit;
+    max-width: inherit;
+    overflow-y: auto;
+    overflow-x: auto;
+    padding-bottom: 30px;
+}
+.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content > * {
+    padding-bottom: 30px;
+    padding-bottom: 0px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+.ftc-dialog.ftc-dialog-modal > .dialog-container .dialog-content-container .dialog-content > *{
+    margin-top: 0px!important;
+}
+.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content.has-scrollbar > * {
+    padding-bottom: 50px!important;
+    display: block;
+}
+
+.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-header{
+    padding-top: 0;
+    padding-bottom: 0;
+    width: 100%;
+}
+.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-footer {
+    position: absolute!important;
+    right: 0;
+    bottom: 0;
+    top: auto!important;
+    left : auto!important;
+    padding: 0px!important;
+    padding-top: 5px!important;
+    padding-bottom: 5px!important;
+    margin: 0px!important;
+    margin-bottom: 0px!important;
+    background-color:inherit;
+    width: 100%!important;
+}
+
+.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-content .md-grid .md-cell{
+    width: 100%!important;
+    margin-left: auto!important;
+    margin-right: auto!important;
+}
+
+.ftc-dialog.ftc-dialog.ftc-dialog-fullscreen .dialog-container > .dialog-content-container .dialog-content{
+    max-height: 100%!important;
+    max-width: 100%!important;
+}
+
+.ftc-btn.ftc-dialog-action {
+    padding: 5px;
+    border-radius: 1px;
 }

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

@@ -1,155 +1,155 @@
-import React from '$react';
-import {isObj} from "$utils";
-import ExpandableItem from './ExpandableItem';
-import DrawerItem from './DrawerItem';
-import DrawerSection from "./DrawerSection"
-import PropTypes from "prop-types";
-import Divider from "$ecomponents/Divider";
-import View from "$ecomponents/View";
-
-export * from "./utils";
-
-const DrawerItemsComponent = React.forwardRef((props,ref)=> {
-  let {items:_items,minimized} = props;
-  _items = typeof _items ==='function'? _items(props) : _items;
-  if(React.isValidElement(_items)){
-     return _items;
-  }
-  const r = React.useMemo(()=>{
-    let items = []
-    const renderExpandableOrSection = ({item,key,items})=>{
-          const {section,items:itx2,...rest} = item;
-          if(section){
-            return <DrawerSection 
-                {...rest}
-                minimized={minimized} 
-                key={key}
-            >
-              {items}
-            </DrawerSection>
-          } else {
-            return <ExpandableItem 
-                {...rest}
-                minimized={minimized} 
-                key={key}
-              >
-                {items}
-            </ExpandableItem>;
-          }
-    }
-    Object.map(_items,(item,i)=>{
-      if(React.isValidElement(item)){
-         items.push(<React.Fragment key={i}>{item}</React.Fragment>)
-      }
-      if(typeof item ==='string' || typeof item =='number'){
-         item = {label:item+''};
-      } 
-      if(!isObj(item)) return null;
-      if(isObj(item.items) || Array.isArray(item.items)){
-          const itx = []
-          Object.map(item.items,(it,j)=>{
-              if(!isObj(it)) return ;
-              getDefaultProps(it);
-              const r = renderItem({minimized,renderExpandableOrSection,items:item.items,item:it,key:i+j,props});
-              if(r){
-                itx.push(r);
-              }
-          });
-          if(itx.length){
-              items.push(renderExpandableOrSection({items:itx,key:i,item}))
-          }
-      } else {
-          const r = renderItem({minimized,renderExpandableOrSection,items:_items,item,key:i+"",props});
-          if(r){
-            items.push(r);
-          }
-      }
-    })
-    return items;
-  },[_items,minimized]);
-  return <View ref={ref}>
-      {r}
-      <View style={{height:30}}></View>
-  </View>
-});
-
-
-export default DrawerItemsComponent;
-
-DrawerItemsComponent.displayName = "DrawerItemsComponent";
-
-/*** les props des items du drawer */
-const itemType = PropTypes.oneOfType([
-   PropTypes.shape({
-      label : PropTypes.string,
-      section : PropTypes.bool, //si le drawer est de type section
-      items : PropTypes.oneOfType([
-        PropTypes.arrayOf(PropTypes.object),
-        PropTypes.objectOf(PropTypes.object),
-      ]),
-      divider : PropTypes.bool,
-   }),
-   PropTypes.string,
-   PropTypes.number,
-   PropTypes.node,
-])
-
-DrawerItemsComponent.propTypes = {
-  items : PropTypes.oneOfType([
-    PropTypes.array,
-    PropTypes.object,
-    PropTypes.arrayOf(itemType),
-    PropTypes.objectOf(itemType),
-    PropTypes.func,
-    PropTypes.node,
-  ]).isRequired,
-  minimized : PropTypes.bool,
-}
-
-const getDefaultProps = function(item){
-  if(!isObj(item)) return null;
-  item.label = defaultVal(item.label,item.text,item.accessibilityLabel);
-  item.accessibilityLabel = defaultVal(item.accessibilityLabel,item.tooltip,item.label);
-  item.title = defaultVal(item.title,item.label);
-  return item;
-}
-
-const renderItem = ({item,minimized,renderExpandableOrSection,index,key})=>{
-  key = key||index;
-  if(React.isValidElement(item)){
-    return <React.Fragment key={key}>
-        {item}
-    </React.Fragment>
-  } else {
-    if(!item.label && !item.text && !item.icon) {
-        if(item.divider === true){
-          const {divider,...rest} = item;
-          return (<Divider key={key} {...rest}/>)
-      }
-      return null;
-    }
-    item = getDefaultProps(item);
-    if(isObj(item.items) || Array.isArray(item.items)){
-       const itx = [];
-       Object.map(item.items,(it,i)=>{
-          if(!isObj(it)) return null;
-          it = getDefaultProps(it);
-          itx.push(<DrawerItem 
-                {...it}  
-                minimized = {minimized}
-                key={key+i}
-          
-          />)
-       })
-       if(itx.length){
-          return renderExpandableOrSection({items:itx,key,item})
-       }
-    } else {
-       return <DrawerItem 
-          minimized={minimized}  
-          key={key} 
-          {...item}
-       />
-    }
-  }
+import React from '$react';
+import {isObj} from "$utils";
+import ExpandableItem from './ExpandableItem';
+import DrawerItem from './DrawerItem';
+import DrawerSection from "./DrawerSection"
+import PropTypes from "prop-types";
+import Divider from "$ecomponents/Divider";
+import View from "$ecomponents/View";
+
+export * from "./utils";
+
+const DrawerItemsComponent = React.forwardRef((props,ref)=> {
+  let {items:_items,minimized} = props;
+  _items = typeof _items ==='function'? _items(props) : _items;
+  if(React.isValidElement(_items)){
+     return _items;
+  }
+  const r = React.useMemo(()=>{
+    let items = []
+    const renderExpandableOrSection = ({item,key,items})=>{
+          const {section,items:itx2,...rest} = item;
+          if(section){
+            return <DrawerSection 
+                {...rest}
+                minimized={minimized} 
+                key={key}
+            >
+              {items}
+            </DrawerSection>
+          } else {
+            return <ExpandableItem 
+                {...rest}
+                minimized={minimized} 
+                key={key}
+              >
+                {items}
+            </ExpandableItem>;
+          }
+    }
+    Object.map(_items,(item,i)=>{
+      if(React.isValidElement(item)){
+         items.push(<React.Fragment key={i}>{item}</React.Fragment>)
+      }
+      if(typeof item ==='string' || typeof item =='number'){
+         item = {label:item+''};
+      } 
+      if(!isObj(item)) return null;
+      if(isObj(item.items) || Array.isArray(item.items)){
+          const itx = []
+          Object.map(item.items,(it,j)=>{
+              if(!isObj(it)) return ;
+              getDefaultProps(it);
+              const r = renderItem({minimized,renderExpandableOrSection,items:item.items,item:it,key:i+j,props});
+              if(r){
+                itx.push(r);
+              }
+          });
+          if(itx.length){
+              items.push(renderExpandableOrSection({items:itx,key:i,item}))
+          }
+      } else {
+          const r = renderItem({minimized,renderExpandableOrSection,items:_items,item,key:i+"",props});
+          if(r){
+            items.push(r);
+          }
+      }
+    })
+    return items;
+  },[_items,minimized]);
+  return <View ref={ref}>
+      {r}
+      <View style={{height:30}}></View>
+  </View>
+});
+
+
+export default DrawerItemsComponent;
+
+DrawerItemsComponent.displayName = "DrawerItemsComponent";
+
+/*** les props des items du drawer */
+const itemType = PropTypes.oneOfType([
+   PropTypes.shape({
+      label : PropTypes.string,
+      section : PropTypes.bool, //si le drawer est de type section
+      items : PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.object),
+        PropTypes.objectOf(PropTypes.object),
+      ]),
+      divider : PropTypes.bool,
+   }),
+   PropTypes.string,
+   PropTypes.number,
+   PropTypes.node,
+])
+
+DrawerItemsComponent.propTypes = {
+  items : PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.object,
+    PropTypes.arrayOf(itemType),
+    PropTypes.objectOf(itemType),
+    PropTypes.func,
+    PropTypes.node,
+  ]).isRequired,
+  minimized : PropTypes.bool,
+}
+
+const getDefaultProps = function(item){
+  if(!isObj(item)) return null;
+  item.label = defaultVal(item.label,item.text,item.accessibilityLabel);
+  item.accessibilityLabel = defaultVal(item.accessibilityLabel,item.tooltip,item.label);
+  item.title = defaultVal(item.title,item.label);
+  return item;
+}
+
+const renderItem = ({item,minimized,renderExpandableOrSection,index,key})=>{
+  key = key||index;
+  if(React.isValidElement(item)){
+    return <React.Fragment key={key}>
+        {item}
+    </React.Fragment>
+  } else {
+    if(!item.label && !item.text && !item.icon) {
+        if(item.divider === true){
+          const {divider,...rest} = item;
+          return (<Divider key={key} {...rest}/>)
+      }
+      return null;
+    }
+    item = getDefaultProps(item);
+    if(isObj(item.items) || Array.isArray(item.items)){
+       const itx = [];
+       Object.map(item.items,(it,i)=>{
+          if(!isObj(it)) return null;
+          it = getDefaultProps(it);
+          itx.push(<DrawerItem 
+                {...it}  
+                minimized = {minimized}
+                key={key+i}
+          
+          />)
+       })
+       if(itx.length){
+          return renderExpandableOrSection({items:itx,key,item})
+       }
+    } else {
+       return <DrawerItem 
+          minimized={minimized}  
+          key={key} 
+          {...item}
+       />
+    }
+  }
 }

package/webpack.config.js

@@ -5,6 +5,7 @@ module.exports = async function(env, argv,opts) {
     const path = require("path");
     const dir = path.resolve(__dirname);
     opts = typeof opts =="object" && opts ? opts : {};
+    const transpileModules = Array.isArray(opts.transpileModules)? opts.transpileModules : [];
     const config = await createExpoWebpackConfigAsync(
       {
         ...env,
@@ -12,6 +13,7 @@ module.exports = async function(env, argv,opts) {
           dangerouslyAddModulePathsToTranspile: [
             // Ensure that all packages starting with @fto-consult are transpiled.
             '@fto-consult',
+            ...transpileModules,
           ],
         },
       },