@fto-consult/expo-ui 2.21.3 → 2.23.0

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

@@ -1,68 +1,90 @@
-import Button from "$ecomponents/Button";
 import Menu from "$ecomponents/BottomSheet/Menu";
 import View from "$ecomponents/View";
 import {Pressable,StyleSheet} from "react-native";
 import Label from "$ecomponents/Label";
-import {defaultVal,defaultObj} from "$utils";
+import {defaultVal,defaultObj,isNonNullString,isObj} from "$utils";
 import React from "$react";
 import theme from "$theme"
+import appConfig from "$capp/config";
 
-let methods = {
-    sum : "Somme",
-    average : "Moyenne",
-    min : "Minimum",
-    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;
+        eval : ({value,total,count})=>{
+            value = typeof value =='number'?value : 0;
+            total = typeof total =='number'? total : 0;
+            return value+total;
         }
     },
-    /*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);
+        eval : ({value,total,count})=>{
+            value = typeof value =='number'?value : 0;
+            total = typeof total =='number'? total : 0;
+            return Math.min(value,total);
         },
     },
     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);
+        eval : ({value,total,count})=>{
+            value = typeof value =='number'?value : 0;
+            total = typeof total =='number'? total : 0;
+            return Math.max(value,total);
         },
     },
     count : {
         code : "count",
         label : "Nombre",
-        eval : (current,prev,count)=>{
+        eval : ({value,total,count})=>{
             return (typeof count =='number'? count : 0)+1;
         }
     },
+    average : {
+        code : "average",
+        label : "Moyenne",
+        eval : ({count,sum})=>{
+            return typeof count =='number' && count > 0 && typeof sum =='number'? sum/count : 0;
+        }
+    },
+}
+/**** 
+ * Vérifie si la fonction d'aggregation est valide
+*/
+export const isValidAggregator = (aggregatorFunctionObject)=>{
+    return isObj(aggregatorFunctionObject) && isNonNullString(aggregatorFunctionObject.code) && typeof aggregatorFunctionObject.eval =='function' && true || false;
+}
+/*** permet d'étendre les fonction d'aggregations 
+ * @param {object|Array} liste des functions d'aggregation supplémentaires, de la forme 
+ *  {
+ *      code {string} le code de la fonction d'aggrégation
+ *      label {string} le libele
+ *      eval {function} la function a utiiser pour évaluer la données via l'aggregator
+
+ * }
+*/
+export function extendAggreagatorFunctions(aFunctions){
+    const r = {...aggregatorFunctions};
+    loopForAggregator(appConfig.get("datagridAggregatorFunctions"),r);
+    loopForAggregator(aFunctions,r);
+    return r;
+}
+const loopForAggregator = (aggregatorFunctions,result)=>{
+    result = defaultObj(result);
+    Object.map(aggregatorFunctions,(aggregatorObj,key)=>{
+        if(!isValidAggregator(aggregatorObj)) return null;
+        result[aggregatorObj.code] = aggregatorObj;
+    });
 }
