@fto-consult/expo-ui 2.46.4 → 2.47.1

package/package.json

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

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

@@ -9,7 +9,7 @@ import Tooltip from "$ecomponents/Tooltip";
 import setQueryLimit from "./setQueryLimit";
 import {showConfirm} from "$ecomponents/Dialog";
 import Label from "$ecomponents/Label";
-import Icon,{COPY_ICON} from "$ecomponents/Icon";
+import Icon,{COPY_ICON,CHECKED_ICON,UNCHECKED_ICON} from "$ecomponents/Icon";
 import filterUtils from "$cfilters";
 import {sortBy,isDecimal,defaultVal,sanitizeSheetName,extendObj,isObjOrArray,isObj,defaultNumber,defaultStr,isFunction,defaultBool,defaultArray,defaultObj,isNonNullString,defaultDecimal} from "$utils";
 import {Datagrid as DatagridContentLoader} from "$ecomponents/ContentLoader";
@@ -36,10 +36,10 @@ import notify from "$cnotify";
 import FileSystem from "$file-system";
 import sprintf from "$cutils/sprintf";
 import { renderRowCell,formatValue,arrayValueSeparator } from "./utils";
-import {ScrollView} from "react-native";
 import Button from "$ecomponents/Button";
 import stableHash from "stable-hash";
 import * as XLSX from "xlsx";
+import {convertToSQL} from "$ecomponents/Filter";
 
 export const TIMEOUT = 100;
 
@@ -264,21 +264,20 @@ export default class CommonDatagridComponent extends AppComponent {
             sectionListColumnsSize : {value : {current:0}}, //la taille du nombre d'éléments de section dans les colonnes
             chartRef : {value : {current:null}},
             layoutRef : {value : {}},
+            hidePreloaderOnRenderKey : {value : uniqid("hide-preloader-on-render")},
             isRenderingRef : {value : {current:false}},
             chartSeriesNamesColumnsMapping : {value : {}},//le mappage entre les index des series et les colonnes coorespondantes
         }) 
+        const config = extendObj(true,{},this.getSessionData("config"),this.props.chartConfig);
+        Object.map(config,(v,k)=>{
+            if(typeof v =='function'){
+                delete config[k];
+            }
+        });
+        this.state.fetchOnlyVisibleColumns = !!defaultVal(this.props.fetchOnlyVisibleColumns,config.fetchOnlyVisibleColumns,this.getSessionData("fetchOnlyVisibleColumns"));
         this.state.abreviateValues = "abreviateValues" in this.props? !!this.props.abreviateValues : !!this.getSessionData("abreviateValues");
-        const sessionAggregator = defaultStr(this.getSessionData("aggregatorFunction")).trim();
-        const aggregatorProps = defaultStr(this.props.aggregatorFunction).trim();
-        let aggregatorFunction = null;
-        if(aggregatorProps && isValidAggregator(this.aggregatorFunctions[aggregatorProps])){
-            aggregatorFunction = aggregatorProps;
-        } else if(isNonNullString(sessionAggregator) && isValidAggregator(this.aggregatorFunctions[sessionAggregator])){
-            aggregatorFunction = sessionAggregator;
-        } else {
-            aggregatorFunction = Object.keys(this.aggregatorFunctions)[0];
-        }
-        this.state.aggregatorFunction= aggregatorFunction;
+        const sessionAggregator = this.getSessionData("aggregatorFunction"); 
+        this.state.aggregatorFunction= this.isValidAggregator(config.aggregatorFunction) && config.aggregatorFunction || this.isValidAggregator(this.props.aggregatorFunction) && this.props.aggregatorFunction || this.isValidAggregator(sessionAggregator) && sessionAggregator || Object.keys(this.aggregatorFunctions)[0];;
         this.isLoading = this.isLoading.bind(this);
         this.getProgressBar = this.getProgressBar.bind(this);
         this.sortRef.current.dir = defaultStr(this.sortRef.current.dir,this.sortRef.current.column == "date"?"desc":'asc')
@@ -290,6 +289,7 @@ export default class CommonDatagridComponent extends AppComponent {
         this.INITIAL_STATE = {
             data,
         }
+        this.prepareFetchData();
         this._datagridId = isNonNullString(this.props.id)? this.props.id : uniqid("datagrid-id")
         this.canDoFilter = true;    
         this.filters =  {}
@@ -306,15 +306,14 @@ export default class CommonDatagridComponent extends AppComponent {
             }
         });
         this.state.filteredColumns = defaultObj(this.getSessionData("filteredColumns"+this.getSessionNameKey()),this.props.filters);
-        this.filtersSelectors = {selector:this.getFilters()};
         const {sectionListColumns} = this.prepareColumns();
         this.state.sectionListColumns = sectionListColumns;
         if(this.canHandleColumnResize()){
             this.state.columnsWidths = this.preparedColumns.widths;
         }
-        this.state.chartConfig = extendObj(true,{},this.getSessionData("chartConfig"),this.props.chartConfig);
-        if(!("sparkline" in this.state.chartConfig) && this.isDashboard()){
-            this.state.chartConfig.sparkline = true;
+        this.state.config = config;
+        if(!("sparkline" in this.state.config) && this.isDashboard()){
+            this.state.config.sparkline = true;
         }
         const dType = defaultStr(this.props.displayType,this.getSessionData("displayType"),"table");
         this.state.displayType = this.displayTypes[dType] ? this.displayTypes[dType].code : "table" in this.displayTypes ? "table" : Object.keys(this.displayTypes)[0]?.code;
@@ -368,7 +367,34 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         this.persistDisplayType(this.state.displayType);
     }
