@fto-consult/expo-ui 2.35.2 → 2.36.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.35.2",
+  "version": "2.36.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^2.1.2",
+    "@fto-consult/common": "^2.1.3",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

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

@@ -86,7 +86,8 @@ const DatagridFactory = (Factory)=>{
         }
         getItemCallArgs({item,index}){
             const rowIndexCount = index+1;
-            return {...this.getActionsArgs(),row:item,items:this.state.data,item,rowData:item,index,rowIndex:index,rowCounterIndex:rowIndexCount,rowIndexCount};
+            const formatValue = this.formatValue.bind(this);
+            return {...this.getActionsArgs(),valueFormatter:formatValue,formatValue,abreviateValues:this.state.abreviateValues,row:item,items:this.state.data,item,rowData:item,index,rowIndex:index,rowCounterIndex:rowIndexCount,rowIndexCount};
         }
         getRenderingItemProps ({item,rowKey,numColumns,index}){
             const rKey = rowKey;
@@ -575,6 +576,7 @@ const DatagridFactory = (Factory)=>{
                                                     key = {field}
                                                     testID={testID+"_FooterItem_"+field}
                                                     {...footer}
+                                                    abreviate = {this.state.abreviateValues}
                                                     aggregatorFunction = {this.getActiveAggregatorFunction().code}
                                                     aggregatorFunctions = {this.aggregatorFunctions}
                                                     anchorProps = {{style:[theme.styles.ph1,theme.styles.mh05]}}

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

@@ -43,6 +43,8 @@ import notify from "$cnotify";
 import FileSystem from "$file-system";
 import sprintf from "$cutils/sprintf";
 
+export const TIMEOUT = 200;
+
 export const donutChart = {
     isChart : true,
     code : 'donutChart',
@@ -266,6 +268,7 @@ export default class CommonDatagridComponent extends AppComponent {
             chartRef : {value : {current:null}},
             chartSeriesNamesColumnsMapping : {value : {}},//le mappage entre les index des series et les colonnes coorespondantes
         }) 
+        this.state.abreviateValues = "abreviateValues" in this.props? !!this.props.abreviateValues : !!this.getSessionData("abreviateValues");
         const sessionAggregator = defaultStr(this.getSessionData("aggregatorFunction")).trim();
         const aggregatorProps = defaultStr(this.props.aggregatorFunction).trim();
         let aggregatorFunction = null;
@@ -1087,7 +1090,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 this.isUpdating = false;
                 this.setSessionData({showFilters});
             })
-        },100);
+        },TIMEOUT);
    }
    showFilters(){
        return this.toggleFilters(true);
@@ -1120,7 +1123,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 this.isUpdating = false;
                 this.setSessionData({showFooters:showOrHide})
             })