-const formatValue = ({value,format,method})=>{
-    return (format === 'money' && method != 'count')? value.formatMoney():value.formatNumber();
+const formatValue = ({value,format,aggregatorFunction})=>{
+    return (format === 'money' && aggregatorFunction != 'count')? value.formatMoney():value.formatNumber();
 }
 export default function DGGridFooterValue (props){
-    let {label,text,displayLabel,style,format,testID,anchorProps} = props;
+    let {label,text,displayLabel,style,aggregatorFunctions,aggregatorFunction,format,testID,anchorProps} = props;
+    aggregatorFunctions = defaultObj(aggregatorFunctions);
     anchorProps = defaultObj(anchorProps);
     testID = defaultStr(testID,"RN_DatagridFooterComponent");
     label = defaultVal(label,text);
@@ -70,27 +92,28 @@ export default function DGGridFooterValue (props){
     if(displayLabel !== false){
         if(!label || !React.isValidElement(label,true)) return null;
     } else label = undefined;
-    const [active,setActive] = React.useState(isNonNullString(props.method) && props.method in methods ? props.method : "sum")
+    const [active,setActive] = React.useState(isNonNullString(aggregatorFunction) && aggregatorFunction in aggregatorFunctions ? aggregatorFunction : aggregatorFunctions[Object.keys(aggregatorFunctions)[0]]?.code)
     React.useEffect(()=>{
-        if(isNonNullString(props.method) && props.method in methods){
-            setActive(props.method)
+        if(aggregatorFunction !== active && isNonNullString(aggregatorFunction) && aggregatorFunction in aggregatorFunctions){
+            setActive(aggregatorFunction)
         }
-    },[props.method])
+    },[aggregatorFunction])
     let title = "";
     let menuItems = []
     const activeStyle = {color:theme.colors.primaryOnSurface};
-    for(let method in methods){
-        let val = defaultDecimal(props[method]);
+    for(let aggregatorFunction in aggregatorFunctions){
+        let val = defaultDecimal(props[aggregatorFunction]);
         if(isDecimal(val)){
-            let fText = formatValue({value:val,format,method});
-            title +=(title? ", ":"")+methods[method]+" : "+fText
+            let fText = formatValue({value:val,format,aggregatorFunction});
+            const mText = defaultStr(aggregatorFunctions[aggregatorFunction].label,aggregatorFunctions[aggregatorFunction].code,aggregatorFunction);
+            title +=(title? ", ":"")+mText +" : "+fText
             menuItems.push({
-                text : methods[method] + " : "+fText,
-                icon : active == method ? "check" : null,
-                style : [{paddingHorizontal:0},active ===method ?activeStyle:null],
+                text : mText + " : "+fText,
+                icon : active == aggregatorFunction ? "check" : null,
+                style : [{paddingHorizontal:0},active ===aggregatorFunction ?activeStyle:null],
                 onPress : (e)=>{
                     React.stopEventPropagation(e);
-                    setActive(method)
+                    setActive(aggregatorFunction)
                 }
             })
         }
@@ -109,7 +132,7 @@ export default function DGGridFooterValue (props){
                     </>
                 : null}
                 <Label testID={testID+"_LabelContent"} primary style={[styles.value]}>
-                    {formatValue({value:defaultDecimal(props[active]),method:active,format})}
+                    {formatValue({value:defaultDecimal(props[active]),aggregatorFunction:active,format})}
                 </Label>
             </Pressable>
         }}

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

@@ -3,21 +3,28 @@ import View from "$ecomponents/View";
 import React from "$react";
 import memoize from "$react/memoize";
 export {default as FooterItem} from "./Footer";
-import {parseDecimal} from "$utils";
+import {parseDecimal,defaultObj,defaultStr,isNonNullString} from "$utils";
+import { aggregatorFunctions as mAggregatorFunctions } from "./Footer";
+export * from "./Footer";
 
-export const evalSingleValue = ({data,columnDef,field,result,withLabel,displayLabel,onlyVisible})=>{
-    data = data || {}
-    if(!isNonNullString(field) || !isObj(columnDef)) return result;
+/***évalue la valeur décimale selon les paramètres */
+export const getFooterColumnValue = ({data,columnDef,field,result,columnField}) =>{
+    data = defaultObj(data)
+    columnDef = defaultObj(columnDef);
+    columnField = defaultStr(columnField,columnDef.field,field);
+    let val = data[columnField];
+    if(typeof columnDef.multiplicater ==='function'){
+        val = defaultDecimal(columnDef.multiplicater({value:val,columnField,field,columnDef,rowData:data,item:data}),val)
+    }
+    return typeof val =='number'? parseDecimal(val.toFixed(12)) : 0;
+}
+
+export const evalSingleValue = ({data,columnDef,field,count,columnField,aggregatorFunctions,withLabel,result,displayLabel,onlyVisible})=>{
+    if(!isNonNullString(field) || !isObj(columnDef) || !isObj(data)) return result;
+    aggregatorFunctions = defaultObj(aggregatorFunctions,mAggregatorFunctions);
     onlyVisible = defaultBool(onlyVisible,true);
     if(onlyVisible === true && !(columnDef.visible !== false)) result;
-    let val = data[field];
-    if(isFunction(columnDef.multiplicater)){
-        val = defaultDecimal(columnDef.multiplicater({value:val,columnField:field,field,columnDef,rowData:data,item:data}),val)
-    }
-    if(!isDecimal(val)){
-        return result;
-    }
-    val = parseDecimal(val.toFixed(10));
+    let val = getFooterColumnValue({data,columnDef,columnField,result,field});
     (Array.isArray(result) ? result : [result]).map((currentResult)=>{
         currentResult = defaultObj(currentResult);
         if(!isObj(currentResult[field])){
@@ -30,21 +37,27 @@ export const evalSingleValue = ({data,columnDef,field,result,withLabel,displayLa
             }
         }
         const obj = currentResult[field];
-        obj.max = isDecimal(obj.max) ? Math.max(obj.max,val) : val;
-        obj.min = isDecimal(obj.min) ? Math.min(obj.min,val) : val;
-        obj.count = isDecimal(obj.count) ? (obj.count = obj.count +1) : 1;
-        obj.sum = isDecimal(obj.sum) ? (parseDecimal((obj.sum+val).toFixed(10))) : val;
-        obj.average = obj.sum / obj.count;
+        //obj.max = isDecimal(obj.max) ? Math.max(obj.max,val) : val;
+        //obj.min = isDecimal(obj.min) ? Math.min(obj.min,val) : val;
+        //obj.count = isDecimal(obj.count) ? obj.count : 0;
+        //obj.sum = isDecimal(obj.sum) ? (parseDecimal((obj.sum+val).toFixed(10))) : val;
+        Object.map(aggregatorFunctions,(aggegatorFunction,key)=>{
+            const code = aggegatorFunction.code;
+            obj[code] = aggegatorFunction.eval({columnDef,columnField,data,value : val,count,...obj,total:defaultNumber(obj[code])});
+        });
+        if(typeof obj.count =='number' && obj.count >0 && typeof obj.sum =='number'){
+            obj.average = obj.sum / obj.count;
+        }
         return currentResult;
     })
     return result;
 }
-export const evalValues = memoize(({data,columns,onlyVisible,withLabel,displayLabel})=>{
+export const evalValues = memoize(({data,columns,aggregatorFunctions,onlyVisible,withLabel,displayLabel})=>{
     let result = {};
     Object.map(data,(rowData,i)=>{
         if(!isObj(rowData)) return result;
         Object.map(columns,(columnDef,field)=>{
-            result = evalSingleValue({data:rowData,columnDef,field,result,withLabel,displayLabel,onlyVisible})
+            result = evalSingleValue({data:rowData,aggregatorFunctions,columnDef,field,result,withLabel,displayLabel,onlyVisible})
         })
     })
     return result;
@@ -59,7 +72,7 @@ export const evalValues = memoize(({data,columns,onlyVisible,withLabel,displayLa
  * @param : children {func}, fonction permettant de générer le contenu du footer
  */
 export default function DGGridFooters (props){
-    let {columns,children,displayLabel,Component,data,onlyVisible,...rest} = props;
+    let {columns,children,displayLabel,aggregatorFunctions,Component,data,onlyVisible,...rest} = props;
     rest = defaultObj(rest)
     if(Component === false){
         Component = React.Fragment;
@@ -77,7 +90,7 @@ export default function DGGridFooters (props){
     React.useEffect(()=>{
         setState({...state,data:props.data})
     },[props.data]);
-    let footers = evalValues({data:state.data,columns:state.columns,onlyVisible,displayLabel});
+    let footers = evalValues({data:state.data,aggregatorFunctions,columns:state.columns,onlyVisible,displayLabel});
     return <Component {...rest}>
         {children({
             footers,

package/src/components/Datagrid/IndexComponent.js

@@ -18,7 +18,7 @@ const DatagridMainComponent = React.forwardRef((props,ref)=>{
     const AccordionComponent = isTableDataRef.current ? TableDataAccordion : Accordion;
     let Component = TableComponent;
     const canRenderAccordion = (isFunction(props.accordion) || (isObj(props.accordionProps) && isFunction(props.accordionProps.accordion)) || props.accordion === true);
-    let renderType = defaultStr(getRenderType(),isDesk? "fixed":'accordion').trim().toLowerCase()
+    let renderType = defaultStr(getRenderType(),isDesk? "table":'accordion').trim().toLowerCase()
     if(renderType == 'accordion' && canRenderAccordion){
         Component = AccordionComponent;
     } else if(renderType =='table'){

package/src/components/Datagrid/RenderType.js

@@ -18,9 +18,9 @@ const DatagridRenderTypeComponent = (props)=>{
     let type = defaultStr(get(typeKey),isDesk? "fixed":'accordion').toLowerCase().trim();
     const rTypes = [
         {...getActiveProps(type,'accordion'),tooltip:"Les éléments de liste s'affichent de manière optimisé pour téléphone mobile",code:'accordion',icon:accordionIcon,label:'Mobile',labelText:'environnement optimisé pour téléphone mobile'},
-        //{...getActiveProps(type,'table'),tooltip:"Les éléments de listes s'affichent dans un tableau rééel",code:'table',icon:tableIcon,label:'Tableau réel avec pagination'}
+        {...getActiveProps(type,'table'),tooltip:"Les éléments de listes s'affichent dans un tableau",code:'table',icon:tableIcon,label:'Tableau'}
     ]  
-    Object.map(rendersTypes,(t,i)=>{
+    /*Object.map(rendersTypes,(t,i)=>{
         if(isObj(t)){
             if((isDesk && t.desktop) || (!isDesk && t.mobile)){
                 rTypes.push({
@@ -29,7 +29,7 @@ const DatagridRenderTypeComponent = (props)=>{
                 })
             }
         }
-    });
+    });*/
     let typeObj = {};
     Object.map(rTypes,(t)=>{
         if(isObj(t) && t.code == type){

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

@@ -53,13 +53,14 @@ const DatagridFactory = (Factory)=>{
         renderFooterCell(props){
             const {columnField,style} = props;
             let footersValues = this.getFooterValues();
-            const footerFields = this.getFooterFields();
+            const footerFields = this.getFootersFields();
             if(isObj(footerFields[columnField])){
                 return <Footer
-                    //{...footerFields[columnField]}
                     {...defaultObj(footersValues[columnField])}
                     displayLabel = {false}
                     style = {[style]}
+                    aggregatorFunction = {this.getActiveAggregatorFunction().code}   
+                    aggregatorFunctions = {this.aggregatorFunctions}                               
                 />
             }
             return null;
@@ -160,8 +161,9 @@ const DatagridFactory = (Factory)=>{
                 total:pagination.rows,pages:countPages
             })*/
             const {visibleColumns} = this.preparedColumns;
-            const hasFooterFields = this.hasFooterFields();
-            const {columnsWidths:widths,showFilters,showFooters} = this.state;
+            const hasFootersFields = this.hasFootersFields();
+            const {columnsWidths:widths} = this.state;
+            const showFooters = this.canShowFooters(), showFilters = this.canShowFilters();
             const isLoading = this.isLoading();
             let _progressBar = this.getProgressBar();
             const pointerEvents = this.getPointerEvents(); 
@@ -202,7 +204,7 @@ const DatagridFactory = (Factory)=>{
                 <ScrollView horizontal showsHorizontalScrollIndicator={!isLoading} style={styles.paginationContainerStyle} contentContainerStyle={styles.minW100}>
                     <View style={[styles.paginationContent]}>
                         <View testID={testID+"_HeaderQueryLimit"}>
-                            {this.renderQueryLimit(this.state.data.length.formatNumber())}
+                            {this.renderQueryLimit(this.getStateDataSize().formatNumber())}
                         </View>
                         {this.renderCustomPagination()}
                         {!isMobile && <>
@@ -219,13 +221,13 @@ const DatagridFactory = (Factory)=>{
                                         {showFilters?'Masquer/Filtres':'Afficher/Filtres'}
                                 </Button>
                             )}
-                            {hasFooterFields && !canRenderChart ? <Button
+                            {hasFootersFields && !canRenderChart ? <Button
                                 normal
                                 style={styles.paginationItem}
                                 onPress =  {()=>{this.toggleFooters(!showFooters)} }   
                                 icon = {showFooters?'view-column':'view-module'}
                             >   
-                                    {showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux'}
+                                    {showFooters?'Masquer les totaux':'Afficher les totaux'}
                             </Button>:null}
                             {restItems.map((item,index)=>{
                                 return <Button 
@@ -277,17 +279,19 @@ const DatagridFactory = (Factory)=>{
                                     ,icon :  showFilters?'eye-off':'eye'
                                     ,text : (showFilters?'Masquer/Filtres':'Afficher/Filtres')
                                 } : null,
-                                isMobile && hasFooterFields?{
+                                isMobile && hasFootersFields?{
                                     onPress :  ()=>{this.toggleFooters(!showFooters)}    
                                     ,icon :  showFooters?'view-column':'view-module'
                                     ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
                                 } : null,
+                                ...this.getAggregatorFunctionsMenuItems(),
                                 ...(selectableMultiple ? restItems : [])
                             ] : visibleColumns}
                         
                         />
                         {this.renderSectionListMenu()}
                         {this.renderDisplayTypes()}
+                        {!isMobile && this.renderAggregatorFunctionsMenu() || null}
                         <View testID={testID+"_HeaderPagination"} style = {styles.paginationItem}>
                             <BottomSheetMenu
                                 testID={testID+"_HeaderMenus"}
@@ -344,7 +348,7 @@ const DatagridFactory = (Factory)=>{
                     </View> : null}
                     getItemType = {this.getFlashListItemType.bind(this)}
                     renderItem = {this.renderFlashListItem.bind(this)}
-                    hasFooters = {hasFooterFields && !canRenderChart ? true : false}
+                    hasFooters = {hasFootersFields && !canRenderChart ? true : false}
                     showFilters = {showFilters}
                     showFooters = {showFooters && !canRenderChart ? true : false}
                     showHeaders = { canRenderChart ? !!showFilters : true}

package/src/components/Date/FormatSelector.js

@@ -79,7 +79,8 @@ export const selectDateFormatFieldProps = ({onAdd:customOnAdd,onAddCustomFormat,
         getItemValue : ({item})=>item.code,
         renderItem : dateFormatSelectorRenderItem,
         showAdd : true,
-        ...defaultObj(props),
+        ...props,
+        defaultValue : defaultStr(props.defaultValue,props.format),
         onAdd,
         onAdd : undefined,
         showAdd : false,

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

@@ -889,7 +889,7 @@ export default class Field extends AppComponent {
 
         this.___formattedField = undefined;
         let _type = this.type;
-        format = defaultStr(format).toLowerCase().trim();
+        format = defaultStr(format);
         tooltip = defaultVal(tooltip,title);
 
         const isEditable = rest.disabled !== true && rest.readOnly !== true && rest.editable !== false ? true : false;

package/src/components/Snackbar/index.js

@@ -218,7 +218,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flexWrap : "wrap",
     justifyContent: 'space-between',
-    margin: 8,
+    margin: 0,
+    marginHorizontal : 10,
+    paddingRight : 10,
     borderRadius: 4,
     minHeight: 48,
   },