-
+    /*** si l'on peut récuperer à distance, les colonnes seulement visibles */
+    canFetchOnlyVisibleColumns(){
+        return this.isTableData() && this.props.canFetchOnlyVisibleColumns !== false && true || false;
+    }
+    isFetchOnlyVisibleColumnsEnabled(){
+        return this.canFetchOnlyVisibleColumns() && !!this.state.fetchOnlyVisibleColumns;
+    }
+    fetchDataIfCanFetchColumnsIfVisible(){
+        if(!this.canFetchOnlyVisibleColumns()) return;
+        this.toggleHidePreloaderOnRender(false);
+        return this.fetchData({force:true});
+    }
+    toggleFetchOnlyVisibleColumns(){
+        if(!this.canFetchOnlyVisibleColumns()){
+            return Promise.reject({});
+        }
+        const fetchOnlyVisibleColumns = !this.isFetchOnlyVisibleColumnsEnabled();
+        setTimeout(()=>{
+            this.setIsLoading(true,()=>{
+                this.toggleHidePreloaderOnRender(true);
+                this.setSessionData("fetchOnlyVisibleColumns",fetchOnlyVisibleColumns);
+                this.setState({fetchOnlyVisibleColumns},this.fetchDataIfCanFetchColumnsIfVisible.bind(this))
+            },true) 
+        },TIMEOUT)
+    }
+    isValidAggregator(aggregatorFunction){
+        return isNonNullString(aggregatorFunction) && isValidAggregator(this.aggregatorFunctions[aggregatorFunction])
+    }
     /*** si une ligne peut être selectionable */
     canSelectRow(row){
         return isObj(row) && row.isSectionListHeader !== true ? true : false;
@@ -957,7 +983,7 @@ export default class CommonDatagridComponent extends AppComponent {
         this._previousSortObj = Object.clone(this.sortRef.current);
         this.sortRef.current = sort;
         this.prepareColumns({sortedColumn : this.sortRef.current});
-        if(typeof this.props.onSort =='function' && this.props.onSort({...sort,context:this,sort,data:this.INITIAL_STATE.data,fields:this.state.columns,columns:this.state.columns}) === false){
+        if(typeof this.props.onSort =='function' && this.props.onSort({context:this,sort,data:this.INITIAL_STATE.data,fields:this.state.columns,columns:this.state.columns}) === false){
             return;
         }
         this.prepareData({data:this.INITIAL_STATE.data,updateFooters:false},(state)=>{
@@ -1005,6 +1031,17 @@ export default class CommonDatagridComponent extends AppComponent {
     */
     renderCustomMenu(){
         const customMenu = []
+        if(this.canFetchOnlyVisibleColumns()){
+            const isFE = this.isFetchOnlyVisibleColumnsEnabled();
+            customMenu.push({
+                text : "Valeurs Cols visibles",
+                tooltip : "Récupérer uniquement les valeurs des colonnes visibles",
+                icon : "material-radio-button-{0}".sprintf(isFE?"on":"off"),
+                onPress : (e)=>{
+                    this.toggleFetchOnlyVisibleColumns();
+                }
+            })
+        }
         Object.map(this.props.customMenu,(menu,i)=>{
             if(isObj(menu)){
                 const {onPress,label,text,children,...rest} = menu;
@@ -1177,7 +1214,8 @@ export default class CommonDatagridComponent extends AppComponent {
             }
             this.setIsLoading(true,()=>{
                 this.prepareColumns({columns});
-                this.setState({columns});
+                this.toggleHidePreloaderOnRender(this.canFetchOnlyVisibleColumns());
+                this.setState({columns},this.fetchDataIfCanFetchColumnsIfVisible.bind(this));
             })
         },TIMEOUT)
    }
@@ -1301,7 +1339,7 @@ export default class CommonDatagridComponent extends AppComponent {
      return !this.isPivotDatagrid() && this.hasFootersFields();
    }
    isValidChartConfig(){
-        const config = this.state.chartConfig;
+        const config = this.state.config;
         return isNonNullString(config.x) && isNonNullString(config.y);
    }
    canRenderChart(){
@@ -1323,21 +1361,21 @@ export default class CommonDatagridComponent extends AppComponent {
                 });
             },true)
         } else {
-            const cb = (chartConfig)=>{
+            const cb = (config)=>{
                 setTimeout(()=>{
                     this.setIsLoading(true,()=>{
-                        this.setState({chartConfig,displayType},()=>{
+                        this.setState({config,displayType},()=>{
                             this.persistDisplayType(displayType);
                         })
                     },true);
                 },200);
             }
             if(!this.isValidChartConfig()){
-                return this.configureChart(false).then((chartConfig)=>{
-                    cb(chartConfig);
+                return this.configureChart(false).then((config)=>{
+                    cb(config);
                 });
             }
-            cb({...this.state.chartConfig});
+            cb({...this.state.config});
         }
    }
    getActiveAggregatorFunction(){
@@ -1421,7 +1459,7 @@ export default class CommonDatagridComponent extends AppComponent {
         />
    }
    configureSectionLists(){
-        const config = this.getChartConfig();
+        const config = this.getConfig();
         return new Promise((resolve)=>{
             DialogProvider.open({
                 title : "Paramètres de groupe",
@@ -1445,13 +1483,13 @@ export default class CommonDatagridComponent extends AppComponent {
                         text : "Configurer",
                         icon : "check",
                         onPress : ({data})=>{
-                            const chartConfig = {...config,...data};
-                            this.setSessionData("chartConfig",chartConfig);
+                            const nConfig = {...config,...data};
+                            this.setSessionData("config",nConfig);
                             DialogProvider.close();
                             this.setIsLoading(true,true);
-                            this.prepareData({data:this.INITIAL_STATE.data,config:chartConfig},(state)=>{
-                                this.setState({...state,chartConfig},()=>{
-                                    resolve(chartConfig)
+                            this.prepareData({data:this.INITIAL_STATE.data,config:nConfig},(state)=>{
+                                this.setState({...state,config:nConfig},()=>{
+                                    resolve(nConfig)
                                 })
                             })
                         }
@@ -1464,7 +1502,7 @@ export default class CommonDatagridComponent extends AppComponent {
         if(!this.isChartRendable()){
             return Promise.reject({message:'Impossible de configurer le graphe car le type de données ne permet pas de rendu de type graphe'});
         }
-        const xItems = {},yItems = {},config = defaultObj(this.state.chartConfig);
+        const xItems = {},yItems = {},config = defaultObj(this.state.config);
         const series = {},seriesGroups = {};
         const footers = this.getFootersFields();
         const isValidConfig = this.isValidChartConfig();
@@ -1496,7 +1534,7 @@ export default class CommonDatagridComponent extends AppComponent {
             }
         }
         return new Promise((resolve,reject)=>{
-            const data = this.getChartConfig();
+            const data = this.getConfig();
             DialogProvider.open({
                 title : 'Configuration des graphes',
                 subtitle : false,
@@ -1608,23 +1646,23 @@ export default class CommonDatagridComponent extends AppComponent {
                         text : "Configurer",
                         icon : "check",
                         onPress : ({data})=>{
-                            const chartConfig = {...config,...data};
-                            this.setSessionData("chartConfig",chartConfig);
+                            const nConfig = {...config,...data};
+                            this.setSessionData("config",nConfig);
                             DialogProvider.close();
                             if(!isValidConfig && refreshChart !== false){
-                                return this.setState({chartConfig},()=>{
-                                    resolve(chartConfig)
+                                return this.setState({config:nConfig},()=>{
+                                    resolve(nConfig)
                                 })
                             }
-                            resolve(chartConfig);
+                            resolve(nConfig);
                         }
                     }
                 ]
             })
         })
    }
-   getChartConfig(){
-      return defaultObj(this.state.chartConfig);
+   getConfig(){
+      return defaultObj(this.state.config);
    }
    getChartIsRendableArgs(){
         return {
@@ -1640,7 +1678,7 @@ export default class CommonDatagridComponent extends AppComponent {
    downloadChart(){
         if(!this.chartRef.current || !this.chartRef.current.dataURI) return Promise.reject({message:'Référence du graphique non valide'});
         return this.chartRef.current.dataURI().then(({ imgURI, blob })=>{
-            const config = this.getChartConfig();
+            const config = this.getConfig();
             const fileName = sprintf(defaultStr(config.fileName,config.title,"graphe"));
             FileSystem.write({content:imgURI,fileName})
         });
@@ -1890,9 +1928,9 @@ export default class CommonDatagridComponent extends AppComponent {
                         text : "Configurer les graphes",
                         icon :"material-settings",
                         onPress : ()=>{
-                            this.configureChart(false).then((chartConfig)=>{
+                            this.configureChart(false).then((config)=>{
                                 this.setIsLoading(true,()=>{
-                                    this.setState({chartConfig});
+                                    this.setState({config});
                                 },true)
                             })
                         }
@@ -1968,7 +2006,7 @@ export default class CommonDatagridComponent extends AppComponent {
     *   @param {object} de la forme suivante : 
     *       @param {object} chartType le type de chart, l'un des types du tableau displayTypes en haut du présent fichier
     *       @param {object} yAxisColumn la colonne de l'axe vertical y
-    *       @param {object} xAxisColumn la colonne de l'axe des x de la courbe, pris dans les configurations du chart, chartConfig
+    *       @param {object} xAxisColumn la colonne de l'axe des x de la courbe, pris dans les configurations du chart, config
     *       @param {object} la fonction d'aggrégation, l'une des fonctions issues des fonctions d'aggrégations aggregatorsFuncions, @see : dans $components/Datagrid/Footer
     *   en affichage des tableaux de type sectionList, seul les colonnes de totalisation sont utilisées pour l'affichage du graphe
     *   Le nombre de graphes (series) à afficher est valable pour tous les graphes sauf les graphes de type pie/donut. 
@@ -1977,12 +2015,12 @@ export default class CommonDatagridComponent extends AppComponent {
    getSectionListHeadersChartOptions({chartType,yAxisColumn,xAxisColumn,aggregatorFunction}){
         if(!this.isSectionList()) return null;
         if(!isObj(chartType) || !isObj(yAxisColumn) || !yAxisColumn.field) return null;
-        if(!isValidAggregator(aggregatorFunction)){
+        if(!this.isValidAggregator(aggregatorFunction)){
             aggregatorFunction = this.getActiveAggregatorFunction();
         }
         const code = aggregatorFunction.code;
         const isDonut = chartType.isDonut || chartType.isRadial;
-        const config = this.getChartConfig();
+        const config = this.getConfig();
         //@see : https://apexcharts.com/docs/series/
         ///lorsqu'on affiche uniquement les totaux des sections, alors la visualition se fait sur uniquement sur la base des valeurs
         ///on parcoure uniquement les entêtes des sectionLis
@@ -2076,7 +2114,7 @@ export default class CommonDatagridComponent extends AppComponent {
             return null;
         }
         const isDonut = chartType.isDonut || chartType.isRadial;
-        const config = this.getChartConfig();
+        const config = this.getConfig();
         if(!this.state.columns[config.y]) return null;
         const yAxisColumn = this.state.columns[config.y];
         const type = defaultStr(yAxisColumn.jsType,yAxisColumn.type).toLowerCase();
@@ -2453,6 +2491,9 @@ export default class CommonDatagridComponent extends AppComponent {
                 },
                 title : title,
                 icon : visible?CHECKED_ICON_NAME : null,
+                right : false ? (p)=><Icon {...p} icon="material-gear"
+                    onPress = {(e)=>{console.log(e," is pressed toddd config")}}
+                /> : undefined
             });
             restCol.field = header.field;
             
@@ -2636,7 +2677,7 @@ export default class CommonDatagridComponent extends AppComponent {
     prepareData(args,cb){
         let {pagination,config,aggregatorFunction:customAggregatorFunction,displayOnlySectionListHeaders:cdisplayOnlySectionListHeaders,data,force,sectionListColumns,updateFooters} = defaultObj(args);
         cb = typeof cb ==='function'? cb : typeof args.cb == 'function'? args.cb : undefined;
-        config = isObj(config) && Object.size(config,true)? config : this.getChartConfig();
+        config = isObj(config) && Object.size(config,true)? config : this.getConfig();
         const aggregatorFunction = isNonNullString(customAggregatorFunction) && customAggregatorFunction in  this.aggregatorFunctions ? this.aggregatorFunctions[customAggregatorFunction] : this.getActiveAggregatorFunction();
         sectionListColumns = isObj(sectionListColumns) ? sectionListColumns : this.state.sectionListColumns;
         const displayOnlySectionListHeaders = typeof cdisplayOnlySectionListHeaders == 'boolean'?cdisplayOnlySectionListHeaders : this.state.displayOnlySectionListHeaders;
@@ -2766,9 +2807,9 @@ export default class CommonDatagridComponent extends AppComponent {
         if(this.getSectionListHeaderProp){
            return this.getSectionListHeaderProp(args);
         }
-        const chartConfig = isObj(args.config) && Object.size(args.config,true)? args.config : this.getChartConfig();
-        const displayGroupLabels = "displayGroupLabels" in chartConfig? chartConfig.displayGroupLabels : true;
-        const displayGroupLabelsSeparator = typeof chartConfig.displayGroupLabelsSeparator =='string'? chartConfig.displayGroupLabelsSeparator : arrayValueSeparator;
+        const config = isObj(args.config) && Object.size(args.config,true)? args.config : this.getConfig();
+        const displayGroupLabels = "displayGroupLabels" in config? config.displayGroupLabels : true;
+        const displayGroupLabelsSeparator = typeof config.displayGroupLabelsSeparator =='string'? config.displayGroupLabelsSeparator : arrayValueSeparator;
         const {fields,sectionListColumnsSize} = args;
         const d = [];
         Object.map(fields,(field,i)=>{
@@ -2780,7 +2821,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 columnField : defaultStr(field.field,i),
             });
             if(!isNonNullString(txt) && typeof txt !=='number') return;
-            if(sectionListColumnsSize == 1 || !displayGroupLabels){
+            if(!displayGroupLabels){
                 d.push(txt);
             } else {
                 d.push("{0} : {1}".sprintf(defaultStr(field.label,field.txt),txt))
@@ -3069,23 +3110,117 @@ export default class CommonDatagridComponent extends AppComponent {
         this.previousDataSources = dataSources;
         this.previousServer = server;
     }
+    prepareFetchData(fetchData){
+        this.INITIAL_STATE.fetchData = defaultVal(fetchData,this.props.fetchData);
+    }
     beforeFetchData(){}
-    fetchData({fetchOptions}){
-        if(typeof this.props.fetchData =='function'){
-            const r = this.props.fetchData(fetchOptions);
-            if(isPromise(r)){
-                return r.then((data)=>{
-                    if(isObjOrArray(data)){
-                        this.setIsLoading(true,()=>{
-                            this.prepareData({data},(state)=>{
-                                this.setState(state)
-                            })
-                        },true)
-                    }
-                })
+        /**** retourne la liste des items, utile lorsqu'une s'agit d'une fonction 
+        Lorsque data est une chaine de caractère, alors elle doit être sous la forme recommandée par la function 
+        getDataFunc de l'object dataSource
+        la props data, peut être une chaine de caractère contenant le nom de la base et de la bd de travail de l'application
+        example common[articles], dans ce cas, la fonction fetchData, aura pour rôle de chercher toutes les données qui match
+        la table dans la base common.
+        Elle pourra éventuellement passer directement la limite et les filtres à la fonction fetchdata
+    */
+    fetchData ({cb,callback,force,fetchOptions,...rest}){
+        if(!this._isMounted()) return Promise.resolve(this.state.data);
+        if(this.isFetchingData) {
+            if(!isPromise(this.fetchingPromiseData)){
+                this.fetchingPromiseData = Promise.resolve(this.state.data)
             }
-        }
-        return Promise.resolve(this.state.data);
+            return this.fetchingPromiseData;
+        };
+        this.isFetchingData = true;
+        cb = typeof cb =='function'? cb : typeof callback =='function'? callback : undefined;
+        this.fetchingPromiseData = new Promise((resolve,reject)=>{
+            setTimeout(()=>{
+                if(typeof cb === 'boolean'){
+                    force = cb;
+                    cb = undefined;
+                }
+                fetchOptions = this.getFetchOptions({fetchOptions,convertToSQL:false});
+                if(typeof this.props.fetchOptionsMutator =='function' && this.props.fetchOptionsMutator(fetchOptions) === false){
+                    this.isFetchingData = false;
+                    return resolve(this.state.data);
+                }
+                if(this.beforeFetchData(fetchOptions) === false) return resolve(this.state.data);
+                if(this.willConvertFiltersToSQL()){
+                    fetchOptions.selector = convertToSQL(fetchOptions.selector);
+                }
+                if(typeof this.props.beforeFetchData =='function' && this.props.beforeFetchData({...rest,context:this,force,fetchOptions,options:fetchOptions}) === false){
+                    this.isFetchingData = false;
+                    return resolve(this.state.data);
+                }
+                if(force !== true && isArray(this.INITIAL_STATE.data)) {
+                    return this.resolveFetchedDataPromise({cb,data:this.INITIAL_STATE.data}).then(resolve).catch(reject)
+                }
+                let fetchData  = this.INITIAL_STATE.fetchData;
+                if(isFunction(this.props.fetchData)){
+                    /**** l'on peut définir la props fetchData, qui est la fonction appelée pour la recherche des données */
+                    fetchData = this.props.fetchData.call(this,fetchOptions);
+                }
+                fetchData = isFunction(fetchData)? fetchData.call(this,fetchOptions) : fetchData;
+                this.setIsLoading(true,()=>{
+                    if(isPromise(fetchData)){
+                        return fetchData.then(data=>{
+                            return this.resolveFetchedDataPromise({cb,data,force}).then((data)=>{
+                                resolve(data);
+                            }).catch((e)=>{
+                                console.log(e,' fetching datagrid data')
+                                reject(e);
+                            });
+                        }).catch((e)=>{
+                            console.log(e," resolve fetching data for datagrid");
+                            return this.resolveFetchedDataPromise({cb,data:[],force}).then((data)=>{
+                                resolve(data);
+                            }).catch((e)=>{
+                                console.log(e,' fetching datagrid data')
+                                reject(e);
+                            });;
+                        })
+                    } else {
+                        let data = !isPromise(fetchData)? Object.toArray(fetchData) : [];
+                        ///if(data.length <=0) data = this.state.data;
+                        return this.resolveFetchedDataPromise({cb,data,force}).then((data)=>{
+                            resolve(data);
+                        }).catch((e)=>{
+                            console.log(e,' fetching datagrid data')
+                            reject(e);
+                        });
+                    }     
+                },true);
+            },1);
+        })
+        return this.fetchingPromiseData;
+    }
+    resolveFetchedDataPromise(arg){
+        arg = defaultObj(arg);
+        const d = arg.data;
+        if(isObj(d) && d.data && typeof d.data ==='object'){
+            arg.data = d.data;
+            arg.total = defaultNumber(arg.total,arg.data.total);
+        }
+        /*if(typeof arg.total != 'number'){
+            arg.total = Object.size(arg.data);
+        }*/
+        const {cb,total,data} = arg;
+        return new Promise((resolve)=>{
+            this.prepareData(arg,(state)=>{
+                state.data = Array.isArray(state.data)? state.data : [];
+                if(typeof this.props.onFetchData =='function'){
+                    this.props.onFetchData({...arg,allData:data,context:this,props:this.props,data:state.data})
+                }
+                this.setState(state,()=>{
+                    if(isFunction(cb)) {
+                        cb(data)
+                    } 
+                    resolve(data);
+                    this.isRenderingRef.current = false;
+                    this.isFetchingData = undefined;
+                    this.setIsLoading(false,false);
+                })
+            });
+        })
     }
     /****  Filtre le tableau */
     doFilter ({value,field,selector,event,force}){
@@ -3115,8 +3250,7 @@ export default class CommonDatagridComponent extends AppComponent {
             this._pagination.page = 1;
             this._pagination.start = 0;
         }
-        this.filtersSelectors = {selector:this.getFilters()};
-        return this.fetchData({force:true,isFiltering : true,fetchOptions:this.filtersSelectors});
+        return this.fetchData({force:true});
     }
     onSetQueryLimit(){
         if(!this.canSetQueryLimit()) return;
@@ -3169,6 +3303,35 @@ export default class CommonDatagridComponent extends AppComponent {
             </Pressable>
        </Tooltip>
     }
+    /*** récupère les fetchOptions du datagrid */
+    getFetchOptions({fetchOptions,convertToSQL}){
+        const fetchFilters = this.getFilters({convertToSQL:typeof convertToSQL =='boolean'? convertToSQL : false});
+        fetchOptions = Object.clone(isObj(fetchOptions)? fetchOptions : {});
+        fetchOptions.selector = defaultObj(fetchOptions.selector);
+        fetchOptions.dataSources = this.currentDataSources;
+        fetchOptions.selector = fetchFilters;
+        fetchOptions.sort = this.getSort();
+        const ff = this.getFilterableColumnsNames();
+        let fields = ff;
+        if(this.isFetchOnlyVisibleColumnsEnabled()){
+            fields = [];
+            Object.map(ff,(field)=>{
+                if(isNonNullString(field) && isObj(this.state.columns[field]) && this.state.columns[field].visible !== false){
+                    fields.push(field);
+                }
+            });
+        }
+        fetchOptions.fields = fields;
+        let limit = this.getQueryLimit();
+        if(limit > 0 && !this.isPivotDatagrid()){
+            fetchOptions.limit = limit;
+        } else {
+            if(!isDecimal(fetchOptions.limit) || fetchOptions.limit <=0){
+                delete fetchOptions.limit
+            }
+        }
+        return fetchOptions;
+    }
     getFetchDataOpts(){
         return this.props.fetchDataOpts;
     }
@@ -3272,16 +3435,20 @@ export default class CommonDatagridComponent extends AppComponent {
     canSetIsLoading(){
         return isObj(this.progressBarRef.current) && typeof this.progressBarRef.current.setIsLoading =='function' ? true : false;
     }
+    canHidePreloaderOnRender(){
+        const cH = this[this.hidePreloaderOnRenderKey];
+        return typeof cH =='boolean'? cH : true;
+    }
+    toggleHidePreloaderOnRender(toggle){
+        this[this.hidePreloaderOnRenderKey] = !!toggle;
+    }
     onRender(){
-        if(typeof this.props.onRender ==='function'){
-            this.props.onRender({context:this});
-        }
-        if(this.isRenderingRef.current === true){
-            //setTimeout(()=>{
-                this.isRenderingRef.current = false;
-                return this.setIsLoading(false,undefined,undefined,"yes mannnnaaaaaa");
-            //},500);
+        if(!this.canHidePreloaderOnRender()) return ;
+        if(typeof this.props.onRender ==='function' && this.props.onRender({context:this}) === false){
+            return ;
         }
+        this.isRenderingRef.current = false;
+        return this.setIsLoading(false,undefined,undefined);
     }
     /***
      * @param {boolean} loading
@@ -3749,6 +3916,10 @@ CommonDatagridComponent.propTypes = {
     renderCustomPagination : PropTypes.func,
     getActionsArgs : PropTypes.func,//fonction permettant de récupérer les props supplémentaires à passer aux actions du datagrid
     displayOnlySectionListHeaders : PropTypes.bool,// si uniquement les entêtes des sections seront affichés, valides uniquement en affichage des sectionHeader 
+    /***les props de configuration du chart, */
+    config : PropTypes.shape({
+        aggregatorFunction  : PropTypes.string, //la fonction d'aggrégation à utiliser
+    }),
     /*** les options de configuration du graphe */
     chartConfig : PropTypes.shape({
         //type : PropTypes.oneOfType(chartDisplayType).isRequired,//le type de graphe : l'une des valeurs parmis les éléments cités plus haut
@@ -3771,6 +3942,9 @@ CommonDatagridComponent.propTypes = {
     aggregatorFunction : PropTypes.string,
     /*** permet de faire une mutation sur les options de la recherche, immédiatement avant le lancement de la recherche */
     fetchOptionsMutator : PropTypes.func,
+    /*** si les données à récupérer à distance seront  */
+    fetchOnlyVisibleColumns : PropTypes.bool,
+    canFetchOnlyVisibleColumns : PropTypes.bool,//si l'on peut modifier le type d'affichage lié à la possibilité de récupérer uniquement les données reletives aux colonnes visibles
     useLinesProgressBar  : PropTypes.bool,//si le progress bar lignes horizontale seront utilisés
     abreviateValues : PropTypes.bool, //si les valeurs numériques seront abregées
 }

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

@@ -1,7 +1,6 @@
 import CommonDatagrid from "./Common";
 import {defaultObj,extendObj,defaultStr,isNonNullString,isFunction,isPromise} from "$utils";
 import PropTypes from "prop-types";
-import {convertToSQL} from "$ecomponents/Filter";
 import actions from "$actions";
 /**** 
  *      la fonction fetchOptionsMutator permet éventuellemnt de faire une mutations sur les options fetchOptions avant qu'elle ne soit appliquée pour la recherche. elle
@@ -18,16 +17,13 @@ export default class CommonTableDatagrid extends CommonDatagrid{
         } = props;
         dataSource = CommonDatagrid.getDataSource({...props,dataSource,context:this});
         tableName = defaultStr(tableName,table).toUpperCase();
-        this.prepareFetchData();
         if(tableName){
             Object.defineProperties(this,{
                 tableName : {value:tableName,override:false,writable:false}
             })
         }
     }
-    prepareFetchData(fetchData){
-        this.INITIAL_STATE.fetchData = defaultVal(fetchData,this.props.fetchData);
-    }
+
     /*** lorsque la données est modifiée */
     onUpsertData =(arg) =>{
         if(!this._isMounted()) return;
@@ -61,127 +57,10 @@ export default class CommonTableDatagrid extends CommonDatagrid{
     isTableData(){
         return true;
     }
-    
     getProgressBar(props){
         if(this.isDataJustComeToUpsert) return null;
         return super.getProgressBar(props);
     }
-    /**** retourne la liste des items, utile lorsqu'une s'agit d'une fonction 
-        Lorsque data est une chaine de caractère, alors elle doit être sous la forme recommandée par la function 
-        getDataFunc de l'object dataSource
-        la props data, peut être une chaine de caractère contenant le nom de la base et de la bd de travail de l'application
-        example common[articles], dans ce cas, la fonction fetchData, aura pour rôle de chercher toutes les données qui match
-        la table dans la base common.
-        Elle pourra éventuellement passer directement la limite et les filtres à la fonction fetchdata
-    */
-    fetchData ({cb,callback,force,fetchOptions,...rest}){
-        if(!this._isMounted()) return Promise.resolve(this.state.data);
-        if(this.isFetchingData) {
-            if(!isPromise(this.fetchingPromiseData)){
-                this.fetchingPromiseData = Promise.resolve(this.state.data)
-            }
-            return this.fetchingPromiseData;
-        };
-        this.isFetchingData = true;
-        cb = typeof cb =='function'? cb : typeof callback =='function'? callback : undefined;
-        this.fetchingPromiseData = new Promise((resolve,reject)=>{
-            setTimeout(()=>{
-                if(typeof cb === 'boolean'){
-                    force = cb;
-                    cb = undefined;
-                }
-                const fetchFilters = this.getFilters({convertToSQL:false});
-                fetchOptions = defaultObj(fetchOptions);
-                fetchOptions = Object.clone(fetchOptions);
-                fetchOptions.selector = defaultObj(fetchOptions.selector);
-                fetchOptions.dataSources = this.currentDataSources;
-                fetchOptions = extendObj(true,true,{},fetchOptions,{selector : fetchFilters});
-                fetchOptions.dataSources = this.currentDataSources;
-                fetchOptions.sort = this.getSort();
-                fetchOptions.fields = this.getFilterableColumnsNames();
-                let limit = this.getQueryLimit();
-                if(limit > 0 && !this.isPivotDatagrid()){
-                    fetchOptions.limit = limit;
-                } else {
-                    if(!isDecimal(fetchOptions.limit) || fetchOptions.limit <=0){
-                        delete fetchOptions.limit
-                    }
-                }
-                if(typeof this.props.fetchOptionsMutator =='function' && this.props.fetchOptionsMutator(fetchOptions) === false){
-                    this.isFetchingData = false;
-                    return resolve(this.state.data);
-                }
-                this.beforeFetchData(fetchOptions);
-                if(this.willConvertFiltersToSQL()){
-                    fetchOptions.selector = convertToSQL(fetchOptions.selector);
-                }
-                if(typeof this.props.beforeFetchData =='function' && this.props.beforeFetchData({...rest,context:this,force,fetchOptions,options:fetchOptions}) === false){
-                    this.isFetchingData = false;
-                    return resolve(this.state.data);
-                }
-                if(force !== true && isArray(this.INITIAL_STATE.data)) {
-                    return this.resolveFetchedDataPromise({cb,data:this.INITIAL_STATE.data}).then(resolve).catch(reject)
-                }
-                let fetchData  = this.INITIAL_STATE.fetchData;
-                if(isFunction(this.props.fetchData)){
-                    /**** l'on peut définir la props fetchData, qui est la fonction appelée pour la recherche des données */
-                    fetchData = this.props.fetchData.call(this,fetchOptions);
-                }
-                fetchData = isFunction(fetchData)? fetchData.call(this,fetchOptions) : fetchData;
-                this.setIsLoading(true,()=>{
-                    if(isPromise(fetchData)){
-                        return fetchData.then(data=>{
-                           return this.resolveFetchedDataPromise({cb,data,force}).then((data)=>{
-                                resolve(data);
-                            }).catch((e)=>{
-                                console.log(e,' fetching datagrid data')
-                                reject(e);
-                            });
-                        }).catch((e)=>{
-                            console.log(e," resolve fetching data for datagrid");
-                            return this.resolveFetchedDataPromise({cb,data:[],force}).then((data)=>{
-                                resolve(data);
-                            }).catch((e)=>{
-                                console.log(e,' fetching datagrid data')
-                                reject(e);
-                            });;
-                        })
-                    } else {
-                        let data = !isPromise(fetchData)? Object.toArray(fetchData) : [];
-                        ///if(data.length <=0) data = this.state.data;
-                        return this.resolveFetchedDataPromise({cb,data,force}).then((data)=>{
-                            resolve(data);
-                        }).catch((e)=>{
-                            console.log(e,' fetching datagrid data')
-                            reject(e);
-                        });
-                    }     
-                },true);
-            },1);
-        })
-        return this.fetchingPromiseData;
-    }
-    resolveFetchedDataPromise(arg){
-        arg = defaultObj(arg);
-        const {cb,data} = arg;
-        return new Promise((resolve)=>{
-            this.prepareData(arg,(state)=>{
-                state.data = Array.isArray(state.data)? state.data : [];
-                if(typeof this.props.onFetchData =='function'){
-                    this.props.onFetchData({...arg,allData:data,context:this,props:this.props,data:state.data})
-                }
-                this.setState(state,()=>{
-                    if(isFunction(cb)) {
-                        cb(data)
-                    } 
-                    resolve(data);
-                    this.isRenderingRef.current = false;
-                    this.isFetchingData = undefined;
-                    this.setIsLoading(false,false);
-                })
-            });
-        })
-    }
 }
 
 CommonTableDatagrid.propTypes = {

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

@@ -10,6 +10,7 @@ import Label from "$ecomponents/Label";
 import TableLink from "$TableLink";
 import {Flag} from "$ecomponents/Countries";
 import { StyleSheet } from "react-native";
+import {isDesktopMedia} from "$dimensions";
 
 export const renderRowCell = (arg)=>{
     let {rowData,getRowKey,context,formatValue:customFormatValue,renderRowCell:customRenderRowCell,abreviateValues,isSectionListHeader,rowIndex,index,rowCounterIndex,columnDef,columnField} = arg;
@@ -198,5 +199,9 @@ export const formatValue = (value,format,abreviateValues,formatter)=>{
     return abreviateValues ? value.abreviate() : value.formatNumber();
 }
 
+export const getRowsPerPagesLimits = ()=>{
+    return [5,10,15,20,25,30,40,50,60,80,100,500,1000,1500,2000,2500,3000,3500,4000,4500,5000,...(isDesktopMedia() ? [6000,7000,8000,9000,10000]:[])];
+}
+
 
 export const arrayValueSeparator = ", ";

package/src/components/Datagrid/SWRDatagrid.js

@@ -8,7 +8,6 @@
 import Datagrid from "./IndexComponent";
 import {defaultStr,defaultObj,defaultVal,isNonNullString,defaultNumber,isObjOrArray,isObj,extendObj} from "$utils";
 import {Pressable} from "react-native";
-import SimpleSelect from "$ecomponents/SimpleSelect";
 import React from "$react";
 import Auth from "$cauth";
 import DateLib from "$lib/date";
@@ -20,13 +19,10 @@ import Icon from "$ecomponents/Icon";
 import Label from "$ecomponents/Label";
 import { StyleSheet,View } from "react-native";
 import theme from "$theme";
-import useSWR,{useInfinite} from "$swr";
+import useSWR from "$swr";
 import appConfig from "$capp/config";
-import APP from "$capp/instance";
-
+import {getRowsPerPagesLimits} from "./Common/utils";
 import PropTypes from "prop-types";
-import {isDesktopMedia} from "$dimensions";
-import ActivityIndicator from "$ecomponents/ActivityIndicator";
 import {Menu} from "$ecomponents/BottomSheet";
 import session from "$session";
 
@@ -69,9 +65,7 @@ export const getSWROptions = ()=>{
     }
 }
 
-const getDefaultPaginationRowsPerPageItems = ()=>{
-    return [5,10,15,20,25,30,40,50,60,80,100,500,1000,...(isDesktopMedia() ? [1500,2000,2500,3000,3500,4000,4500,5000,10000]:[])];
-}
+
 /****la fonction fetcher doit toujours retourner : 
  *  1. la liste des éléments fetchés dans la props data
  *  2. le nombre total d'éléments de la liste obtenue en escluant les clause limit et offset correspondant à la même requête
@@ -160,6 +154,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
     if(fetchPath){
         fetchPath = setQueryParams(fetchPath,"SWRFetchPathKey",fPathRef.current)
     }
+    const sortRef = React.useRef({});
     const innerRef = React.useRef(null);
     const showProgressRef = React.useRef(true);
     const dataRef = React.useRef([]);
@@ -181,9 +176,8 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
             }
             opts = defaultObj(opts);
             opts.fetchOptions = isObj(opts.fetchOptions)? Object.clone(opts.fetchOptions) : {};
-            opts.fetchOptions.withTotal = true;
-            opts.fetchOptions.fields = fetchFields;
             extendObj(true,opts.fetchOptions,fetchOptionsRef.current?.fetchOptions);
+            opts.fetchOptions.sort = sortRef.current;
             if(canHandleLimit){
                 opts.fetchOptions.limit = limitRef.current;
                 opts.fetchOptions.page = pageRef.current -1;
@@ -194,7 +188,6 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
                 delete opts.page;
                 delete opts.offset;
             }
-
             const fetchCB = ({data,total})=>{
                 totalRef.current = total;
                 dataRef.current = data;
@@ -291,7 +284,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         text : "Limite nbre elts par page",
         divider : true,
     }]
-    getDefaultPaginationRowsPerPageItems().map((item)=>{
+    getRowsPerPagesLimits().map((item)=>{
         itLimits.push({
             text : item.formatNumber(),
             icon : limitRef.current == item ? 'check' : null,
@@ -314,8 +307,8 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
             {...rest}
             sort = {sort}
             onSort = {({sort})=>{
+                sortRef.current = sort;
                 if(!canSortRemotely()) return;
-                fetchOptionsRef.current.sort = sort;
                 pageRef.current = firstPage;
                 doRefresh(true);
                 return false;
@@ -380,7 +373,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
                             {...iconProp}
                             title = {"Aller à la page suivante {0}".sprintf(nextPage && nextPage.formatNumber()||undefined)}
                             name="material-keyboard-arrow-right"
-                            disabled = {nextPage >= totalPages || getNextPage() === false ? true : false}
+                            disabled = {nextPage > totalPages || getNextPage() === false ? true : false}
                             onPress = {()=>{
                                 const page = getNextPage();
                                 if(page === false) return;
@@ -416,6 +409,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
                 opts = getFetchOptions({showError:showProgressRef.current,...opts});
                 isInitializedRef.current = true;
                 fetchOptionsRef.current = opts;
+                sortRef.current = opts.fetchOptions.sort;
                 if(force){
                     pageRef.current = firstPage;
                 }

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

@@ -167,26 +167,26 @@ const DatagridFactory = (Factory)=>{
             const progressBar = this.getProgressBar();
             const pointerEvents = this.getPointerEvents(); 
 
-            let restItems = [...this.renderCustomMenu()];
+            const restItems = [...this.renderCustomMenu()];
             let max = this.getMaxSelectableRows();
             if(selectableMultiple && max){
                 max = max.formatNumber();
-                restItems = [
-                    ...(selectableMultiple && !canRenderChart ? [{
+                if(selectableMultiple && !canRenderChart){
+                    restItems.push({
                         label : "Sélectionner "+max.formatNumber(),
                         icon : "select-all",
                         onPress : (x,event)=>{
                             this.handleAllRowsToggle(true);
                         }
-                    },
-                    {
+                    });
+                    restItems.push({
                         label : "Tout désélectionner",
                         onPress : (x,event)=>{
                             this.handleAllRowsToggle(false);
                         },
                         icon : "select"
-                    }] : [])
-                ]
+                    });
+                }
             }   
             const maxHeight = this.getMaxListHeight();
             const rPagination = showPagination ? <View style={[styles.paginationContainer]}>

package/src/components/Dropdown/index.js

@@ -923,7 +923,7 @@ class DropdownComponent extends AppComponent {
                         }}
                         containerProps = {{...containerProps,style:[containerProps.style,styles.mbO]}}
                         error = {!!error}
-                        right = {loadingElement ? (loadingElement) : disabled? null : (props)=>{
+                        right = {loadingElement ? loadingElement : disabled? null : (props)=>{
                             let r = React.isValidElement(defRight)?<>{defRight}</> : <></>;
                             if(typeof defRight =='function'){
                                 const t = defRight(props);

package/src/components/Icon/Checkbox.js

@@ -1,15 +1,15 @@
 import {defaultObj,defaultStr} from "$utils";
 import PropTypes from "prop-types";
 import theme,{Colors} from "$theme";
-import {isIos} from "$cplatform";
 import React from "$react";
 import Icon from "./Icon";
+import {CHECKED_ICON,UNCHECKED_ICON} from "$ecomponents/Icon/utils";
 
 /****** icon de type checkbox variant en fonction de l'environnement ou la plateforme */
 const Checkbox = React.forwardRef((props,ref)=>{
     const {checked:customChecked,color:customColor,primary,secondary,primaryOnCheck,secondaryOnCheck,onChange,checkedIcon:customCheckedIcon,uncheckedIcon:customUncheckedIcon,onPress,...rest} = props; 
-    const checkedIcon = defaultStr(checkedIcon,isIos()? 'check' : "checkbox-marked");
-    const uncheckedIcon = defaultStr(uncheckedIcon,"checkbox-blank-outline");
+    const checkedIcon = defaultStr(checkedIcon,CHECKED_ICON);
+    const uncheckedIcon = defaultStr(uncheckedIcon,UNCHECKED_ICON);
     const [checked,setIsChecked] = React.useStateIfMounted(!!checked);
     const isMounted = React.useIsMounted();
     const prevChecked = React.usePrevious(checked);

package/src/components/Icon/Icon.js

@@ -1,4 +1,3 @@
-//import MaterialIcon from "./MaterialCommunityIcon";
 import {defaultVal,defaultObj,defaultStr,isNonNullString} from "$utils";
 import PropTypes from "prop-types";
 import Tooltip from "$ecomponents/Tooltip";

package/src/components/Icon/utils.js

@@ -12,3 +12,7 @@ export const PRINT_ICON = "printer";
 
 export const ICON_SIZE = 24;
 export const ICON_OFFSET = 12;
+
+export const CHECKED_ICON = isIos()? 'check' : "checkbox-marked";
+
+export const UNCHECKED_ICON = "checkbox-blank-outline";

package/src/components/ScrollView/index.js

@@ -9,9 +9,23 @@ const ScrollViewComponent = React.forwardRef(({virtualized,contentProps,containe
   const isKeyboardOpenRef = React.useRef(false);
   const testID = defaultStr(customTestID,'RN_ScrollViewComponent');
   containerProps = defaultObj(containerProps)
+  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 = { x, y, width, height };
+                  setLayout({...Dimensions.get("window"),layout:r});
+                  hasInitializedRef.current = true;
+                  resolve(r);
+              });
+          }
+      })
+  }
   React.useEffect(()=>{
     const onKeyboardToggle = ({visible})=>{
       isKeyboardOpenRef.current = visible;
@@ -19,7 +33,7 @@ const ScrollViewComponent = React.forwardRef(({virtualized,contentProps,containe
     const onResizePage = ()=>{
       setTimeout(()=>{
          if(isKeyboardOpenRef.current) return;
-         setLayout(Dimensions.get("window"))
+         updateLayout();
       },300);
     }
     APP.on(APP.EVENTS.RESIZE_PAGE,onResizePage);
@@ -29,8 +43,21 @@ const ScrollViewComponent = React.forwardRef(({virtualized,contentProps,containe
       APP.off(APP.EVENTS.KEYBOARD_DID_TOGGLE,onKeyboardToggle);
     }
   },[]);
-  const contentContainerStyle = [{maxHeight:Math.max(height-100,250),width:'100%'},rest.contentContainerStyle];
-  return  <View {...containerProps} style={[theme.styles.w100,containerProps.style]} testID={testID+"_ScrollViewContainer"}>
+
+  const cStyle = {maxHeight:Math.max(height-100,250),width:'100%'};
+  if(isObj(layout.layout) && typeof layout.layout.y =='number'){
+      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}