@fto-consult/expo-ui 2.37.7 → 2.38.0

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

@@ -27,7 +27,7 @@ import { makePhoneCall,canMakePhoneCall as canMakeCall} from "$makePhoneCall";
 import copyToClipboard from "$capp/clipboard";
 import { Pressable } from "react-native";
 import stableHash from "stable-hash";
-import DatagridProgressBar from "./ProgressBar";
+import DatagridProgressBar from "$ecomponents/Table/ProgressBar";
 import View from "$ecomponents/View";
 import {Menu} from "$ecomponents/BottomSheet";
 import {styles as tableStyles} from "$ecomponents/Table";
@@ -36,8 +36,9 @@ import Chart,{getMaxSupportedSeriesSize} from "$ecomponents/Chart";
 import notify from "$cnotify";
 import FileSystem from "$file-system";
 import sprintf from "$cutils/sprintf";
-import { renderRowCell,formatValue } from "./utils";
+import { renderRowCell,formatValue,arrayValueSeparator } from "./utils";
 import {ScrollView} from "react-native";
+import Button from "$ecomponents/Button";
 import * as XLSX from "xlsx";
 
 export const TIMEOUT = 100;
@@ -147,7 +148,6 @@ Object.map(displayTypes,(c,k)=>{
     }
 })
 
-export const arrayValueSeparator = ", ";
 
 const dataSourceArgs = {};
 export const footerFieldName = "dgrid-fters-fields";
@@ -263,6 +263,8 @@ export default class CommonDatagridComponent extends AppComponent {
             dateFields : {value : {}},
             sectionListColumnsSize : {value : {current:0}}, //la taille du nombre d'éléments de section dans les colonnes
             chartRef : {value : {current:null}},
+            layoutRef : {value : {}},
+            isRenderingRef : {value : {current:false}},
             chartSeriesNamesColumnsMapping : {value : {}},//le mappage entre les index des series et les colonnes coorespondantes
         }) 
         this.state.abreviateValues = "abreviateValues" in this.props? !!this.props.abreviateValues : !!this.getSessionData("abreviateValues");
@@ -683,7 +685,7 @@ export default class CommonDatagridComponent extends AppComponent {
         return false;
     }
     getSelectableColumNameStyle(){
-        return {alignItems:'flex-start',marginLeft:0,marginRight:0,paddingLeft:0,paddingRight:0,paddingTop:0,paddingBottom:0};
+        return {alignItems:'flex-start',marginLeft:0,marginRight:0,marginTop:0,marginBottom:0,paddingLeft:0,paddingRight:0,paddingTop:0,paddingBottom:0};
     }
     isSelectableColumn(columnDef,columnField){
         return isObj(columnDef) && defaultStr(columnDef.field,columnField) === this.getSelectableColumName();
@@ -1109,7 +1111,6 @@ export default class CommonDatagridComponent extends AppComponent {
                 return this.setIsLoading(true,()=>{
                     this.prepareData({data:this.INITIAL_STATE.data},(state)=>{
                         this.setState({...state,showFooters:showOrHide},()=>{
-                            this.setIsLoading(false,false);
                             this.isUpdating = false;
                             this.setSessionData({showFooters:showOrHide});
                         })
@@ -1131,8 +1132,6 @@ export default class CommonDatagridComponent extends AppComponent {
     setState(a,b){
         super.setState(a,b);
     }
-    
-   
    toggleFixedTableState(){
        setTimeout(()=>{
             this.setIsLoading(true,()=>{
@@ -1140,7 +1139,6 @@ export default class CommonDatagridComponent extends AppComponent {
                 this.setState({fixedTable},()=>{
                     this.updateLayout();
                     this.setSessionData("fixedTable",fixedTable);
-                    this.setIsLoading(false,false);
                 })
             },true)
        },TIMEOUT)
@@ -1163,7 +1161,6 @@ export default class CommonDatagridComponent extends AppComponent {
                         this.filters[field].value = this.filters[field].defaultValue = undefined;
                         this.doFilter({value:undefined,field})
                     }
-                    this.setIsLoading(false,false);
                 });
             },true)
         },TIMEOUT)
@@ -1181,7 +1178,6 @@ export default class CommonDatagridComponent extends AppComponent {
             this.setIsLoading(true,()=>{
                 this.prepareColumns({columns});
                 this.setState({columns});
-                this.setIsLoading(false,false);
             })
         },TIMEOUT)
    }
@@ -1280,7 +1276,6 @@ export default class CommonDatagridComponent extends AppComponent {
                 const {sectionListColumns:pSListColumns} = this.prepareColumns({sectionListColumns});
                 this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns:pSListColumns},(state)=>{
                     this.setState({...state,sectionListColumns:pSListColumns},()=>{
-                        this.setIsLoading(false,false);
                         this.setSessionData("sectionListColumns",Object.keys(pSListColumns));
                     });
                 });
