@fto-consult/expo-ui 3.4.0 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "3.4.0",
+  "version": "3.6.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^2.15.2",
+    "@fto-consult/common": "^2.15.4",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",
@@ -105,7 +105,7 @@
     "react-native-svg": "13.4.0",
     "react-native-web": "~0.18.7",
     "react-native-webview": "11.23.1",
-    "react-virtuoso": "^4.0.3",
+    "react-virtuoso": "^4.0.6",
     "sharp-cli": "^2.1.0",
     "tippy.js": "^6.3.7",
     "use-event-callback": "^0.1.0",

package/src/components/AutoSizer/Vertical.js

@@ -0,0 +1,88 @@
+import React from '$react';
+import { Dimensions} from 'react-native';
+import PropTypes from "prop-types";
+import View from "$ecomponents/View";
+import theme from "$theme";
+import {defaultStr,defaultObj,defaultNumber} from "$utils";
+import APP from "$capp/instance";
+import ActivityIndicator from "$ecomponents/ActivityIndicator";
+import {isWeb} from "$cplatform";
+
+/***
+ * ce composant a pour but de définir la taille d'un contenu en se basant sur sa positin top, de manière à ce que, le contentu du composant fit
+ * le reste de la taille de la page, avec comme valeur de la props minHeight
+ */
+const AutoSizerVerticalComponent = React.forwardRef(({onLayout,isScrollView,withActivityIndicator,testID,withPadding,maxHeight,minHeight,style,children:cChildren,...rest},ref) => {
+  testID = defaultStr(testID,'RN_AutoSizerVerticalComponent');
+  const hasUpdateLayoutRef = React.useRef(false);
+  const layoutRef = React.useRef(null);
+  const [layout,setLayout] = React.useState(Dimensions.get("window"));
+  const {height,width} = layout;
+  const hasInitializedRef = React.useRef(false);
+  const children = React.useStableMemo(()=>cChildren,[cChildren]);
+  const updateLayout = ()=>{
+      return new Promise((resolve)=>{
+          hasUpdateLayoutRef.current = true;
+          if(layoutRef.current && layoutRef.current.measureInWindow){
+              layoutRef.current.measureInWindow((x, y, width, height) => {
+                  const r = {...Dimensions.get("window"),layout:{ x, y, width, height }};
+                  setLayout(r);
+                  hasInitializedRef.current = true;
+                  resolve(r);
+              });
+          } else {
+            setLayout(Dimensions.get("window"))
+          }
+      })
+  }
+  React.setRef(ref,{
+    updateLayout,
+    layoutRef,
+    ref : layoutRef
+});
+  React.useEffect(()=>{
+    const onResizePage = ()=>{
+      setTimeout(()=>{
+         updateLayout();
+      },300);
+    }
+    APP.on(APP.EVENTS.RESIZE_PAGE,onResizePage);
+    return ()=>{
+      APP.off(APP.EVENTS.RESIZE_PAGE,onResizePage);
+      React.setRef(ref,null);
+    }
+  },[]);
+  const hasUpdateLayout = hasUpdateLayoutRef.current;
+  const cStyle ={width:'100%',maxHeight:Math.max(height-100,250)};
+  const contentLayout = defaultObj(layout.layout);
+  cStyle.minHeight = Math.min(Math.max(layout.height-defaultNumber(contentLayout.y),minHeight && minHeight ||250));
+  const cMaxHeight = layout.height-defaultNumber(contentLayout.y);
+  if(cMaxHeight>=250){
+    cStyle.maxHeight = cMaxHeight;
+  }
+  if(withPadding !== false){
+      cStyle.paddingBottom = 50;
+  }
+  const fStyle = !hasUpdateLayout && withActivityIndicator !== false && {flex:1,flexDirection:'column',maxHeight:cStyle.maxHeight,maxWidth : Math.max(layout.width-defaultNumber(contentLayout.x)),justifyContent:'center',alignItems:'center'} || {};
+  return  <View ref={layoutRef} 
+        onLayout={(a,b,c)=>{
+            if(onLayout && onLayout(a,b,c) === false) return;
+            if(!hasInitializedRef.current){
+              updateLayout();
+            }
+        }} 
+    {...rest} 
+    style={[theme.styles.w100,cStyle,style,fStyle,maxHeight && {maxHeight}, minHeight && {minHeight}]} testID={testID+"_ScrollViewContainer"}>
+    {hasUpdateLayout || withActivityIndicator === false ?children : <ActivityIndicator size={'large'}/>}
+  </View>
+});
+
+AutoSizerVerticalComponent.displayName = "AutoSizerVerticalComponent";
+export default AutoSizerVerticalComponent;
+
+AutoSizerVerticalComponent.propTypes = {
+   ...defaultObj(View.propTypes),
+   withActivityIndicator : PropTypes.bool,//si l'on utilisera l'activity indicator pour le chargement du contentu
+   maxHeight : PropTypes.number,
+   minHeight : PropTypes.number,
+}

