@fto-consult/expo-ui 2.23.11 → 2.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.23.11",
+  "version": "2.24.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": "^1.23.10",
+    "@fto-consult/common": "^1.24.6",
     "@fto-consult/expo-ui": "^2.21.0",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",

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

@@ -1261,8 +1261,8 @@ export default class CommonDatagridComponent extends AppComponent {
         if(!isValidAggregator(ag) || ag.code == this.state.aggregatorFunction) return null;
         setTimeout(()=>{
             this.setIsLoading(true,()=>{
-                this.prepareData({data:this.INITIAL_STATE.data},(state)=>{
-                    this.setState({...state,aggregatorFunction:ag.code},()=>{
+                this.prepareData({data:this.INITIAL_STATE.data,aggregatorFunction:ag.code},(state)=>{
+                    this.setState(state,()=>{
                         this.setSessionData("aggregatorFunction",ag.code);
                         this.setIsLoading(false,false);
                     })
@@ -2018,8 +2018,9 @@ export default class CommonDatagridComponent extends AppComponent {
         return defaultNumber(this.sectionListDataSize.current)
     }
     prepareData(args,cb){
-        let {pagination,displayOnlySectionListHeaders:cdisplayOnlySectionListHeaders,data,force,sectionListColumns,updateFooters} = defaultObj(args);
+        let {pagination,aggregatorFunction:customAggregatorFunction,displayOnlySectionListHeaders:cdisplayOnlySectionListHeaders,data,force,sectionListColumns,updateFooters} = defaultObj(args);
         cb = typeof cb ==='function'? cb : typeof args.cb == 'function'? args.cb : undefined;
+        const aggregatorFunction = isNonNullString(customAggregatorFunction) && customAggregatorFunction in  this.aggregatorFunctions ? this.aggregatorFunctions[customAggregatorFunction] : this.getActiveAggregatorFunction();
         sectionListColumns = isObj(sectionListColumns) ? sectionListColumns : this.state.sectionListColumns;
         const displayOnlySectionListHeaders = typeof cdisplayOnlySectionListHeaders == 'boolean'?cdisplayOnlySectionListHeaders : this.state.displayOnlySectionListHeaders;
         let isArr = Array.isArray(data);
@@ -2096,7 +2097,7 @@ export default class CommonDatagridComponent extends AppComponent {
                         result.push(currentSectionListFooter);
                     }
                     Object.map(footersColumns,(columnDef,field)=>{
-                        evalSingleValue({data:d,aggregatorFunction:this.getActiveAggregatorFunction(),aggregatorFunctions:this.aggregatorFunctions,columnDef,field,result,displayLabel:false})
+                        evalSingleValue({data:d,aggregatorFunction,aggregatorFunctions:this.aggregatorFunctions,columnDef,field,result,displayLabel:false})
                     });
                 }
                 newData.push(d);
@@ -2127,7 +2128,7 @@ export default class CommonDatagridComponent extends AppComponent {
         } else if(force){
             this.setSelectedRows();
         }
-        const state = {data,displayOnlySectionListHeaders};
+        const state = {data,displayOnlySectionListHeaders,aggregatorFunction:aggregatorFunction.code};
         if((cb)){
             cb(state);
         }
@@ -2263,9 +2264,10 @@ export default class CommonDatagridComponent extends AppComponent {
         if(typeof props !=='object' || !props){
             props = {};
         }
-        const children = React.isValidElement(this.props.progressBar) ? this.props.progressBar : 
+        const ProgressBar = this.props.progressBar;
+        const children = React.isValidElement(ProgressBar) ? ProgressBar : 
             this.props.useLinesProgressBar === true || this.props.useLineProgressBar === true ? CommonDatagridComponent.LineProgressBar(props)
-            : this.getDefaultPreloader(props);
+            : React.isComponent(ProgressBar) ?<ProgressBar/> : this.getDefaultPreloader(props);
         return <DatagridProgressBar
             {...props}
             onChange = {(context)=>{
@@ -3172,6 +3174,7 @@ CommonDatagridComponent.propTypes = {
     aggregatorFunction : PropTypes.string,
     /*** permet de faire une mutation sur les options de la recherche, immédiatement avant le lancement de la recherche */
     fetchOptionsMutator : PropTypes.func,
+    useLinesProgressBar  : PropTypes.bool,//si le progress bar lignes horizontale seront utilisés
 }
 
 const styles = StyleSheet.create({

package/src/components/Date/FormatSelector.js

@@ -6,13 +6,12 @@ import React from "$react";
 import {defaultObj,isNonNullString} from "$utils";
 import SimpleSelect from "$ecomponents/SimpleSelect";
 import Provider from "$ecomponents/Dialog/Provider";
-import TextField from "$components/TextField";
-import Label from "$components/Label";
+import TextField from "$ecomponents/TextField";
+import Label from "$ecomponents/Label";
 import theme from "$theme";
 import notify from "$notify";
 import { View } from "react-native";
-import Icon from "$components/Icon";
-import PropTypes from "prop-types";
+import Icon from "$ecomponents/Icon";
 
 const DateFormatSelector = React.forwardRef((props,ref)=>{
     return <SimpleSelect ref={ref} {...selectDateFormatFieldProps(props)}/>

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

@@ -797,7 +797,7 @@ export default class Field extends AppComponent {
             jsType,
             fieldToPopulateOnBlur,
             ...rest
-        } = this.props;
+        } = this.getComponentProps(this.props);
         if(this.state.caughtAnError){
             return <ErrorMessage
                 error={this.state.caughtError}

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

@@ -0,0 +1,39 @@
+import SelectField from "./SelectField";
+import {selectCurrencyFieldProps} from "$ecomponents/SelectCurrency";
+import appConfig from "$app/config";
+import {defaultStr} from "$utils";
+
+export default class FormFieldSelectCurrency extends SelectField{
+    constructor(props){
+        super(props);
+        Object.defineProperties(this,{
+            currencyFormatRef : {value : {current:defaultStr(appConfig.currencyFormat)}}
+        });
+    }
+    onValidate(args){
+        const {context} = args;
+        if(context && context.getField){
+            const field = context.getField("currencyFormat");
+            if(field && field.setValue){
+                field.setValue(defaultStr(this.currencyFormatRef.current));
+            }
+        }
+        super.onValidate(args);
+    }
+    getComponentProps(props){
+        this.currencyFormatRef.current = defaultStr(props.currencyFormat,this.currencyFormatRef.current,appConfig.currencyFormat)
+        return {...selectCurrencyFieldProps({...props,onChange:(args)=>{
+            this.currencyFormatRef.current = defaultStr(args.currencyFormat);
+            if(this.props.onChange){
+                this.props.onChange(args);
+            }
+        }})}
+    }
+    getValidValue(data){
+        data.currencyFormat = this.currencyFormatRef.current;
+        return super.getValidValue(data);
+    }
+}
+FormFieldSelectCurrency.propTypes = {
+    ...SelectField.propTypes,
+}

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

@@ -130,7 +130,9 @@ export default class FormSelectField extends Field{
             }}
             onChange = {(args)=>{
                 this.validateWithCallOnChange(args);
-                if(typeof this.props.onChange =='function'){
+                if(typeof props.onChange =='function'){
+                    props.onChange(args);
+                } else if(this.props.onChange =='function'){
                     this.props.onChange(args);
                 }
             }}

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

@@ -4,6 +4,7 @@ import SelectField from "./SelectField";
 import Switch from "./Switch";
 import Checkbox from "./Checkbox";
 import SelectTableData from "./SelectTableData";
+import SelectCurrency from "./SelectCurrency";
 //import IdField from "./IdField";
 //import PieceField from "./PieceField";
 import Slider from "./Slider";
@@ -27,7 +28,8 @@ const defFormFields = {
     TextField, 
     SelectField,
     SelectTableData,
-    SelectCountry
+    SelectCountry,
+    SelectCurrency
     ,Switch
     ,Checkbox
     //,IdField
@@ -58,6 +60,7 @@ export {
     SelectField,
     SelectTableData,
     SelectCountry
+    ,SelectCurrency
     ,Switch
     ,Checkbox
     //,IdField

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

@@ -8,7 +8,6 @@ const componentTypes =  {
     ...Fields,
     id : Fields.IdField,
     selecttabledata : Fields.SelectTableData,
-    select_tabledata : Fields.SelectTableData,
     idfield : Fields.IdField,
     piecefield : Fields.PieceField,
     piece : Fields.PieceField,
@@ -16,6 +15,7 @@ const componentTypes =  {
     switch : Fields.Switch,
     selectcountry : Fields.SelectCountry,
     selectdateformat : Fields.SelectDateFormat,
+    selectcurrency : Fields.SelectCurrency,
     dateformat : Fields.SelectDateFormat,
     date : Fields.Date,
     time : Fields.Time,
@@ -100,9 +100,11 @@ export const getFilterComponentProps = (_props)=>{
         component = Fields.ColorPicker;
     } else if(type == 'dateformat' || type =='select_dateformat' || type =='select_date_format') {
         component = Fields.SelectDateFormat;
-    } else if(React.isComponent()) {
+    } else if(React.isComponent(componentTypes[type])) {
         component = componentTypes[type];
-    }else {
+    } else if(React.isComponent(componentTypes[type.replaceAll("_","")])){
+        component = componentTypes[type.replaceAll("_","")];
+    } else {
         const tt = type.replaceAll("_","").toLowerCase();
         if(React.isComponent(componentTypes[tt])){
             component = componentTypes[tt];

package/src/components/HeavyScreen/index.js

@@ -14,6 +14,7 @@ const OptimizedHeavyScreen = React.forwardRef(({
   ),
   style,
   children,
+  isLoading,
   timeout,
   testID,
   transitionTimeout,
@@ -30,7 +31,7 @@ const OptimizedHeavyScreen = React.forwardRef(({
       style={[{flex:1},style]}
       ref={React.useMergeRefs(transitionRef,ref)}
     >
-      {areInteractionsComplete ? (children) :  placeholder}
+      {areInteractionsComplete && isLoading !==true ? (children) :  placeholder}
     </Transitioning.View>
   )
 });
@@ -46,7 +47,8 @@ OptimizedHeavyScreen.propTypes = {
     placeholder : PropTypes.oneOfType([
         PropTypes.node,
         PropTypes.element,
-    ])
+    ]),
+    isLoading : PropTypes.bool,//si l'écan où les données sont en train d'être chargé
   }
 
   OptimizedHeavyScreen.displayName = "OptimizedHeavyScreenComponent";

package/src/components/SelectCurrency/index.js

@@ -0,0 +1,100 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+import React from "$react";
+import {defaultObj,defaultStr,isNonNullString} from "$utils";
+import SimpleSelect from "$ecomponents/SimpleSelect";
+import TextField from "$ecomponents/TextField";
+import Icon from "$ecomponents/Icon";
+import {currencies} from "$ccurrency";
+import { Pressable } from "react-native";
+import {styles} from "$theme";
+import appConfig from "$app/config";
+
+const CurrencySelector = React.forwardRef((props,ref)=>{
+    return <SimpleSelect ref={ref} {...selectCurrencyFieldProps(props)}/>
+});
+
+CurrencySelector.displayName = "CurrencySelector";
+
+export default CurrencySelector;
+
+export const currencyFormatRef = React.createRef(null);
+
+/*** onAdd est appelé lorsqu'on ajoute un format personalisé */
+export const selectCurrencyFieldProps = ({right,disabled,readOnly,isFilter,onChange,onBlur,editable,...props})=>{
+    const isEditable = disabled !== true && readOnly !== true && editable !== false;
+    const currency = appConfig.currency;
+    currencyFormatRef.current = defaultStr(currencyFormatRef.current,appConfig.currencyFormat,"%v%s");
+    const iconSize = 25;
+    return {
+        items : currencies,
+        getItemValue : ({item})=>item.code,
+        renderItem : ({item}) => "["+item.code+"] " +item.name,
+        showAdd : false,
+        defaultValue : defaultStr(currency.code),
+        enableCopy : false,
+        ...props,
+        isFilter,
+        onChange : (args)=>{
+            args.currencyFormat = args.format = defaultStr(currencyFormatRef.current)
+            if(onChange){
+                onChange(args);
+            }
+        },
+        onBlur : (args)=>{
+            args.currencyFormat = args.format = defaultStr(currencyFormatRef.current);
+            if(onBlur){
+                onBlur(args);
+            }
+        },
+        disabled : !isEditable,
+        editable : isEditable,
+        right : !isEditable || isFilter ? right : (rP)=>{
+            const r = typeof right =='function'? right(rP) : right;
+            return <>
+                <Pressable style={{width:80}}
+                    onPress = {(e)=>{
+                        React.stopEventPropagation(e);
+                    }}
+                >
+                    <TextField
+                        {...rP}
+                        affix = {false}
+                        editable = {isEditable}
+                        disabled = {disabled}
+                        readOnly = {readOnly}
+                        enableCopy = {false}
+                        contentContainerProps = {{
+                            style:{height:37,paddingVertical:0,paddingHorizontal:0},
+                        }}
+                        mode = {'flat'}
+                        left = {(p)=>{
+                            return <Icon
+                                {...rP}
+                                {...p}
+                                size = {iconSize}
+                                style = {[styles.ml0,styles.mr0,{width:iconSize,height:iconSize}]}
+                                icon = "alpha-f-box"
+                                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 $"
+                            />
+                        }}
+                        defaultValue = {currencyFormatRef.current}
+                        containerProps = {{
+                            width:70,
+                        }}
+                        onChange = {({value})=>{
+                            currencyFormatRef.current = value;
+                        }}
+                    />  
+                </Pressable>
+                {React.isValidElement(r) && r || null}
+            </>
+        },
+        type : 'select',
+    }
+}
+
+CurrencySelector.propTypes = {
+    ...SimpleSelect.propTypes,
+}

package/src/layouts/DatabaseStatistics/index.js

@@ -19,7 +19,7 @@ export default function DatabaseStatisticScreen ({withScreen,title:customTitle,c
         }
         let content = [];
         Object.map(tables,(table,index,suffix)=>{
-            if(isObj(table) && table.databaseStatistic !== false){
+            if(isObj(table) && table.databaseStatistic !== false && table.databaseStatistics !== false){
                 content.push(
                     <Cell elevation = {5} withSurface mobileSize={12} desktopSize={3} tabletSize={4} {...contentProps} key = {index} >
                         <DatabaseStatistic

package/src/layouts/Screen/FormData/FormData.js

@@ -68,13 +68,14 @@ export default class FormDataLayout extends FormDataActions {
             preloader,
             preloaderProps,
             testID,
+            isLoading,
         } = this.props;
         wProps = defaultObj(wProps);
-        const useHeavyScreen = withHeavyScreen !== false ? true : false;
+        const useHeavyScreen = withHeavyScreen !== false || isLoading == true? true : false;
         const Wrapper = useHeavyScreen ? HeavyScreen : React.Fragment;
         testID = defaultStr(wProps.testID,testID,"RN_FormDataScren");
         const placeholder = React.isValidElement(preloader)? preloader : <FormLoader {...defaultObj(preloaderProps)}/>;
-        const wrapperProps = useHeavyScreen ? {...wProps,placeholder,testID:testID+"_HeavyScreen"} : {}
+        const wrapperProps = useHeavyScreen ? {...wProps,isLoading,placeholder,testID:testID+"_HeavyScreen"} : {}
         return <Wrapper {...wrapperProps}>
             {content}
         </Wrapper>
@@ -94,6 +95,7 @@ FormDataLayout.propTypes = {
     withHeavyScreen : PropTypes.bool,
     withAppBar : PropTypes.bool, ///si l'appBar sera affiché 
     preloader : PropTypes.node,
+    isLoading : PropTypes.bool,//Si l'écran est en mode chargement des données
     preloaderProps : PropTypes.object,
     header : PropTypes.oneOfType([
         PropTypes.element,

package/src/layouts/Screen/TableData.js

@@ -1,4 +1,5 @@
 import {defaultStr,isNumber,isPromise,defaultVal,extendObj,defaultObj,uniqid,isObj,isObjOrArray} from "$utils";
+import stableHash from "stable-hash";
 import {FormData} from "$ecomponents/Form";
 import FormDataScreen from "./FormData";
 import ScreenContainer from "./Screen";
@@ -71,18 +72,8 @@ export const isDocEditing = (data,fields,checkPrimaryKey)=>{
 export default class TableDataScreenComponent extends FormDataScreen{
     constructor(props){
         super(props);
-        let cDatas = [];
         const mainProps = getScreenProps(props);
-        const hasManyData = isObjOrArray(mainProps.datas) && Object.size(mainProps.datas,true) > 0 ? true : false;
-        if(hasManyData){
-            cDatas = Object.toArray(mainProps.datas);
-        }
-        extendObj(this.state,{
-            hasManyData,
-            datas : cDatas,
-            currentIndex : 0,
-            data : hasManyData ? defaultObj(cDatas[0]) : isObj(mainProps.data)? mainProps.data : {}
-        });
+        extendObj(this.state,this.prepareStateData(mainProps));
         const table = defaultObj(mainProps.table);
         const fields = {},primaryKeyFields = {};
         Object.map(table.fields,(field,i)=>{
@@ -157,6 +148,20 @@ export default class TableDataScreenComponent extends FormDataScreen{
         this.hidePreloader = this.hidePreloader.bind(this);
         this.showPreloader = this.showPreloader.bind(this);
     };
+    prepareStateData(props){
+        const mainProps = defaultObj(props,this.props);
+        const hasManyData = isObjOrArray(mainProps.datas) && Object.size(mainProps.datas,true) > 0 ? true : false;
+        let cDatas = [];
+        if(hasManyData){
+            cDatas = Object.toArray(mainProps.datas);
+        }
+        return {
+            hasManyData,
+            datas : cDatas,
+            currentIndex : 0,
+            data : hasManyData ? defaultObj(cDatas[0]) : isObj(mainProps.data)? mainProps.data : {}
+        };
+    }
     isCurrentDocEditingUpdate(){
         return this.isDocEditingRef.current === true ? true : false;
     }
@@ -561,6 +566,14 @@ export default class TableDataScreenComponent extends FormDataScreen{
         },typeof timeoutCallback =='number'? timeoutCallback : HIDE_PRELOADER_TIMEOUT);
         return this.hidePreloaderTimeout;
     }
+    UNSAFE_componentWillReceiveProps(nextProps){
+        const props = getScreenProps(nextProps);
+        const {data,datas}= props;
+        if(stableHash({data,datas}) != stableHash({data:this.state.data,datas:this.state.datas})){
+            this.setState(this.prepareStateData(props));
+        }
+        return;
+    }
     reset (args,cb){
         if(!this._isMounted()) return;
         clearTimeout(this.timeoutCallback);