@fto-consult/expo-ui 2.20.1 → 2.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.20.1",
+  "version": "2.21.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,8 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^1.23.4",
+    "@fto-consult/common": "^1.23.9",
+    "@fto-consult/expo-ui": "^2.21.0",
     "@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

@@ -1,6 +1,6 @@
 import React from '$react'
 import PropTypes from 'prop-types'
-import {defaultStr,defaultObj,uniqid,defaultNumber} from "$utils";
+import {defaultStr,defaultVal,extendObj,defaultObj,uniqid,defaultNumber} from "$utils";
 import {extend} from "./utils"
 import stableHash from 'stable-hash';
 import Chart from "./appexChart";
@@ -16,20 +16,15 @@ import Chart from "./appexChart";
  *  options {number} - les options supplémentaires au chart
  * 
 */
-const ChartComponent = React.forwardRef(({type, height,chartId, width, series, options,testID,webViewProps, ...props },ref)=>{
+const ChartComponent = React.forwardRef(({options,height,width,chartId,testID,webViewProps, ...props },ref)=>{
   const chartContext = React.useRef(null);
   options = defaultObj(options);
-  const chartIdRef = React.useRef(defaultStr(chartId,options.chart?.id,uniqid("chart-id")));
-  const config = extend(options,{
-    chart: {
-      type,
-      height,
-      width,
-      id : chartIdRef.current
-    },
-    series,
-  });
-  config.chart.id = chartIdRef.current;
+  const series = options.series;
+  options.chart = defaultObj(options.chart);
+  const chartIdRef = React.useRef(defaultStr(chartId,options.chart.id,uniqid("chart-id")));
+  width = options.chart.width = defaultVal(options.chart.width,width);
+  height = options.chart.height = defaultVal(options.chart.height,height)
+  options.chart.id = chartIdRef.current;
   testID = defaultStr(testID,"RN_ChartComponent");
   const prevWidth = React.usePrevious(width), prevHeight = React.usePrevious(height);
   const prevOptions = React.usePrevious(options,JSON.stringify);
@@ -40,21 +35,21 @@ const ChartComponent = React.forwardRef(({type, height,chartId, width, series, o
   options.xaxis.stroke.width = defaultNumber(options.xaxis.stroke.width,2);
   options.xaxis.stroke.height = defaultNumber(options.xaxis.height,1);
 
+  console.log(options,' is optssss');
   React.useEffect(()=>{
     if(chartContext.current && chartContext.current.updateOptions){
         if((prevSeries == series) || width != prevWidth || height != prevHeight){
-            chartContext.current.updateOptions(config);
+            chartContext.current.updateOptions(options);
         } else if(prevOptions != options){
             chartContext.current.updateSeries(series);
         } 
     }
-  },[stableHash({type,options,series,width,height})])
-  return <Chart {...props} options={config} chartId={chartIdRef.current} chartContext={chartContext} testID={testID} ref={ref}/>
+  },[stableHash({options,series,width,height})])
+  return <Chart {...props} options={options} chartId={chartIdRef.current} chartContext={chartContext} testID={testID} ref={ref}/>
 });
 
 
 ChartComponent.propTypes = {
-  type: PropTypes.string.isRequired,
   width: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
@@ -63,9 +58,12 @@ ChartComponent.propTypes = {
     PropTypes.string,
     PropTypes.number,
   ]),
-  series: PropTypes.array.isRequired,
   options: PropTypes.shape({
+    chart : PropTypes.shape({
+      type: PropTypes.string,
+    }),
     xaxis : PropTypes.object,
+    series: PropTypes.array.isRequired,
   }).isRequired,
   ///lorsque le chart est rendu en environnement native, les props du webView
   webViewProps : PropTypes.object,

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

@@ -339,8 +339,11 @@ const DatagridFactory = (Factory)=>{
                 backToTopProps,
                 testID,
                 renderEmpty,
+                chartContainerProps,
                 ...rest
             } = this.props
+            chartContainerProps = defaultObj(chartContainerProps);
+            const canRenderChart = this.canRenderChart();
             const hasData = this.state.data.length ? true : false;
             testID = defaultStr(testID,"RN_DatagridAccordion");
             backToTopProps = defaultObj(backToTopProps);
@@ -504,25 +507,25 @@ const DatagridFactory = (Factory)=>{
                                         icon : "refresh",
                                         onPress : this.refresh.bind(this)
                                     },
-                                    visibleColumns.length ? {
+                                    !canRenderChart && visibleColumns.length ? {
                                         text : 'colonnes',
                                         icon : "view-column",
                                         items : visibleColumns,
                                         closeOnPress : false,
                                     } : null,
-                                    hasFooterFields ? {
+                                    !canRenderChart && hasFooterFields ? {
                                         onPress :  ()=>{this.toggleFooters(!showFooters)}    
                                         ,icon :  showFooters?'view-column':'view-module'
                                         ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
                                     }:null,
                                     ...this.renderCustomMenu(),
                                     ...restItems,
-                                    this.canScrollTo() &&  {
+                                    !canRenderChart && this.canScrollTo() &&  {
                                         text : 'Retour en haut',
                                         icon : "arrow-up-bold",
                                         onPress : this.scrollToTop.bind(this)
                                     },
-                                    this.canScrollTo() && {
+                                    !canRenderChart && this.canScrollTo() && {
                                         text : 'Aller à la dernière ligne',
                                         icon : "arrow-down-bold",
                                         onPress : this.scrollToEnd.bind(this)
@@ -570,7 +573,7 @@ const DatagridFactory = (Factory)=>{
                         /> : null}
                         {datagridHeader}
                         {_progressBar}
-                        {showFooters ? (
+                        {!canRenderChart && showFooters ? (
                             <View  testID={testID+"_FooterContainer"} pointerEvents={pointerEvents} style={[{justifyContent:'center'}]}>
                                 <View  testID={testID+"_FooterContentContainer"} style={[styles.footersContainer]}>
                                     <ScrollView testID={testID+"_FooterScrollView"} horizontal contentContainerStyle={[styles.contentContainerStyle]}>
@@ -589,7 +592,7 @@ const DatagridFactory = (Factory)=>{
                             </View>
                         ) : null}
                     </View>
-                    {hasData ? <FlashList
+                    {hasData && !canRenderChart ? <FlashList
                         estimatedItemSize = {150}
                         prepareItems = {false}
                         {...rest}
@@ -609,11 +612,13 @@ const DatagridFactory = (Factory)=>{
                             return this.backToTopRef.current;
                         }:false}
                         keyExtractor = {this.getRowKey.bind(this)}
-                    /> : <View style={styles.hasNotData}>
+                    /> : canRenderChart    ?<View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
+                        {this.renderChart()}
+                    </View> :  <View style={styles.hasNotData}>
                         {this.renderEmpty()}
                     </View>}
                 </View>}
-                {backToTopRef ? <BackToTop testID={testID+"_BackToTop"} {...backToTopProps} ref={this.backToTopRef} style={[styles.backToTop,backToTopProps.style]} onPress={this.scrollToTop.bind(this)}/>:null}
+                {!canRenderChart && backToTopRef ? <BackToTop testID={testID+"_BackToTop"} {...backToTopProps} ref={this.backToTopRef} style={[styles.backToTop,backToTopProps.style]} onPress={this.scrollToTop.bind(this)}/>:null}
                 <BottomSheet
                     testID = {testID+"_BottomSheet"}
                     renderMenuContent = {false}

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

@@ -38,6 +38,47 @@ import View from "$ecomponents/View";
 import {Menu} from "$ecomponents/BottomSheet";
 import {styles as tableStyles} from "$ecomponents/Table";
 import {DialogProvider} from "$ecomponents/Form/FormData";
+import Chart from "$ecomponents/Chart";
+import { aggregatorFunctions} from "../Footer/Footer";
+
+const chart = "chart";
+export const displayTypes = {
+    table : {
+        code : "table",
+        isChart : false,
+        label : 'Tableau',
+        icon : "table",
+        type : 'table',
+    },
+    lineChart : {
+        code : "lineChart",
+        isChart : true,
+        label : 'Graphique|Linéaire',
+        icon : "chart-areaspline",
+        type : 'line',
+    },
+    areaChart : {
+        isChart : true,
+        code : 'areaChart',
+        label : 'Graphique|Surface',
+        icon : "chart-areaspline-variant",
+        type: 'area',
+    },
+    barChart : {
+        isChart : true,
+        code : 'barChart',
+        label : 'Graphique|Barres',
+        icon : "chart-bar",
+        type: 'bar'
+    },
+    /*donutChart : {
+        isChart : true,
+        code : 'donutChart',
+        label : 'Graphique|Circulaire',
+        icon : "chart-donut",
+        type: 'donut'
+    },*/
+}
 
 export const arrayValueSeparator = ", ";
 
@@ -85,6 +126,17 @@ export default class CommonDatagridComponent extends AppComponent {
             showFooters : defaultBool(props.showFooters,(sData.showFooters? true : false)),
             fixedTable : sData.fixedTable
         });
+        const disTypes = {};
+        let hasFoundDisplayTypes = false;
+        Object.map(this.props.displayTypes,(dType,v)=>{
+            if(isNonNullString(dType)){
+                dType = dType.toLowerCase().trim();
+                if(displayTypes[dType]){
+                    disTypes[dType] = Object.clone(displayTypes[dType]);
+                }
+                hasFoundDisplayTypes = true;
+            }
+        });
         Object.defineProperties(this,{
             layoutRef : {
                 value : React.createRef(null),
@@ -119,6 +171,8 @@ export default class CommonDatagridComponent extends AppComponent {
             sectionListDataSize : {value : {current : 0}},
             enablePointerEventsRef : {value : {current:false}},
             configureSectionListSelectedValues : {value : {}},
+            ///les types d'affichage
+            displayTypes : {value : hasFoundDisplayTypes ? disTypes : Object.clone(displayTypes)},
             sectionListColumnsSize : {value : {current:0}}, //la taille du nombre d'éléments de section dans les colonnes
         }) 
         this.isLoading = this.isLoading.bind(this);
@@ -150,10 +204,12 @@ 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 = defaultObj(this.props.chartConfig,this.getSessionData("chartConfig"));
+        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;
         extendObj(this.state,this.prepareData({data}));
         const {width:windowWidth,height:windowHeight} = Dimensions.get("window");
         this.state.layout = {
@@ -198,7 +254,10 @@ export default class CommonDatagridComponent extends AppComponent {
         } else {
             this.currentDataSources = Object.toArray(this.currentDataSources);
         }
+        this.state.sectionListColumns = sectionListColumns;
+        this.state.displayOnlySectionListHeaders = defaultBool(this.getSessionData("displayOnlySectionListHeaders"),this.props.displayOnlySectionListHeaders,false)
     }
+
     /*** si une ligne peut être selectionable */
     canSelectRow(row){
         return isObj(row) && row.isSectionListHeader !== true ? true : false;
@@ -206,7 +265,7 @@ export default class CommonDatagridComponent extends AppComponent {
     prepareSectionListColumns(props){
         props = defaultObj(props,this.props);
         const l = {};
-        (Array.isArray(props.sectionListColumns) ? props.sectionListColumns : []).map((col)=>{
+        (Array.isArray(props.sectionListColumns) ? props.sectionListColumns : defaultArray(this.getSessionData("sectionListColumns"))).map((col)=>{
             if(isNonNullString(col)){
                 l[col.trim()] = {};
             }
@@ -230,7 +289,7 @@ export default class CommonDatagridComponent extends AppComponent {
         let sessionName = this.props.sessionName;
         let isDatagrid = this.isDatagrid()
         if(!isNonNullString(sessionName)){
-            sessionName = 'datagrid';
+            //sessionName = 'datagrid';
         }
         let userCode = Auth.getLoggedUserCode();
         Object.defineProperties(this,{
@@ -995,72 +1054,72 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         return null;
    }
-   /*** configure la  */
-   configureSectionListColumn(column){
+   isSectionListColumnConfigurable(column){
         if(!isObj(column) || !isNonNullString(column.field) || !isObj(this.state.columns[column.field])){
-            return Promise.reject({message : 'type de colonne invalide, impossible de configurer la colonne, pour permettre qu\elle soit ajoutée dans les colonnes de groupe du tableau'})
-        }
-        const col = this.state.columns[column.field];
-        const type = defaultStr(col.jsType,col.type).toLowerCase();
-        if(type.contains("date") || type =='time'){
-            return new Promise((resolve,reject)=>{
-                DialogProvider.open({
-                    title : 'Format de date',
-                    fields : {
-                        dateFormat : {
-                            type : 'select_dateformat',
-                            required : true,
-                            text : 'Sélectionnez un format de date',
-                            defaultValue : defaultStr(this.configureSectionListSelectedValues[column.field],"dd/mm/yyyy"),
-                        }
-                    },
-                    onCancelButtonPress : ()=>{
+            return false;
+        }
+        const type = defaultStr(column.jsType,column.type).toLowerCase();
+        return type.contains("date") || type =='time' ? true : false;
+   }
+   /*** configure la  */
+   configureSectionListColumn(column,toggleSectionList){
+        if(!this.isSectionListColumnConfigurable(column)) return Promise.reject({message : 'type de colonne invalide, impossible de configurer la colonne, pour permettre qu\elle soit ajoutée dans les colonnes de groupe du tableau'});
+        const format = defaultStr(defaultObj(this.configureSectionListSelectedValues[column.field]).format,"dd/mm/yyyy")
+        return new Promise((resolve,reject)=>{
+            DialogProvider.open({
+                title : 'Format de date',
+                subtitle : false,
+                fields : {
+                    dateFormat : {
+                        type : 'select_dateformat',
+                        required : true,
+                        text : 'Sélectionnez un format de date',
+                        defaultValue : format,
+                    }
+                },
+                onCancelButtonPress : ()=>{
+                    DialogProvider.close();
+                    reject({msg:'aucun format sélectionné'})
+                },
+                actions : [{
+                    text : "Sélectionnez",
+                    icon : "check",
+                    onPress : ({data})=>{
+                        column.format = data.dateFormat;
+                        this.configureSectionListSelectedValues[column.field] = {format:column.format}
                         DialogProvider.close();
-                        reject({msg:'aucun format sélectionné'})
+                        setTimeout(()=>{
+                            resolve(column);
+                            if(toggleSectionList !== false){
+                                this.toggleColumnInSectionList(column.field,true);
+                            }
+                        },100)
                     },
-                    actions : [{
-                        text : "Sélectionnez",
-                        icon : "check",
-                        onPress : ({data})=>{
-                            column.format = data.dateFormat;
-                            this.configureSectionListSelectedValues[column.field] = data.dateFormat;
-                            DialogProvider.close();
-                            setTimeout(()=>{
-                                resolve(column);
-                            },100)
-                        },
-                    }]
-                })
+                }]
             })
-        }
-        return Promise.resolve(column);
+        })
    }
-   toggleColumnInSectionList(columnName){
+   toggleColumnInSectionList(columnName,enable){
         if(!isNonNullString(columnName) || !isObj(this.state.columns[columnName])) return;
         if(!isObj(this.state.sectionListColumns) || !Array.isArray(this.preparedColumns?.sectionListColumnsMenuItems))return;
         const menuItems = this.preparedColumns?.sectionListColumnsMenuItems;
         if(!menuItems.length) return;
         const sectionListColumns = {...this.state.sectionListColumns};
-        if(isObj(sectionListColumns[columnName])){
+        if(enable !== true && isObj(sectionListColumns[columnName])){
             delete sectionListColumns[columnName];
         } else {
             sectionListColumns[columnName] = {field:columnName};
         }
-        const cb =()=>{
+        setTimeout(() => {
             const {sectionListColumns:pSListColumns} = this.prepareColumns({sectionListColumns});
             this.setIsLoading(true,()=>{
                 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));
                     });
                 });
             },true);
-        }
-        setTimeout(() => {
-            if(!isObj(sectionListColumns[columnName])){
-                return cb();
-            }
-            return this.configureSectionListColumn(sectionListColumns[columnName]).then(cb).catch(notify.error)
         }, 100);
    }
    removeAllColumnsInSectionList(){
@@ -1069,16 +1128,338 @@ export default class CommonDatagridComponent extends AppComponent {
             this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns},(state)=>{
                 this.setState({...state,sectionListColumns},()=>{
                     this.setIsLoading(false,false);
+                    this.setSessionData("sectionListColumns",null);
                 });
             });
         },true);
    }
+   canDisplayOnlySectionListHeaders(){
+        return this.hasFooterFields() && this.isSectionList() && this.hasSectionListData();
+   }
+   /*** si l'on peut rendre le contenu de type graphique */
+   isChartRendable(){
+     return !this.isPivotDatagrid() && this.hasFooterFields();
+   }
+   isValidChartConfig(config){
+        config = defaultObj(config,this.state.chartConfig);
+        return isNonNullString(config.x) && isNonNullString(config.y);
+   }
+   canRenderChart(){
+        return this.isChartRendable() && isNonNullString(this.state.displayType) && displayTypes[this.state.displayType]?.isChart === true ? true : false;
+   }
+   persistDisplayType(displayType){
+    this.setSessionData("displayType",displayType);
+   }
+   /***modifie le type de données d'affichage du tableau */
+   setDisplayType(type){
+        if(!isObj(type) || !isNonNullString(type.code) || !displayTypes[type.code]) return;
+        const tt = displayTypes[type.code];
+        if(this.state.displayType == tt.code) return; 
+        const displayType = tt.code;
+        if(tt.code == 'table'){
+            return this.setIsLoading(true,()=>{
+                this.setState({displayType},()=>{
+                    this.setIsLoading(false,false);
+                    this.persistDisplayType(displayType);
+                });
+            },true)
+        } else {
+            const cb = (chartConfig)=>{
+                this.setIsLoading(true,()=>{
+                    this.setState({chartConfig,displayType},()=>{
+                        this.setIsLoading(false,false);
+                        this.persistDisplayType(displayType);
+                    })
+                },true);
+            }
+            if(!this.isValidChartConfig()){
+                return this.configureChart(false).then((chartConfig)=>{
+                    cb(chartConfig);
+                });
+            }
+            cb({...this.state.chartConfig});
+        }
+   }
+   configureChart(refreshChart){
+        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 series = {};
+        let hasSeries = false;
+        const isValidConfig = this.isValidChartConfig();
+        Object.map(this.state.columns,(field,f)=>{
+            if(isObj(field) && !this.isSelectableColumn(field) && !this.isIndexColumn(field)){
+                xItems[f] = field;
+                const type = defaultStr(field.jsType,field.type).toLowerCase();
+                if(type === 'number' || type=='decimal'){
+                    yItems[f] = field;
+                    series[f] = field;
+                }
+            }
+        });
+        const onValidatorValid = ({context,value})=>{
+            if(context && value){
+                const name = context.getName();
+                const isHorizontal = name =="x";
+                const oContext = context.getField(isHorizontal ? "y" : "x");
+                if(!oContext) return;
+                const v2 = oContext.getValue()
+                if(v2 === value){
+                    return "la valeur du champ [{0}] doit être différent de celle du champ [{1}]".sprintf(context.getLabel(),oContext.getLabel())
+                }
+                oContext.validate({value:v2,context:oContext});
+            }
+        }
+        return new Promise((resolve,reject)=>{
+            DialogProvider.open({
+                title : 'Configuration des graphes',
+                subtitle : false,
+                fields : {
+                    x : {
+                        text : 'Axe des x[horizontal]',
+                        type : "select",
+                        required : true,
+                        items : xItems,
+                        defaultValue : config.x,
+                        onValidatorValid,
+                    },
+                    y :  {
+                        text : 'Axe des y[Vertical]',
+                        type : "select",
+                        required : true,
+                        items : yItems,
+                        defaultValue : config.y,
+                        onValidatorValid,
+                    },
+                    series : hasSeries && {
+                        text : 'Series',
+                        type : "select",
+                        items : series,
+                        multiple : true,
+                    },
+                    aggregatorFunction : {
+                        type  : 'select',
+                        text : "Foncton d'aggrégation",
+                        required : true, 
+                        multiple : false,
+                        defaultValue : "sum",
+                        items : aggregatorFunctions,
+                    }
+                },
+                actions : [
+                    {
+                        text : "Configurer",
+                        icon : "check",
+                        onPress : ({data})=>{
+                            const chartConfig = {...config,...data};
+                            this.setSessionData("chartConfig",chartConfig);
+                            DialogProvider.close();
+                            if(false && !isValidConfig && refreshChart !== false){
+                                return this.setState({chartConfig},()=>{
+                                    resolve(chartConfig)
+                                })
+                            }
+                            resolve(chartConfig);
+                        }
+                    }
+                ]
+            })
+        })
+   }
+   getCharConfig(){
+      return defaultObj(this.state.chartConfig);
+   }
+   renderDisplayTypes(){
+        const m = [];
+        let activeType = null,hasFoundChart = false,hasFoundTable = false;
+        const hasConfig = this.isValidChartConfig();
+        Object.map(this.displayTypes,(type,k)=>{
+            if(type.isChart === true ) {
+                if(!this.isChartRendable()){
+                    return null;
+                }
+                if(!hasFoundChart){
+                    if(hasFoundTable){
+                        m.push({divider:true});
+                    }
+                    hasFoundChart = true;
+                    m.push({
+                        divider : true,
+                        text : "Configurer les graphes",
+                        icon :"material-settings",
+                        onPress : this.configureChart.bind(this)
+                    });
+                }
+            } else if(k === 'table'){
+                hasFoundTable = true;
+            }
+            const active = this.state.displayType === k;
+            if(active){
+                activeType = type;
+            }
+            m.push({
+                ...type,
+                labelStyle : active &&  {fontWeight:'bold',color:theme.colors.primaryOnSurface} || null,
+                right : <>
+                    {active ? <Icon color={theme.colors.primaryOnSurface} name="check"/>: null}
+                </>,
+                disabled : type.isChart && !hasConfig ? true : undefined,
+                onPress:()=>{
+                    this.setDisplayType(type); 
+                }
+            });
+        });
+        if(m.length <= 1 || !activeType) return null;
+        if(!isMobileOrTabletMedia()){
+            m.unshift({text:"Type d'affichage des données",divider:true});
+        }
+        return <Menu
+            title = "Type d'affichage"
+            items = {m}
+            anchor = {(p)=>{
+                return <Icon
+                    {...p}
+                    name = {activeType.icon}
+                    title = {"Les données s'affichent actuellement en {0}. Cliquez pour modifier le type d'affichage".sprintf(activeType.label)}
+                />
+            }}
+        />
+   }
+   getEmptyDataValue(){
+        return "N/A";
+   }
+   renderChart(){
+        if(!this.canRenderChart()) return null;
+        if(!this.isValidChartConfig()) return null;
+        const chartType = displayTypes[this.state.displayType];
+        if(!isObj(chartType) || !isNonNullString(chartType.type)) return null;
+        const config = this.getCharConfig();
+        if(!this.state.columns[config.y]) return null;
+        const yaxis = this.state.columns[config.y];
+        const type = defaultStr(yaxis.jsType,yaxis.type).toLowerCase();
+        if(type !== 'number'&& type !== 'decimal') return null;
+        const isEmptyY = config.x === this.emptySectionListHeaderValue;
+        const seriesConfig = Array.isArray(config.series) && config.series.length ? config.series : [yaxis.field];
+        let xaxis = null;
+        if(!isEmptyY){
+            if(!this.state.columns[config.x]){
+                return null;
+            }
+            xaxis = this.state.columns[config.x];
+        }
+        let aggregatorFunction = typeof config.aggregatorFunction =='string' && aggregatorFunctions[config.aggregatorFunction]?aggregatorFunctions[config.aggregatorFunction] :aggregatorFunctions.sum;
+        if(isObj(aggregatorFunction) && typeof aggregatorFunction.eval =='function'){
+            aggregatorFunction = aggregatorFunction.eval;
+        } else {
+            aggregatorFunction = aggregatorFunctions.sum.eval;
+        }
+        if(this.isSectionList()){
+            return null;
+        }
+        const emptyValue = this.getEmptyDataValue();
+        const indexes = {}
+        let count = 0;
+        this.state.data.map((data,index)=>{
+            if(!isObj(data))return null;
+            const txt = this.renderRowCell({
+                data,
+                rowData : data,
+                rowCounterIndex : index,
+                rowIndex : index,
+                columnDef : xaxis,
+                renderRowCell : false,
+                columnField : xaxis.field,
+            });
+            const text = isNonNullString(txt)? txt : emptyValue;
+            Object.map(seriesConfig,(s,v)=>{
+                if(!isNonNullString(s) || !this.state.columns[s]) return null;
+                const col = this.state.columns[s];
+                if(!isObj(col)) return null;
+                const value = defaultNumber(data[col.field]);
+                indexes[s] = defaultObj(indexes[s]);
+                const current = indexes[s];
+                current[text] = typeof current[text] =="number"? current[text] : 0;
+                current[text] = aggregatorFunction(value,current[text],count);
+            })
+        });
+        const series = [];
+        Object.map(indexes,(values,serieName)=>{
+            const col = this.state.columns[serieName];
+            const name = defaultStr(col?.label,col?.text,serieName),data = [];
+            Object.map(values,(v,i)=>{
+                data.push({
+                    x : i,
+                    y : v,
+                })
+            })
+            series.push({
+                name,
+                type : chartType.type,
+                data,
+            })
+        })
+        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 chartProps = defaultObj(chartProps);
+        return <Chart
+            options = {{
+                ...defaultObj(chartProps.options),
+                series,
+                chart : {
+                    height :350,
+                    maxHeight,
+                    ...defaultObj(chartProps.chart),
+                    type : chartType.type,
+                },
+                xaxis: {
+                    ...defaultObj(chartProps.xaxis),
+                    type: 'category'
+                }
+            }}
+        />
+   }
+   toggleDisplayOnlySectionListHeaders(){
+        if(!this.canDisplayOnlySectionListHeaders()) return
+        setTimeout(()=>{
+            const showFooters = true;
+            const displayOnlySectionListHeaders = !!!this.state.displayOnlySectionListHeaders;
+            this.setSessionData("displayOnlySectionListHeaders",displayOnlySectionListHeaders);
+            if(!displayOnlySectionListHeaders){
+                return this.prepareData({data:this.INITIAL_STATE.data,displayOnlySectionListHeaders},(state)=>{
+                    this.setState({...state,showFooters})
+                })
+            } else {
+                this.setIsLoading(true,()=>{
+                    const data = [];
+                    this.state.data.map((d)=>{
+                        if(isObj(d) && d.isSectionListHeader === true){
+                            data.push(d);
+                        }
+                    });
+                    this.setState({data,displayOnlySectionListHeaders,showFooters},()=>{
+                        this.setIsLoading(false),false;
+                    });
+                },true)
+            }
+        },100);
+   }
    /*** permet d'effectuer le rendu des colonnes groupable dans le menu item */
    renderSectionListMenu(){
         const m = Array.isArray(this.preparedColumns?.sectionListColumnsMenuItems)? this.preparedColumns?.sectionListColumnsMenuItems : [];
         if(!m.length){
             return null;
         }
+        const hasList = this.sectionListColumnsSize.current;
         const isMobile = isMobileOrTabletMedia();
         return <Menu
             title = {"Grouper les données du tableau"}
@@ -1093,7 +1474,12 @@ export default class CommonDatagridComponent extends AppComponent {
                     closeOnPress : false,
                     divider : true,
                 },
-                this.sectionListColumnsSize.current && {
+                this.canDisplayOnlySectionListHeaders() && {
+                    text : "Afficher uniquement totaux",
+                    icon : this.state.displayOnlySectionListHeaders?"check":null,
+                    onPress : this.toggleDisplayOnlySectionListHeaders.bind(this)
+                },
+                hasList && {
                     text : "Supprimer les groupes",
                     icon: "ungroup",
                     divider : true,
@@ -1146,6 +1532,7 @@ export default class CommonDatagridComponent extends AppComponent {
             } = header;
             restCol = Object.clone(defaultObj(restCol));
             let colFilter = defaultVal(restCol.filter,true);
+            const format  = defaultStr(restCol.format).toLowerCase();
             field = header.field = defaultStr(header.field,field,headerIndex);
             delete restCol.filter;
             
@@ -1273,19 +1660,32 @@ export default class CommonDatagridComponent extends AppComponent {
                         ...header,
                          width,
                          type,
+                         ...defaultObj(this.configureSectionListSelectedValues[field]),
                         ...sListColumns[field],
                     };///les colonnes de sections
                     this.sectionListColumnsSize.current++;
                 }
-                sectionListColumnsMenuItems.push({
+                const mItem = {
                     field,
+                    type,
+                    format,
                     onPress : ()=>{
                         this.toggleColumnInSectionList(field);
                         return false;
                     },
                     title : title,
                     icon : isInSectionListHeader?CHECKED_ICON_NAME : null,
-                });
+                };
+                if(this.isSectionListColumnConfigurable(mItem)){
+                    mItem.right = (p)=>{
+                        return <Icon name="material-settings" {...p} onPress={(e)=>{
+                            React.stopEventPropagation(e);
+                            this.configureSectionListColumn(mItem);
+                            return false;
+                        }}/>
+                    }
+                }
+                sectionListColumnsMenuItems.push(mItem);
             }
             columnIndex++;
             visibleColumnIndex++;
@@ -1314,9 +1714,9 @@ export default class CommonDatagridComponent extends AppComponent {
    getFooterValues(){
         return defaultObj(this.___evaluatedFootersValues);
    }
-   
+
    /**** s'il s'agit d'une section list */
-   isSectionList(sectionListColumns){
+   isSectionList (sectionListColumns){
         sectionListColumns = isObj(sectionListColumns) ? sectionListColumns : this.state.sectionListColumns;
         return !this.isPivotDatagrid() && isObj(sectionListColumns) && Object.size(sectionListColumns,true) ? true : false;
    }
@@ -1341,13 +1741,14 @@ export default class CommonDatagridComponent extends AppComponent {
         return defaultNumber(this.sectionListDataSize.current)
     }
     prepareData(args,cb){
-        let {pagination,data,force,sectionListColumns,updateFooters} = defaultObj(args);
+        let {pagination,displayOnlySectionListHeaders:cdisplayOnlySectionListHeaders,data,force,sectionListColumns,updateFooters} = defaultObj(args);
         cb = typeof cb ==='function'? cb : typeof args.cb == 'function'? args.cb : undefined;
         sectionListColumns = isObj(sectionListColumns) ? sectionListColumns : this.state.sectionListColumns;
+        const displayOnlySectionListHeaders = typeof cdisplayOnlySectionListHeaders == 'boolean'?cdisplayOnlySectionListHeaders : this.state.displayOnlySectionListHeaders;
         let isArr = Array.isArray(data);
         //let push = (d,index) => isArr ? newData.push(d) : newData[index] = d;
         const hasLocalFilter = this.props.filters !== false && this.hasLocalFilters;
-        let footersColumns = this.getFooterFields(),hasFooterFields = Object.size(footersColumns,true);
+        let footersColumns = this.getFooterFields(),hasFooterFields = this.hasFooterFields();
         const canUpdateFooters = !!(updateFooters !== false && hasFooterFields);
         this.hasFoundSectionData.current = false;
         this.sectionListDataSize.current = 0;
@@ -1430,9 +1831,11 @@ export default class CommonDatagridComponent extends AppComponent {
                 //this.sectionListData[i] = sortConfig ? sortBy(this.sectionListData[i],sortConfig):this.sectionListData[i];
                 //const v = i;// === this.emptySectionListHeaderValue ? "" : i;
                 data.push({isSectionListHeader:true,sectionListHeaderKey:i});
-                this.sectionListData[i].map((d)=>{
-                    data.push(d);
-                })
+                if(!displayOnlySectionListHeaders){
+                    this.sectionListData[i].map((d)=>{
+                        data.push(d);
+                    })
+                }
             }
         } 
         if(!this.hasSectionListData() && this.canPaginateData()){
@@ -1444,7 +1847,7 @@ export default class CommonDatagridComponent extends AppComponent {
         } else if(force){
             this.setSelectedRows();
         }
-        const state = {data};
+        const state = {data,displayOnlySectionListHeaders};
         if((cb)){
             cb(state);
         }
@@ -2275,6 +2678,10 @@ CommonDatagridComponent.getDefaultPreloader = (props)=>{
     return <Preloader {...defaultObj(props)}/>
 }
 
+const chartDisplayType = PropTypes.oneOf(Object.keys(displayTypes).filter(type=>{
+    const x = displayTypes[type];
+    return typeof x =='object' && x && typeof x.disabled !== true && x.isChart === true && true || false;
+}));
 CommonDatagridComponent.propTypes = {
     canMakePhoneCall : PropTypes.bool,//si l'on peut faire un appel sur la données sélectionnées
     makePhoneCallProps : PropTypes.oneOfType([
@@ -2451,6 +2858,17 @@ CommonDatagridComponent.propTypes = {
     /**** la fonction permettant de faire le rendu dun contenu paginé, personalisé */
     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 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
+        x : PropTypes.string.isRequired, //l'axe horizontal
+        y : PropTypes.string.isRequired, //l'axe des y, les colonnes de type nombre
+        series : PropTypes.arrayOf([PropTypes.string]), //les séries, le nombre de courbe a afficher sur le graphe, en fonction du type
+    }),
+    displayType : chartDisplayType,
+    /*** les types d'afichates supportés par l'application */
+    displayTypes : PropTypes.arrayOf(chartDisplayType) 
 }
 
 const styles = StyleSheet.create({

package/src/components/Datagrid/Common/readMe.txt

@@ -0,0 +1,12 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+Les propriétés d'états : 
+    displayType, displayOnlySectionListHeaders, sectionListHeaderColumns sont persistées    
+    ça sous entend que lorsqu'on charge la table data, ces valeurs sont restaurées
+
+- Pour faire un affichage en graphique, il faut :    
+    1. grouper les éléments du tableau avec au moins une colonne
+    2. disposer dans le tableau, des colonnes de totalisation (de type montant et somme)
+    3.  

package/src/components/Datagrid/Footer/Footer.js

@@ -14,6 +14,50 @@ let methods = {
     max : 'Maximum',
     count : "Nombre",
 }
+/*** les fonction d'aggreations */
+export const aggregatorFunctions = {
+    sum : {
+        code : "sum",
+        label : "Somme",
+        eval : (current,prev,count)=>{
+            current = typeof current =='number'?current : 0;
+            prev = typeof prev =='number'? prev : 0;
+            return current+prev;
+        }
+    },
+    /*average : {
+        code : "average",
+        label : "Moyenne",
+        eval : ()=>{
+
+        }
+    },*/
+    min : {
+        code : "min",
+        label : "Minimum",
+        eval : (current,prev,count)=>{
+            current = typeof current =='number'?current : 0;
+            prev = typeof prev =='number'? prev : 0;
+            return Math.min(current,prev);
+        },
+    },
+    max : {
+        code : "max",
+        label: 'Maximum',
+        eval : (current,prev,count)=>{
+            current = typeof current =='number'?current : 0;
+            prev = typeof prev =='number'? prev : 0;
+            return Math.max(current,prev);
+        },
+    },
+    count : {
+        code : "count",
+        label : "Nombre",
+        eval : (current,prev,count)=>{
+            return (typeof count =='number'? count : 0)+1;
+        }
+    },
+}
 const formatValue = ({value,format,method})=>{
     return (format === 'money' && method != 'count')? value.formatMoney():value.formatNumber();
 }

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

@@ -116,9 +116,12 @@ const DatagridFactory = (Factory)=>{
                 selectable,pagin,showPagination,
                 sessionName,onMount,onUnmount,onFetchData,dataSourceSelector,dataSourceSelectorProps,queryLimit,
                 filters,
+                chartContainerProps,
                 accordion, //pour le rendu du header en accordion
                 ...rest
             } = this.props;
+            const canRenderChart = this.canRenderChart();
+            chartContainerProps = defaultObj(chartContainerProps);
             testID = defaultStr(testID,'RN_DatagridTableComponent');
             rest = defaultObj(rest);
             let showDataSourceSelector = false;
@@ -168,7 +171,7 @@ const DatagridFactory = (Factory)=>{
             if(selectableMultiple && max){
                 max = max.formatNumber();
                 restItems = [
-                    ...(selectableMultiple ? [{
+                    ...(selectableMultiple && !canRenderChart ? [{
                         label : "Sélectionner "+max.formatNumber(),
                         icon : "select-all",
                         onPress : (x,event)=>{
@@ -188,9 +191,9 @@ const DatagridFactory = (Factory)=>{
             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),150);
-                if(winheight<=300){
-                    maxHeight = 300;
+                const diff = winheight - Math.max(defaultNumber(layout.y,layout.top),100);
+                if(winheight<=350){
+                    maxHeight = 350;
                 } else {
                     maxHeight = diff;
                 }
@@ -216,7 +219,7 @@ const DatagridFactory = (Factory)=>{
                                         {showFilters?'Masquer/Filtres':'Afficher/Filtres'}
                                 </Button>
                             )}
-                            {hasFooterFields ? <Button
+                            {hasFooterFields && !canRenderChart ? <Button
                                 normal
                                 style={styles.paginationItem}
                                 onPress =  {()=>{this.toggleFooters(!showFooters)} }   
@@ -284,6 +287,7 @@ const DatagridFactory = (Factory)=>{
                         
                         />
                         {this.renderSectionListMenu()}
+                        {this.renderDisplayTypes()}
                         <View testID={testID+"_HeaderPagination"} style = {styles.paginationItem}>
                             <BottomSheetMenu
                                 testID={testID+"_HeaderMenus"}
@@ -325,20 +329,28 @@ const DatagridFactory = (Factory)=>{
                     {rPagination}
                     {_progressBar}  
                 </View>
-                <Table
+                {<Table
+                    renderListContent = {canRenderChart? false:true}
                     ref = {this.listRef}
                     {...rest}
                     onLayout = {(args)=>{
                         if(rest.onLayout){
                             rest.onLayout(args);
                         }
+                        if(canRenderChart){
+                            return;
+                        }
                         this.updateLayout(args);
                     }}
+                    children = {canRenderChart ? <View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
+                        {this.renderChart()}
+                    </View> : null}
                     getItemType = {this.getFlashListItemType.bind(this)}
                     renderItem = {this.renderFlashListItem.bind(this)}
-                    hasFooters = {hasFooterFields}
+                    hasFooters = {hasFooterFields && !canRenderChart ? true : false}
                     showFilters = {showFilters}
-                    showFooters = {showFooters}
+                    showFooters = {showFooters && !canRenderChart ? true : false}
+                    showHeaders = { canRenderChart ? !!showFilters : true}
                     headerContainerProps = {{}}
                     headerCellContainerProps = {{
                         style : showFilters?{justifyContent:'flex-start'}:null
@@ -359,7 +371,7 @@ const DatagridFactory = (Factory)=>{
                     renderFilterCell={this.renderFilterCell.bind(this)}
                     renderFooterCell={this.renderFooterCell.bind(this)}
                     renderEmpty = {this.renderEmpty.bind(this)}
-                />
+                />}
             </View>
         }
     }

package/src/components/Date/FormatSelector.js

@@ -85,7 +85,7 @@ export const selectDateFormatFieldProps = ({onAdd:customOnAdd,onAddCustomFormat,
         showAdd : false,
     }
 }
-export const getDateFormatSelectorItems = x=> Object.map(DateLib.formats,(format)=>{
+export const getDateFormatSelectorItems = x=> Object.map(DateLib.sortedFormats,(format)=>{
     return {code : format,label:new Date().toFormat(format)}
 });
 

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

@@ -318,6 +318,9 @@ export default class Field extends AppComponent {
     getName (){
         return this.name;
     }
+    getLabel (){
+        return defaultStr(this.label,this.props.label,this.props.text,this.props.title,this.name);
+    }
     getFormName(){
         return this.formName;
     }

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

@@ -2,6 +2,7 @@ import Field from "./Field";
 import Dropdown from "$ecomponents/Dropdown";
 import PropTypes from "prop-types";
 import {isObj} from "$utils";
+import appConfig from "$capp/config";
 
 export default class FormSelectField extends Field{
     constructor(props) {
@@ -115,8 +116,9 @@ export default class FormSelectField extends Field{
         delete props.format;
         delete props.import;
         delete props.exports;
-        if( defaultStr(props.name,this.name) === 'country' && props.multiple !== true){
-            props.defaultValue = defaultStr(props.defaultValue);
+        const isCountry = this.type.contains('country');
+        if( isCountry && props.multiple !== true){
+            props.defaultValue = defaultStr(props.defaultValue,appConfig.countryCode,appConfig.get("countryCode","country"));
         }
         return <Dropdown
             {...props}

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

@@ -1,5 +1,6 @@
 import PhoneInput from "$ecomponents/PhoneInput";
 import Field from "./Field";
+import appConfig from "$capp/config";
 
 export default class FormPhoneInputField extends Field {
     canFocus(){
@@ -9,6 +10,7 @@ export default class FormPhoneInputField extends Field {
         props.onChange = (args)=>{
             this.validate(args);
         }
+        props.country = defaultStr(props.country,appConfig.countryCode,appConfig.get("countryCode","country"))
         return <PhoneInput
             {...props}
             setRef = {setRef}

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

@@ -48,6 +48,7 @@ const FormDataDialogProvider = React.forwardRef((props,innerRef)=>{
     return <Dialog 
         responsive
         withScrollView
+        subtitle ={false}
         {...props} 
         {...state} 
         formProps = {formProps}

package/src/components/Menu/Item.js

@@ -9,7 +9,7 @@ import theme,{black,white,Colors,StylePropTypes,DISABLED_OPACITY} from "$theme";
 import PropTypes from "prop-types";
 import { Dimensions } from 'react-native';
 import View from "$ecomponents/View";
-import {defaultVal} from "$utils";
+import {defaultVal,isNonNullString,defaultStr,defaultObj} from "$utils";
 import Tooltip from "$ecomponents/Tooltip";
 import Label from "$ecomponents/Label";
 
@@ -27,14 +27,17 @@ const MenuItemComponent = React.forwardRef(({
   style,
   contentStyle,
   testID,
-  titleStyle,
+  labelStyle,
   primary,
   secondary,
   iconProps,
   isBottomSheetItem,
   accessibilityLabel,
+  right,
+  contentContainerProps,
   ...rest
 },ref) => {
+  contentContainerProps = defaultObj(contentContainerProps);
   title = defaultVal(label,text,title);
   const disabledColor = color(theme.dark ? white : black)
     .alpha(0.32)
@@ -49,20 +52,21 @@ const MenuItemComponent = React.forwardRef(({
     ? disabledColor
     : color(theme.colors.text).alpha(theme.ALPHA).rgb().string();
   iconProps = defaultObj(iconProps);
-  titleStyle = Object.assign({},StyleSheet.flatten(titleStyle));
+  labelStyle = Object.assign({},StyleSheet.flatten(labelStyle));
   style = Object.assign({},StyleSheet.flatten(style));
 
-  if(Colors.isValid(titleStyle.color)){
-     iconColor = titleStyle.color;
+  if(Colors.isValid(labelStyle.color)){
+     iconColor = labelStyle.color;
   } else if(Colors.isValid(style.color)){
     titleColor = iconColor = style.color;
   }
-
   const pointerEvents = disabled ? 'none' : 'auto';
   const disabledStyle = disabled ? {opacity:DISABLED_OPACITY} : null;
   const winW = Dimensions.get("window").width-30;
   const maxWidthStyle = isBottomSheetItem ? {width:winW,maxWidth:null} : undefined;
   const maxWidthTextStyle = isBottomSheetItem ? {width:winW-50} : null;
+  right = typeof right =='function'? right ({color:titleColor}) : right;
+  if(!React.isValidElement(right)) right = null;
   return (
     <Tooltip
       {...defaultObj(rest)}
@@ -77,31 +81,37 @@ const MenuItemComponent = React.forwardRef(({
       accessibilityState={{ disabled }}
       pointerEvents = {pointerEvents}
     >
-      <View style={[styles.row]} ref={ref}>
+      <View style={[styles.row]} ref={ref} testID={testID+"_ContentContainer"}>
         {icon ? (
-          <View style={[styles.item, styles.icon]} pointerEvents="box-none">
+          <View testID={testID+"_IconContainer"} style={[styles.item, styles.icon]} pointerEvents="box-none">
             <Icon source={icon} size={24} {...iconProps} style={[iconProps.style,styles.iconT]} color={iconColor} />
           </View>
         ) : null}
         <View
+          testID={testID+"_Right2LabelContainer"}
+          pointerEvents={!right?"none":"auto"}
+          {...contentContainerProps}
           style={[
             styles.item,
             styles.content,
             !maxWidthStyle && icon ? styles.widthWithIcon : null,
             contentStyle,
             !icon?styles.titleNoIcon:null,
-            maxWidthStyle
+            right && theme.styles.row,
+            maxWidthStyle,
+            contentContainerProps.style
           ]}
-          pointerEvents="none"
         >
           <Label
+            testID={testID+"_Label"}
             selectable={false}
             numberOfLines={1}
             ellipsizeMode = {"tail"}
-            style={[styles.title, { color: titleColor }, titleStyle,styles.noMargin,maxWidthTextStyle]}
+            style={[styles.title, { color: titleColor }, labelStyle,styles.noMargin,!right ? maxWidthTextStyle : null]}
           >
             {title}
           </Label>
+          {right}
         </View>
       </View>
     </Tooltip>
@@ -153,6 +163,9 @@ const styles = StyleSheet.create({
   widthWithIcon: {
     maxWidth: maxWidth - iconWidth /*+ 48*/,
   },
+  widthWithRight: {
+    maxWidth: maxWidth - iconWidth /*+ 48*/,
+  },
   titleNoIcon : {
     marginHorizontal : 8
   }
@@ -185,7 +198,7 @@ MenuItemComponent.propTypes = {
      */
     style: StylePropTypes,
     contentStyle: StylePropTypes,
-    titleStyle : StylePropTypes,
+    labelStyle : StylePropTypes,
     /**
      * @optional
      */

package/src/components/Snackbar/index.js

@@ -124,7 +124,7 @@ const Snackbar = ({
       testID={testID+"_Container"}
       {...containerProps}
       pointerEvents="box-none"
-      style={[styles.wrapper, containerPaddings,containerProps.style]}
+      style={[styles.wrapper, containerPaddings,action && theme.styles.pr1,containerProps.style]}
     >
       <Surface
         pointerEvents="box-none"

package/src/components/Table/index.js

@@ -43,7 +43,7 @@ const getOnScrollCb = (refs,pos,cb2)=>{
     return isMobileNative()? cb : debounce(cb,200);
 }
 
-const TableComponent = React.forwardRef(({containerProps,renderEmpty,renderItem,isRowSelected,headerScrollViewProps,footerScrollViewProps,scrollViewProps,showFooters,renderFooterCell,footerCellContainerProps,filterCellContainerProps,headerContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,renderCell,cellContainerProps,hasFooters,renderHeaderCell,renderFilterCell,columnProps,getRowKey,columnsWidths,colsWidths,footerContainerProps,showFilters,columns,data,testID,...props},tableRef)=>{
+const TableComponent = React.forwardRef(({containerProps,renderListContent,children,renderEmpty,renderItem,isRowSelected,headerScrollViewProps,footerScrollViewProps,scrollViewProps,showFooters,renderFooterCell,footerCellContainerProps,filterCellContainerProps,headerContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,renderCell,cellContainerProps,hasFooters,renderHeaderCell,renderFilterCell,columnProps,getRowKey,columnsWidths,colsWidths,footerContainerProps,showHeaders,showFilters,columns,data,testID,...props},tableRef)=>{
     containerProps = defaultObj(containerProps);
     testID = defaultStr(testID,"RN_TableComponent");
     cellContainerProps = defaultObj(cellContainerProps);
@@ -138,7 +138,7 @@ const TableComponent = React.forwardRef(({containerProps,renderEmpty,renderItem,
     React.useEffect(()=>{
         setState({...state,...prepareState()});
     },[data,columns]);
-    const emptyData = typeof renderEmpty =='function' && !Object.size(data,true)? renderEmpty() : null;
+    const emptyData = renderListContent === false ?null : typeof renderEmpty =='function' && !Object.size(data,true)? renderEmpty() : null;
     const hasEmptyData = emptyData && React.isValidElement(emptyData);
     const {visibleColumns,columns:cols,headers,footers,filters} = state;
     headerContainerProps = defaultObj(headerContainerProps);
@@ -199,10 +199,11 @@ const TableComponent = React.forwardRef(({containerProps,renderEmpty,renderItem,
         get scrollViewContext(){ return scrollViewRef.current},
         get headerScrollViewContext(){return headerScrollViewRef.current},
     }
-    const hContent = h.length ? <View testID={testID+"_Header"}{...hProps} {...headerContainerProps} style={[styles.header,headerContainerProps.style,hProps.style,f.length]}>
+    const showTableHeaders = showHeaders !== false || showFilters ;
+    const hContent = showTableHeaders &&  h.length ? <View testID={testID+"_Header"}{...hProps} {...headerContainerProps} style={[styles.header,headerContainerProps.style,hProps.style,f.length]}>
         {h}
     </View> : null,
-    fContent = f.length ? <View testID={testID+"_Footer"} {...footerContainerProps} style={[styles.header,styles.footers,footerContainerProps.style,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
+    fContent = showTableHeaders && f.length ? <View testID={testID+"_Footer"} {...footerContainerProps} style={[styles.header,styles.footers,footerContainerProps.style,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
         {f}
     </View> : null,
     filtersContent = fFilters.length ? <View testID={testID+"_Filters"} style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
@@ -241,7 +242,8 @@ const TableComponent = React.forwardRef(({containerProps,renderEmpty,renderItem,
                     </View>
                 </ScrollView>
             </RNView>
-            {hasEmptyData ? <View testID={testID+"_Empty"} style={styles.hasNotData}>
+            {renderListContent === false ? (React.isValidElement(children)? children : null) :
+                hasEmptyData ? <View testID={testID+"_Empty"} style={styles.hasNotData}>
                     {emptyData}
             </View> : <ScrollView {...scrollViewProps} scrollEventThrottle = {scrollEventThrottle} horizontal contentContainerStyle={[scrollContentContainerStyle,scrollViewProps.contentContainerStyle]} showsVerticalScrollIndicator={false}  
                 onScroll = {getOnScrollCb([headerScrollViewRef,footerScrollViewRef],null,(args)=>{
@@ -379,7 +381,7 @@ export const styles = StyleSheet.create({
     container : {
         width : '100%',
         minHeight : 300,
-        paddingBottom : 50,
+        paddingBottom : 10,
         paddingLeft : 10,
         paddingRight : 0,
         flex : 1,
@@ -497,6 +499,7 @@ TableComponent.popTypes = {
       PropTypes.func,  
       PropTypes.object
     ]),
+    renderListContent : PropTypes.bool,//si l'on devra rendre le contenu de la FlashList
     renderItem : PropTypes.func,//la fonction permettant de gérer le rendu des item
     headerScrollViewProps : PropTypes.object,
     footerScrollViewProps : PropTypes.object,