@fto-consult/expo-ui 2.36.4 → 2.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.36.4",
+  "version": "2.37.0",
   "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.1.3",
+    "@fto-consult/common": "^2.1.4",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",
@@ -92,6 +92,7 @@
     "react-dom": "18.1.0",
     "react-native": "0.70.5",
     "react-native-big-list": "^1.6.0",
+    "react-native-blob-util": "^0.17.0",
     "react-native-gesture-handler": "~2.8.0",
     "react-native-paper": "^4.12.5",
     "react-native-paper-dates": "^0.9.2",

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

@@ -529,25 +529,7 @@ const DatagridFactory = (Factory)=>{
                         {this.renderDisplayTypes()}
                         {this.renderAggregatorFunctionsMenu()}
                         {!canRenderChart ? <RenderType /> : null}
-                    
-                            {/*exportable && exportTableProps.pdf && (exportTableProps.pdf.footer) ? (
-                                <td  width="40px">
-                                    <ExportTable 
-                                        {...exportTableProps}
-                                        excel = {false}
-                                        ref = {(el)=>{
-                                            if(el){
-                                                this.exportDataInstance = el;
-                                            }
-                                        }}
-                                        selector = {this.exportableDomId}
-                                        getAllData = {()=>{
-                                            return this.INITIAL_STATE.data;
-                                        }}
-                                    />
-                                </td>
-                                ) : null
-                            */}
+                        {this.renderExportableMenu()}
                             {/*filters !== false && <td ><LocalFilter title = {this.props.title} fields ={this.state.columns} onChange={this.onLocalFiltersChange.bind(this)}/></td>*/}
                     </View>
             </ScrollView>

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

@@ -9,11 +9,9 @@ import Tooltip from "$ecomponents/Tooltip";
 import setQueryLimit from "./setQueryLimit";
 import {showConfirm} from "$ecomponents/Dialog";
 import Label from "$ecomponents/Label";
-import Image from "$ecomponents/Image";
 import Icon,{COPY_ICON} from "$ecomponents/Icon";
 import filterUtils from "$cfilters";
-import Hashtag from "$ecomponents/Hashtag";
-import {sortBy,isDecimal,defaultVal,extendObj,isObjOrArray,isObj,defaultNumber,defaultStr,isFunction,defaultBool,defaultArray,defaultObj,isNonNullString,defaultDecimal} from "$utils";
+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";
 import React from "$react";
 import DateLib from "$lib/date";
@@ -25,15 +23,11 @@ import Preloader from "$ecomponents/Preloader";
 import Checkbox from "../Checkbox";
 import { TouchableRipple } from "react-native-paper";
 import { evalSingleValue,Footer,getFooterColumnValue,isValidAggregator,extendAggreagatorFunctions} from "../Footer";
-import i18n from "$i18n";
 import { makePhoneCall,canMakePhoneCall as canMakeCall} from "$makePhoneCall";
 import copyToClipboard from "$capp/clipboard";
 import { Pressable } from "react-native";
-import TableLink from "$TableLink";
-import appConfig from "$capp/config";
 import stableHash from "stable-hash";
 import DatagridProgressBar from "./ProgressBar";
-import {Flag} from "$ecomponents/Countries"
 import View from "$ecomponents/View";
 import {Menu} from "$ecomponents/BottomSheet";
 import {styles as tableStyles} from "$ecomponents/Table";
@@ -42,6 +36,8 @@ import Chart,{getMaxSupportedSeriesSize} from "$ecomponents/Chart";
 import notify from "$cnotify";
 import FileSystem from "$file-system";
 import sprintf from "$cutils/sprintf";
+import { renderRowCell,formatValue } from "./utils";
+import * as XLSX from "xlsx";
 
 export const TIMEOUT = 100;
 
@@ -1417,11 +1413,7 @@ export default class CommonDatagridComponent extends AppComponent {
         },TIMEOUT);
    }
    formatValue(value,format){
-        if(typeof value !='number') return value;
-        if(format && typeof format =='string' && format.toLowerCase() =='money'){
-            return this.state.abreviateValues? value.abreviate2FormatMoney() : value.formatMoney();
-        }
-        return this.state.abreviateValues ? value.abreviate() : value.formatNumber();
+        return formatValue(value,format,this.state.abreviateValues);
     }
    renderAggregatorFunctionsMenu(){
         const m = this.getAggregatorFunctionsMenuItems(false,false);
@@ -1632,6 +1624,204 @@ export default class CommonDatagridComponent extends AppComponent {
             }
         ]
    }
