@fto-consult/expo-ui 5.7.11 → 5.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "5.7.11",
+  "version": "5.8.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

package/src/App.js

@@ -5,23 +5,13 @@ import {defaultObj} from "$cutils";
 import  {updateTheme,defaultTheme} from "$theme";
 import {Provider as PaperProvider } from 'react-native-paper';
 import Index from './index';
-import {Portal } from 'react-native-paper';
-import {PreloaderProvider} from "$epreloader";
-import DropdownAlert from '$ecomponents/Dialog/DropdownAlert';
-import notify, {notificationRef} from "$notify";
-import BottomSheetProvider from "$ecomponents/BottomSheet/Provider";
-import DialogProvider from "$ecomponents/Dialog/Provider";
-import { DialogProvider as FormDataDialogProvider } from '$eform/FormData';
+import notify  from "$notify";
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { PreferencesContext } from './Preferences';
 import {AuthProvider} from '$cauth';
-import {PortalProvider } from '$ecomponents/Portal';
 import ErrorBoundary from "$ecomponents/ErrorBoundary";
-import ErrorBoundaryProvider from "$ecomponents/ErrorBoundary/Provider";
 import {GestureHandlerRootView} from "react-native-gesture-handler";
 import StatusBar from "$ecomponents/StatusBar";
-import SimpleSelect from '$ecomponents/SimpleSelect';
-import {Provider as AlertProvider} from '$ecomponents/Dialog/confirm/Alert';
 import APP from "$app";
 import FontIcon from "$ecomponents/Icon/Font"
 import {isMobileNative} from "$cplatform";
@@ -40,7 +30,9 @@ Object.map(Utils,(v,i)=>{
      window[i] = v;
   }
 });
-export default function getIndex({onMount,onUnmount,swrConfig,onRender,preferences:appPreferences,...rest}){
+export default function getIndex({onMount,onUnmount,swrConfig,render,onRender,preferences:appPreferences,...rest}){
+  const child = <Index {...rest} theme={theme}/>;
+  const content = typeof render == 'function'? render({children:child}) : child;
   const isScreenFocusedRef = React.useRef(true);
     ///garde pour chaque écran sa date de dernière activité
     const screensRef = React.useRef({});//la liste des écrans actifs
@@ -178,23 +170,12 @@ export default function getIndex({onMount,onUnmount,swrConfig,onRender,preferenc
             >
               <SafeAreaProvider>
                 <AuthProvider>
-                    <PortalProvider>
-                      <Portal.Host>
-                          <ErrorBoundary>
-                                <StatusBar/>
-                                <PreferencesContext.Provider value={preferences}>
-                                  <DropdownAlert ref={notificationRef}/> 
-                                  <PreloaderProvider/>   
-                                  <DialogProvider responsive/>
-                                  <AlertProvider SimpleSelect={SimpleSelect}/>
-                                  <FormDataDialogProvider/>  
-                                  {<Index {...rest} theme={theme}/>}
-                                  <ErrorBoundaryProvider/>
-                                  <BottomSheetProvider/>
-                                </PreferencesContext.Provider>  
-                          </ErrorBoundary>
-                      </Portal.Host>
-                    </PortalProvider>
+                    <ErrorBoundary>
+                      <StatusBar/>
+                      <PreferencesContext.Provider value={preferences}>
+                        {React.isValidElement(content) && content || child}
+                      </PreferencesContext.Provider>  
+                    </ErrorBoundary>
                   </AuthProvider>
               </SafeAreaProvider>
             </PaperProvider>

package/src/components/Datagrid/Common/Common.js

@@ -2459,6 +2459,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 render,
                 readOnly,
                 disabled,
+                editable,
                 visible,
                 defaultValue,
                 id,
@@ -2469,7 +2470,7 @@ export default class CommonDatagridComponent extends AppComponent {
             } = header;
             restCol = Object.clone(defaultObj(restCol));
             let colFilter = defaultVal(restCol.filter,true);
-            field = header.field = defaultStr(header.field,field,headerIndex);
+            field = header.field = restCol.field = defaultStr(header.field,field,headerIndex);
             delete restCol.filter;
             
             const type = defaultStr(header.jsType,header.type,"text").toLowerCase();
@@ -2617,14 +2618,14 @@ export default class CommonDatagridComponent extends AppComponent {
                     this.sectionListColumnsSize.current++;
                 }
                 const mItem = {
-                    ...header,
+                    ...restCol,
                     field,
                     type,
                     onPress : ()=>{
                         this.toggleColumnInSectionList(field);
                         return false;
                     },
-                    title : title,
+                    title,
                     icon : isInSectionListHeader?CHECKED_ICON_NAME : null,
                 };
                 if(this.isSectionListColumnConfigurable(mItem)){

package/src/components/Drawer/index.js

@@ -35,8 +35,10 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
       permanentToggleIcon,minimizedToggleIcon,temporaryToggleIcon,withMinimizedIcon,
       isItemActive,onPageResize,navigationViewRef,
       children,
+      testID,
       drawerType} = props;
     sessionName = defaultStr(sessionName);
+    testID = defaultStr(testID,"RN_DrawerComponent")
     const sessionRef = React.useRef({});
     const session = React.useMemo(()=>{
         if(sessionName){
@@ -251,8 +253,9 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
             }
             return false;
           },getState:getDrawerState,getDrawerRef}}>
-          <View style={styles.container}>
+          <View style={styles.container} testID={`${testID}_Container`}>
               <DrawerLayout
+                  testID = {`${testID}_DrawerLayout`}
                   {...restP}
                   permanent = {isPermanent}
                   onDrawerSlide={onDrawerSlide}
@@ -339,7 +342,7 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
                     {paddingBottom:30},
                     contentContainerStyle
                   ]
-                }>
+            }>  
               {children}
             </DrawerLayout>
         </View>

