@fto-consult/expo-ui 2.23.11 → 2.24.1

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

@@ -40,17 +40,25 @@ import {styles as tableStyles} from "$ecomponents/Table";
 import {DialogProvider} from "$ecomponents/Form/FormData";
 import Chart,{getMaxSupportedSeriesSize} from "$ecomponents/Chart";
 
-const chart = "chart";
 export const donutChart = {
     isChart : true,
     code : 'donutChart',
-    label : 'Graphique|Circulaire',
+    label : 'Donut',
     icon : "chart-donut",
     type: 'donut',
+    key : "donut",
     isDonut : true,
-    isRendable : ({displayOnlySectionListHeaders,isSectionList})=>isSectionList && displayOnlySectionListHeaders,
+    isRendable : ({displayOnlySectionListHeaders,isSectionList})=> false && isSectionList && displayOnlySectionListHeaders,
     tooltip : "Pour pouvoir visulaiser ce type de graphe, vous devez : grouper les données du tableau selon le criètre de votre choix, puis afficher uniquement les totaux des données groupées"
 }
+const stackSettings = {
+    type : 'switch',
+    text : "Graphe empilé?",
+    checkedValue : true,
+    uncheckedValue : false,
+    //le nom de la propriétés dans les propriétés du tableau
+    settingKey : "chart",
+}
 export const displayTypes = {
     table : {
         code : "table",
@@ -62,26 +70,49 @@ export const displayTypes = {
     lineChart : {
         code : "lineChart",
         isChart : true,
-        label : 'Graphique|Linéaire',
+        label : 'Linéaire',
         icon : "chart-areaspline",
         type : 'line',
+        key : "line",
     },
     areaChart : {
         isChart : true,
         code : 'areaChart',
-        label : 'Graphique|Surface',
+        label : 'Surface',
         icon : "chart-areaspline-variant",
         type: 'area',
+        key : "line",
     },
     barChart : {
         isChart : true,
         code : 'barChart',
-        label : 'Graphique|Barres',
+        label : 'Histogramme',
         icon : "chart-bar",
         type: 'bar',
-        isBar : true,
+        key : "line",
+        settings : {
+            stacked : stackSettings,
+        }
+    },
+    pieChart : {
+        ...donutChart,
+        code : 'pieChart',
+        label : 'Pie',
+        icon : "chart-pie",
+        type: 'pie',
     },
     donutChart,
+    radarChart : {
+        isChart : true,
+        code : 'radarChart',
+        label : 'Radar',
+        icon : "radar",
+        type: 'radar',
+        key : "line",
+        settings : {
+            stacked : stackSettings,
+        }
+    }
     /*rangeChart : {
         code : "rangeChart",
         isChart : true,
@@ -197,6 +228,7 @@ export default class CommonDatagridComponent extends AppComponent {
             sectionListDataSize : {value : {current : 0}},
             enablePointerEventsRef : {value : {current:false}},
             configureSectionListSelectedValues : {value : {}},
+            chartIdPrefix : {value : uniqid("datagrid-chart-id-prefix")},
             ///la liste des fonctions d'aggregations supportées
             aggregatorFunctions : {value : extendAggreagatorFunctions(this.props.aggregatorFunctions)},
             ///les types d'affichage
@@ -1261,8 +1293,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);
                     })
@@ -1345,13 +1377,7 @@ export default class CommonDatagridComponent extends AppComponent {
                         items : yItems,
                         multiple : true,
                     },
-                    stacked : {
-                        type : 'switch',
-                        text : "Graphe empilé?",
-                        disabled : this.state.displayType !== "barChart",
-                        checkedValue : true,
-                        uncheckedValue : false,
-                    },
+                    stacked : stackSettings,
                     title : {
                         text : "Titre du graphe",
                         format :'hashtag',
@@ -1494,6 +1520,7 @@ export default class CommonDatagridComponent extends AppComponent {
         if(!isValidAggregator(aggregatorFunction)){
             aggregatorFunction = this.getActiveAggregatorFunction();
         }
+                
         const code = aggregatorFunction.code;
         const isDonut = chartType.isDonut || chartType.isRadial;
         const config = this.getCharConfig();
@@ -1523,12 +1550,10 @@ export default class CommonDatagridComponent extends AppComponent {
         const loopForFooter = ({column,serieName,footers,header})=>{
             if(!isObj(column) || !isObj(footers)) return null;
             if(!isObj(footers[column.field])) return null;
-            const footer = footers[column.field]
+            const footer = footers[column.field];
             if(typeof footer[code] !== 'number') return null;
-            const label = defaultStr(footer.label,footer.text,footer.field);
             if(typeof footer[code] !== 'number') return null;
             if(isDonut){
-                serieName = label;
                 dataIndexes[header] = footer[code];
             } else {
                 dataIndexes[serieName] = defaultArray(dataIndexes[serieName]);
@@ -1555,6 +1580,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 labels.push(index);
             });
             return {
+                name : defaultStr(yAxisColumn.label,yAxisColumn.text,yAxisColumn.field),
                 series,
                 labels,
             }
@@ -1567,6 +1593,10 @@ export default class CommonDatagridComponent extends AppComponent {
                 series
             }
         }
+   }
+   /*** permet de formatter les valeurs de la courbe en fonction du type passé en paramètre */
+   chartValueFormattter(value,columnType){
+        
    }
    renderChart(){
         if(!this.canRenderChart()) return null;
@@ -1577,6 +1607,7 @@ export default class CommonDatagridComponent extends AppComponent {
             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;
         const config = this.getCharConfig();
         if(!this.state.columns[config.y]) return null;
         const yAxisColumn = this.state.columns[config.y];
@@ -1656,38 +1687,54 @@ export default class CommonDatagridComponent extends AppComponent {
         customConfig = defaultObj(customConfig);
         customConfig.chart = defaultObj(customConfig.chart);
         const chartProps = extendObj(true,{},this.props.chartProps,customConfig);
-        if(chartType.isBar){
-            chartProps.chart.stacked = !!config.stacked;
-        } else chartProps.chart.stacked = undefined;
-        return <Chart
-            options = {{
-                ...chartProps,
-                title : {
-                    text: defaultStr(config.title,chartProps.title),
-                    align: 'left',
-                    //margin: 10,
-                    //offsetX: 0,
-                    //offsetY: 0,
-                    //floating: false,
-                    style: {
-                      //fontSize:  '14px',
-                      //fontWeight:  'bold',
-                      //fontFamily:  undefined,
-                      color: theme.Colors.isValid(config.titleColor)?config.titleColor : undefined,
-                    },
-                },
-                series,
-                chart : {
-                    height :350,
-                    ...defaultObj(chartProps.chart),
-                    type : chartType.type,
+        const settings = defaultObj(chartType.settings);
+        Object.map(settings,(s,key)=>{
+            if(!isObj(s) || !(key in config)) return null;
+            const settingKey = defaultStr(s.settingKey,"chart");
+            chartProps[settingKey] = defaultObj(chartProps[settingKey]);
+            chartProps[settingKey][key] = config[key];
+        });
+        const chartOptions = {
+            ...chartProps,
+            title :extendObj(true,{}, {
+                text: defaultStr(config.title,chartProps.title),
+                align: 'left',
+                //margin: 10,
+                //offsetX: 0,
+                //offsetY: 0,
+                //floating: false,
+                style: {
+                  //fontSize:  '14px',
+                  //fontWeight:  'bold',
+                  //fontFamily:  undefined,
+                  color: theme.Colors.isValid(config.titleColor)?config.titleColor : undefined,
                 },
-                xaxis: {
-                    ...defaultObj(chartProps.xaxis),
-                    type: 'category',
-                    ...defaultObj(xaxis)
-                }
-            }}
+            },chartProps.title),
+            series,
+            chart : extendObj(true,{},{height :350},chartProps.chart,{
+                type : chartType.type,
+            })
+        }
+        //console.log(chartOptions," is chart options");
+        const labelColor = theme.Colors.isValid(config.labelColor)? config.labelColor : theme.colors.text; 
+        if(!isDonut){
+            chartOptions.xaxis = extendObj(true,{},{type: 'category'},chartProps.xaxis,{xaxis});
+            const xLabels = chartOptions.xaxis.labels = defaultObj(chartOptions.xaxis.labels);
+            xLabels.style = defaultObj(xLabels.style)
+            xLabels.style.colors = (Array.isArray(xLabels.style.colors) && xLabels.style.colors.length || theme.Colors.isValid(xLabels.style.colors)) ? xLabels.style.colors : labelColor;
+            chartOptions.yaxis = extendObj(true,{},{type: 'category'},chartProps.yaxis);
+            const yLabels = chartOptions.yaxis.labels = defaultObj(chartOptions.yaxis.labels);
+            yLabels.style = defaultObj(yLabels.style)
+            yLabels.style.colors = (Array.isArray(yLabels.style.colors) && yLabels.style.colors.length || theme.Colors.isValid(yLabels.style.colors)) ? yLabels.style.colors : labelColor;
+            
+        } else {
+            delete chartOptions.xaxis;
+            delete chartOptions.yaxis;
+        }
+        chartOptions.chart.id = this.chartIdPrefix+defaultStr(chartType.key,"no-key")
+        return <Chart
+            options = {chartOptions}
+            key = {chartOptions.chart.id}
         />
    }
    canShowFooters(){
@@ -2018,8 +2065,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 +2144,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 +2175,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 +2311,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 +3221,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);