@@ -1294,7 +1289,6 @@ export default class CommonDatagridComponent extends AppComponent {
                 this.setState({...state,sectionListColumns,displayOnlySectionListHeaders:false},()=>{
                     this.setSessionData("sectionListColumns",null);
                     this.setSessionData("displayOnlySectionListHeaders",false);
-                    this.setIsLoading(false,false);
                 });
             });
         },true);
@@ -1325,7 +1319,6 @@ export default class CommonDatagridComponent extends AppComponent {
         if(tt.code == 'table'){
             return this.setIsLoading(true,()=>{
                 this.setState({displayType},()=>{
-                    this.setIsLoading(false,false);
                     this.persistDisplayType(displayType);
                 });
             },true)
@@ -1334,7 +1327,6 @@ export default class CommonDatagridComponent extends AppComponent {
                 setTimeout(()=>{
                     this.setIsLoading(true,()=>{
                         this.setState({chartConfig,displayType},()=>{
-                            this.setIsLoading(false,false);
                             this.persistDisplayType(displayType);
                         })
                     },true);
@@ -1360,7 +1352,6 @@ export default class CommonDatagridComponent extends AppComponent {
                 this.prepareData({data:this.INITIAL_STATE.data},(state)=>{
                     const abreviateValues = !this.state.abreviateValues;
                     this.setState({abreviateValues,...state},()=>{
-                        this.setIsLoading(false,false);
                         this.setSessionData("abreviateValues",abreviateValues);
                     })
                 });
@@ -1407,7 +1398,6 @@ export default class CommonDatagridComponent extends AppComponent {
                 this.prepareData({data:this.INITIAL_STATE.data,aggregatorFunction:ag.code},(state)=>{
                     this.setState(state,()=>{
                         this.setSessionData("aggregatorFunction",ag.code);
-                        this.setIsLoading(false,false);
                     })
                 })
             },true);
@@ -1817,6 +1807,14 @@ export default class CommonDatagridComponent extends AppComponent {
             })
         }
         if(!items.length) return null;
+        if(!this.isAccordion()){
+            items.unshift({
+                text : "Exporter les données",
+                divider : true,
+                textBold : true,
+                icon : "export",
+            })
+        }
         return <Menu
             items = {items}
             title ="Export des données du tableau"
@@ -1848,9 +1846,7 @@ export default class CommonDatagridComponent extends AppComponent {
                         onPress : ()=>{
                             this.configureChart(false).then((chartConfig)=>{
                                 this.setIsLoading(true,()=>{
-                                    this.setState({chartConfig},()=>{
-                                        this.setIsLoading(false,false);
-                                    });
+                                    this.setState({chartConfig});
                                 },true)
                             })
                         }
@@ -2233,6 +2229,7 @@ export default class CommonDatagridComponent extends AppComponent {
         return <Chart
             options = {chartOptions}
             ref = {this.chartRef}
+            onRender = {this.onRender.bind(this)}
             key = {chartOptions.chart.id+"-"+this.state.displayType}
         />
    }
@@ -2252,7 +2249,6 @@ export default class CommonDatagridComponent extends AppComponent {
                 return this.setIsLoading(true,()=>{
                     this.prepareData({data:this.INITIAL_STATE.data,displayOnlySectionListHeaders},(state)=>{
                         this.setState({...state,showFooters});
-                        this.setIsLoading(false,false);
                     })
                 })
             } else {
@@ -2263,9 +2259,7 @@ export default class CommonDatagridComponent extends AppComponent {
                             data.push(d);
                         }
                     });
-                    this.setState({data,displayOnlySectionListHeaders,showFooters},()=>{
-                        this.setIsLoading(false,false);
-                    });
+                    this.setState({data,displayOnlySectionListHeaders,showFooters});
                 },true)
             }
         },0);
