@fto-consult/expo-ui 6.14.0 → 6.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.14.0",
+  "version": "6.15.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -98,7 +98,7 @@
     "react-native-gesture-handler": "^2.12.1",
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-mime-types": "^2.4.0",
-    "react-native-paper": "^5.9.1",
+    "react-native-paper": "^5.10.0",
     "react-native-paper-dates": "^0.18.12",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",

package/src/components/Dropdown/index.js

@@ -1249,7 +1249,7 @@ DropdownComponent.propTypes = {
         PropTypes.node,
         PropTypes.func,
     ]), //le contenu enfant à afficher après l'anchor
-    /**** les actions supplémentaires à ajouter au menu items */
+    /**** les actions supplémentaires à ajouter au menu items du dropdown */
     dropdownActions : PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.object),
         PropTypes.objectOf(PropTypes.object),

package/src/components/Form/Fields/Field.js

@@ -280,7 +280,6 @@ export default class Field extends AppComponent {
                 let form = Forms.getForm(this.formName);
                 this.INITIAL_STATE.onValidate.call(this,{...defaultObj(rest),props:this.props,formName:this.formName,form,name:this.name,field:this.name,value,event,context:this});
                 this.callOnChange({value,event,isValid:true,...rest});
-
                 if(form && form.props){
                     if(canEnable){
                         if(isFunction(form.props.onValidate)){
@@ -639,7 +638,6 @@ export default class Field extends AppComponent {
         return false;
     }
     doUpdateMediaQueryStyle(args){
-        if(args?.currentMedia === this.state.currentMedia) return null;
         const wrapperStyle = this.getMediaQueryUpdateStyle(args);
         this.setState({isMobile:args.isMobile,wrapperStyle});
     }

package/src/components/Form/Fields/SelectField.js

@@ -127,8 +127,6 @@ export default class FormSelectField extends Field{
                 this.validateWithCallOnChange(args);
                 if(typeof props.onChange =='function'){
                     props.onChange(args);
-                } else if(this.props.onChange =='function'){
-                    this.props.onChange(args);
                 }
             }}
         />

package/src/components/Form/Fields/SelectTableData/Component.js

@@ -268,29 +268,29 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,isStructData,ge
         defaultValue = {foreignKeyColumnValue}
         dropdownActions = {dropdownActions}
         context = {context}
-        itemValue = {(p) => {
+        itemValue = {(p,...rest) => {
             if(typeof props.itemValue ==='function'){
-                return props.itemValue(p);
+                return props.itemValue(p,...rest);
             }
             return p.item[foreignKeyColumn];
         }}
-        renderItem = {(p) => {
+        renderItem = {(p,...rest) => {
             if(typeof props.renderItem ==='function'){
-                return props.renderItem(p);
+                return props.renderItem(p,...rest);
             }
             if(typeof props.renderText =='function'){
-                return props.renderText(p);
+                return props.renderText(p,...rest);
             }
-            return rItem(p);
+            return rItem(p,...rest);
         }}
-        renderText = {(p) => {
+        renderText = {(p,...rest) => {
             if(typeof props.renderText ==='function'){
-                return props.renderText(p);
+                return props.renderText(p,...rest);
             }
             if(typeof props.renderItem ==='function'){
-                return props.renderItem(p);
+                return props.renderItem(p,...rest);
             }
-            return rItem(p);
+            return rItem(p,...rest);
         }}
         onAdd = {(args)=>{
             onAddProps = defaultObj(isFunction(onAddProps)? onAddProps.call(context,{context,foreignKeyTable,dbName,props}) : onAddProps);

package/src/components/Form/Form.js

@@ -9,8 +9,6 @@ import { StyleSheet } from "react-native";
 import APP from "$capp/instance";
 import PropTypes from "prop-types";
 
-const defaultComponentNode = View
-
 /**** règles d'utilisation : 
     1. les forms doivent toujours avoir un nom : chaine de caractère unique pour l'application et non null
     2. tous les champs (Fields) doivent avoir un name et un formName
@@ -91,8 +89,10 @@ export default class FormComponent extends React.AppComponent {
         return fields[fieldName] || null;
     }
     render (){
+        if(isNonNullString(this.props.perm) && !Auth.isAllowedFromStr(this.props.perm)){
+            return null;
+        }
         let {
-            Component,
             onValidate,
             onNoValidate,
             onValidateField,
@@ -105,16 +105,11 @@ export default class FormComponent extends React.AppComponent {
             testID,
             ...rest
         } = this.props;
-        if(isNonNullString(perm) && !Auth.isAllowedFromStr(perm)){
-                return null;
-        }
-        rest = defaultObj(rest);
-        const ComponentNode = React.isComponent(Component) && Component || defaultComponentNode;
         testID = defaultStr(testID,"RN_FormComponent");
         return (<KeyboardAvoidingView testID={testID+"_KeyboardAvoidingView"}>
-            <ComponentNode  {...rest} testID={testID} style={[styles.container,rest.style]}>
+            <View  {...rest} testID={testID} style={[styles.container,rest.style]}>
                 {this.props.children}
-            </ComponentNode>
+            </View>
         </KeyboardAvoidingView>);
     }
 }

package/src/components/Form/FormData/FieldContent.js

@@ -5,7 +5,7 @@ import getComponentFromType from "./componentsTypes";
 import appConfig from "$capp/config";
 import Colors from "$theme/colors";
 
-const FieldContentComponent = React.forwardRef(({field,data,index,fields,formName,fieldProps,backgroundColor,primaryKey:customPrimaryKey,increment,fieldProp,archivable,disabled,windowWidth,responsive,responsiveProps,archived,...props},ref)=>{
+const FieldContentComponent = React.forwardRef(({field,data,index,fields,formName,onLoopField,fieldProps,backgroundColor,primaryKey:customPrimaryKey,increment,fieldProp,archivable,disabled,windowWidth,responsive,responsiveProps,archived,...props},ref)=>{
     if(field?.form === false) return null;
     fieldProp = defaultObj(fieldProp);
     const name = defaultStr(field.name,field.field,index);
@@ -31,28 +31,31 @@ const FieldContentComponent = React.forwardRef(({field,data,index,fields,formNam
     if(typeof rest.filter !=='function'){
         delete rest.filter;
     }
-    if(name){
-        rest.defaultValue = useDefaultValueFromData === false ? defaultValue : (name in data && data[name] !== undefined && data[name] !== null? data[name]: defaultValue);
-        if((type == 'selecttabledata' || type == 'datafile')){
-            rest._defaultValue = data[rest.name];
-        }
-    } else {
-        rest.defaultValue  = defaultValue;
-    }
-    if(rest.defaultValue === null){
-        rest.defaultValue = undefined;
-    }
-    // les champs de type date par défaut qui sont requis, auront comme valeur par défaut la date actuelle s'il ne sont pas définies
-    if(rest.autoSetDefaultValue !== false && (!rest.defaultValue && typeof rest.defaultValue !=='boolean' && typeof rest.defaultValue !=='number')){
-        if(isDate && rest.required === true ){
-            rest.defaultValue = new Date();
-        } else if(!isDate && isNonNullString(rest.appConfigDefaultValueKey)){
-            rest.defaultValue = appConfig.get(rest.appConfigDefaultValueKey);
-        }
-    }
     return React.useMemo(()=>{
         customResponsiveProps = defaultObj(customResponsiveProps);
+        if(name){
+            rest.defaultValue = useDefaultValueFromData === false ? defaultValue : (name in data && data[name] !== undefined && data[name] !== null? data[name]: defaultValue);
+            if((type == 'selecttabledata' || type == 'datafile')){
+                rest._defaultValue = data[rest.name];
+            }
+        } else {
+            rest.defaultValue  = defaultValue;
+        }
+        if(rest.defaultValue === null){
+            rest.defaultValue = undefined;
+        }
+        // les champs de type date par défaut qui sont requis, auront comme valeur par défaut la date actuelle s'il ne sont pas définies
+        if(rest.autoSetDefaultValue !== false && (!rest.defaultValue && typeof rest.defaultValue !=='boolean' && typeof rest.defaultValue !=='number')){
+            if(isDate && rest.required === true ){
+                rest.defaultValue = new Date();
+            } else if(!isDate && isNonNullString(rest.appConfigDefaultValueKey)){
+                rest.defaultValue = appConfig.get(rest.appConfigDefaultValueKey);
+            }
+        }
         const Component = getComponentFromType(jsType);
+        if(typeof onLoopField ==='function'){
+            onLoopField({...props,...fieldProp,formName,responsive,responsiveProps,...rest,type,jsType,primaryKey,name,isDate,index,disabled:disabled||archived,archivable})
+        }
         return <Component 
             {...props}
             data = {data} 
@@ -72,7 +75,7 @@ const FieldContentComponent = React.forwardRef(({field,data,index,fields,formNam
             responsive = {responsive}
             responsiveProps = {{...responsiveProps,...customResponsiveProps,style:[responsiveProps.style,customResponsiveProps.style]}}
         />
-    },[rest.defaultValue,type,jsType,defaultValue,rest,windowWidth,backgroundColor,isFilter,name,!!responsive]);
+    },[type,jsType,defaultValue,rest,windowWidth,backgroundColor,isFilter,name,!!responsive]);
 });
 
 FieldContentComponent.displayName = "FieldContentComponent";

package/src/components/Form/FormData/FieldsContent.js

@@ -3,19 +3,16 @@ import Divider from "$ecomponents/Divider";
 import {isObj,isNonNullString,defaultStr,defaultObj} from "$utils";
 import {flattenStyle,Colors} from "$theme";
 import FieldContent from "./FieldContent";
-import stableHash from "stable-hash";
 
-export default function FieldsContent({fields,formName,disabled,archived,archivable,fieldProps,primaryKeyFields,responsiveProps,responsive,style,data,windowWidth}){
+export default function FieldsContent({fields,formName,disabled,onLoopField,archived,archivable,fieldProps,primaryKeyFields,responsiveProps,isUpdate,responsive,style,data,windowWidth,...rest}){
+    if(!Object.size(fields,true)) return null;
     windowWidth = typeof windowWidth ==='number' && windowWidth > 100?windowWidth : undefined;
     primaryKeyFields = isObj(primaryKeyFields) ? primaryKeyFields :  Array.isArray(primaryKeyFields) ? primaryKeyFields: [];
     const isPArray = Array.isArray(primaryKeyFields);
     const backgroundColor = flattenStyle(style)?.backgroundColor;
-    const prevResponsive = React.usePrevious(responsive);
     return React.useMemo(()=>{
         const content = [];
         fieldProps = defaultObj(fieldProps);
-        console.log("rendering fields contens alla ",fieldProps,fields,data,responsive,prevResponsive);
-        //console.log("rendering form data ",formName,archived,backgroundColor,primaryKeyFields,responsive,responsiveProps)
         Object.map(fields,(field,index,i)=>{
             if(field === 'divider'){
                 content.push(<Divider key = {index} style={theme.styles.w100}/>)
@@ -27,6 +24,7 @@ export default function FieldsContent({fields,formName,disabled,archived,archiva
             content.push(<FieldContent
                 field = {field}
                 index = {index}
+                onLoopField = {onLoopField}
                 increment = {i}
                 archivable={archivable}
                 disabled = {disabled}
@@ -44,5 +42,5 @@ export default function FieldsContent({fields,formName,disabled,archived,archiva
             />)
         });
         return content;
-    },[formName,archived,backgroundColor,archivable,primaryKeyFields,isPArray,disabled,fields,responsiveProps,responsive])
+    },[formName,archived,backgroundColor,data,archivable,primaryKeyFields,isPArray,disabled,isUpdate,fields,responsiveProps,responsive])
 }

package/src/components/Form/FormData/FormData.js

@@ -1,8 +1,7 @@
 import {getAppBarActionsProps} from "./utils";
 import React, {Component as AppComponent} from "$react";
 import {isNonNullString,defaultStr,defaultNumber,defaultObj,extendObj,isObj,isFunction,defaultFunc,uniqid} from "$cutils";
-import {getForm,getFormField,Forms} from "../utils";
-import Divider from "$ecomponents/Divider";
+import {getForm,getFormField} from "../utils";
 import Surface from "$ecomponents/Surface";
 import Form from "../Form";
 import theme,{flattenStyle} from "$theme";
@@ -62,6 +61,9 @@ export default class FormDataComponent extends AppComponent{
     onSave(args){
         return true;
     }
+    reset(args){
+        return null;
+    }
     getAppBarActionsProps(props){
         let {data,onCancel,perm,beforeSaveArgumentsMutator,beforeSave,actions,saveDataMutator,...rest} = (defaultObj(props,this.props));
         const onSave = typeof props.onSave ==='function'? props.onSave : this.props.onSave ;
@@ -179,26 +181,6 @@ export default class FormDataComponent extends AppComponent{
     isArchivable (){
         return false;
     }
-    getFieldsContent = (formProps)=>{
-        formProps = defaultObj(formProps);
-        this.formDataPrimaryKeyFields = {};
-        const data = isObj(formProps.data) ? formProps.data : typeof this.props.data =='object' && this.props.data ? this.props.data : {};
-        return <FieldsContent
-            {...formProps}
-            fields = {defaultObj(formProps.fields,this.props.fields)}
-            fieldProps = {defaultObj(formProps.fieldProps,this.props.fieldProps)}
-            style = {flattenStyle(formProps.style)}
-            data = {data}
-            responsive = {typeof formProps.responsive =='boolean' ? formProps.responsive : this.props.responsive !== false ? true : false}
-            responsiveProps = {extendObj({},this.props.responsiveProps,formProps.responsiveProps)}
-            windowWidth = {defaultNumber(formProps.windowWidth,this.props.windowWidth) || undefined}
-            primaryKeyFields = {this.formDataPrimaryKeyFields}
-            formName = {this.getFormName()}
-            disabled = {this.props.disabled}
-            archived = {this.props.archived || data?.archived && true || false}
-            archivable = {this.props.archivable || this.isArchivable()}
-        />
-    }
     getActions (){
         return renderActions(this.getAppBarActionsProps());
     }
@@ -301,14 +283,42 @@ export default class FormDataComponent extends AppComponent{
         containerProps = Object.assign({},containerProps);
         const cStyle = flattenStyle([styles.container,{backgroundColor:theme.surfaceBackgroundColor},containerProps.style]);
         formProps.style = flattenStyle([{backgroundColor:cStyle.backgroundColor},formProps.style]);
-        formProps.fields = defaultObj(formProps.fields,fields);
-        formProps.windowWidth = defaultNumber(formProps.windowWidth,windowWidth) || undefined;
+        data = isObj(formProps.data) ? formProps.data : isObj(data) ? data : {};
+        ///getting fields content
+        this.formDataPrimaryKeyFields = defaultObj(this.primaryKeyFields);
         const content = <Form 
             {...formProps} 
+            windowWidth = {defaultNumber(formProps.windowWidth,windowWidth) || undefined}
             name={this.getFormName()}
             onKeyEvent = {this.onKeyEvent.bind(this)}
+            data = {data}
         >
-            {this.getFieldsContent(formProps)}
+            <FieldsContent
+                {...formProps}
+                fields = {defaultObj(formProps.fields,fields)}
+                fieldProps = {defaultObj(formProps.fieldProps,this.props.fieldProps)}
+                style = {flattenStyle(formProps.style)}
+                data = {data}
+                responsive = {typeof formProps.responsive =='boolean' ? formProps.responsive : this.props.responsive !== false ? true : false}
+                responsiveProps = {extendObj({},this.props.responsiveProps,formProps.responsiveProps)}
+                windowWidth = {defaultNumber(formProps.windowWidth,this.props.windowWidth) || undefined}
+                primaryKeyFields = {this.formDataPrimaryKeyFields}
+                formName = {this.getFormName()}
+                disabled = {this.props.disabled}
+                archived = {this.props.archived || data?.archived && true || false}
+                archivable = {this.props.archivable || this.isArchivable()}
+                onLoopField={(opts)=>{
+                    this.formDataPrimaryKeyFields = defaultObj(this.formDataPrimaryKeyFields);
+                    if(opts.primaryKey){
+                        this.formDataPrimaryKeyFields[opts.name] = true;
+                    } else {
+                        delete this.formDataPrimaryKeyFields[opts.name];
+                    }
+                    if(typeof this.props.onLoopField ==='function'){
+                        this.props.onLoopField(opts)
+                    }
+                }}
+            />
         </Form>
         if(this.handleCustomRender()){
             return this._render({
@@ -318,7 +328,7 @@ export default class FormDataComponent extends AppComponent{
             });
         }
         if(typeof children ==='function'){
-            this._render(children({
+            return this._render(children({
                 header,
                 context : this,
                 content,
@@ -351,7 +361,8 @@ FormDataComponent.propTypes = {
         PropTypes.string,
         PropTypes.number,
         PropTypes.node,
-    ])
+    ]),
+    onLoopField : PropTypes.func,//la fonction appelée lorsqu'on boucle sur un champ du form data
 }
 
 const styles = {

package/src/components/KeyboardAvoidingView/index.ios.js

@@ -0,0 +1,20 @@
+import {KeyboardAvoidingView,StyleSheet} from 'react-native';
+
+export default function KeyboardAvoidingViewComponent({ children,...rest }){
+    return (
+      <KeyboardAvoidingView
+        behavior="padding"
+        keyboardVerticalOffset={80}
+        {...rest}
+        style = {[styles.wrapper,rest.style]}
+      >
+        {children}
+      </KeyboardAvoidingView>
+    );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+  },
+});

package/src/components/KeyboardAvoidingView/index.js

@@ -1,21 +1,4 @@
-import {isIos} from "$cplatform";
-import {KeyboardAvoidingView,StyleSheet} from 'react-native';
 
-export default function KeyboardAvoidingViewComponent({ children,...rest }){
-    return isIos() ? (
-      <KeyboardAvoidingView
-        style={styles.wrapper}
-        behavior="padding"
-        keyboardVerticalOffset={80}
-        {...rest}
-      >
-        {children}
-      </KeyboardAvoidingView>
-    ) : children;
-};
-
-const styles = StyleSheet.create({
-  wrapper: {
-    flex: 1,
-  },
-});
+export default function KeyboardAvoidingViewComponent({ children}){
+  return children;
+}

package/src/layouts/ProfilAvatar/index.js

@@ -7,7 +7,6 @@ import { screenName } from "$escreens/Auth/utils";
 import Image from "$ecomponents/Image";
 import { StyleSheet,View,Pressable} from "react-native";
 import avatarProps from "$eauth/avatarProps";
-import Button from "$ecomponents/Button";
 import Label from "$ecomponents/Label";
 import Icon from "$ecomponents/Icon";
 import {navigate} from "$cnavigation";
@@ -17,6 +16,7 @@ import appConfig from "$capp/config";
 import Preloader from "$preloader";
 import {defaultNumber} from "$cutils";
 import Tooltip from "$ecomponents/Tooltip";
+import {isMultiUsersAllowed} from "$cauth/utils/session";
 const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps:customChevronIconProps,size,withLabel,...props},ref)=>{
     let u = defaultObj(Auth.getLoggedUser());
     const deviceNameRef = React.useRef(null);
@@ -77,7 +77,7 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
                     });
                 }
             },
-            {
+            isMultiUsersAllowed() && {
                 label : i18n.lang("logout",'Déconnexion'),
                 icon : "logout",
                 onPress : (a)=>{

package/src/layouts/Screen/FormData/FormData.js

@@ -77,7 +77,7 @@ export default class FormDataLayout extends FormDataActions {
         const appBarProps = this.getAppBarActionsProps(props);
         appBarProps.elevation = typeof appBarProps.elevation =='number'? appBarProps.elevation : 5;
         return <ScreenContainer testID={defaultStr(testID,'RN_FormDataLayout')} {...props} appBarProps={appBarProps}>
-                {this.wrapRenderingContent(content)}
+            {this.wrapRenderingContent(content)}
         </ScreenContainer>
     }
 }

package/src/layouts/Screen/Screen.js

@@ -3,19 +3,34 @@
 // license that can be found in the LICENSE file.
 
 import Container from "$cauth/Container";
-import ScreenWithOrWithoutAuthContainer from "./ScreenWithOrWithoutAuthContainer";
+import ScreenWithoutAuthContainer from "./ScreenWithoutAuthContainer";
 import ProfilAvatar from "$elayouts/ProfilAvatar";
+import {defaultObj,defaultBool,defaultArray,defaultStr} from "$cutils";
+import View from "$components/View";
+import theme from "$theme";
 
-export default function MainScreenComponent(props){
-    return <ScreenWithOrWithoutAuthContainer
-      {...props}
-      renderProfilAvatar = {(props)=>{
-          return <ProfilAvatar withLabel = {false}  {...props} />
-      }}
-      renderChildren = {({containerProps,children})=>{
-          return <Container {...containerProps}>
-            {children}
-          </Container>
-      }}
-    />
+export default function MainScreenComponent({profilAvatarProps,withDrawer,allowDrawer,profilAvatarContainerProps,withProfilAvatarOnAppBar:cWithPorilAvatarOnAppbar,authProps,authRequired,...props}){
+    authProps = Object.assign({},authProps),
+    profilAvatarContainerProps = defaultObj(profilAvatarContainerProps);
+    profilAvatarProps = defaultObj(profilAvatarProps);
+    authRequired = defaultBool(authProps.required,authRequired,false);
+    withDrawer = typeof withDrawer =='boolean'? withDrawer : authRequired;
+    if(allowDrawer === false){
+       withDrawer = false;
+    }
+    const withProfilAvatarOnAppBar = cWithPorilAvatarOnAppbar !== false && withDrawer && !theme.showProfilAvatarOnDrawer ? true : false;
+    if(authRequired === false){
+      props.withFab = false;
+    }
+    return <Container authProps={authProps} required={authRequired}>
+        <ScreenWithoutAuthContainer
+          {...props}
+          withDrawer={withDrawer}
+          allowDrawer={allowDrawer}
+          authRequired = {authRequired}
+          right = {withProfilAvatarOnAppBar && <View testID={testID+"_ProfilAvatar_Container"}  {...profilAvatarContainerProps} style={[profilAvatarContainerProps.style,styles.profilAvatarContainer]} >
+            {<ProfilAvatar withLabel={false}  {...profilAvatarProps}/>}
+         </View> || null}
+      />
+    </Container>
 }

package/src/layouts/Screen/ScreenWithoutAuthContainer.js

@@ -1,17 +1,177 @@
-// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
+import React from '$react';
+import {StyleSheet} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import PropTypes from "prop-types";
+import {defaultObj,defaultStr,defaultNumber,defaultBool,uniqid} from "$cutils";
+import View from "$ecomponents/View";
+import { useNavigation} from '$cnavigation';
+import Fab from "$layouts/Fab";
+import APP from "$capp";
+import AppBar,{createAppBarRef} from "$elayouts/AppBar";
+import Portal from "$ecomponents/Portal";
+import {Portal as RNPortal} from "react-native-paper";
+import theme,{StyleProp} from "$theme";
+import StatusBar from "$ecomponents/StatusBar";
+import ScrollView from "$ecomponents/ScrollView";
 
-/*** 
- *le fait que l'utilisateur soit connecté où pas
- */
+const getDefaultTitle = (nTitle,returnStr)=>{
+  let titleStr = React.getTextContent(nTitle);
+  if(!titleStr){
+      titleStr = APP.getName();
+  } 
+  const dbLabel = "";
+  if(!titleStr.toLowerCase().contains(dbLabel.toLowerCase())){
+      titleStr += " ["+dbLabel+"]";
+  }
+  if(returnStr) return titleStr;
+  return typeof nTitle =='string' ? titleStr : nTitle;
+}
 
-import ScreenWithOrWithoutAuthContainer from "./ScreenWithOrWithoutAuthContainer";
-export default function ScreenWithoutAuthContainer(props){
-    return <ScreenWithOrWithoutAuthContainer
-      {...props}
-      renderChildren = {({children})=>{
-          return children
-      }}
-    />
+export default function MainScreenScreenWithoutAuthContainer(props) {
+  let {
+    children,
+    withScrollView = false,
+    withStatusBar = true,
+    style,
+    contentContainerStyle,
+    options,
+    backAction,
+    appBarProps,
+    elevation,
+    withFab,
+    appBar,
+    authRequired,
+    withDrawer,
+    allowDrawer,
+    title,
+    subtitle,
+    modal,
+    fabProps,
+    screenName,
+    containerProps,
+    testID,
+    right,
+    ...rest
+  } = props;
+  const insets = useSafeAreaInsets();
+  testID = defaultStr(testID,"RN_MainScreenScreenWithoutAuthContainer")
+  containerProps = defaultObj(containerProps);
+  const backgroundColor = theme.colors.background;
+  const containerStyle = [
+    styles.container,
+    {
+      backgroundColor,
+      paddingBottom: insets.bottom,
+      paddingLeft: insets.left,
+      paddingRight: insets.right,
+    },
+  ];
+  options = defaultObj(options);
+  appBarProps = defaultObj(appBarProps)
+  title = defaultVal(title,appBarProps.title);
+  subtitle = defaultVal(subtitle,appBarProps.subtitle);
+  const appBarRef = createAppBarRef();
+  const navigation = useNavigation();
+  fabProps = defaultObj(fabProps);
+  withDrawer = typeof withDrawer =='boolean'? withDrawer : authRequired;
+  if(allowDrawer === false){
+     withDrawer = false;
+  }
+  
+  
+  React.useEffect(() => {
+    if((title||subtitle) && navigation && navigation.setOptions){
+      const appName = APP.getName().toUpperCase();
+      subtitle = React.getTextContent(subtitle);
+      let screenTitle = getDefaultTitle(title,true);
+      if(subtitle){
+          screenTitle += " | "+subtitle;
+      }
+      if(!screenTitle.toUpperCase().contains(appName)){
+          screenTitle+=" | "+appName;
+      }
+      navigation.setOptions({
+        ...options,
+        appBarProps:{...options.appBarProps,...appBarProps,title,subtitle},
+        subtitle :subtitle,
+        title : screenTitle,
+      });
+    }
+  }, [title,subtitle]);
+  const fab = withFab ? <Fab 
+        {...fabProps}
+        screenName={screenName}
+  />  : null;
+  const Wrapper = React.useMemo(()=>modal ? PortalCP : React.Fragment,[modal]);
+  const WrapperProps = modal? {screenName} : {};
+  const portalId = uniqid("screeen-container-"+screenName);
+  return <Wrapper {...WrapperProps}>
+      <View testID={testID} id={portalId} {...containerProps}   style={[styles.container,{backgroundColor},modal && styles.modal,containerProps.style]}>
+          {withStatusBar !== false ? <StatusBar/> : null}
+          {appBar === false ? null : React.isValidElement(appBar)? state.AppBar :  <AppBar 
+              testID={testID+'_AppBar'} {...appBarProps} 
+              backAction = {defaultVal(appBarProps.backAction,backAction)} 
+              elevation={defaultNumber(appBarProps.elevation,elevation)} 
+              withDrawer={withDrawer} options={options} 
+              ref={appBarRef} title={title} 
+              subtitle={subtitle}
+              right = {right}
+          />}
+          {withScrollView !== false ? (
+            <ScrollView
+              testID = {testID+'_ScreenContentScrollView'}
+              {...rest}
+              contentContainerStyle={[contentContainerStyle]}
+              style={[containerStyle,styles.container, style]}
+            >
+              {children}
+              {fab}
+            </ScrollView>
+          ) : (
+            <View  testID={testID+'_ScreenContent'} {...rest} style={[containerStyle,styles.wrapper,styles.container, style]}>
+              {children}
+              {fab}
+            </View>
+          )}
+      </View>
+  </Wrapper>
+}
+
+const PortalCP = ({children})=>{
+  return <RNPortal>
+    {children}
+  </RNPortal>
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  wrapper : {
+    flexDirection:'column',
+    /*flex : 1,
+    flexGrow : 1,
+    alignItems:'center'*/
+  },
+  modal : {
+    ...StyleSheet.absoluteFillObject,
+    top : 0,
+    left:0,
+    flex:1,
+    width : '100%',
+    height : '100%'
+  }
+});
+
+MainScreenScreenWithoutAuthContainer.propTypes = {
+  children: PropTypes.any,
+  withScrollView : PropTypes.bool,
+  style:StyleProp,
+  appBarProps : PropTypes.object,
+  elevation : PropTypes.number,
+  //appBar : PropTypes.bool,
+  contentContainerStyle : StyleProp,
+  withFab : PropTypes.bool,
+  withDrawer : PropTypes.bool,//si l'on doit afficher un drawer dans le contenu
+  fabProps : PropTypes.object,
 }

package/src/layouts/Screen/TableData.js

@@ -559,8 +559,9 @@ export default class TableDataScreenComponent extends FormDataScreen{
         }
         return;
     }
-    reset (args,cb){
+    reset (args,...rest){
         if(!this._isMounted()) return;
+        super.reset(args,...rest)
         clearTimeout(this.timeoutCallback);
         this.showPreloader();
         this.timeoutCallback = setTimeout(()=>{

package/src/layouts/Screen/ScreenWithOrWithoutAuthContainer.js

@@ -1,196 +0,0 @@
-import React from '$react';
-import {StyleSheet} from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import PropTypes from "prop-types";
-import {defaultObj,defaultStr,defaultNumber,defaultBool,uniqid} from "$cutils";
-import View from "$ecomponents/View";
-import { useNavigation} from '$cnavigation';
-import Fab from "$layouts/Fab";
-import APP from "$capp";
-import AppBar,{createAppBarRef} from "$elayouts/AppBar";
-import Portal from "$ecomponents/Portal";
-import { FullWindowOverlay } from 'react-native-screens';
-import theme,{StyleProp} from "$theme";
-import StatusBar from "$ecomponents/StatusBar";
-import ScrollView from "$ecomponents/ScrollView";
-const getDefaultTitle = (nTitle,returnStr)=>{
-  let titleStr = React.getTextContent(nTitle);
-  if(!titleStr){
-      titleStr = APP.getName();
-  } 
-  const dbLabel = "";
-  if(!titleStr.toLowerCase().contains(dbLabel.toLowerCase())){
-      titleStr += " ["+dbLabel+"]";
-  }
-  if(returnStr) return titleStr;
-  return typeof nTitle =='string' ? titleStr : nTitle;
-}
-
-export default function MainScreenScreenWithOrWithoutAuthContainer(props) {
-  let {
-    children,
-    withScrollView = false,
-    withStatusBar = true,
-    style,
-    contentContainerStyle,
-    options,
-    backAction,
-    appBarProps,
-    authProps,
-    elevation,
-    withFab,
-    appBar,
-    authRequired,
-    withDrawer,
-    allowDrawer,
-    title,
-    subtitle,
-    modal,
-    fabProps,
-    screenName,
-    containerProps,
-    testID,
-    profilAvatarProps,
-    profilAvatarContainerProps,
-    withProfilAvatarOnAppBar:cWithPorilAvatarOnAppbar,
-    renderChildren,
-    renderProfilAvatar,
-    ...rest
-  } = props;
-  const insets = useSafeAreaInsets();
-  testID = defaultStr(testID,"RN_MainScreenScreenWithOrWithoutAuthContainer")
-  containerProps = defaultObj(containerProps);
-  profilAvatarContainerProps = defaultObj(profilAvatarContainerProps);
-  profilAvatarProps = defaultObj(profilAvatarProps);
-  const backgroundColor = theme.colors.background;
-  const containerStyle = [
-    styles.container,
-    {
-      backgroundColor,
-      paddingBottom: insets.bottom,
-      paddingLeft: insets.left,
-      paddingRight: insets.right,
-    },
-  ];
-  options = defaultObj(options);
-  appBarProps = defaultObj(appBarProps)
-  title = defaultVal(title,appBarProps.title);
-  subtitle = defaultVal(subtitle,appBarProps.subtitle);
-  const appBarRef = createAppBarRef();
-  const navigation = useNavigation();
-  authProps = Object.assign({},authProps),
-  fabProps = defaultObj(fabProps);
-  authRequired = defaultBool(authProps.required,authRequired,false);
-  withDrawer = typeof withDrawer =='boolean'? withDrawer : authRequired;
-  if(allowDrawer === false){
-     withDrawer = false;
-  }
-  if(authRequired === false){
-    withFab = false;
-  }
-  const withProfilAvatarOnAppBar = cWithPorilAvatarOnAppbar !== false && withDrawer && !theme.showProfilAvatarOnDrawer ? true : false;
-  React.useEffect(() => {
-    if((title||subtitle) && navigation && navigation.setOptions){
-      const appName = APP.getName().toUpperCase();
-      subtitle = React.getTextContent(subtitle);
-      let screenTitle = getDefaultTitle(title,true);
-      if(subtitle){
-          screenTitle += " | "+subtitle;
-      }
-      if(!screenTitle.toUpperCase().contains(appName)){
-          screenTitle+=" | "+appName;
-      }
-      navigation.setOptions({
-        ...options,
-        appBarProps:{...options.appBarProps,...appBarProps,title,subtitle},
-        subtitle :subtitle,
-        title : screenTitle,
-      });
-    }
-  }, [title,subtitle]);
-  const Wrapper =  modal ? PortalCP : React.Fragment;
-  const WrapperProps = modal? {screenName} : {};
-  const fab = withFab ? <Fab 
-      {...fabProps}
-      screenName={screenName}
-  />  : null;
-  const profilAvatar = typeof renderProfilAvatar =='function'? renderProfilAvatar(profilAvatarProps) : null;
-  const portalId = uniqid("screeen-container-"+screenName);
-  return <Wrapper {...WrapperProps}>
-          {renderChildren({
-            containerProps : {
-              ...authProps,
-              required : authRequired,
-            },
-              children : <View testID={testID} id={portalId} {...containerProps}   style={[styles.container,{backgroundColor},modal && styles.modal,containerProps.style]}>
-                  {withStatusBar !== false ? <StatusBar/> : null}
-                  {appBar === false ? null : React.isValidElement(appBar)? state.AppBar :  <AppBar 
-                      testID={testID+'_AppBar'} {...appBarProps} 
-                      backAction = {defaultVal(appBarProps.backAction,backAction)} 
-                      elevation={defaultNumber(appBarProps.elevation,elevation)} 
-                      withDrawer={withDrawer} options={options} 
-                      ref={appBarRef} title={title} 
-                      subtitle={subtitle}
-                      right = {withProfilAvatarOnAppBar && <View testID={testID+"_ProfilAvatar_Container"}  {...profilAvatarContainerProps} style={[profilAvatarContainerProps.style,styles.profilAvatarContainer]} >
-                        {React.isValidElement(profilAvatar) && profilAvatar || null}
-                    </View> || null}
-                  />}
-                  {withScrollView !== false ? (
-                    <ScrollView
-                      testID = {testID+'_ScreenContentScrollView'}
-                      {...rest}
-                      contentContainerStyle={[contentContainerStyle]}
-                      style={[containerStyle,styles.container, style]}
-                    >
-                      {children}
-                      {fab}
-                    </ScrollView>
-                  ) : (
-                    <View  testID={testID+'_ScreenContent'} {...rest} style={[containerStyle,styles.wrapper,styles.container, style]}>
-                      {children}
-                      {fab}
-                    </View>
-                  )}
-              </View>,
-            })}
-      </Wrapper>
-}
-
-const PortalCP = ({children,screenName})=>{
-  return <Portal>
-    {children}
-  </Portal>
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  wrapper : {
-    flexDirection:'column',
-    /*flex : 1,
-    flexGrow : 1,
-    alignItems:'center'*/
-  },
-  modal : {
-    ...StyleSheet.absoluteFillObject,
-    top : 0,
-    left:0,
-    flex:1,
-    width : '100%',
-    height : '100%'
-  }
-});
-
-MainScreenScreenWithOrWithoutAuthContainer.propTypes = {
-  children: PropTypes.any,
-  withScrollView : PropTypes.bool,
-  style:StyleProp,
-  appBarProps : PropTypes.object,
-  elevation : PropTypes.number,
-  //appBar : PropTypes.bool,
-  contentContainerStyle : StyleProp,
-  withFab : PropTypes.bool,
-  withDrawer : PropTypes.bool,//si l'on doit afficher un drawer dans le contenu
-  fabProps : PropTypes.object,
-}