-        },0)
+        },TIMEOUT)
     }
     showFooters(){
         return this.toggleFooters(true);
@@ -1134,11 +1137,16 @@ export default class CommonDatagridComponent extends AppComponent {
     
    
    toggleFixedTableState(){
-       const fixedTable = !this.state.fixedTable;
-       this.setState({fixedTable},()=>{
-         this.updateLayout();
-         this.setSessionData("fixedTable",fixedTable);
-       })
+       setTimeout(()=>{
+            this.setIsLoading(true,()=>{
+                const fixedTable = !this.state.fixedTable;
+                this.setState({fixedTable},()=>{
+                    this.updateLayout();
+                    this.setSessionData("fixedTable",fixedTable);
+                    this.setIsLoading(false,false);
+                })
+            },true)
+       },TIMEOUT)
    }
    getSessionNameKey (){
         return defaultStr(this.props.table,this.props.tableName,this.props.sessionName);
@@ -1146,32 +1154,39 @@ export default class CommonDatagridComponent extends AppComponent {
    /*** affiche ou masque une colonne filtrée */
    toggleFilterColumnVisibility(field){
         if(!isNonNullString(field)) return;
-        let filteredColumns = {...this.state.filteredColumns};
-        filteredColumns[field] = defaultBool(filteredColumns[field],false) == false ? true : false;
-        this.prepareColumns({filteredColumns});
-        this.setState({filteredColumns},()=>{
-            this.setSessionData("filteredColumns"+this.getSessionNameKey(),filteredColumns);
-            if(!filteredColumns[field]){
-                this.filters[field] = defaultObj(this.filters[field]);
-                this.filters[field].value = this.filters[field].defaultValue = undefined;
-                this.doFilter({value:undefined,field})
-            }
-        });
+        setTimeout(()=>{
+            this.setIsLoading(true,()=>{
+                let filteredColumns = {...this.state.filteredColumns};
+                filteredColumns[field] = defaultBool(filteredColumns[field],false) == false ? true : false;
+                this.prepareColumns({filteredColumns});
+                this.setState({filteredColumns},()=>{
+                    this.setSessionData("filteredColumns"+this.getSessionNameKey(),filteredColumns);
+                    if(!filteredColumns[field]){
+                        this.filters[field] = defaultObj(this.filters[field]);
+                        this.filters[field].value = this.filters[field].defaultValue = undefined;
+                        this.doFilter({value:undefined,field})
+                    }
+                    this.setIsLoading(false,false);
+                });
+            },true)
+        },TIMEOUT)
     }
    /*** affiche ou masque une colonne */
    toggleColumnVisibility(field,removeFocus){
         if(!isNonNullString(field)) return;
-        let columns = {...this.state.columns};
-        columns[field].visible = !columns[field].visible;
-        const footers = this.getFootersFields();
-        if(isObj(footers[field])){
-            footers[field].visible = columns[field].visible;
-        }
-        this.setIsLoading(true,()=>{
-            this.prepareColumns({columns});
-            this.setState({columns});
-            this.setIsLoading(false,false);
-        })
+        setTimeout(()=>{
+            let columns = {...this.state.columns};
+            columns[field].visible = !columns[field].visible;
+            const footers = this.getFootersFields();
+            if(isObj(footers[field])){
+                footers[field].visible = columns[field].visible;
+            }
+            this.setIsLoading(true,()=>{
+                this.prepareColumns({columns});
+                this.setState({columns});
+                this.setIsLoading(false,false);
+            })
+        },TIMEOUT)
    }
    /****le nombre maximum de courbes supportées */
    getMaxSeriesSize(){
@@ -1263,15 +1278,17 @@ export default class CommonDatagridComponent extends AppComponent {
         } else {
             sectionListColumns[columnName] = {field:columnName};
         }
-        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));
+        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);
+            },true);
+        },TIMEOUT);
    }
    removeAllColumnsInSectionList(){
         const {sectionListColumns} = this.prepareColumns({sectionListColumns:{}});
@@ -1340,6 +1357,19 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         return this.aggregatorFunctions[Object.keys(this.aggregatorFunctions)[0]];
    }
+   toggleAbreviateValues(){
+        setTimeout(()=>{
+            this.setIsLoading(true,()=>{
+                this.prepareData({data:this.INITIAL_STATE.data},(state)=>{
+                    const abreviateValues = !this.state.abreviateValues;
+                    this.setState({abreviateValues,...state},()=>{
+                        this.setIsLoading(false,false);
+                        this.setSessionData("abreviateValues",abreviateValues);
+                    })
+                });
+            },true);
+        },TIMEOUT);
+   }
    /**** récupère l'item de menu permettant lié à la sélection de la fonction d'aggggrégation */
    getAggregatorFunctionsMenuItems(withDivider){
         if(!this.hasFootersFields()) return [];
@@ -1355,6 +1385,8 @@ export default class CommonDatagridComponent extends AppComponent {
                 }
             })
         });