@@ -2800,8 +2794,8 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         return <View testID={testID+"_ContentContainer"}  style={[theme.styles.w100,isA && this.state.displayOnlySectionListHeaders && {borderTopColor:theme.colors.divider,borderTopWidth:1},isA ? [theme.styles.ph2,theme.styles.pt1] : [theme.styles.pt1,theme.styles.ph1],theme.styles.justifyContentCenter,theme.styles.alignItemsCenter,theme.styles.pb1,!cells && theme.styles.ml1,theme.styles.mr1,cStyle]}>
             <Label testID={testID+"_Label"} splitText numberOfLines={3} textBold style={[theme.styles.w100,{color:theme.colors.primaryOnSurface,fontSize:isA?15 :16},lStyle]}>{label}</Label>
-            {cells ? <View testID={testID+"_TableRow"} style = {[theme.styles.w100,theme.styles.row,isA && theme.styles.pt1,theme.styles.alignItemsFlexStart]}
-            >{this.isAccordion() ? <ScrollView testID={testID+"_ScrollView"} horizontal>{cells}</ScrollView> : cells}</View> : null}
+            {cells ? <View testID={testID+"_TableRow"} style = {[theme.styles.w100,theme.styles.row,isA && theme.styles.pt1,theme.styles.alignItemsFlexStart,this.isAccordion() && theme.styles.rowWrap]}
+            >{cells}</View> : null}
         </View>
     }
     isRowSelected(rowKey,rowIndex){
@@ -2876,6 +2870,7 @@ export default class CommonDatagridComponent extends AppComponent {
 
     ///supprime tous les filtres s'ils existenent
     _clearAllFilters (){
+        this.isClearingAllFilters = true;
         let filters = {};
         let defValue = undefined;
         Object.map(this.filters,(f,i)=>{
@@ -2883,9 +2878,14 @@ export default class CommonDatagridComponent extends AppComponent {
             defValue = undefined;
             if(f.type =="select") defValue = [];
             filters[i] = {...f,value:defValue,defaultValue:defValue}
+        });
+        Object.map(this.filteredValues,(v,i)=>{
+            delete this.filteredValues[i];
         })
         this.filters = filters;
+        console.log(this.filters," is fffff");
         this.refresh(true);
+        this.isClearingAllFilters = false;
     }
     clearAllFilters(){
         if(isObj(this.state.filteredColumns)){
@@ -2928,7 +2928,8 @@ export default class CommonDatagridComponent extends AppComponent {
             filter.defaultValue = arg.defaultValue;
             filter.operator = operator;
             filter.action = defaultStr(originAction,action);            
-        }
+        } 
+        if(this.isClearingAllFilters) return;
         return this.doFilter(arg);
     }
     ///si les filtres devront être convertis au format SQL
@@ -2952,6 +2953,48 @@ export default class CommonDatagridComponent extends AppComponent {
         if(prepare === false) return this.filters;
         return prepareFilters(this.filters,{filter:this.canHandleFilterVal.bind(this),convertToSQL:convertFiltersToSQL});
     }
+    hasFilters (){
+        if(!this.isFilterable()) return false;
+        const filters = this.getFilters({prepare:false});
+        for(let i in filters){
+            if(isObj(filters[i]) && filters[i].field && 'value' in filters[i]) return true;
+        }
+        return false;
+    }
+    renderFiltersMenu(forceD){
+        if(!this.isFilterable()) return null;
+        const  showFilters = this.canShowFilters();
+        const anchor = p=> forceD !== true && isMobileOrTabletMedia()? <Icon
+            icon = "filter-plus"
+            {...p}
+        /> :<Button
+            normal
+            children = "Filtres"
+            icon = "filter-plus"
+            {...p}
+            style={theme.styles.mh05}
+            contentStyle = {[theme.styles.justifyContentFlexStart]}
+        />;
+        const toggleItem = {
+            icon : showFilters?'eye-off':'eye',
+            children : showFilters?'Masquer/Filtres':'Afficher/Filtres',
+            onPress : x => showFilters?this.hideFilters():this.showFilters(),
+        }
+        if(false && this.hasFilters()){
+             return  <Menu
+                anchor = {anchor}
+                items = {[
+                   toggleItem,
+                   {
+                     text : "Tout effacer",
+                     icon : "filter-remove",
+                     onPress : this.clearAllFilters.bind(this),
+                   } 
+                ]}
+            />
+        }
+        return anchor(toggleItem)
+    }
     onChangeDataSources(args){
         let {dataSources,server} = args;
         if(this.props.onChangeDataSources =='function' && this.props.onChangeDataSources({dataSources,prev:this.currentDataSources}) === false) return;
@@ -2976,9 +3019,7 @@ export default class CommonDatagridComponent extends AppComponent {
                     if(isObjOrArray(data)){
                         this.setIsLoading(true,()=>{
                             this.prepareData({data},(state)=>{
-                                this.setState(state,()=>{
-                                    this.setIsLoading(false,false);
-                                })
+                                this.setState(state)
                             })
                         },true)
                     }
@@ -3076,22 +3117,43 @@ export default class CommonDatagridComponent extends AppComponent {
     forceRefresh(){
         this.refresh(true);
     }
+    /***retourne la hauteur maximale du composant FlashList */
+    getMaxListHeight(){
+        const {height:winheight} = Dimensions.get("window");
+        const layout = defaultObj(this.layoutRef.current);
+        let maxHeight = winheight-100;
+        if(layout && typeof layout.windowHeight =='number' && layout.windowHeight){
+            const diff = winheight - Math.max(defaultNumber(layout.y,layout.top),100);
+            if(diff<=350){
+                maxHeight = Math.max(Math.min(winheight,350),200);
+            } else {
+                maxHeight = diff;
+            }
+        }
+        return maxHeight;
+    }
     refresh (force,cb){
         if(isFunction(force)){
             let t = cb;
             cb = force;
             force = isBool(t)? t : true;
         }
-        return this.fetchData({force:defaultBool(force,true)}).then((data)=>{
-            if(isFunction(cb)){
-                cb(data);
-            }
-            if(typeof this.props.onRefreshDatagrid ==='function'){
-                this.props.onRefreshDatagrid({context:this,force});
-            }
+        return new Promise((resolve,reject)=>{
+            setTimeout(()=>{
+                return this.fetchData({force:defaultBool(force,true)}).then((data)=>{
+                    if(isFunction(cb)){
+                        cb(data);
+                    }
+                    if(typeof this.props.onRefreshDatagrid ==='function'){
+                        this.props.onRefreshDatagrid({context:this,force});
+                    }
+                }).then(resolve).catch(reject);
+            },100);
         })
     }
-    onResizePage(){}
+    onResizePage(){
+        this.updateLayout();
+    }
     componentDidMount(){
         super.componentDidMount();
         APP.on(APP.EVENTS.RESIZE_PAGE,this._events.RESIZE_PAGE);
@@ -3151,12 +3213,20 @@ export default class CommonDatagridComponent extends AppComponent {
     canSetIsLoading(){
         return isObj(this.progressBarRef.current) && typeof this.progressBarRef.current.setIsLoading =='function' ? true : false;
     }
+    onRender(){
+        if(this.isRenderingRef.current === true){
+            setTimeout(()=>{
+                this.isRenderingRef.current = false;
+                return this.setIsLoading(false);
+            },500);
+        }
+    }
     /***
      * @param {boolean} loading
      * @param {function | boolean} cb | enablePointerEvents
      * @param {boolean|function} enablePointerEvents
      */
-    setIsLoading(loading,cb,enablePointerEvents){
+    setIsLoading (loading,cb,enablePointerEvents){
         if(typeof cb =='boolean'){
             const t = enablePointerEvents;
             enablePointerEvents = cb;
@@ -3165,23 +3235,31 @@ export default class CommonDatagridComponent extends AppComponent {
         if(typeof enablePointerEvents =='boolean'){
             this.enablePointerEventsRef.current = enablePointerEvents;
         }
+        const timeout = 300;
         setTimeout(()=>{
+           cb = typeof cb =='function'? cb : x=>true;
             if(this.canSetIsLoading() && typeof loading =='boolean'){
+                if(loading === true){
+                    this.isRenderingRef.current = true;
+                } else if(this.isRenderingRef.current === true){
+                    return setTimeout(cb,timeout);;
+                }
                 return this.progressBarRef.current.setIsLoading(loading,()=>{
-                    if(typeof cb =='function'){
-                        cb();
-                    }
+                    setTimeout(cb,timeout);
                 });
-            } else if(typeof cb =='function'){
-                cb();
+            } else {
+                setTimeout(cb,timeout);
             }
-        },loading === false && enablePointerEvents === false ? 0 : 0);
+        },loading === false && enablePointerEvents === false ? timeout : 0);
         return false;
     }
      /**** met à jour l'état de progression de la mise à jour du tableau */
      updateProgress(isLoading,cb){
         this.isLoadingRef.current = defaultBool(isLoading,!!!this.isLoadingRef.current);
         cb = typeof cb =='function'?cb : typeof isLoading =='function'? isLoading : null
+        if(isLoading){
+            this.isRenderingRef.current = true;
+        }
         if(this.canSetIsLoading()){
             return this.setIsLoading(isLoading,cb);
         }
@@ -3233,6 +3311,8 @@ export default class CommonDatagridComponent extends AppComponent {
     updateLayout(p){
         this.measureLayout(state=>{
             if(isObj(state)){
+                this.layoutRef.current = state;
+                return;
                 if(!this.state.isReady){
                     state.isReady = true;
                 }
@@ -3245,16 +3325,14 @@ export default class CommonDatagridComponent extends AppComponent {
     }
     UNSAFE_componentWillReceiveProps(nextProps){
         if(Object.size(nextProps.data) === Object.size(this.props.data) && (nextProps.data == this.props.data || stableHash(nextProps.data) === stableHash(this.props.data))) {
-            if( typeof this.props.isLoading=='boolean' && nextProps.isLoading !== this.props.isLoading && typeof nextProps.isLoading =='boolean'){
+            /*if( !this.isRenderingRef.current && typeof this.props.isLoading=='boolean' && nextProps.isLoading !== this.props.isLoading && typeof nextProps.isLoading =='boolean'){
                 this.setIsLoading(nextProps.isLoading)
-            }
+            }*/
             return false;
         }
         this.setIsLoading(true,()=>{
             this.prepareData({...nextProps,force:true},(state)=>{
-                this.setState(state,()=>{
-                    this.setIsLoading(false,false);
-                })
+                this.setState(state)
             });
         },true);
     }
@@ -3262,7 +3340,7 @@ export default class CommonDatagridComponent extends AppComponent {
         return CommonDatagridComponent.getDefaultPreloader();
     }
     isLoading (){
-        if(this.state.isReady === false) return true;
+        if(this.state.isReady === false || this.isRenderingRef.current) return true;
         if(typeof this.props.isLoading =='boolean') return this.props.isLoading;
         return this.isLoadingRef.current === true ? true : false;
     }
@@ -3285,14 +3363,18 @@ export default class CommonDatagridComponent extends AppComponent {
     getSort(){
         return defaultObj(this.sortRef.current);
     }
-    renderHeaderCell({columnDef,columnField}){
+    renderHeaderCell({columnDef,containerProps,columnField}){
         if(this.isSelectableColumn(columnDef,columnField)){
+            const style = this.getSelectableColumNameStyle();
+            if(isObj(containerProps)){
+                containerProps.style = [this.getSelectableColumNameStyle(),containerProps.style];
+            }
             return <Checkbox
                 testID = "RN_SelectColumnHeaderCell"
                 checked  ={this.isAllRowsSelected()?true:false}
                 key = {this.getSelectableColumName()}
                 secondaryOnCheck
-                style = {this.getSelectableColumNameStyle()}
+                style = {style}
                 ref = {this.selectableColumnRef}
                 onPress = {({checked})=>{
                     this.handleAllRowsToggle(!checked);  
@@ -3378,7 +3460,7 @@ export default class CommonDatagridComponent extends AppComponent {
         const renderText = isSectionListHeader === true || customRenderRowCell === false ? true : false;
         if(!isObj(rowData)) return renderText ? null : {render:null,extra:{}};
         rowIndex = isDecimal(rowIndex)? rowIndex : isDecimal(index)? index : undefined;
-    rowCounterIndex = isDecimal(rowCounterIndex) ? rowCounterIndex : isDecimal(rowIndex)? rowIndex+1 : defaultDecimal(rowCounterIndex);
+        rowCounterIndex = isDecimal(rowCounterIndex) ? rowCounterIndex : isDecimal(rowIndex)? rowIndex+1 : defaultDecimal(rowCounterIndex);
         if(this.isSelectableColumn(columnDef,columnField)){
             if(renderText) return null;
             rowKey = rowKey ? rowKey : this.getRowKey(rowData,rowIndex);
@@ -3398,6 +3480,8 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         return renderRowCell({
             ...arg,
+            rowIndex,
+            rowCounterIndex,
             formatValue,
             context : this,
             getRowKey : this.getRowKey.bind(this),

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

@@ -191,4 +191,7 @@ export const formatValue = (value,format,abreviateValues)=>{
         return abreviateValues? value.abreviate2FormatMoney() : value.formatMoney();
     }
     return abreviateValues ? value.abreviate() : value.formatNumber();
-}
+}
+
+
+export const arrayValueSeparator = ", ";

package/src/components/Datagrid/IndexComponent.js

@@ -20,10 +20,7 @@ const DatagridMainComponent = React.forwardRef((props,ref)=>{
     let Component = TableComponent;
     const canRenderAccordion = (isFunction(props.accordion) || (isObj(props.accordionProps) && isFunction(props.accordionProps.accordion)) || props.accordion === true);
     let renderType = defaultStr(getRenderType(),isDesk? "table":'accordion').trim().toLowerCase()
-    if(false && (renderType ==="dashboard" || props.dashobard === true)){
-        Component = Dashboard;
-        delete props.dashobard;
-    } else if(renderType == 'accordion' && canRenderAccordion){
+    if(renderType == 'accordion' && canRenderAccordion){
         Component = AccordionComponent;
     } else if(renderType =='table'){
         Component = TableComponent;

package/src/components/Datagrid/SWRDatagrid.js

@@ -223,9 +223,9 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         },
     });
     const isLoading = isLoadingRef.current  && customIsLoading || false;
-    React.useEffect(()=>{
+    /*React.useEffect(()=>{
         innerRef.current && innerRef.current.setIsLoading && innerRef.current.setIsLoading(isLoading);
-    },[isLoading])
+    },[isLoading])*/
     React.useEffect(()=>{
         const cb = refreshCBRef.current;
         refreshCBRef.current = null;
@@ -395,20 +395,6 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
                     </View>
                 </View>
             }}
-            /*ListFooterComponent = {(props)=>{
-                const r = typeof ListFooterComponent =='function'? ListFooterComponent(props) : null;
-                if(!loading) return r;
-                const aContent = <View testID={testID+"_ListHeaderActivityIndicator"} style={[theme.styles.w100,theme.styles.justifyContentCenter]}>
-                    <ActivityIndicator color={theme.colors.primary}/>
-                </View>;
-                if(r){
-                    return <View testID={testID+"_ListHeaderContainer"} style={[theme.styles.w100]}>
-                        {r}
-                        {aContent}
-                    </View>
-                }
-                return aContent;
-            }}*/
             handleQueryLimit = {false}
             handlePagination = {false}
             autoSort = {canSortRemotely()? false : true}

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

@@ -44,9 +44,6 @@ const DatagridFactory = (Factory)=>{
         bindResizeEvents(){
             return true;
         }
-        onResizePage(){
-            this.updateLayout();
-        }
         renderFilter(props,headerFilters){
             headerFilters.push(props);
         }
@@ -169,7 +166,7 @@ const DatagridFactory = (Factory)=>{
             const {columnsWidths:widths} = this.state;
             const showFooters = this.canShowFooters(), showFilters = this.canShowFilters();
             const isLoading = this.isLoading();
-            let _progressBar = this.getProgressBar();
+            const progressBar = this.getProgressBar();
             const pointerEvents = this.getPointerEvents(); 
 
             let restItems = [...this.renderCustomMenu()];
@@ -193,17 +190,7 @@ const DatagridFactory = (Factory)=>{
                     }] : [])
                 ]
             }   
-            const {width,height:winheight} = Dimensions.get("window");
-            const {layout} = this.state;
-            let maxHeight = winheight-100;
-            if(layout && typeof layout.windowHeight =='number' && layout.windowHeight){
-                const diff = winheight - Math.max(defaultNumber(layout.y,layout.top),100);
-                if(winheight<=350){
-                    maxHeight = 350;
-                } else {
-                    maxHeight = diff;
-                }
-            }
+            const maxHeight = this.getMaxListHeight();
             const rPagination = showPagination ? <View style={[styles.paginationContainer]}>
                 <ScrollView horizontal showsHorizontalScrollIndicator={!isLoading} style={styles.paginationContainerStyle} contentContainerStyle={styles.minW100}>
                     <View style={[styles.paginationContent]}>
@@ -243,23 +230,6 @@ const DatagridFactory = (Factory)=>{
                                 />
                              })}
                         </>}
-                        {exportable && (
-                            <>{/**
-                             * <ExportTable 
-                                        {...exportTableProps}
-                                        selector = {this.datagridDomId}
-                                        ref = {(el)=>{
-                                            if(el){
-                                                this.exportDataInstance = el;
-                                            }
-                                        }}
-                                        getAllData = {()=>{
-                                            return this.INITIAL_STATE.data;
-                                        }}
-                                    />
-                            * 
-                            */}</>
-                        )}
                         <BottomSheetMenu
                             anchor = {(props)=>{
                                 return <Icon {...props} title={isMobile?"Actions":"Colonnes"} name={isMobile?MENU_ICON:'view-column'}></Icon>
@@ -324,7 +294,7 @@ const DatagridFactory = (Factory)=>{
                     </View>
                 </ScrollView>
             </View> : null;
-            return <View style={[styles.container,{maxHeight}]} pointerEvents={pointerEvents}>
+            return <View style={[styles.container,{flex:1,maxHeight}]} pointerEvents={pointerEvents}>
                 <View ref={this.layoutRef}>
                     {this.props.showActions !== false ? <DatagridActions 
                         pointerEvents = {pointerEvents}
@@ -335,10 +305,13 @@ const DatagridFactory = (Factory)=>{
                         actions = {actions}
                     /> : null}
                     {rPagination}
-                    {_progressBar}  
+                    {progressBar}  
                 </View>
-                {<Table
-                    renderListContent = {canRenderChart? false:true}
+                {canRenderChart ?
+                    <View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
+                        {this.renderChart()}
+                    </View> : 
+                <Table
                     ref = {this.listRef}
                     {...rest}
                     onLayout = {(args)=>{
@@ -347,9 +320,7 @@ const DatagridFactory = (Factory)=>{
                         }
                         this.updateLayout(args);
                     }}
-                    children = {canRenderChart ? <View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
-                        {this.renderChart()}
-                    </View> : null}
+                    onRender = {this.onRender.bind(this)}
                     getItemType = {this.getFlashListItemType.bind(this)}
                     renderItem = {this.renderFlashListItem.bind(this)}
                     hasFooters = {hasFootersFields && !canRenderChart ? true : false}

package/src/components/Dialog/Dialog.js

@@ -20,7 +20,6 @@ import {ACTION_ICON_SIZE} from "$ecomponents/AppBar";
 import DialogFooter from "./DialogFooter";
 import { Dimensions } from "react-native";
 import Surface from "$ecomponents/Surface";
-import stableHash from "stable-hash";
 
 export const FOOTER_HEIGHT = 50;
 export const HEADER_HEIGHT = 50;

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

@@ -15,13 +15,8 @@ export default class FormDataDialogComponent extends FormDataActions{
             dialogRef : {value:React.createRef(null)}
         });
     }
-
-    getMainProps(){
-        return defaultObj(this.props.dialogProps,this.props);
-    }
-    
     isControlled(){
-        const dialogProps = this.getMainProps();
+        const dialogProps = defaultObj(this.props.dialogProps,this.props);
         return dialogProps.controlled ? dialogProps.controlled : typeof this.props.controlled =='boolean'? this.props.controlled : true;
     }
     getDialogComponent(){

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

@@ -12,7 +12,6 @@ import {renderActions} from "$ecomponents/Dialog/utils";
 import {handleBeforeSaveCallback} from "./utils";
 import componentsTypes from "./componentsTypes";
 import { keyboardShortcuts } from "../utils";
-import {getScreenProps} from "$cnavigation";
 import appConfig from "$capp/config";
 
 export default class FormDataComponent extends AppComponent{
@@ -65,7 +64,7 @@ export default class FormDataComponent extends AppComponent{
         return true;
     }
     getAppBarActionsProps(props){
-        let {data,onCancel,perm,beforeSaveArgumentsMutator,beforeSave,actions,saveDataMutator,...rest} = getScreenProps(defaultObj(props,this.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 ;
         beforeSave = typeof beforeSave =='function'? beforeSave : x=>true;
         return getAppBarActionsProps({