@fto-consult/expo-ui 2.48.3 → 2.48.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.48.3",
+  "version": "2.48.5",
   "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.13.1",
+    "@fto-consult/common": "^2.13.2",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

package/src/components/Chart/index.js

@@ -35,7 +35,7 @@ const ChartComponent = React.forwardRef(({options,onRender,style,height,width,ch
       }
     }
   },[(options)]);
-  React.useOnRender(onRender);
+  React.useOnRender(onRender,Math.max(options.series.length/20,500));
   React.useEffect(()=>{
       return ()=>{
         destroyChart(chartContext.current);

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

@@ -583,7 +583,7 @@ const DatagridFactory = (Factory)=>{
                         keyExtractor = {this.getRowKey.bind(this)}
                     /> : canRenderChart    ?<View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
                         {this.renderChart()}
-                    </View> :  <View style={styles.hasNotData}>
+                    </View> :  <View onRender = {this.onRender.bind(this)} style={styles.hasNotData}>
                         {this.renderEmpty()}
                     </View>}
                 </View>}

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

@@ -910,7 +910,7 @@ export default class Field extends AppComponent {
             visible = false;
         }
         rest.defaultValue = this.validatingValue;
-        rest.style = [{backgroundColor:'transparent'},rest.style,!visible?{display:'none'}:undefined];
+        rest.style = [{backgroundColor:'transparent'},rest.style,!visible && theme.styles.hidden,!visible?{display:'none',opacity:0}:undefined];
        
         /**** si ce n'est pas un composant de type dropdown*/
         if(!isFunction(rest.filter)){

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

@@ -194,7 +194,7 @@ export default class FormDataComponent extends AppComponent{
                 const type = defaultStr(field.jsType,field.type,"text").trim().toLowerCase().replaceAll("_","");
                 const isDate = (type.contains('date') || type.contains('time'));
                 const Component = componentsTypes[type] || componentsTypes.default;
-                let {defaultValue,useDefaultValueFromData,primaryKey,hidden,renderFormDataField,getMediaQueryStyle,printLabels,queryLimit,selected,value,visible,dataFilesInterest,perm,ignore,form,responsiveProps:customResponsiveProps,...rest} = field;
+                let {defaultValue,useDefaultValueFromData,primaryKey,hidden,renderFormDataField,getMediaQueryStyle,printLabels,queryLimit,selected,value,dataFilesInterest,perm,ignore,form,responsiveProps:customResponsiveProps,...rest} = field;
                 rest = Object.assign({},rest);
                 delete rest.import;
                 delete rest.export;
@@ -207,7 +207,6 @@ export default class FormDataComponent extends AppComponent{
                 if(primaryKey === true && typeof rest.required !=='boolean'){
                     rest.required = true;
                 }
-                hidden = visible === false ? true : hidden;
                 if(typeof rest.filter !=='function'){
                     delete rest.filter;
                 }
@@ -219,9 +218,6 @@ export default class FormDataComponent extends AppComponent{
                 } else {
                     rest.defaultValue  = defaultValue;
                 }
-                if(hidden){
-                    rest.style = flattenStyle([rest.style,theme.styles.hidden]);
-                }
                 if(rest.defaultValue === null){
                     rest.defaultValue = undefined;
                 }
@@ -250,7 +246,7 @@ export default class FormDataComponent extends AppComponent{
                         archivable = {this.props.archivable || this.isArchivable()}  
                         name = {name}
                         responsive = {responsive}
-                        responsiveProps = {{...responsiveProps,...customResponsiveProps,style:[responsiveProps.style,customResponsiveProps.style,hidden?theme.styles.hidden:null]}}
+                        responsiveProps = {{...responsiveProps,...customResponsiveProps,style:[responsiveProps.style,customResponsiveProps.style]}}
                 />);
             }
         });

package/src/components/List/Common.js

@@ -11,7 +11,7 @@ import Label from "$ecomponents/Label";
 import { useWindowDimensions,Dimensions } from "react-native";
 
 const CommonListComponent = React.forwardRef((props,ref)=>{
-    let {responsive,defaultItemHeight,itemHeight,windowWidth,componentProps,columnWrapperStyle,onViewableItemsChanged,withFlatListItem,Component,withBackToTop,backToTopRef:customBackToTopRef,withBackToTopButton,onScroll,onScrollEnd,onMount,onUnmount,renderScrollViewWrapper,prepareItems,getItemKey,getKey,keyExtractor,items,filter,renderItem,numColumns,containerProps,bindResizeEvents,...rest} = props;
+    let {responsive,defaultItemHeight,itemHeight,windowWidth,onRender,componentProps,columnWrapperStyle,onViewableItemsChanged,withFlatListItem,Component,withBackToTop,backToTopRef:customBackToTopRef,withBackToTopButton,onScroll,onScrollEnd,onMount,onUnmount,renderScrollViewWrapper,prepareItems,getItemKey,getKey,keyExtractor,items,filter,renderItem,numColumns,containerProps,bindResizeEvents,...rest} = props;
     withBackToTopButton = withBackToTop === true || withBackToTopButton == true || isMobileMedia()? true : false;
     rest = defaultObj(rest);
     containerProps = defaultObj(containerProps);
@@ -145,7 +145,7 @@ const CommonListComponent = React.forwardRef((props,ref)=>{
         console.error(context.items," is not valid list data array",props);
         context.items = [];
     }
-    
+    React.useOnRender(onRender,Math.max(items.length/10 || 0,500));
     React.setRef(ref,context);
     React.useEffect(()=>{
         React.setRef(ref,context);

package/src/components/Table/List.js

@@ -26,7 +26,7 @@ const propTypes = {
     isScrolling : PropTypes.func,
 };
 /***@see : https://virtuoso.dev/virtuoso-api-reference/ */
-const VirtuosoListComponent = React.forwardRef(({items,testID,renderItem,onEndReached,onLayout,onContentSizeChange,onScroll,isScrolling,estimatedItemSize,onEndReachedThreshold,containerProps,style,...props},ref)=>{
+const VirtuosoListComponent = React.forwardRef(({items,onRender,testID,renderItem,onEndReached,onLayout,onContentSizeChange,onScroll,isScrolling,estimatedItemSize,onEndReachedThreshold,containerProps,style,...props},ref)=>{
     const r2 = {};
     for(let i in propTypes){
         if(i in props){
@@ -95,6 +95,7 @@ const VirtuosoListComponent = React.forwardRef(({items,testID,renderItem,onEndRe
             React.setRef(ref,null);
         }
     },[]);
+    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}>
         <Virtuoso
             {...r2}

package/src/components/Table/index.js

@@ -251,7 +251,7 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
             }
         }
     }
-    React.useOnRender((a,b,c)=>{
+    const onComponentRender = (a,b,c)=>{
         if(onRender){
             onRender(a,b,c);
         }
@@ -264,7 +264,7 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
                 })
             }
         }
-    });
+    };
     return <View testID= {testID+"_Container"}  {...containerProps} onLayout={(e)=>{
         layoutRef.current = e.nativeEvent.layout;
         if(containerProps.onLayout){
@@ -299,7 +299,7 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
                     </View>
                 </ScrollView>
             </RNView>
-            {hasEmptyData ? <View testID={testID+"_Empty"} style={styles.hasNotData}>
+            {hasEmptyData ? <View onRender={onComponentRender} testID={testID+"_Empty"} style={styles.hasNotData}>
                     {emptyData}
             </View> : <ScrollView {...scrollViewProps} scrollEventThrottle = {scrollEventThrottle} horizontal contentContainerStyle={[scrollContentContainerStyle,scrollViewProps.contentContainerStyle,{height:'100%'}]} showsVerticalScrollIndicator={false}  
                     onScroll = {getOnScrollCb([headerScrollViewRef,footerScrollViewRef],null,(args)=>{
@@ -337,6 +337,7 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
                                 content : {height,width}
                             });
                         }}
+                        onRender = {onComponentRender}
                         onLayout = {(args)=>{
                             if(props.onLayout){
                                 //props.onLayout(args);

package/src/components/View/index.js

@@ -5,7 +5,7 @@ import {isMobileNative} from "$cplatform";
 import {debounce,isNumber} from "$utils";
 
 
-const ViewComponent = React.forwardRef(({mediaQueryUpdateNativeProps,onLayoutTimeout,onLayout,autoHeight,autoWidth,elevation,...props},ref)=>{
+const ViewComponent = React.forwardRef(({mediaQueryUpdateNativeProps,onRender,onLayoutTimeout,onLayout,autoHeight,autoWidth,elevation,...props},ref)=>{
     const style = React.useMediaQueryUpdateStyle(props);
     const autoSize = autoHeight||autoWidth ? true : false;
     const [state,setState] = autoSize ? React.useState({}) : [{}];
@@ -22,6 +22,7 @@ const ViewComponent = React.forwardRef(({mediaQueryUpdateNativeProps,onLayoutTim
             setState({height:h,width:w});
         }
     };
+    React.useOnRender(onRender);
     return <View
          {...props} 
          style = {[style,