+        m.push({divider:true});
+        m.push({text:"Abréger les valeurs numériques",textBold:!!this.state.abreviateValues,icon:this.state.abreviateValues?'check':null,onPress:this.toggleAbreviateValues.bind(this)})
         if(m.length){
             m.unshift({
                 text : "Fonctions d'aggrégation",
@@ -1373,15 +1405,24 @@ export default class CommonDatagridComponent extends AppComponent {
    }
    toggleActiveAggregatorFunction(ag){
         if(!isValidAggregator(ag) || ag.code == this.state.aggregatorFunction) return null;
-        this.setIsLoading(true,()=>{
-            this.prepareData({data:this.INITIAL_STATE.data,aggregatorFunction:ag.code},(state)=>{
-                this.setState(state,()=>{
-                    this.setSessionData("aggregatorFunction",ag.code);
-                    this.setIsLoading(false,false);
+        setTimeout(()=>{
+            this.setIsLoading(true,()=>{
+                this.prepareData({data:this.INITIAL_STATE.data,aggregatorFunction:ag.code},(state)=>{
+                    this.setState(state,()=>{
+                        this.setSessionData("aggregatorFunction",ag.code);
+                        this.setIsLoading(false,false);
+                    })
                 })
-            })
-        },true);
+            },true);
+        },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();
+    }
    renderAggregatorFunctionsMenu(){
         const m = this.getAggregatorFunctionsMenuItems(false,false);
         if(!m.length) return null;
@@ -1894,7 +1935,7 @@ export default class CommonDatagridComponent extends AppComponent {
             chartProps[settingKey][key] = config[key];
         });
         const mappedColumns = {};
-        const abreviateValues = defaultVal(config.abreviateValues,true);
+        const abreviateValues = defaultVal(config.abreviateValues,true) || this.state.abreviateValues;
         const dataLabelFormatter = typeof chartProps.dataLabels?.formatter =="function"? chartProps.dataLabels.formatter : undefined;
         const chartOptions = {
             ...chartProps,
@@ -1906,18 +1947,11 @@ export default class CommonDatagridComponent extends AppComponent {
                     if((column) && column.field){
                         mappedColumns[seriesIndex] = column;
                     }
-                    /*if(value>=660 && value < 661){
-                        console.log(value," will format ",column,seriesIndex,serieName)
-                    }*/
                     const columnField = defaultStr(column.field, isDonut? config.y : undefined);
                     if(dataLabelFormatter){
                         return dataLabelFormatter({value,column,columnDef:column,columnField,serie,serieName,seriesIndex})
                     }
-                    if(typeof value !=='number') return value;
-                    if(defaultStr(column.format).toLowerCase() ==='money'){
-                        return abreviateValues ? value.abreviate2FormatMoney() : value.formatMoney();
-                    }
-                    return abreviateValues ? value.abreviate() : value.formatNumber();
+                    return this.formatValue(value,column.format);
                 }
             }),
             title :extendObj(true,{}, {
@@ -1976,11 +2010,8 @@ export default class CommonDatagridComponent extends AppComponent {
             }
         }
         yLabels.formatter = (value)=>{
-            if(typeof value !='number') return value;
-            if((yLabelFormat =='money' || (isDonut && yAxisColumn.format =="money")) || (yLabelsColumn && yLabelsColumn.format =='money')){
-                return abreviateValues ? value.abreviate2FormatMoney() : value.formatMoney();
-            }
-            return abreviateValues? value.abreviate() : value.formatNumber();
+            const format = (yLabelFormat =='money' || (isDonut && yAxisColumn.format =="money")) || (yLabelsColumn && yLabelsColumn.format =='money') ? 'money' : '';
+            return this.formatValue(value,format);
         }
         chartOptions.chart.id = this.chartIdPrefix+"-"+defaultStr(chartType.key,"no-key");
         if(!chartType.isDonut){
@@ -2563,6 +2594,7 @@ export default class CommonDatagridComponent extends AppComponent {
                                 key = {key2}
                                 testID={testID+"_FooterItem_"+key2}
                                 {...footer}
+                                abreviate = {this.state.abreviateValues}
                                 aggregatorFunction = {this.getActiveAggregatorFunction().code}
                                 aggregatorFunctions = {this.aggregatorFunctions}
                                 displayLabel = {false}
@@ -2573,7 +2605,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 });
             }
         }
-        return <View testID={testID+"_ContentContainer"}  style={[theme.styles.w100,isA && this.state.displayOnlySectionListHeaders && {borderTopColor:theme.colors.divider,borderTopWidth:1},isA ? [theme.styles.ph2,theme.styles.pt1] : theme.styles.pt1,theme.styles.justifyContentCenter,theme.styles.alignItemsCenter,theme.styles.pb1,!cells && theme.styles.ml1,theme.styles.mr1,cStyle]}>
+        return <View testID={testID+"_ContentContainer"}  style={[theme.styles.w100,isA && this.state.displayOnlySectionListHeaders && {borderTopColor:theme.colors.divider,borderTopWidth:1},isA ? [theme.styles.ph2,theme.styles.pt1] : [theme.styles.pt1,theme.styles.ph1],theme.styles.justifyContentCenter,theme.styles.alignItemsCenter,theme.styles.pb1,!cells && theme.styles.ml1,theme.styles.mr1,cStyle]}>
             <Label testID={testID+"_Label"} splitText numberOfLines={3} textBold style={[theme.styles.w100,{color:theme.colors.primaryOnSurface,fontSize:isA?15 :16},lStyle]}>{label}</Label>
             {cells ? <View testID={testID+"_TableRow"} style = {[theme.styles.w100,theme.styles.row,isA && theme.styles.pt1,theme.styles.alignItemsFlexStart]}
             >{cells}</View> : null}
@@ -3189,6 +3221,7 @@ export default class CommonDatagridComponent extends AppComponent {
         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);
@@ -3317,14 +3350,7 @@ export default class CommonDatagridComponent extends AppComponent {
          if(isFunction(renderProps)){
              renderProps = renderProps.call(this,renderArgs);
          }
-         if(isDecimal(_render)){
-             let fmat = defaultStr(columnDef.format).toLowerCase();
-            if(fmat == "money"){
-                _render = _render.formatMoney();
-            } else //if(fmat =="number") {
-                _render = _render.formatNumber();
-            //}
-         }
+         _render = this.formatValue(_render,columnDef.format);
          if(!renderText && _render && isObj(renderProps)){
              let Component = defaultVal(renderProps.Component,Label);
              delete renderProps.Component;
@@ -3572,6 +3598,7 @@ CommonDatagridComponent.propTypes = {
     /*** permet de faire une mutation sur les options de la recherche, immédiatement avant le lancement de la recherche */
     fetchOptionsMutator : PropTypes.func,
     useLinesProgressBar  : PropTypes.bool,//si le progress bar lignes horizontale seront utilisés
+    abreviateValues : PropTypes.bool, //si les valeurs numériques seront abregées
 }
 
 const styles = StyleSheet.create({

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

@@ -79,11 +79,17 @@ const loopForAggregator = (aggregatorFunctions,result)=>{
         result[aggregatorObj.code] = aggregatorObj;
     });
 }
-const formatValue = ({value,format,aggregatorFunction})=>{
-    return (format === 'money' && aggregatorFunction != 'count')? value.formatMoney():value.formatNumber();
+const formatValue = ({value,format,abreviate,aggregatorFunction})=>{
+    if((format === 'money' && aggregatorFunction != 'count')){
+        if(abreviate){
+            return value.abreviate2FormatMoney();
+        }
+        return value.formatMoney();
+    }
+    return abreviate? value.abreviate():value.formatNumber();
 }
 export default function DGGridFooterValue (props){
-    let {label,text,displayLabel,withLabel,style,aggregatorFunctions,aggregatorFunction,format,testID,anchorProps} = props;
+    let {label,text,displayLabel,withLabel,abreviate,style,aggregatorFunctions,aggregatorFunction,format,testID,anchorProps} = props;
     aggregatorFunctions = defaultObj(aggregatorFunctions);
     anchorProps = defaultObj(anchorProps);
     testID = defaultStr(testID,"RN_DatagridFooterComponent");
@@ -104,7 +110,7 @@ export default function DGGridFooterValue (props){
     for(let aggregatorFunction in aggregatorFunctions){
         let val = defaultDecimal(props[aggregatorFunction]);
         if(isDecimal(val)){
-            let fText = formatValue({value:val,format,aggregatorFunction});
+            let fText = formatValue({value:val,format,abreviate,aggregatorFunction});
             const mText = defaultStr(aggregatorFunctions[aggregatorFunction].label,aggregatorFunctions[aggregatorFunction].code,aggregatorFunction);
             title +=(title? ", ":"")+mText +" : "+fText
             menuItems.push({
@@ -132,7 +138,7 @@ export default function DGGridFooterValue (props){
                     </>
                 : null}
                 <Label testID={testID+"_LabelContent"} primary style={[styles.value]}>
-                    {formatValue({value:defaultDecimal(props[active]),aggregatorFunction:active,format})}
+                    {formatValue({value:defaultDecimal(props[active]),abreviate,aggregatorFunction:active,format})}
                 </Label>
             </Pressable>
         }}

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

@@ -57,6 +57,7 @@ const DatagridFactory = (Factory)=>{
             if(isObj(footerFields[columnField])){
                 return <Footer
                     {...defaultObj(footersValues[columnField])}
+                    abreviate = {this.state.abreviateValues}
                     displayLabel = {false}
                     style = {[style]}
                     aggregatorFunction = {this.getActiveAggregatorFunction().code}   

package/src/components/Drawer/DrawerItems/index.js

@@ -1,5 +1,5 @@
 import React from '$react';
-import {isObj} from "$utils";
+import {isObj,isNonNullString} from "$utils";
 import ExpandableItem from './ExpandableItem';
 import DrawerItem from './DrawerItem';
 import DrawerSection from "./DrawerSection"
@@ -11,6 +11,7 @@ export * from "./utils";
 
 const DrawerItemsComponent = React.forwardRef((props,ref)=> {
   let {items:_items,minimized} = props;
+  const hasAuth = typeof window.Auth !=='undefined' && Auth && Auth.isAllowedFromStr ? true : false;
   _items = typeof _items ==='function'? _items(props) : _items;
   if(React.isValidElement(_items)){
      return _items;
@@ -18,6 +19,7 @@ const DrawerItemsComponent = React.forwardRef((props,ref)=> {
   const r = React.useMemo(()=>{
     let items = []
     const renderExpandableOrSection = ({item,key,items})=>{
+          if(hasAuth && isNonNullString(item.perm) && !Auth.isAllowedFromStr(item.perm)) return null;
           const {section,items:itx2,...rest} = item;
           if(section){
             return <DrawerSection 
@@ -50,16 +52,19 @@ const DrawerItemsComponent = React.forwardRef((props,ref)=> {
           Object.map(item.items,(it,j)=>{
               if(!isObj(it)) return ;
               getDefaultProps(it);
-              const r = renderItem({minimized,renderExpandableOrSection,items:item.items,item:it,key:i+j,props});
+              const r = renderItem({minimized,hasAuth,renderExpandableOrSection,items:item.items,item:it,key:i+j,props});
               if(r){
                 itx.push(r);
               }
           });
           if(itx.length){
-              items.push(renderExpandableOrSection({items:itx,key:i,item}))
+              const rr = renderExpandableOrSection({items:itx,key:i,item});
+              if(rr){
+                items.push(rr);
+              }
           }
       } else {
-          const r = renderItem({minimized,renderExpandableOrSection,items:_items,item,key:i+"",props});
+          const r = renderItem({minimized,hasAuth,renderExpandableOrSection,items:_items,item,key:i+"",props});
           if(r){
             items.push(r);
           }
@@ -114,13 +119,14 @@ const getDefaultProps = function(item){
   return item;
 }
 
-const renderItem = ({item,minimized,renderExpandableOrSection,index,key})=>{
+const renderItem = ({item,minimized,hasAuth,renderExpandableOrSection,index,key})=>{
   key = key||index;
   if(React.isValidElement(item)){
     return <React.Fragment key={key}>
         {item}
     </React.Fragment>
   } else {
+    if(hasAuth && isNonNullString(item.perm) && !Auth.isAllowedFromStr(item.perm)) return null;
     if(!item.label && !item.text && !item.icon) {
         if(item.divider === true){
           const {divider,...rest} = item;

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

@@ -17,7 +17,6 @@ const componentTypes =  {
     selectdateformat : Fields.SelectDateFormat,
     selectcurrency : Fields.SelectCurrency,
     currencyformat : Fields.CurrencyFormat,
-    currencyFormat : Fields.CurrencyFormat,
     dateformat : Fields.SelectDateFormat,
     date : Fields.Date,
     time : Fields.Time,
@@ -70,12 +69,8 @@ export const getFilterComponentProps = (_props)=>{
     props = defaultObj(props);
     let component = Fields.TextField;
     type = defaultStr(jsType,type,'text').toLowerCase().replaceAll("_","").replaceAll("-","").trim();
+    const sanitizedType = type.replaceAll("_","").toLowerCase().trim();
     props = defaultObj(props);
-    /*if(type =='datafile'){
-        type = 'select';
-        props = {...selectFieldProps,items : dataFileManager.getAll(),...props};
-        label = defaultStr(label,dataFileManager.dataFileText);
-    }*/
     if(type.startsWith("select")){
         props.inputProps = Object.assign({},props.inputProps);
         props.inputProps.placeholder = defaultStr(props.inputProps.placeholder,i18n.lang("search.."))
@@ -104,16 +99,13 @@ export const getFilterComponentProps = (_props)=>{
         component = Fields.SelectDateFormat;
     } else if(React.isComponent(componentTypes[type])) {
         component = componentTypes[type];
-    } else if(React.isComponent(componentTypes[type.replaceAll("_","")])){
-        component = componentTypes[type.replaceAll("_","")];
     } else if(isNonNullString(props.foreignKeyColumn) && isNonNullString(props.foreignKeyTable)) {
         component = Fields.SelectTableData;
         props.multiple = true;
         type = "select";
     }else {
-        const tt = type.replaceAll("_","").toLowerCase();
-        if(React.isComponent(componentTypes[tt])){
-            component = componentTypes[tt];
+        if(React.isComponent(componentTypes[sanitizedType])){
+            component = componentTypes[sanitizedType];
         } 
         delete props.dbName;
         delete props.tableName;

package/src/components/SelectCurrency/Format.js

@@ -2,19 +2,39 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 import React from "$react";
-import TextField from "$components/TextField";
+import TextField from "$ecomponents/TextField";
 import appConfig from "$capp/config";
 import {isNonNullString,defaultStr} from "$cutils";
+import Icon from "$ecomponents/Icon";
+import {styles} from "$theme";
 
-const CurrencyFormat = React.forwardRef((props,ref)=>{
-    const defaultValue = isNonNullString(props.defaultValue) && props.defaultValue.contains("v" && props.defaultValue || defaultStr(appConfig.currencyFormat,"%v %s"))
+const CurrencyFormat = React.forwardRef(({disabled,readOnly,right,isFilter,editable,...props},ref)=>{
+    const isEditable = disabled !== true && readOnly !== true && editable !== false;
+    const defaultValue = isNonNullString(props.defaultValue) && props.defaultValue.contains("v" && props.defaultValue) && props.defaultValue || defaultStr(appConfig.currencyFormat,"%v %s");
+    const title = "Format d'affichage des valeurs numériques : une chaine de caractère constitué des lettre %v et %s où %v représente la valeur du montant et %s représente la devise : exemple %s%v => $10 et %s %v => 10 $";
     return <TextField      
         affix = {false}
         enableCopy = {false}
         {...props}
+        disabled = {disabled}
+        readOnly = {readOnly}
+        editable = {isEditable}
         defaultValue = {defaultValue}
+        right = {!isEditable || isFilter ? right : (rP)=>{
+            const r = typeof right =='function'? right(rP) : right;
+            return <>
+                  <Icon
+                        {...rP}
+                        size = {25}
+                        style = {[styles.ml0,styles.mr0]}
+                        name = "alpha-f-box"
+                        title={title}
+                  />
+                 {React.isValidElement(r) && r || null}
+            </>
+        }}
         ref = {ref}
-        title="Format d'affichage des valeurs numériques : de la forme %v%s ou %v représente la valeur du montant et %s représente la devise : exemple %s%v => $10 et %s %v => 10 $"
+        title={title}
     />  
 });
 

package/src/layouts/DatabaseStatistics/DatabaseStatistic.js

@@ -142,6 +142,7 @@ export default function DatabaseStatisticContainer ({dashboardProps,onRefreshAll
             if(typeof value !=='number'){
                 value = isObj(footerValue) && typeof footerValue.sum =='number'? footerValue.sum : 0;
             }
+            const formattedValue = typeof context.formatValue =="function"? context.formatValue(value,format) : (format =='money'?value.formatMoney():value.formatNumber());
             return <Pressable onPress={onPress} testID={testID+"_TitleContainer"} style={[theme.styles.w100]}>
                 <View testID={testID+"_TitleCountUp"} style={[theme.styles.w100]}>
                     <View style={[theme.styles.w100,theme.styles.row,theme.styles.alignItemsCenter]}>
@@ -158,7 +159,7 @@ export default function DatabaseStatisticContainer ({dashboardProps,onRefreshAll
                             <Label
                                 textCenter
                                 style = {counUpStyle}
-                            >{format =='money'?value.formatMoney():value.formatNumber()}</Label>
+                            >{formattedValue}</Label>
                         </Pressable>}
                     />
                 </View>