@fto-consult/expo-ui 3.4.1 → 3.6.0

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,76 +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";
-import {isWeb as isw} from "$cplatform";
-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 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(()=>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,isWeb && {display:'block'}];
-  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";
@@ -78,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)=>{