package/src/components/Dropdown/index.js

@@ -991,7 +991,7 @@ class DropdownComponent extends AppComponent {
                     {...restProps}
                     testID = {testID+"_ModalComponent"}
                     withScrollView = {false}
-                    visible={visible && canHandle ? true : false}
+                    visible={visible}
                     onDismiss={this.hide.bind(this)}
                     contentStyle = {[{paddingVertical:0},restProps.contentStyle]}
                     anchor={anchor}

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

@@ -21,6 +21,9 @@ import appConfig from "$appConfig";
  */
 const TableDataSelectField = React.forwardRef(({foreignKeyColumn,bindUpsert2RemoveEvents,onAdd,showAdd:customShowAdd,canShowAdd,foreignKeyTable,fetchItemsPath,foreignKeyLabel,foreignKeyLabelIndex,dropdownActions,fields,fetchItems:customFetchItem,convertFiltersToSQL,mutateFetchedItems,getForeignKeyTable,onFetchItems,isFilter,isUpdate,isDocEditing,items,onAddProps,fetchOptions,...props},ref)=>{
     props.data = defaultObj(props.data);
+    if(!foreignKeyColumn && isNonNullString(props.field)){
+        foreignKeyColumn = props.field;
+    }
     if(isNonNullString(foreignKeyColumn)){
         foreignKeyColumn = foreignKeyColumn.trim();
     }
@@ -34,7 +37,7 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,bindUpsert2Remo
     fetchItemsPath = defaultStr(fetchItemsPath).trim();
     
     if(!fetchItemsPath && (!isObj(fKeyTable) || !(defaultStr(fKeyTable.tableName,fKeyTable.table)))){
-        console.error("type de données invalide pour la foreignKeyTable ",fKeyTable," composant SelectTableData",foreignKeyColumn,foreignKeyTable,props);
+        console.error("type de données invalide pour la foreignKeyTable ",foreignKeyTable," label : ",foreignKeyLabel,fKeyTable," composant SelectTableData",foreignKeyColumn,foreignKeyTable,props);
         return null;
     }
     fKeyTable = defaultObj(fKeyTable);
@@ -280,13 +283,12 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,bindUpsert2Remo
             }
             return rItem(p);
         }}