package/src/components/AutoSizer/index.js

@@ -0,0 +1,3 @@
+export {default as Vertical} from "./Vertical";
+
+export {default} from "./AutoResizer";

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

@@ -406,7 +406,6 @@ const DatagridFactory = (Factory)=>{
                     }
                 ]
             }
-            const maxHeight = this.getMaxListHeight();
             const isLoading = this.isLoading();
             const _progressBar = this.getProgressBar();
             const pointerEvents = this.getPointerEvents(); 
@@ -524,7 +523,7 @@ const DatagridFactory = (Factory)=>{
             </ScrollView>
         </View>  
         return <View testID={testID+"_Container"} pointerEvents={pointerEvents} style={[styles.container]} collapsable={false}>
-                { <View testID={testID+"_ContentContainer"} style={[{maxHeight,height:maxHeight}]}> 
+                { <View testID={testID+"_ContentContainer"}> 
                     <View testID={testID+"_AccordionHeader"} style={[styles.accordionHeader]} ref={this.layoutRef} onLayout={this.updateLayout.bind(this)}>
                         {this.props.showActions !== false ? <DatagridActions 
                             testID={testID+"_Actions"}
@@ -564,7 +563,6 @@ const DatagridFactory = (Factory)=>{
                         prepareItems = {false}
                         {...rest}
                         {...accordionProps}
-                        containerProps = {{style:[{maxHeight}]}}
                         onRender = {this.onRender.bind(this)}
                         testID = {testID}
                         extraData = {this.state.refresh}

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

@@ -558,6 +558,9 @@ export default class CommonDatagridComponent extends AppComponent {
     isDatagrid(){
         return false;
     }
+    isSWRDatagrid(){
+        return !!this.props.isSWRDatagrid;
+    }
     callSRowCallback({selected,row,rowIndex,key,cb}){
         let count = Object.size(this.selectedRows);
         let sArg = this.getActionsArgs(selected);
@@ -3338,6 +3341,9 @@ export default class CommonDatagridComponent extends AppComponent {
                 delete fetchOptions.limit
             }
         }
+        if(this.isSWRDatagrid()){
+            fetchOptions.withTotal = true;
+        }
         return fetchOptions;
     }
     getFetchDataOpts(){

package/src/components/Datagrid/SWRDatagrid.js

@@ -416,6 +416,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
                 opts = getFetchOptions({showError:showProgressRef.current,...opts});
                 isInitializedRef.current = true;
                 fetchOptionsRef.current = opts;
+                opts.withTotal = true;
                 sortRef.current = opts.fetchOptions.sort;
                 if(force){
                     pageRef.current = firstPage;
@@ -423,6 +424,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
                 doRefresh(force);
                 return false;
             }}
+            isSWRDatagrid
             isTableData
             fetchData = {undefined}
             data = {dataRef.current}

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

@@ -190,8 +190,8 @@ const DatagridFactory = (Factory)=>{
             }   
             const maxHeight = this.getMaxListHeight();
             const rPagination = showPagination ? <View style={[styles.paginationContainer]}>
-                <ScrollView horizontal  style={styles.paginationContainerStyle} contentContainerStyle={styles.minW100}>
-                    <View style={[styles.paginationContent]}>
+                <ScrollView testID={testID+"_Datagrid_Headers"} horizontal  style={styles.paginationContainerStyle} contentContainerStyle={styles.minW100}>
+                    <View testID={testID+"_HeaderPaginationContent"} style={[styles.paginationContent]}>
                         <View testID={testID+"_HeaderQueryLimit"}>
                             {this.renderQueryLimit(this.getStateDataSize().formatNumber())}
                         </View>
@@ -229,6 +229,7 @@ const DatagridFactory = (Factory)=>{
                              })}
                         </>}
                         <BottomSheetMenu
+                            testID = {testID+"_BottomSheetMenu"}
                             anchor = {(props)=>{
                                 return <Icon {...props} title={isMobile?"Actions":"Colonnes"} name={isMobile?MENU_ICON:'view-column'}></Icon>
                             }}
@@ -292,8 +293,8 @@ const DatagridFactory = (Factory)=>{
                     </View>
                 </ScrollView>
             </View> : null;
-            return <View style={[styles.container,{flex:1,maxHeight}]} pointerEvents={pointerEvents}>
-                <View ref={this.layoutRef}>
+            return <View style={[styles.container,{flex:1,maxHeight}]} testID={testID+"_TableContainer"} pointerEvents={pointerEvents}>
+                <View ref={this.layoutRef} testID={testID+"_LayoutContainer"}>
                     {this.props.showActions !== false ? <DatagridActions 
                         pointerEvents = {pointerEvents}
                         title = {title}
@@ -312,12 +313,6 @@ const DatagridFactory = (Factory)=>{
                 <Table
                     ref = {this.listRef}
                     {...rest}
-                    onLayout = {(args)=>{
-                        if(rest.onLayout){
-                            rest.onLayout(args);
-                        }
-                        this.updateLayout(args);
-                    }}
                     sortedColumn = {sortedColumn}
                     onRender = {this.onRender.bind(this)}
                     getItemType = {this.getFlashListItemType.bind(this)}

package/src/components/ScrollView/index copy.js

@@ -0,0 +1,38 @@
+import React from '$react';
+import { ScrollView} from 'react-native';
+import PropTypes from "prop-types";
+import {defaultStr,defaultObj} from "$utils";
+import {Vertical as AutoSizeVertical} from "$ecomponents/AutoSizer";
+
+const ScrollViewComponent = React.forwardRef(({withAutoSizer,autoSizerProps,testID,...rest},ref) => {
+  testID = defaultStr(testID,'RN_ScrollViewComponent');
+  const autoSize = React.useRef(withAutoSizer).current;
+    if(!autoSize || rest.horizontal === true || rest.vertical === false){
+      return <ScrollView testID={testID} ref={ref} {...rest}/>
+  }
+  autoSizerProps = defaultObj(autoSizerProps);
+  const autoSizeRef = React.useRef(null);
+  return  <AutoSizeVertical {...autoSizerProps} ref = {autoSizeRef} testID={testID+"_ScrollViewContainer"}>
+    <ScrollView 
+      ref={ref} 
+      {...rest} 
+      testID={testID}
+      onContentSizeChange = {(a,b,c,d)=>{
+        if(rest.onContentSizeChange && rest.onContentSizeChange(a,b,c,d)===false) return;
+         if(autoSizeRef.current && autoSizeRef.current.updateLayout){
+           return autoSizeRef.current.updateLayout();
+         }
+      }}
+    />
+  </AutoSizeVertical>
+});
+
+ScrollViewComponent.displayName = "ScrollViewComponent";
+export default ScrollViewComponent;
+
+ScrollViewComponent.propTypes = {
+   ...defaultObj(ScrollView.propTypes),
+   withAutoSizer : PropTypes.bool,//si le contenu du scrollView sera wrap par le composant AutoSizer
+   maxHeight : PropTypes.number,
+   minHeight : PropTypes.number,
+}

package/src/components/ScrollView/index.back.js

@@ -0,0 +1,84 @@
+import React from '$react';
+import { ScrollView,Dimensions} from 'react-native';
+import PropTypes from "prop-types";
+import View from "$ecomponents/View";
+import theme from "$theme";
+import {defaultStr,defaultObj,defaultNumber} from "$utils";
+import APP from "$capp/instance";
+import ActivityIndicator from "$ecomponents/ActivityIndicator";
+const ScrollViewComponent = React.forwardRef(({withAutoSizer,containerProps,maxHeight,minHeight,testID:customTestID,children:cChildren,...rest},ref) => {
+  const testID = defaultStr(customTestID,'RN_ScrollViewComponent');
+  const autoSizeRef = React.useRef(withAutoSizer);
+    if(!autoSizeRef.current || rest.horizontal === true || rest.vertical === false){
+      return <ScrollView testID={testID} ref={ref} {...rest} children={cChildren}/>
+  }
+  containerProps = defaultObj(containerProps)
+  const hasUpdateLayoutRef = React.useRef(false);
+  const isKeyboardOpenRef = React.useRef(false);
+  const layoutRef = React.useRef(null);
+  const [layout,setLayout] = React.useState(Dimensions.get("window"));
+  const {height} = layout;
+  const hasInitializedRef = React.useRef(false);
+  const children = React.useStableMemo(()=>cChildren,[cChildren]);
+  const updateLayout = ()=>{
+      return new Promise((resolve)=>{
+          hasUpdateLayoutRef.current = true;
+          if(layoutRef.current && layoutRef.current.measureInWindow){
+              layoutRef.current.measureInWindow((x, y, width, height) => {
+                  const r = {...Dimensions.get("window"),layout:{ x, y, width, height }};
+                  setLayout(r);
+                  hasInitializedRef.current = true;
+                  resolve(r);
+              });
+          } else {
+            setLayout(Dimensions.get("window"))
+          }
+      })
+  }
+  React.useEffect(()=>{
+    const onKeyboardToggle = ({visible})=>{
+      isKeyboardOpenRef.current = visible;
+     };
+    const onResizePage = ()=>{
+      setTimeout(()=>{
+         if(isKeyboardOpenRef.current) return;
+         updateLayout();
+      },300);
+    }
+    APP.on(APP.EVENTS.RESIZE_PAGE,onResizePage);
+    APP.on(APP.EVENTS.KEYBOARD_DID_TOGGLE,onKeyboardToggle)
+    return ()=>{
+      APP.off(APP.EVENTS.RESIZE_PAGE,onResizePage);
+      APP.off(APP.EVENTS.KEYBOARD_DID_TOGGLE,onKeyboardToggle);
+    }
+  },[]);
+  const hasUpdateLayout = hasUpdateLayoutRef.current;
+  const cStyle ={width:'100%',maxHeight:Math.max(height-100,250)};
+  const contentLayout = defaultObj(layout.layout);
+  cStyle.minHeight = Math.min(Math.max(layout.height-defaultNumber(contentLayout.y),250));
+  const contentContainerStyle = ([cStyle,rest.contentContainerStyle]);
+  const fStyle = !hasUpdateLayout && {flex:1,maxWidth:layout.width - defaultNumber(contentLayout.x)};
+  return  <View ref={layoutRef} onLayout={()=>{
+    if(!hasInitializedRef.current){
+       updateLayout();
+    }
+  }} {...containerProps} style={[theme.styles.w100,containerProps.style,fStyle]} testID={testID+"_ScrollViewContainer"}>
+    <ScrollView 
+      ref={ref} {...rest} 
+      testID={testID}
+      children={hasUpdateLayout?children : <ActivityIndicator size={'large'} 
+      style={[{flex:1}]}/>}
+      contentContainerStyle = {[contentContainerStyle,fStyle]}
+    />
+  </View>
+});
+
+ScrollViewComponent.displayName = "ScrollViewComponent";
+export default ScrollViewComponent;
+
+ScrollViewComponent.propTypes = {
+   ...defaultObj(ScrollView.propTypes),
+   withAutoSizer : PropTypes.bool,//si la taille du scrollView sera withAutoSizer
+   maxHeight : PropTypes.number,
+   minHeight : PropTypes.number,
+}

package/src/components/ScrollView/index.js

@@ -1,74 +1,33 @@
 import React from '$react';
-import { ScrollView,Dimensions } from 'react-native';
+import { ScrollView} from 'react-native';
 import PropTypes from "prop-types";
-import View from "$ecomponents/View";
-import theme from "$theme";
 import {defaultStr,defaultObj} from "$utils";
-import APP from "$capp/instance";
-const ScrollViewComponent = React.forwardRef(({virtualized,vertical,horizontal,contentProps,containerProps,mediaQueryUpdateNativeProps,testID:customTestID,children:cChildren,screenIndent:sIndent,...rest},ref) => {
-  const testID = defaultStr(customTestID,'RN_ScrollViewComponent');
-  containerProps = defaultObj(containerProps)
-  if(horizontal === true || vertical === false){
-     return <ScrollView horizontal testID={testID} ref={ref} {...rest} children={cChildren}/>
-  }
-  const isKeyboardOpenRef = React.useRef(false);
-  const layoutRef = React.useRef(null);
-  const [layout,setLayout] = React.useState(Dimensions.get("window"));
-  const {height} = layout;
-  const hasInitializedRef = React.useRef(false);
-  const children = React.useStableMemo(()=>cChildren,[cChildren]);
-  const updateLayout = ()=>{
-      return new Promise((resolve)=>{
-          if(layoutRef.current && layoutRef.current.measureInWindow){
-              layoutRef.current.measureInWindow((x, y, width, height) => {
-                  const r = {...Dimensions.get("window"),layout:{ x, y, width, height }};
-                  setLayout(r);
-                  hasInitializedRef.current = true;
-                  resolve(r);
-              });
-          }
-      })
-  }
-  React.useEffect(()=>{
-    const onKeyboardToggle = ({visible})=>{
-      isKeyboardOpenRef.current = visible;
-     };
-    const onResizePage = ()=>{
-      setTimeout(()=>{
-         if(isKeyboardOpenRef.current) return;
-         updateLayout();
-      },300);
-    }
-    APP.on(APP.EVENTS.RESIZE_PAGE,onResizePage);
-    APP.on(APP.EVENTS.KEYBOARD_DID_TOGGLE,onKeyboardToggle)
-    return ()=>{
-      APP.off(APP.EVENTS.RESIZE_PAGE,onResizePage);
-      APP.off(APP.EVENTS.KEYBOARD_DID_TOGGLE,onKeyboardToggle);
-    }
-  },[]);
+import {Vertical as AutoSizeVertical} from "$ecomponents/AutoSizer";
 
-  const cStyle = {maxHeight:Math.max(height-100,250),width:'100%'};
-  if(isObj(layout.layout) && typeof layout.layout.y =='number' && layout.layout.y>=10){
-      const {layout : {x,y}} = layout;
-      const minHeight = height - y;
-      if(minHeight> 0){
-          cStyle.minHeight = minHeight;
-      }
+const ScrollViewComponent = React.forwardRef(({withAutoSizer,autoSizerProps,testID,...rest},ref) => {
+  testID = defaultStr(testID,'RN_ScrollViewComponent');
+  const autoSize = React.useRef(withAutoSizer).current;
+    if(!autoSize || rest.horizontal === true || rest.vertical === false){
+      return <ScrollView testID={testID} ref={ref} {...rest}/>
   }
-  const contentContainerStyle = [cStyle,rest.contentContainerStyle];
-  return  <View ref={layoutRef} onLayout={()=>{
-    if(!hasInitializedRef.current){
-       updateLayout();
-    }
-  }} {...containerProps} style={[theme.styles.w100,containerProps.style]} testID={testID+"_ScrollViewContainer"}>
+  autoSizerProps = defaultObj(autoSizerProps);
+  const autoSizerRef = React.useRef(null);
+  return  <AutoSizeVertical ref={autoSizerRef} isScrollView {...autoSizerProps} testID={testID+"_ScrollViewContainer"}>
     <ScrollView 
       ref={ref} {...rest} 
-      vertical = {vertical}
       testID={testID}
-      children={children}
-      contentContainerStyle = {contentContainerStyle}
+      onContentSizeChange = {(a,b,c,d)=>{
+        if(rest.onContentSizeChange && rest.onContentSizeChange(a,b,c,d)===false) return;
+        return;
+        if(autoSizerRef.current && autoSizerRef.current.updateLayout){
+            console.log("updating layout ",autoSizerRef.current);
+            autoSizerRef.current.updateLayout();
+        }
+      }}
+      style = {[{flex:1}]}
+      contentContainerStyle = {[{flex:1,height:'100%'},rest.contentContainerStyle]}
     />
-  </View>
+  </AutoSizeVertical>
 });
 
 ScrollViewComponent.displayName = "ScrollViewComponent";
@@ -76,8 +35,7 @@ export default ScrollViewComponent;
 
 ScrollViewComponent.propTypes = {
    ...defaultObj(ScrollView.propTypes),
-   horizontal : PropTypes.bool,
-   vertical : PropTypes.bool,
-    virtualized : PropTypes.bool,
-    contentProps : PropTypes.object,
+   withAutoSizer : PropTypes.bool,//si le contenu du scrollView sera wrap par le composant AutoSizer
+   maxHeight : PropTypes.number,
+   minHeight : PropTypes.number,
 }

package/src/components/ScrollView/index.withWeb.js

@@ -0,0 +1,83 @@
+import React from '$react';
+import { ScrollView,Dimensions } from 'react-native';
+import PropTypes from "prop-types";
+import View from "$ecomponents/View";
+import theme from "$theme";
+import {defaultStr,defaultObj} from "$utils";
+import APP from "$capp/instance";
+import {isWeb as isw} from "$cplatform";
+const ScrollViewComponent = React.forwardRef(({containerProps,withAutoSizer,testID,...rest},ref) => {
+  testID = defaultStr(testID,'RN_ScrollViewComponent');
+  const autoSize = React.useRef(withAutoSizer).current;
+    if(!autoSize || rest.horizontal === true || rest.vertical === false){
+      return <ScrollView testID={testID} ref={ref} {...rest}/>
+  }
+  containerProps = defaultObj(containerProps)
+  const isWeb = isw();
+  const isKeyboardOpenRef = React.useRef(false);
+  const layoutRef = React.useRef(null);
+  const [layout,setLayout] = React.useState(Dimensions.get("window"));
+  const {height} = layout;
+  const hasInitializedRef = React.useRef(false);
+  const children = React.useStableMemo(()=>rest.children,[rest.children]);
+  const updateLayout = ()=>{
+      return new Promise((resolve)=>{
+          if(layoutRef.current && layoutRef.current.measureInWindow){
+              layoutRef.current.measureInWindow((x, y, width, height) => {
+                  const r = {...Dimensions.get("window"),layout:{ x, y, width, height }};
+                  setLayout(r);
+                  hasInitializedRef.current = true;
+                  resolve(r);
+              });
+          }
+      })
+  }
+  React.useEffect(()=>{
+    const onKeyboardToggle = ({visible})=>{
+      isKeyboardOpenRef.current = visible;
+     };
+    const onResizePage = ()=>{
+      setTimeout(()=>{
+         if(isKeyboardOpenRef.current) return;
+         updateLayout();
+      },300);
+    }
+    APP.on(APP.EVENTS.RESIZE_PAGE,onResizePage);
+    APP.on(APP.EVENTS.KEYBOARD_DID_TOGGLE,onKeyboardToggle)
+    return ()=>{
+      APP.off(APP.EVENTS.RESIZE_PAGE,onResizePage);
+      APP.off(APP.EVENTS.KEYBOARD_DID_TOGGLE,onKeyboardToggle);
+    }
+  },[]);
+
+  const cStyle = {maxHeight:Math.max(height-100,250),width:'100%'};
+  if(isObj(layout.layout) && typeof layout.layout.y =='number' && layout.layout.y>=10){
+      const {layout : {x,y}} = layout;
+      const minHeight = height - y;
+      if(minHeight> 0){
+          cStyle.minHeight = minHeight;
+      }
+  }
+  const contentContainerStyle = [cStyle,rest.contentContainerStyle];
+  return  <View ref={layoutRef} onLayout={()=>{
+    if(!hasInitializedRef.current){
+       updateLayout();
+    }
+  }} {...containerProps} style={[theme.styles.w100,containerProps.style]} testID={testID+"_ScrollViewContainer"}>
+    <ScrollView 
+      ref={ref}
+      {...rest} 
+      testID={testID}
+      children={children}
+      contentContainerStyle = {contentContainerStyle}
+    />
+  </View>
+});
+
+ScrollViewComponent.displayName = "ScrollViewComponent";
+export default ScrollViewComponent;
+
+ScrollViewComponent.propTypes = {
+   ...defaultObj(ScrollView.propTypes),
+   withAutoSizer : PropTypes.bool,
+}

package/src/components/Table/AbsoluteScrollView.js

@@ -49,8 +49,9 @@ const AbsoluteScrollView = React.forwardRef(({testID,contentProps,listRef,contai
             args = defaultObj(args);
             if(isObj(args.contentOffset) && isObj(args.contentSize)){
                 const {x} = args.contentOffset;
+                const {width:contentWidth} = args.contentSize;
                 const {width} = Dimensions.get("window");
-                const visible = x >= width-10 ? false : true;
+                const visible = x >= width-10 && (contentWidth-x)<10 ? false : true;
                 if(state.visible != visible){
                     return setState({...state,visible});
                 }
@@ -67,13 +68,22 @@ const AbsoluteScrollView = React.forwardRef(({testID,contentProps,listRef,contai
     React.useEffect(()=>{
         toggleVisible();
     },[styles])
+    let canBeVisible = true;
+    if(isObj(styles.content) && isObj(styles.contentContainer)){
+        if(typeof styles.content.height =='number' && typeof styles.contentContainer.height =='number'){
+            if(styles.content.height -10 <= styles.contentContainer.height){
+                canBeVisible = false;
+            }
+        }
+    }
+    const hidden = (!canBeVisible || !visible || !layoutVisible) ;
     return <Portal>
-        {<View testID={testID+"_Containter"} {...containerProps} style={[mainStyles.container,containerProps.style,styles.container,{left:win.width-10},(!visible || !layoutVisible) &&{display:'none',width:0,opacity:0}]}>
+        {<View testID={testID+"_Containter"} {...containerProps} style={[mainStyles.container,containerProps.style,styles.container,{left:win.width-10},hidden &&{display:'none',width:0,opacity:0}]}>
             <ScrollView
                 {...props}
                 ref = {scrollViewRef}
                 testID={testID}
-                contentContainerStyle = {[props.contentContainerStyle,mainStyles.contentContainer,styles.containerContainer]}
+                contentContainerStyle = {[props.contentContainerStyle,mainStyles.contentContainer,styles.contentContainer]}
                 vertical
             >
                 <View

package/src/components/Table/{List.js → List/List.js}

@@ -96,7 +96,7 @@ const VirtuosoListComponent = React.forwardRef(({items,onRender,testID,renderIte
         }
     },[]);
     React.useOnRender(onRender,Math.max(Array.isArray(items) && items.length/10 || 0,500))
-    return <View {...containerProps} {...props} style={[{flex:1},containerProps.style,style,{minWidth:'100%',maxWidth:'100%'}]} onLayout={onLayout} testID={testID}>
+    return <View {...containerProps} {...props} style={[{flex:1},containerProps.style,style,{minWidth:'100%',height:'100%',maxWidth:'100%'}]} onLayout={onLayout} testID={testID}>
         <Virtuoso
             {...r2}
             style = {listStyle}

package/src/components/Table/List/index.js

@@ -0,0 +1,15 @@
+import React from "$react";
+import {Vertical as AutoSizeVertical} from "$ecomponents/AutoSizer";
+import List from "./List";
+import {defaultStr,defaultObj} from "$utils";
+const AutoSizeVerticalList = React.forwardRef(({testID,autoSizerProps,...props},ref)=>{
+    testID = defaultStr(testID,"RN_AutoSizeVerticalListComponent")
+    autoSizerProps = defaultObj(autoSizerProps);
+    return <AutoSizeVertical testID={testID+"_AutoSizerVertical"} {...autoSizerProps} >
+        <List {...props} ref={ref}/>
+    </AutoSizeVertical>
+})
+
+AutoSizeVerticalList.displayName = "AutoSizeVerticalListComponent";
+
+export default AutoSizeVerticalList;

package/src/components/Table/index.js

@@ -7,7 +7,6 @@ import Label from "$ecomponents/Label";
 import { StyleSheet,View as RNView,ScrollView,Dimensions} from "react-native";
 import { getRowStyle } from "$ecomponents/Datagrid/utils";
 import {isMobileNative} from "$cplatform";
-import {isMobileMedia} from "$dimensions";
 import theme from "$theme";
 import AbsoluteScrollView from "./AbsoluteScrollView";
 import Cell from "./Cell";
@@ -357,7 +356,7 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
                         testID = {testID}
                         prepareItems = {false}
                         items = {items}
-                        contentContainerStyle = {[styles.contentContainer,{width:listWidth,minWidth:totalWidths,position:'absolute',right:'0'}]}
+                        contentContainerStyle = {[styles.contentContainer,{width:listWidth,minWidth:totalWidths}]}
                         style = {[styles.datagrid,{width:listWidth,minWidth:totalWidths}]}
                         keyExtractor = {typeof getRowKey =='function'? getRowKey : React.getKey}
                         onScroll = {getOnScrollCb([absoluteScrollViewRef],(args)=>{

package/src/layouts/Screen/TableData.js

@@ -394,7 +394,11 @@ export default class TableDataScreenComponent extends FormDataScreen{
         const isMobile = isMobileOrTabletMedia();
         const contentProps = restProps.contentProps;
         const elevation = restProps.elevation;
-        const renderingTabsProps = {tabs,data:this.getCurrentData(),isMobile,sessionName:this.INITIAL_STATE.sessionName,props:restProps,tabProps,tabsProps,context,tabKey};
+        const renderingTabsProps = {tabs,data:this.getCurrentData(),tabsPropsMutator:({tabs,tabsProps})=>{
+            if(!isMobileOrTabletMedia()){
+                tabsProps.withScrollView = false;
+            }
+        },isMobile,sessionName:this.INITIAL_STATE.sessionName,props:restProps,tabProps,tabsProps,context,tabKey};
         const hasTabs = Object.size(tabs,true);
         let mainContent = undefined;
         testID = defaultStr(testID,"RN_TableDataScreenItem_"+restProps.tableName);
@@ -417,7 +421,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
                 mainContent = ct;
             } else {
                 mainContent = <View  {...contentProps} testID={testID+"_ContentContainer"} style={[styles.container,styles.noPadding]}>
-                    <ScrollView testID={testID+"_MainContentScrollView"} contentProps={{style:theme.styles.p1}}>
+                    <ScrollView  withAutoSizer testID={testID+"_MainContentScrollView"} contentProps={{style:theme.styles.p1}}>
                         <Surface elevation={elevation} testID={testID+"_ContentHeader"} style={[styles.screenContent,theme.styles.p1,header?styles.screenContentWithHeader:null]}>
                             {header}
                             {content}
@@ -443,7 +447,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
             appBarProps.elevation = 0;
             restProps.elevation = 0;
         }
-        return <ScreenContainer {...restProps} appBarProps = {appBarProps} testID={testID}>
+        return <ScreenContainer  {...restProps} withScrollView={false} appBarProps = {appBarProps} testID={testID}>
             {this.wrapRenderingContent(mainContent,{testID})}
         </ScreenContainer>
     }

package/src/layouts/Screen/utils.js

@@ -8,13 +8,13 @@ import {getTableDataRouteName} from "$enavigation/utils";
 //@seee : https://github.com/typeorm/typeorm/blob/master/src/entity-schema/EntitySchemaColumnOptions.ts
 export const generatedColumnsProperties = ["createDate","updateDate","deleteDate","createBy","updateBy","deleteBy"]
 
-export const renderTabsContent = ({tabs,context,data,sessionName,isMobile,props,firstTab,tabKey,tabProps,tabsProps})=>{
+export const renderTabsContent = ({tabs,context,data,sessionName,tabsPropsMutator,isMobile,props,firstTab,tabKey,tabProps,tabsProps})=>{
     let tabsArr = [],hasFirstTab = false; 
     if(React.isValidElement(firstTab)){
         tabsArr.push(firstTab);
         hasFirstTab = true;
     }
-    tabsProps = Object.assign({},tabsProps);
+    tabsProps = Object.clone(tabsProps);
     tabsProps.centered = false;
     tabKey = typeof tabKey =='string' || typeof tabKey =='number'? tabKey : 'first-tab-key';
     let idx = tabsArr.length-1;
@@ -52,6 +52,9 @@ export const renderTabsContent = ({tabs,context,data,sessionName,isMobile,props,
         })
     }
     if(tabsArr.length> (hasFirstTab ? 1 : 0)){
+        if(typeof tabsPropsMutator =='function' && tabsPropsMutator({tabsProps,tabs:tabsArr,hasFirstTab}) === false){
+            return null;
+        }
         return <Tab testID={testID}
              {...tabsProps} 
             onChange={(args)=>{

package/src/screens/Help/About.js

@@ -87,43 +87,45 @@ export default function HelpScreen(props){
                     <Label primary textBold style={theme.styles.mv05} >{appConfig.name+", Notes de mise à jour."}</Label>
                 </Link>
             </View>
-            {Object.size(openLibraries,true) ? <View style={[theme.styles.w100]}>
-                <Expandable
-                    testID={testID+"_OpenLibraries"}
-                    title = {"A propos des librairies tiers"}
-                    titleProps = {{style:theme.styles.ph1}}
-                    style = {{backgroundColor:'transparent'}}
-                >
-                    <View testID={testID+"_OpenLibraries_Header"} style={[theme.styles.row,theme.styles.flexWrap]}>
-                        <Label testID={testID+"_OpenLibraries_HeaderLabel"} primary textBold>{appConfig.name+"   "}</Label>
-                        <Label>est bâti sur un ensemble d'outils et librairies open Source</Label>
-                    </View>
-                    <View testID={testID+"_OpenLibrariesContent"} style={[theme.styles.w100,theme.styles.pv1]}>
-                        <Grid.Row style={borderStyle}>
-                            <Label style={gridStyles[0]} textBold>#</Label>
-                            <Label style={gridStyles[1]} textBold>Librairie/Outil</Label>
-                            <Label style={gridStyles[2]} textBold>Version</Label>
-                            <Label style={gridStyles[3]} textBold>Licence</Label>
-                        </Grid.Row>
-                        {Object.mapToArray(openLibraries,(lib,i,_i)=>{
-                            return <Grid.Row key={i} style={borderStyle}>
-                                <Label style={gridStyles[0]}>
-                                    {_i.formatNumber()}
-                                </Label>
-                                <AutoLink style={gridStyles[1]} url={lib.url}>
-                                    <Label splitText>{i}</Label>
-                                </AutoLink>
-                                <AutoLink style={gridStyles[2]}>
-                                    <Label splitText numberOfLines={2}>{defaultStr(lib.version)}</Label>
-                                </AutoLink>
-                                <AutoLink url={lib.licenseUrl} style={gridStyles[3]}>
-                                    <Label splitText>{lib.license}</Label>
-                                </AutoLink>
+            <View style={theme.styles.w100}>
+                {Object.size(openLibraries,true) ? <View style={[theme.styles.w100]}>
+                    <Expandable
+                        testID={testID+"_OpenLibraries"}
+                        title = {"A propos des librairies tiers"}
+                        titleProps = {{style:theme.styles.ph1}}
+                        style = {{backgroundColor:'transparent'}}
+                    >
+                        <View testID={testID+"_OpenLibraries_Header"} style={[theme.styles.row,theme.styles.flexWrap]}>
+                            <Label testID={testID+"_OpenLibraries_HeaderLabel"} primary textBold>{appConfig.name+"   "}</Label>
+                            <Label>est bâti sur un ensemble d'outils et librairies open Source</Label>
+                        </View>
+                        <View testID={testID+"_OpenLibrariesContent"} style={[theme.styles.w100,theme.styles.pv1]}>
+                            <Grid.Row style={borderStyle}>
+                                <Label style={gridStyles[0]} textBold>#</Label>
+                                <Label style={gridStyles[1]} textBold>Librairie/Outil</Label>
+                                <Label style={gridStyles[2]} textBold>Version</Label>
+                                <Label style={gridStyles[3]} textBold>Licence</Label>
                             </Grid.Row>
-                        })}
-                    </View>
-                </Expandable>
-            </View>: null}
+                            {Object.mapToArray(openLibraries,(lib,i,_i)=>{
+                                return <Grid.Row key={i} style={borderStyle}>
+                                    <Label style={gridStyles[0]}>
+                                        {_i.formatNumber()}
+                                    </Label>
+                                    <AutoLink style={gridStyles[1]} url={lib.url}>
+                                        <Label splitText>{i}</Label>
+                                    </AutoLink>
+                                    <AutoLink style={gridStyles[2]}>
+                                        <Label splitText numberOfLines={2}>{defaultStr(lib.version)}</Label>
+                                    </AutoLink>
+                                    <AutoLink url={lib.licenseUrl} style={gridStyles[3]}>
+                                        <Label splitText>{lib.license}</Label>
+                                    </AutoLink>
+                                </Grid.Row>
+                            })}
+                        </View>
+                    </Expandable>
+                </View>: null}
+            </View>
         </View>
     </Screen>  
 }