+   getExportableFields(){
+        return {
+            fileName : {
+                text : "Nom du fichier",
+                format : "hashtag",
+                required : true,
+            },
+            displayTotals : {
+                type : "switch",
+                label : "Exporter les entêtes des groupes",
+                defaultValue :1,
+            },
+            /*abreviateValues : {
+                text : "Abréger les valeurs numériques",
+                type : "switch",
+            },*/
+            dateFormat : {
+                text : "Format des dates",
+                type : "dateFormat",
+                required : true,
+            },
+        }
+   }
+   /***@see : https://docs.sheetjs.com/docs/api/utilities */
+   exportToExcel(){
+        const skey = "export-to-excel";
+        const isOnlytotal = this.state.displayOnlySectionListHeaders;
+        let displayOnlyHeader = this.canDisplayOnlySectionListHeaders() && isOnlytotal;
+        const sData = defaultObj(this.getSessionData(skey));
+        return DialogProvider.open({
+            title : "Paramètre d'export excel",
+            data : sData,
+            fields : {
+                ...this.getExportableFields(),
+                sheetName : {
+                    label : 'Nom de la feuille excel',
+                    format : "hashtag",
+                    required : true,
+                },
+                exportOnlyTotal : displayOnlyHeader && {
+                    label : "Exporter uniquemnt les totaux",
+                    defaultValue : 0,
+                    type : "switch",
+                },
+                aggregatedValues : displayOnlyHeader ? {
+                    label : "Exporter uniquement les totaux aggrégées",
+                    defaultValue : 0,
+                    type : "switch",
+                }  : null,
+                addEmptyRowAfterTotal : {
+                    
+                },
+            },
+            actions : [{text:'Exporter',icon : "check"}],
+            onSuccess:({data:config})=>{
+                this.setSessionData(skey,config);
+                config.fileName = sprintf(config.fileName);
+                config.sheetName = sanitizeSheetName(config.sheetName);
+                const data = [];
+                let totalColumns = 0;
+                const cols = {};
+                DialogProvider.close();
+                Preloader.open("préparation des données...");
+                const footers = this.getFooters();
+                if(displayOnlyHeader && config.aggregatedValues){
+                    const fValues = this.getFooterValues();
+                    const headers = ["Fonction d'agrégation"];
+                    const aggregatorFunctions = this.aggregatorFunctions;
+                    Object.map(footers,(f,i)=>{
+                        const col = this.state.columns[i];
+                        if(!col || col.visible === false) return;
+                        headers.push(defaultStr(col.label,col.text));
+                        cols[i] = col;
+                    });
+                    data.push(headers);
+                    Object.map(aggregatorFunctions,(ag,i)=>{
+                        const d = [defaultStr(ag.label,ag.text,i)];
+                        Object.map(fValues,(footer,field)=>{
+                            if(!cols[field]) return;
+                            d.push(defaultNumber(footer[i]))
+                        });
+                        data.push(d);
+                    })
+                } else {
+                    const headers = [];
+                    const hFooters = defaultObj(this.sectionListHeaderFooters);
+                    const agFunc = this.state.aggregatorFunction;
+                    const canExportOnlyTotal = isOnlytotal || (config.exportOnlyTotal && displayOnlyHeader);
+                    if(canExportOnlyTotal){
+                        headers.push("");
+                    }
+                    Object.map(this.state.columns,(col,i)=>{
+                        if(!isObj(col) || col.visible === false || this.isSelectableColumn(col,i) || i === this.getIndexColumnName()) return;
+                        if(canExportOnlyTotal && !(i in footers)) return;
+                        cols[i] = col;
+                        headers.push(defaultStr(col.label,col.text));
+                        totalColumns++;
+                    })
+                    data.push(headers);
+                    Object.map(this.state.data,(dat,index)=>{
+                        ///si l'on a a faire à une colonne de type entete
+                        const d = [];
+                        if(dat.isSectionListHeader){
+                            if(!config.displayTotals && !canExportOnlyTotal) return;
+                            const {sectionListHeaderKey:key} = dat;
+                            const val = key === this.emptySectionListHeaderValue ? this.getEmptySectionListHeaderValue() : key;
+                            d.push(val);
+                            if(!canExportOnlyTotal){
+                                for(let i = 1;i<totalColumns;i++){
+                                    d.push(null);
+                                }
+                                data.push(d);
+                            }
+                            const hF = hFooters[key];
+                            if(isObj(hF) && isNonNullString(agFunc)){
+                                const dd = [];
+                                Object.map(cols,(col,i)=>{
+                                       if(i in hF){
+                                            const ff = hF[i];
+                                            dd.push(defaultNumber(ff[agFunc]));
+                                        } else {
+                                            dd.push(null);
+                                        }
+                                });
+                                if(canExportOnlyTotal){
+                                    dd.unshift(val);
+                                    data.push(dd);
+                                } else {
+                                    data.push(d);
+                                    data.push(dd);
+                                }
+                            } else {
+                                data.push(d);
+                            }
+                            
+                        } else if(!canExportOnlyTotal) {
+                            Object.map(cols,(col,i)=>{
+                                const isDateField = defaultStr(col.type).toLowerCase().contains("date");
+                                d.push(this.renderRowCell({
+                                    data : dat,
+                                    rowData : dat,
+                                    rowCounterIndex : index,
+                                    rowIndex : index,
+                                    formatValue : false,
+                                    renderRowCell : false,
+                                    columnField : defaultStr(col.field,i),
+                                    columnDef :{
+                                        ...col,
+                                        ...(isDateField?{format:config.dateFormat}:{})
+                                    }
+                                }));
+                            })   
+                            data.push(d);
+                        }
+                    });
+                }
+                const wb = XLSX.utils.book_new();
+                const ws = XLSX.utils.aoa_to_sheet(data);
+                XLSX.utils.book_append_sheet(wb, ws, config.sheetName);
+                FileSystem.writeExcel({...config,workbook:wb}).then(({path})=>{
+                    if(isNonNullString(path)){
+                        notify.success("Fichier enregistré dans le répertoire {0}".sprintf(path))
+                    }
+                 }).finally(()=>{
+                    Preloader.close();
+                })
+            }
+        })
+   }
+   exportToPdf(){
+
+   }
+   renderExportableMenu(){
+        if(this.isDashboard() || !defaultStr(this.state.displayType).toLowerCase().contains("table")) return null;
+        const items = [];
+        if(this.canExportToExcel()){
+            items.push({
+                text : "Exporter au format excel",
+                icon : "file-excel",
+                onPress: this.exportToExcel.bind(this),
+            })
+        }
+        if(false && this.canExportToPDF()){
+            items.push({
+                text : "Exporter au format pdf",
+                icon : "file-pdf-box",
+                onPress : this.exportToPdf.bind(this)
+            })
+        }
+        if(!items.length) return null;
+        return <Menu
+            items = {items}
+            title ="Export des données du tableau"
+            anchor = {(a)=>{
+                return <Icon title = {"Exporter les données du tableau"} {...a} name={"export"}/>
+            }}
+        />
+   }
    renderDisplayTypes(){
         const m = [];
         let activeType = null,hasFoundChart = false,hasFoundTable = false;
@@ -1839,7 +2029,7 @@ export default class CommonDatagridComponent extends AppComponent {
         const chartType = displayTypes[this.state.displayType];
         if(!isObj(chartType) || !isNonNullString(chartType.type)) return null;
         if(typeof chartType.isRendable =='function' && chartType.isRendable(this.getChartIsRendableArgs()) === false) {
-            console.warn("impossible d'afficher le graphe de type ",chartType.label," car le type de données requis pour le rendu de ce graphe est invalide")
+            //console.warn("impossible d'afficher le graphe de type ",chartType.label," car le type de données requis pour le rendu de ce graphe est invalide")
             return null;
         }
         const isDonut = chartType.isDonut || chartType.isRadial;
@@ -3165,44 +3355,8 @@ export default class CommonDatagridComponent extends AppComponent {
             key = {props.rowKey}
         />
     }
-    renderSelectFieldCell({rowData,columnDef,columnField}){
-        let v1 = rowData[columnField],_render = v1;
-        if(isObjOrArray(columnDef.items)){
-                if(columnDef.multiple){
-                    v1 = Object.toArray(v1);
-                    _render = "";
-                    v1.map((v)=>{
-                        for(let i in columnDef.items){
-                            let it = columnDef.items[i];
-                            if(isObj(it) && defaultVal(it.code,i) == v){
-                                _render+=(_render?arrayValueSeparator:"")+defaultStr(it.label,it.text,v);
-                            } else if(isNonNullString(it) && i == v){
-                                _render+=(_render?arrayValueSeparator:"")+it;
-                            }
-                        }
-                    })
-                    if(!_render){
-                        return v1.join(arrayValueSeparator);
-                    }
-                    return _render;
-                } else {
-                    for(let i in columnDef.items){
-                        let it = columnDef.items[i];
-                        if(isObj(it) && defaultVal(it.code,i) == v1){
-                            return defaultStr(it.label,it.text,v1);
-                        } else if(isNonNullString(it) && i == v1){
-                            return it;
-                        }
-                    }
-                    if(_render === undefined || _render === null) return v1;
-                    if(isArray(_render)){
-                        return _render.join(arrayValueSeparator)
-                    } else if(isObj(_render)){
-                        return "";
-                    }
-            }
-        }
-        return _render 
+    renderSelectFieldCell(args){
+        return this.renderSelectFieldCell(args);
     }
     /*** retourne le rendu d'une cellule de la ligne du tableau 
     @parm, rowData, object, la ligne à afficher le rendu du contenu
@@ -3217,157 +3371,35 @@ export default class CommonDatagridComponent extends AppComponent {
             différent du td d'un table et ne doit pas être un TableColumn de md
     */
     renderRowCell (arg){
-        let {rowData,renderRowCell:customRenderRowCell,isSectionListHeader,rowKey,handleSelectableColumn,rowIndex,index,rowCounterIndex,columnDef,columnField} = arg;
+        let {rowData,rowKey,rowIndex,handleSelectableColumn,formatValue,rowCounterIndex,renderRowCell:customRenderRowCell,isSectionListHeader,columnDef,columnField} = arg;
         const renderText = isSectionListHeader === true || customRenderRowCell === false ? true : false;
-        rowIndex = isDecimal(rowIndex)? rowIndex : isDecimal(index)? index : undefined;
-        rowCounterIndex = isDecimal(rowCounterIndex) ? rowCounterIndex : isDecimal(rowIndex)? rowIndex+1 : defaultDecimal(rowCounterIndex);
-        const abreviate = this.state.abreviateValues;
         if(!isObj(rowData)) return renderText ? null : {render:null,extra:{}};
-         let _render = null;
-         columnDef = defaultObj(columnDef);
-         let _type = defaultStr(columnDef.jsType,columnDef.type).trim().toLowerCase();
-         if(this.isSelectableColumn(columnDef,columnField)){
-            if(renderText) return null;
-             rowKey = rowKey ? rowKey : this.getRowKey(rowData,rowIndex);
-             return {render :handleSelectableColumn === false ? null : this.renderSelectableCheckboxCell({
-                ...arg,
-                rowKey,
-                rowData,
-                checked : this.isRowSelected(rowKey,rowIndex),
-                rowsRefs : this.selectedRowsRefs,
-                onChange : ({checked})=>{
-                    this.handleRowToggle({row:rowData,rowData,rowIndex,rowKey,selected:checked})
-                }
-             }),style:{},extra:{style:{}}};
-         } else if((columnField == this.getIndexColumnName())){
+        rowIndex = isDecimal(rowIndex)? rowIndex : isDecimal(index)? index : undefined;
+    rowCounterIndex = isDecimal(rowCounterIndex) ? rowCounterIndex : isDecimal(rowIndex)? rowIndex+1 : defaultDecimal(rowCounterIndex);
+        if(this.isSelectableColumn(columnDef,columnField)){
             if(renderText) return null;
+            rowKey = rowKey ? rowKey : this.getRowKey(rowData,rowIndex);
+            return {render :handleSelectableColumn === false ? null : this.renderSelectableCheckboxCell({
+            ...arg,
+            rowKey,
+            rowData,
+            checked : this.isRowSelected(rowKey,rowIndex),
+            rowsRefs : this.selectedRowsRefs,
+            onChange : ({checked})=>{
+                this.handleRowToggle({row:rowData,rowData,rowIndex,rowKey,selected:checked})
+            }
+            }),style:{},extra:{style:{}}};
+        } else if((columnField == this.getIndexColumnName())){
+             if(renderText) return null;
             return {render : rowCounterIndex.formatNumber(),style:{},extra:{}};
-         }
-         let renderProps = undefined;
-         if(isObj(columnDef.datagrid)){
-             renderProps = columnDef.datagrid.renderProps;
-         }
-        const style = Object.assign({},StyleSheet.flatten(columnDef.style));
-        if(!renderText && columnDef.visible === false){
-            style.display = "none";
-        }
-        let extra = {style},renderArgs = arg;
-        
-        renderArgs.extra = extra;
-        renderArgs.item = rowData;
-        const defaultValue = renderArgs.defaultValue = renderArgs.value = rowData[columnField];
-        let key = this.getRowKey(rowData,rowIndex)+"-"+columnField,isTagRender = defaultStr(columnDef.table).toLowerCase().contains("tags");
-        if(isObj(columnDef.datagrid) && isFunction(columnDef.datagrid.render)){
-            _render = columnDef.datagrid.render.call(this,renderArgs);
-        } else if(isFunction(columnDef.multiplicater)){
-            _render = defaultDecimal(columnDef.multiplicater({...renderArgs,value:rowData[columnField]}),rowData[columnField]);
-        } else {
-             _render = defaultValue;
-             if(!renderText && defaultStr(columnDef.format).toLowerCase() === 'hashtag'){
-                _render = <Hashtag>{_render}</Hashtag>
-             } else if(typeof columnDef.render === "function"){
-                 _render = columnDef.render.call(this,renderArgs);
-             } else if(arrayValueExists( _type,["date","datetime","time"])){
-                 let _dd =DateLib.parse(rowData[columnField],_type === 'time'?DateLib.isoTimeFormat:DateLib.SQLDateFormat);
-                 if(DateLib.isDateObj(_dd)){
-                     _render = DateLib.format(_dd,defaultStr(columnDef.format,(_type === 'time'?DateLib.defaultTimeFormat:DateLib.masks.defaultDate)));
-                 }
-                 if(!_render) _render = rowData[columnField]
-             } else if(arrayValueExists(_type,['switch','checkbox'])){
-                 let {checkedLabel,checkedTooltip,uncheckedTooltip,checkedValue,uncheckedLabel,uncheckedValue} = columnDef;
-                 checkedLabel = defaultStr(checkedLabel,'Oui')
-                 uncheckedLabel = defaultStr(uncheckedLabel,'Non')
-                 checkedValue = defaultVal(checkedValue,1); uncheckedValue = defaultVal(uncheckedValue,0)
-                 let val = defaultVal(rowData[columnField],columnDef.defaultValue,columnDef.value)
-                 if(val === checkedValue){
-                     _render = checkedLabel;
-                 } else _render = uncheckedLabel;
-             }
-             else if(!renderText && (_type =='select_country' || _type =='selectcountry')){
-                _render = <Flag withCode {...columnDef} length={undefined} width={undefined} height={undefined} code={defaultValue}/>
-             }
-             ///le lien vers le table data se fait via la colonne ayant la propriété foreignKeyTable de type chaine de caractère non nulle
-             else if(!renderText && (isNonNullString(columnDef.foreignKeyTable) || columnDef.primaryKey === true || arrayValueExists(['id','piece'],_type))){
-                const id = rowData[columnField]?.toString();
-                if(isNonNullString(id)){
-                    _render = <TableLink 
-                        id = {id}
-                        foreignKeyTable = {defaultStr(columnDef.foreignKeyTable,columnDef.table,columnDef.tableName)}
-                        foreignKeyColumn = {defaultStr(columnDef.foreignKeyColumn,columnDef.field)}
-                        {...columnDef}
-                        data = {rowData}
-                        columnField = {columnField}
-                    >
-                        {this.renderSelectFieldCell({columnDef,columnField,rowData})}
-                    </TableLink>             
-                }
-             } else if((_type.contains('select'))){
-                 _render= this.renderSelectFieldCell({columnDef,columnField,rowData,data:rowData})
-             } else if(_type == 'image'){
-                if(renderText) return null;
-                 columnDef = defaultObj(columnDef)
-                 columnDef = {...columnDef,...defaultObj(columnDef.datagrid)};
-                 columnDef.size = defaultDecimal(columnDef.size,50);
-                 columnDef.editable = defaultBool(columnDef.editable,false)
-                 columnDef.rounded = defaultBool(columnDef.rounded,columnDef.round,true);
-                 columnDef.src = rowData[columnField];
-                 _render = <Image {...columnDef}/>
-             } 
-             if(_render === undefined || _render ===null){
-                 _render = rowData[columnField];
-             }
-             if(columnDef.type =="password" && isNonNullString(_render)){
-                 let l = Math.max(_render.length,20);
-                 _render = "";
-                 for(let i=0;i<l;i++){
-                    _render+=".";
-                 }
-             }
-             if(isArray(_render)){
-                if(isTagRender){
-                    let nV = "";
-                    _render.map((v1)=>{
-                        nV +=(nV?arrayValueSeparator:"")+i18n.lang(v1,v1);
-                    })
-                    _render = nV;
-                } else {
-                    _render = _render.join(arrayValueSeparator);
-                }
-             }
-         } 
-         if(_render ===undefined){
-             _render = rowData[columnField];
-         }
-         if(isArray(_render)){
-             _render = _render.join(arrayValueSeparator);
-         } else if(!React.isValidElement(_render) && isPlainObj(_render)){
-             let __r = "";
-             for(let i in _render){
-                 __r+= (isObj(_render[i]) && _render[i]? (_render[i].code? _render[i].code:defaultStr(_render[i].label)):(_render[i]))
-             }
-             _render = __r;
-         }
-         if(isFunction(renderProps)){
-             renderProps = renderProps.call(this,renderArgs);
-         }
-         _render = this.formatValue(_render,columnDef.format);
-         if(!renderText && _render && isObj(renderProps)){
-             let Component = defaultVal(renderProps.Component,Label);
-             delete renderProps.Component;
-             _render = <Component {...renderProps}>{_render}</Component>
-         }
-         if(typeof _render =='boolean'){
-            _render = _render ? "Oui" : "Non";
-         }
-         if(renderText){
-            return React.getTextContent(_render);
-         }
-         if((typeof _render ==='string' || typeof _render =='number')){
-             _render = <Label selectable>{_render}</Label>
-         }
-
-         _render = React.isValidElement(_render)|| Array.isArray(_render)?_render:null;
-         return {render:_render,style,extra,key};
+        }
+        return renderRowCell({
+            ...arg,
+            formatValue,
+            context : this,
+            getRowKey : this.getRowKey.bind(this),
+            abreviateValues : this.state.abreviateValues,
+        })
     }
     static LinesProgressBar (props){
         return <DatagridContentLoader {...props}/>

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

@@ -4,4 +4,5 @@ export {default as TableData} from "./TableData";
 
 export {default  as factory} from "./factory";
 
-export {default as session} from "./session";
+export {default as session} from "./session";
+export * from "./utils";

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

@@ -0,0 +1,194 @@
+// Copyright 2023 @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.
+import {isNonNullString,isArray,isObjOrArray,defaultStr,defaultArray,defaultObj,isObj} from "$utils";
+import Hashtag from "$ecomponents/Hashtag";
+import DateLib from "$date";
+import Image from "$ecomponents/Image";
+import React from "$react";
+import Label from "$ecomponents/Label";
+import TableLink from "$TableLink";
+import {Flag} from "$ecomponents/Countries";
+import { StyleSheet } from "react-native";
+
+export const renderRowCell = (arg)=>{
+    let {rowData,getRowKey,context,formatValue:customFormatValue,renderRowCell:customRenderRowCell,abreviateValues,isSectionListHeader,rowIndex,index,rowCounterIndex,columnDef,columnField} = arg;
+    context = context || this;
+    const canFormatValue = customFormatValue !== false ? true : false;
+    const renderText = isSectionListHeader === true || customRenderRowCell === false ? true : false;
+    rowIndex = isDecimal(rowIndex)? rowIndex : isDecimal(index)? index : undefined;
+    rowCounterIndex = isDecimal(rowCounterIndex) ? rowCounterIndex : isDecimal(rowIndex)? rowIndex+1 : defaultDecimal(rowCounterIndex);
+    if(!isObj(rowData)) return renderText ? null : {render:null,extra:{}};
+    let _render = null;
+    getRowKey = typeof getRowKey =='function'? getRowKey : React.getKey;
+    columnDef = defaultObj(columnDef);
+    let _type = defaultStr(columnDef.jsType,columnDef.type).trim().toLowerCase().replaceAll("_","");
+    let renderProps = undefined;
+    if(isObj(columnDef.datagrid)){
+        renderProps = columnDef.datagrid.renderProps;
+    }
+    const style = Object.assign({},StyleSheet.flatten(columnDef.style));
+    if(!renderText && columnDef.visible === false){
+        style.display = "none";
+    }
+    const extra = {style},renderArgs = arg;
+    renderArgs.extra = extra;
+    renderArgs.item = rowData;
+    const defaultValue = renderArgs.defaultValue = renderArgs.value = rowData[columnField];
+    let key = getRowKey.call(context,rowData,rowIndex)+"-"+columnField;
+    if(isObj(columnDef.datagrid) && isFunction(columnDef.datagrid.render)){
+        _render = columnDef.datagrid.render.call(context,renderArgs);
+    } else if(isFunction(columnDef.multiplicater)){
+        _render = defaultDecimal(columnDef.multiplicater({...renderArgs,value:rowData[columnField]}),rowData[columnField]);
+    } else {
+        _render = defaultValue;
+        if(!renderText && defaultStr(columnDef.format).toLowerCase() === 'hashtag'){
+        _render = <Hashtag>{_render}</Hashtag>
+        } else if(typeof columnDef.render === "function"){
+            _render = columnDef.render.call(context,renderArgs);
+        } else if(arrayValueExists( _type,["date","datetime","time"])){
+            let _dd =DateLib.parse(rowData[columnField],_type === 'time'?DateLib.isoTimeFormat:DateLib.SQLDateFormat);
+            if(DateLib.isDateObj(_dd)){
+                _render = DateLib.format(_dd,defaultStr(columnDef.format,(_type === 'time'?DateLib.defaultTimeFormat:DateLib.masks.defaultDate)));
+            }
+            if(!_render) _render = rowData[columnField]
+        } else if(arrayValueExists(_type,['switch','checkbox'])){
+            let {checkedLabel,checkedValue,uncheckedLabel,uncheckedValue} = columnDef;
+            checkedLabel = defaultStr(checkedLabel,'Oui')
+            uncheckedLabel = defaultStr(uncheckedLabel,'Non')
+            checkedValue = defaultVal(checkedValue,1); uncheckedValue = defaultVal(uncheckedValue,0)
+            let val = defaultVal(rowData[columnField],columnDef.defaultValue,columnDef.value)
+            if(val === checkedValue){
+                _render = checkedLabel;
+            } else _render = uncheckedLabel;
+        }
+        else if(!renderText && (_type =='selectcountry')){
+            _render = <Flag withCode {...columnDef} length={undefined} width={undefined} height={undefined} code={defaultValue}/>
+        }
+        ///le lien vers le table data se fait via la colonne ayant la propriété foreignKeyTable de type chaine de caractère non nulle
+        else if(!renderText && (isNonNullString(columnDef.foreignKeyTable) || columnDef.primaryKey === true || arrayValueExists(['id','piece'],_type))){
+            const id = rowData[columnField]?.toString();
+            if(isNonNullString(id)){
+                _render = <TableLink 
+                    id = {id}
+                    foreignKeyTable = {defaultStr(columnDef.foreignKeyTable,columnDef.table,columnDef.tableName)}
+                    foreignKeyColumn = {defaultStr(columnDef.foreignKeyColumn,columnDef.field)}
+                    {...columnDef}
+                    data = {rowData}
+                    columnField = {columnField}
+                >
+                    {renderSelectFieldCell({columnDef,columnField,rowData})}
+                </TableLink>             
+            }
+        } else if((_type.contains('select'))){
+            _render= renderSelectFieldCell({columnDef,columnField,rowData,data:rowData})
+        } else if(_type == 'image'){
+            if(renderText) return null;
+            columnDef = defaultObj(columnDef)
+            columnDef = {...columnDef,...defaultObj(columnDef.datagrid)};
+            columnDef.size = defaultDecimal(columnDef.size,50);
+            columnDef.editable = defaultBool(columnDef.editable,false)
+            columnDef.rounded = defaultBool(columnDef.rounded,columnDef.round,true);
+            columnDef.src = rowData[columnField];
+            _render = <Image {...columnDef}/>
+        } 
+        if(_render === undefined || _render ===null){
+            _render = rowData[columnField];
+        }
+        if(columnDef.type =="password" && isNonNullString(_render)){
+            let l = Math.max(_render.length,20);
+            _render = "";
+            for(let i=0;i<l;i++){
+                _render+=".";
+            }
+        }
+        if(isArray(_render)){
+            _render = _render.join(arrayValueSeparator);
+        }
+    } 
+    if(_render ===undefined){
+        _render = rowData[columnField];
+    }
+    if(isArray(_render)){
+        _render = _render.join(arrayValueSeparator);
+    } else if(!React.isValidElement(_render) && isPlainObj(_render)){
+        let __r = "";
+        for(let i in _render){
+            __r+= (isObj(_render[i]) && _render[i]? (_render[i].code? _render[i].code:defaultStr(_render[i].label)):(_render[i]))
+        }
+        _render = __r;
+    }
+    if(isFunction(renderProps)){
+        renderProps = renderProps.call(context,renderArgs);
+    }
+    if(canFormatValue){
+        _render = formatValue(_render,columnDef.format,abreviateValues);
+    }
+    if(!renderText && _render && isObj(renderProps)){
+        let Component = defaultVal(renderProps.Component,Label);
+        delete renderProps.Component;
+        _render = <Component {...renderProps}>{_render}</Component>
+    }
+    if(renderText){
+        if(typeof _render =='number' || typeof _render =='boolean' || typeof _render =="string"){
+            return _render;
+        }
+        return React.getTextContent(_render);
+    }
+    if((typeof _render ==='string' || typeof _render =='number')){
+        _render = <Label selectable>{_render}</Label>
+    }
+    _render = React.isValidElement(_render)|| Array.isArray(_render)?_render:null;
+    return {render:_render,style,extra,key};
+}
+
+export const  renderSelectFieldCell= ({rowData,columnDef,columnField})=>{
+    let v1 = rowData[columnField],_render = v1;
+    if(isObjOrArray(columnDef.items)){
+            if(columnDef.multiple){
+                v1 = Object.toArray(v1);
+                _render = "";
+                v1.map((v)=>{
+                    for(let i in columnDef.items){
+                        let it = columnDef.items[i];
+                        if(isObj(it) && defaultVal(it.code,i) == v){
+                            _render+=(_render?arrayValueSeparator:"")+defaultStr(it.label,it.text,v);
+                        } else if(isNonNullString(it) && i == v){
+                            _render+=(_render?arrayValueSeparator:"")+it;
+                        }
+                    }
+                })
+                if(!_render){
+                    return v1.join(arrayValueSeparator);
+                }
+                return _render;
+            } else {
+                for(let i in columnDef.items){
+                    let it = columnDef.items[i];
+                    if(isObj(it) && defaultVal(it.code,i) == v1){
+                        return defaultStr(it.label,it.text,v1);
+                    } else if(isNonNullString(it) && i == v1){
+                        return it;
+                    }
+                }
+                if(_render === undefined || _render === null) return v1;
+                if(isArray(_render)){
+                    return _render.join(arrayValueSeparator)
+                } else if(isObj(_render)){
+                    return "";
+                }
+        }
+    }
+    return _render 
+}
+
+export const formatValue = (value,format,abreviateValues)=>{
+    if(typeof value !='number') return value;
+    if(typeof value =='boolean'){
+        return value ? "Oui" : "Non";
+    }
+    if(format && typeof format =='string' && format.toLowerCase() =='money'){
+        return abreviateValues? value.abreviate2FormatMoney() : value.formatMoney();
+    }
+    return abreviateValues ? value.abreviate() : value.formatNumber();
+}

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

@@ -295,6 +295,7 @@ const DatagridFactory = (Factory)=>{
                         {this.renderSectionListMenu()}
                         {this.renderDisplayTypes()}
                         {this.renderAggregatorFunctionsMenu()}
+                        {this.renderExportableMenu()}
                         <View pointerEvents={pointerEvents} testID={testID+"_HeaderPagination"} style = {styles.paginationItem}>
                             <BottomSheetMenu
                                 testID={testID+"_HeaderMenus"}

package/src/components/Dialog/Provider.js

@@ -55,7 +55,7 @@ const Provider = React.forwardRef((props,innerRef)=>{
         },
         close : (props)=>{
             if(!state.visible) return;
-           return setState({...state,...props,visible:false});
+           return setState({...state,...defaultObj(props),visible:false});
         },
     };
     React.setRef(ref,context);        

package/src/components/Dropdown/index.js

@@ -996,7 +996,7 @@ class DropdownComponent extends AppComponent {
                     contentStyle = {[{paddingVertical:0},restProps.contentStyle]}
                     anchor={anchor}
                     {...dialogProps}
-                    title = {defaultStr(dialogProps.title,label,text)+"[ "+self.state.data.length.formatNumber()+" ]"}
+                    title = {defaultStr(dialogProps.title,label,text)+" [ "+self.state.data.length.formatNumber()+" ]"}
                     subtitle = {selectedText}
                     style = {[restProps.style]}
                     contentProps = {{style:{flex:1}}}

package/src/components/Filter/index.js

@@ -513,6 +513,10 @@ export default class Filter extends AppComponent {
      isLoading = !!isLoading;
      rest.pointerEvents = !isLoading ? "auto" : "none";
      if(withLabel ===false){
+        if(type.contains("select")){
+          rest.dialogProps = defaultObj(rest.dialogProps);
+          rest.dialogProps.title = defaultStr(rest.dialogProps.title,label);
+        }
         delete rest.label;
         delete rest.text;
         delete rest.title;

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

@@ -2,7 +2,6 @@ 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) {
@@ -110,16 +109,11 @@ export default class FormSelectField extends Field{
     _render (componentProps){
         let {
             getInstance,
-            _defaultValue,
             ...props
         } = componentProps;
         delete props.format;
         delete props.import;
         delete props.exports;
-        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}
             ref = {(el)=>{

package/src/components/Form/Fields/SelectTableData/Component.js

@@ -195,7 +195,13 @@ const TableDataSelectField = React.forwardRef((_props,ref)=>{
         return (itemLabel !== itemCode ? ((isNonNullString(itemCode)?("["+itemCode+"] "):"")+itemLabel):itemLabel);
     }
     const dialogProps = defaultObj(props.dialogProps);
-    dialogProps.title = defaultStr(dialogProps.title,fKeyTable.text,fKeyTable.label)
+    let ttitle = defaultStr(dialogProps.title);
+    if(!ttitle){
+        const txt = defaultStr(props.label,props.text);
+        const tt = defaultStr(fKeyTable.text,fKeyTable.label);
+        ttitle = txt && tt ? "{0} [1]".sprintf(txt,tt) : tt || txt;
+    }
+    dialogProps.title = ttitle;
     return <Dropdown
         {...props}
         isFilter = {isFilter}

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

@@ -26,7 +26,7 @@ const FormDataDialogProvider = React.forwardRef((props,innerRef)=>{
             if(formRef.current && formRef.current.formDataContext && formRef.current.formDataContext.getData){
                 sData.data = formRef.current.formDataContext.getData();
             }
-            return setState({...state,...sData,onDismiss:undefined,...defaultObj(props),visible:true})
+            return setState({...sData,onDismiss:undefined,...defaultObj(props),visible:true})
         },
         close : (props)=>{
             if(!state.visible) return;

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

@@ -71,20 +71,24 @@ export const getFilterComponentProps = (_props)=>{
     type = defaultStr(jsType,type,'text').toLowerCase().replaceAll("_","").replaceAll("-","").trim();
     const sanitizedType = type.replaceAll("_","").toLowerCase().trim();
     props = defaultObj(props);
+    props.label = defaultStr(label,text);
     if(type.startsWith("select")){
         props.inputProps = Object.assign({},props.inputProps);
         props.inputProps.placeholder = defaultStr(props.inputProps.placeholder,i18n.lang("search.."))
-        props.label = label;
         component = Fields.SelectField;
         if(type =='select_country' || type =='selectcountry'){
             component = Fields.SelectCountry;
         } else if(type =='select_tabledata' || type =='selecttabledata'){
             component = Fields.SelectTableData;
+        } else if(React.isComponent(componentTypes[type])){
+            component = componentTypes[type];
+        } else if(React.isComponent(componentTypes[sanitizedType])){
+            component = componentTypes[sanitizedType];
         }
         type = "select";
     } else if(type == 'switch' || type =='radio' || type ==='checkbox') {
         type = 'select';
-        let {checkedLabel,checkedTooltip,uncheckedTooltip,checkedValue,uncheckedLabel,uncheckedValue,label,text,...pR} = props;
+        let {checkedLabel,checkedTooltip,uncheckedTooltip,checkedValue,uncheckedLabel,uncheckedValue,...pR} = props;
         checkedLabel = defaultVal(checkedLabel,'Non')
         uncheckedLabel = defaultVal(uncheckedLabel,'Oui')
         checkedValue = defaultVal(checkedValue,1); uncheckedValue = defaultVal(uncheckedValue,0)
@@ -101,7 +105,6 @@ export const getFilterComponentProps = (_props)=>{
         component = componentTypes[type];
     } else if(isNonNullString(props.foreignKeyColumn) && isNonNullString(props.foreignKeyTable)) {
         component = Fields.SelectTableData;
-        props.multiple = true;
         type = "select";
     }else {
         if(React.isComponent(componentTypes[sanitizedType])){
@@ -109,8 +112,7 @@ export const getFilterComponentProps = (_props)=>{
         } 
         delete props.dbName;
         delete props.tableName;
-        props.label = label; 
-        delete props.fieldName;
+       delete props.fieldName;
     }
     type = type || "text"
     if(type =='select'){