-        hideOnAdd
         onAdd = {(args)=>{
             onAddProps = defaultObj(isFunction(onAddProps)? onAddProps.call(context,{context,foreignKeyTable,dbName,props}) : onAddProps);
             if(typeof onAdd =='function'){
                 return onAdd({...args,...onAddProps});
             }
-            return navigateToTableData({...onAddProps,foreignKeyTable,table:foreignKeyTable,foreignKeyColumn,tableName : foreignKeyTable,...args})
+            return navigateToTableData(foreignKeyTable,{routeParams:{...onAddProps,foreignKeyTable,table:foreignKeyTable,foreignKeyColumn,tableName : foreignKeyTable}});
         }}
     />
 });

package/src/components/SplashScreen/index.js

@@ -7,6 +7,7 @@ import View from "$ecomponents/View";
 import {isNativeMobile} from "$cplatform";
 import {defaultDecimal} from "$cutils";
 import {LogoProgress} from "$ecomponents/Logo";
+import {defaultStr} from "$cutils";
 import styles, {
   _solidBackground,
   _staticBackground,
@@ -72,9 +73,11 @@ class AnimatedSplash extends React.Component {
       backgroundColor,
       imageBackgroundSource,
       imageBackgroundResizeMode,
+      testID,
       disableAppScale,
       disableImageBackgroundAnimation,
     } = this.props
+    testID = defaultStr(testID,"RN_SplashscreenComponent")
     logoWidth = defaultDecimal(logoWidth,150);
     logoHeight = defaultDecimal(logoHeight,250);
     const opacityClearToVisible = {
@@ -127,12 +130,13 @@ class AnimatedSplash extends React.Component {
     }
     
     return (
-      <View style={[styles.container]}>
-        {!animationDone && <View style={StyleSheet.absoluteFill} />}
+      <View style={[styles.container]} testID={testID} nativeID={testID}>
+        {!animationDone && <View style={StyleSheet.absoluteFill} testID={testID+"_Animation"}/>}
         <View style={styles.containerGlue}>
           {!animationDone && (
             <Animated.View
               style={_staticBackground(logoOpacity, backgroundColor)}
+              testID={testID+"_AnimationDone"}
             />
           )}
           {(animationDone || isNative) && <Component style={[!disableAppScale && appScale, opacityClearToVisible, styles.flex]}>
@@ -140,6 +144,7 @@ class AnimatedSplash extends React.Component {
           </Component>}
           {!animationDone && (
             <Animated.Image
+              testID={testID+"AnimateImage"}
               resizeMode={imageBackgroundResizeMode || "cover"}
               source={imageBackgroundSource}
               style={[disableImageBackgroundAnimation && _staticBackground(
@@ -153,9 +158,10 @@ class AnimatedSplash extends React.Component {
             />
           )}
           {!animationDone && (
-            <View style={[StyleSheet.absoluteFill, styles.logoStyle]}>
+            <View testID={testID+"_LogoContainer"} style={[StyleSheet.absoluteFill, styles.logoStyle]}>
               {(
                 <Animated.View
+                  testID={testID+"_Logo"}
                   style={_dynamicCustomComponentStyle(
                         logoScale,
                         logoOpacity,

package/src/index.js

@@ -13,7 +13,6 @@ import {set as setSession,get as getSession} from "$session";
 import { showConfirm } from "$ecomponents/Dialog";
 import {close as closePreloader, isVisible as isPreloaderVisible} from "$epreloader";
 import SplashScreen from "$ecomponents/SplashScreen";
-import {notify} from "$ecomponents/Dialog";
 import {decycle} from "$cutils/json";
 import init from "$capp/init";
 import { setIsInitialized} from "$capp/utils";
@@ -21,6 +20,17 @@ import {isObj,isNonNullString,isPromise,defaultObj,defaultStr} from "$cutils";
 import {loadFonts} from "$ecomponents/Icon/Font";
 import appConfig from "$capp/config";
 import Preloader from "$preloader";
+import {PreloaderProvider} from "$epreloader";
+import BottomSheetProvider from "$ecomponents/BottomSheet/Provider";
+import DialogProvider from "$ecomponents/Dialog/Provider";
+import SimpleSelect from '$ecomponents/SimpleSelect';
+import {Provider as AlertProvider} from '$ecomponents/Dialog/confirm/Alert';
+import { DialogProvider as FormDataDialogProvider } from '$eform/FormData';
+import {Portal } from 'react-native-paper';
+import {PortalProvider,PortalHost } from '$ecomponents/Portal';
+import ErrorBoundaryProvider from "$ecomponents/ErrorBoundary/Provider";
+import notify, {notificationRef} from "$notify";
+import DropdownAlert from '$ecomponents/Dialog/DropdownAlert';
 
 let MAX_BACK_COUNT = 1;
 let countBack = 0;
@@ -219,14 +229,25 @@ function App({init:initApp,initialRouteName:appInitialRouteName,getStartedRouteN
           }
         }
       >
-          <Navigation
-            initialRouteName = {defaultStr(hasGetStarted ? appInitialRouteName : getStartedRouteName,"Home")}
-            state = {state}
-            hasGetStarted = {hasGetStarted}
-            onGetStart = {(e)=>{
-              setState({...state,hasGetStarted:true})
-            }}
-          />
+          <PortalProvider>
+            <Portal.Host>
+              <PreloaderProvider/>   
+              <DialogProvider responsive/>
+              <AlertProvider SimpleSelect={SimpleSelect}/>
+              <FormDataDialogProvider/>  
+              <BottomSheetProvider/>
+              <DropdownAlert ref={notificationRef}/>
+              <ErrorBoundaryProvider/>  
+              <Navigation
+                initialRouteName = {defaultStr(hasGetStarted ? appInitialRouteName : getStartedRouteName,"Home")}
+                state = {state}
+                hasGetStarted = {hasGetStarted}
+                onGetStart = {(e)=>{
+                  setState({...state,hasGetStarted:true})
+                }}
+              />
+            </Portal.Host>
+          </PortalProvider>
       </NavigationContainer> 
   </SplashScreen>);
 }

package/src/layouts/Screen/ScreenWithOrWithoutAuthContainer.js

@@ -2,14 +2,14 @@ import React from '$react';
 import {StyleSheet} from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import PropTypes from "prop-types";
-import {defaultObj,defaultStr,defaultNumber,defaultBool} from "$cutils";
+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 ErrorBoundary from "$ecomponents/ErrorBoundary";
 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";
@@ -108,57 +108,60 @@ export default function MainScreenScreenWithOrWithoutAuthContainer(props) {
       });
     }
   }, [title,subtitle]);
-  const Wrapper =  modal ? Portal : React.Fragment;
+  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 child = <>
-      {withStatusBar !== false ? <StatusBar/> : null}
-      <ErrorBoundary testID={testID+"_ScreenLayoutErrorBoundary"}>
-        <View testID={testID} {...containerProps}  style={[styles.container,{backgroundColor},modal && styles.modal,containerProps.style]}>
-          {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>
-      </ErrorBoundary>
-  </>
-  return <Wrapper>
+  const portalId = uniqid("screeen-container-"+screenName);
+  return <Wrapper {...WrapperProps}>
           {renderChildren({
             containerProps : {
               ...authProps,
               required : authRequired,
             },
-            children : child,
+              children : <View testID={testID} nativeID={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,