@fto-consult/expo-ui 2.13.1 → 2.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.13.1",
+  "version": "2.14.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

package/src/App.js

@@ -87,6 +87,7 @@ export default function getIndex(options){
           },
           isVisible() {
             /* Customize the visibility state detector */
+            return false;
             return isScreenFocusedRef.current;
           },
           initFocus(callback) {

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

@@ -325,6 +325,7 @@ const DatagridFactory = (Factory)=>{
                 backToTopProps,
                 testID,
                 renderEmpty,
+                ...rest
             } = this.props
             const hasData = this.state.data.length ? true : false;
             testID = defaultStr(testID,"RN_DatagridAccordion");
@@ -433,6 +434,7 @@ const DatagridFactory = (Factory)=>{
                         <View testID={testID+"_HeaderQueryLimit"} style={[styles.paginationItem]}>
                             {this.renderQueryLimit(this.state.data.length.formatNumber())}
                         </View>
+                        {this.renderCustomPagination()}
                         {sortedColumnsLength ? <View testID={testID+"_HeaderSortedColumns"} style={[styles.sortableItems,styles.paginationItem,{paddingRight:10}]}>
                             <Icon 
                                 testID={testID+"_HeaderSortIcon"}
@@ -503,6 +505,7 @@ const DatagridFactory = (Factory)=>{
                                         ,icon :  showFooters?'view-column':'view-module'
                                         ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
                                     }:null,
+                                    ...this.renderCustomMenu(),
                                     ...restItems,
                                     this.canScrollTo() &&  {
                                         text : 'Retour en haut',
@@ -579,6 +582,7 @@ const DatagridFactory = (Factory)=>{
                     {hasData ? <FlashList
                         estimatedItemSize = {150}
                         prepareItems = {false}
+                        {...rest}
                         {...accordionProps}
                         testID = {testID}
                         extraData = {this.state.refresh}

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

@@ -308,6 +308,7 @@ export default class CommonDatagridComponent extends AppComponent {
         return ;
     }
     canPaginateData(){
+        if(this.props.handlePagination === false) return false;
         return false;
     }
     getFiltersProps(){
@@ -752,7 +753,41 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         this.handlePagination(newStart, limit, nextPage);
     }
-
+    /*** pour le rendu personalisé de la pagination */
+    renderCustomPagination(){
+        if(typeof this.props.renderCustomPagination ==='function'){
+            const r = this.props.renderCustomPagination({
+                context:this,refresh:this.refresh.bind(this)
+            });
+            return React.isValidElement(r)? r : null;
+        }
+        return null;
+    }
+    /*** permet de faire le rendu de certaines entête personalisés 
+     * utile lorsque l'on veut par exemple afficher d'autres information au niveau de l'entête du tableau
+    */
+    renderCustomMenu(){
+        const customMenu = []
+        Object.map(this.props.customMenu,(menu,i)=>{
+            if(isObj(menu)){
+                const {onPress,menu,label,text,children,...rest} = menu;
+                const args = {context:this,refresh:this.refresh.bind(this)};
+                const lCB = defaultVal(children,label,text);
+                const labelText = typeof lCB ==='function'? lCB(args) : lCB;
+                if(labelText === false || !React.isValidElement(labelText,true)) return;
+                customMenu.push({
+                    ...rest,
+                    label : labelText,
+                    onPress : (event)=>{
+                        if(typeof onPress =='function'){
+                            return onPress({...React.getOnPressArgs(event),...args})
+                        }
+                    }
+                })
+            }
+        });
+        return customMenu;
+    }
     /*** aller à la dernière page */
     _goToLastPage(){
         let { start,limit} = this._pagination;
@@ -1320,7 +1355,7 @@ export default class CommonDatagridComponent extends AppComponent {
             this._pagination.start = 0;
         }
         this.filtersSelectors = {selector:this.getFilters()};
-        return this.fetchData({force:true,fetchOptions:this.filtersSelectors});
+        return this.fetchData({force:true,isFiltering : true,fetchOptions:this.filtersSelectors});
     }
     onSetQueryLimit(){
         if(!this.canSetQueryLimit()) return;
@@ -1334,7 +1369,7 @@ export default class CommonDatagridComponent extends AppComponent {
         this.currentDatagridQueryLimit = this.getSessionData("dataSourceQueryLimit");
         setQueryLimit(this.currentDatagridQueryLimit,(limit)=>{
             this.setSessionData("dataSourceQueryLimit",limit)
-            notify.success("Le nombre maximal d'élément a été définit à la valeur "+(limit==0?" infinit ":limit.formatNumber())+". Cette valeur sera prise en compte à la prochaine réactualisation du tableau")
+            notify.success("Le nombre maximal d'élément à récuperer par page a été définit à la valeur "+(limit==0?" infinit ":limit.formatNumber())+". Cette valeur sera prise en compte à la prochaine réactualisation du tableau")
         });
     }
     
@@ -1348,6 +1383,9 @@ export default class CommonDatagridComponent extends AppComponent {
         return 0;
     }
     canHandleQueryLimit(){
+        if(typeof this.props.handleQueryLimit ==='boolean'){
+            return this.props.handleQueryLimit;
+        }
         return true;
     }
     renderQueryLimit(content){
@@ -1357,7 +1395,7 @@ export default class CommonDatagridComponent extends AppComponent {
         let s = "";
         let canSetQ = this.canSetQueryLimit();
         if(canSetQ){
-            s = ".\nPressez pendent quelques secondes pour modifier cette valeur du nombre limite d'éléments de la liste";
+            s = ".\nPressez pendent quelques secondes pour modifier cette valeur du nombre limite d'éléments de la liste par page";
         }
         else if(isDecimal(cLImit)){
             cLImit = (" de "+cLImit.formatNumber())
@@ -1666,16 +1704,14 @@ export default class CommonDatagridComponent extends AppComponent {
              else if(_type =='select_country' || _type =='selectcountry'){
                 _render = <Flag withCode {...columnDef} length={undefined} width={undefined} height={undefined} code={defaultValue}/>
              }
-             ///le lien vers le table data se fait via une colonne de type selecttabledata ou select_tabledata ou potant l'une des propriétés foreignKeyTable ou linkToTable de type chaine de caractère non nulle
-             else if(arrayValueExists(['piece','selecttabledata','id'],_type) || isNonNullString(columnDef.linkToTable) || isNonNullString(columnDef.foreignKeyTable)){
-                let tableName = defaultStr(columnDef.linkToTable && columnDef.linkToTable,columnDef.foreignKeyTable && columnDef.foreignKeyTable,columnDef.tableName,columnDef.table).toUpperCase();
+             ///le lien vers le table data se fait via la colonne ayant la propriété foreignKeyTable de type chaine de caractère non nulle
+             else if(isNonNullString(columnDef.foreignKeyTable)){
                 const id = rowData[columnField]?.toString();
                 if(isNonNullString(id)){
                     _render = <TableLink 
-                        tableName = {tableName} 
                         id = {id}
+                        {...columnDef}
                         data = {rowData}
-                        columnDef = {columnDef}
                         columnField = {columnField}
                     >
                         {rowData[columnField]}
@@ -1950,6 +1986,14 @@ CommonDatagridComponent.propTypes = {
     /*** pour le rendu du footer, pied de page en affichage accordion */
     sessionName : PropTypes.string,
     onFetchData : PropTypes.func,
+    handleQueryLimit : PropTypes.bool, ///si le datagrid devra gérer les queryLimit
+    /**** les menus customisés à ajouter au composant Datagrid */
+    customMenu : PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.object),
+        PropTypes.objectOf(PropTypes.object),
+    ]),
+    /**** la fonction permettant de faire le rendu dun contenu paginé, personalisé */
+    renderCustomPagination : PropTypes.func,
     getActionsArgs : PropTypes.func,//fonction permettant de récupérer les props supplémentaires à passer aux actions du datagrid
 }
 

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

@@ -60,7 +60,7 @@ export default class CommonTableDatagrid extends CommonDatagrid{
         la table dans la base common.
         Elle pourra éventuellement passer directement la limite et les filtres à la fonction fetchdata
     */
-    fetchData ({cb,callback,force,fetchOptions}){
+    fetchData ({cb,callback,force,fetchOptions,...rest}){
         if(!this._isMounted()) return Promise.resolve(this.state.data);
         if(this.isFetchingData) {
             if(!isPromise(this.fetchingPromiseData)){
@@ -92,7 +92,7 @@ export default class CommonTableDatagrid extends CommonDatagrid{
                     }
                 }
                 this.beforeFetchData(fetchOptions);
-                if(typeof this.props.beforeFetchData =='function' && this.props.beforeFetchData({context:this,force,fetchOptions,options:fetchOptions}) === false){
+                if(typeof this.props.beforeFetchData =='function' && this.props.beforeFetchData({...rest,context:this,force,fetchOptions,options:fetchOptions}) === false){
                     this.isFetchingData = false;
                     return resolve(this.state.data);
                 }

package/src/components/Datagrid/SWRDatagrid.js

@@ -7,6 +7,8 @@
  */
 import Datagrid from "./IndexComponent";
 import {defaultStr,defaultObj,defaultVal,isObjOrArray,isObj,extendObj} from "$utils";
+import {Pressable} from "react-native";
+import SimpleSelect from "$ecomponents/SimpleSelect";
 import React from "$react";
 import Auth from "$cauth";
 import DateLib from "$lib/date";
@@ -22,6 +24,9 @@ import appConfig from "$capp/config";
 import APP from "$capp/instance";
 import cAction from "$cactions";
 import PropTypes from "prop-types";
+import {isDesktopMedia} from "$dimensions";
+import ActivityIndicator from "$ecomponents/ActivityIndicator";
+import {Menu} from "$ecomponents/BottomSheet";
 
 const timeout = 5000*60*60;
 export const swrOptions = {
@@ -31,7 +36,9 @@ export const swrOptions = {
     errorRetryInterval : timeout*2,
     errorRetryCount : 5,
 }
-
+const getDefaultPaginationRowsPerPageItems = ()=>{
+    return [5,10,15,20,25,30,40,50,60,80,100,500,1000,...(isDesktopMedia() ? [1500,2000,2500,3000,3500,4000,4500,5000,10000]:[])];
+}
 /****la fonction fetcher doit toujours retourner : 
  *  1. la liste des éléments fetchés dans la props data
  *  2. le nombre total d'éléments de la liste obtenue en escluant les clause limit et offset correspondant à la même requête
@@ -53,10 +60,13 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         fetchData,
         fetchPath,
         fetcher,
+        ListFooterComponent,
+        testID,
         ...rest
     } = props;
     rest = defaultObj(rest);
     rest.exportTableProps = defaultObj(rest.exportTableProps)
+    const firstPage = 1;
     const tableName = defaultStr(table.tableName,table.table).trim().toUpperCase();
     canMakePhoneCall = defaultBool(canMakePhoneCall,table.canMakePhoneCall);
     makePhoneCallProps = defaultObj(makePhoneCallProps,rest.makePhoneCallProps,table.makePhoneCallProps);
@@ -98,13 +108,30 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
     const hasResultRef = React.useRef(false);
     const totalRef = React.useRef(0);
     const isFetchingRef = React.useRef(false);
+    const pageRef = React.useRef(1);
+    const limitRef = React.useRef(500);
+    const isInitializedRef = React.useRef(false);
+    testID = defaultStr(testID,"RNSWRDatagridComponent")
     const {error, isValidating,isLoading,refresh} = useSWR(fetchPath,{
         fetcher : (url,opts)=>{
+            if(!isInitializedRef.current) {
+                isFetchingRef.current = false;
+                return;
+            }
             opts = extendObj({},opts,fetchOptionsRef.current);
             opts.queryParams = defaultObj(opts.queryParams);
             opts.queryParams.withTotal = true;
+            opts.queryParams.limit = limitRef.current;
+            opts.queryParams.page = pageRef.current -1;
             const fetchCB = ({data,total})=>{
                 totalRef.current = total;
+                /***
+                 * if(pageRef.current ===firstPage){
+                        dataRef.current = data;
+                    } else {
+                        dataRef.current = prevPage != pageRef.current ? (isObj(data)?{...dataRef.current,...data}:[...dataRef.current,...data]) : data;
+                    }
+                 */
                 dataRef.current = data;
                 hasResultRef.current = true;
                 return data;
@@ -142,10 +169,41 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         showProgressRef.current = showProgress ? typeof showProgress ==='boolean' : false;
         if(isFetchingRef.current) return;
         refreshCBRef.current = ()=>{
-            showProgressRef.current = false;
+            //showProgressRef.current = false;
         };
         refresh();
     }
+    const canPagninate = ()=>{
+        if(typeof totalRef.current !=='number' || typeof pageRef.current !='number' || typeof limitRef.current !='number') return false;
+        if(limitRef.current <= 0) return false;
+        return true;
+    }
+    const getTotalPages = ()=>{
+        if(!canPagninate()) return false;
+        return Math.ceil(totalRef.current / limitRef.current);;
+    };
+    const getNextPage = ()=>{
+        if(!canPagninate()) return false;
+        const totalPages = getTotalPages();
+        let nPage = pageRef.current+1;
+        if(nPage > totalPages){
+            nPage  = totalPages;
+        }
+        if(nPage === pageRef.current){
+            return false;
+        }
+        return nPage;
+    },getPrevPage = ()=>{
+        if(!canPagninate()) return false;
+        let pPage = pageRef.current - 1;
+        if(pPage < firstPage){
+            pPage  = firstPage;
+        }
+        if(pPage === pageRef.current){
+            return false;
+        }
+        return pPage;
+    }
     React.useEffect(()=>{
         const upsert = cAction.upsert(tableName);
         const remove = cAction.remove(tableName);
@@ -159,15 +217,138 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
             APP.off(remove,onUpsert);
         }
     },[]);
+    const loading = (isLoading|| isValidating);
+    const pointerEvents = loading ?"node" : "auto";
     return (
         <Datagrid 
+            testID = {testID}
             {...rest}
             {...defaultObj(table.datagrid)} 
-            isLoading = {(isLoading|| isValidating) && !error && showProgressRef.current && true || false}
+            renderCustomPagination = {({context})=>{
+                if(!canPagninate()) return null;
+                const page = pageRef.current, totalPages = getTotalPages(), prevPage = getPrevPage(),nextPage = getNextPage();
+                const iconProp = {
+                    size : 25,
+                    style : [theme.styles.noMargin,theme.styles.noPadding],
+                }
+                const sStyle = [styles.limitStyle1,theme.styles.noPadding,theme.styles.noMargin];
+                return <View testID={testID+"_PaginationContainer"} pointerEvents={pointerEvents}>
+                    <View style={[theme.styles.row,theme.styles.w100]} pointerEvents={pointerEvents} testID={testID+"_PaginationContentContainer"}>
+                        <Menu
+                            testID={testID+"_SimpleSelect"}
+                            style = {sStyle}
+                            anchor = {(p)=>{
+                                return <Pressable style={[theme.styles.noMargin,theme.styles.noPadding]} {...p} testID={testID+"MenuSelectLimit"}>
+                                    <Label primary  testID={testID+"_Label"} style={[{fontSize:15}]}>
+                                        {limitRef.current.formatNumber()}
+                                    </Label>
+                                </Pressable>
+                            }}
+                            title = {'Limite du nombre d\'éléments par page'}
+                            items = {getDefaultPaginationRowsPerPageItems().map((item)=>{
+                                return {
+                                    text : item.formatNumber(),
+                                    icon : limitRef.current == item ? 'check' : null,
+                                    primary : limitRef.current === item ? true : false,
+                                    onPress : ()=>{
+                                        if(item == limitRef.current) return;
+                                        limitRef.current = item;
+                                        pageRef.current = firstPage;
+                                        setTimeout(() => {
+                                            doRefresh(true);
+                                        }, (500));
+                                    }
+                                }
+                            })}
+                        />
+                        <Icon
+                            ///firstPage
+                            {...iconProp}
+                            title = {"Aller à la première page"}
+                            name="material-first-page"
+                            disabled = {pageRef.current <= 1 && true || false}
+                            onPress = {()=>{
+                                if(pageRef.current <= firstPage) return;
+                                pageRef.current = firstPage;
+                                doRefresh(true);
+                            }}
+                        />
+                        <Icon
+                            //decrement
+                            {...iconProp}
+                            title = {"Aller à la page précédente {0}".sprintf(prevPage && prevPage.formatNumber()||undefined)}
+                            name="material-keyboard-arrow-left"
+                            disabled = {page === prevPage || getPrevPage() === false ? true : false}
+                            onPress = {()=>{
+                                const page = getPrevPage();
+                                if(page === false) return;
+                                if(pageRef.current === page) return;
+                                pageRef.current = page;
+                                doRefresh(true);
+                            }}
+                            
+                        />
+                        <View testID={testID+"_PaginationLabel"}>
+                            <Label style={{fontSize:15}}>
+                                {page.formatNumber()}-{totalPages.formatNumber()}{" / "}{totalRef.current.formatNumber()}
+                            </Label>
+                        </View>
+                        <Icon
+                            //increment
+                            {...iconProp}
+                            title = {"Aller à la page suivante {0}".sprintf(nextPage && nextPage.formatNumber()||undefined)}
+                            name="material-keyboard-arrow-right"
+                            disabled = {nextPage >= totalPages || getNextPage() === false ? true : false}
+                            onPress = {()=>{
+                                const page = getNextPage();
+                                if(page === false) return;
+                                if(pageRef.current === page) return;
+                                pageRef.current = page;
+                                doRefresh(true);
+                            }}
+                        />
+                        <Icon
+                            //lastPage
+                            {...iconProp}
+                            name="material-last-page"
+                            title = {"Aller à la dernière page {0}".sprintf(totalPages && totalPages.formatNumber()||undefined)}
+                            disabled = {page >= totalPages ? true : false}
+                            onPress = {()=>{
+                                const page = getTotalPages();
+                                if(pageRef.current >= page) return;
+                                pageRef.current = page;
+                                doRefresh(true);
+                            }}
+                            
+                        />
+                    </View>
+                </View>
+            }}
+            ListFooterComponent = {(props)=>{
+                const r = typeof ListFooterComponent =='function'? ListFooterComponent(props) : null;
+                if(!loading) return r;
+                const aContent = <View testID={testID+"_ListHeaderActivityIndicator"} style={[theme.styles.w100,theme.styles.justifyContentCenter]}>
+                    <ActivityIndicator color={theme.colors.primary}/>
+                </View>;
+                if(r){
+                    return <View testID={testID+"_ListHeaderContainer"} style={[theme.styles.w100]}>
+                        {r}
+                        {aContent}
+                    </View>
+                }
+                return aContent;
+            }}
+            handleQueryLimit = {false}
+            handlePagination = {false}
+            isLoading = {loading && !error && showProgressRef.current && true || false}
             beforeFetchData = {({fetchOptions:opts,force})=>{
                 opts.fields = fetchFields;
                 opts = getFetchOptions({showError:showProgressRef.current,...opts});
+                isInitializedRef.current = true;
                 fetchOptionsRef.current = opts;
+                if(force){
+                    pageRef.current = firstPage;
+                }
                 doRefresh(force);
                 return false;
             }}
@@ -218,6 +399,11 @@ const styles = StyleSheet.create({
     labelTitle: {
         fontSize : 18,
     },
+    limitStyle : {
+        backgroundColor:'transparent',
+        width:50,
+        height : 35,
+    },
     emptyText : {
         fontSize : 16,
         fontWeight : 'bold',

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

@@ -170,20 +170,21 @@ const DatagridFactory = (Factory)=>{
             if(selectableMultiple && max && defaultBool(this.props.selectableMultiple,true)){
                 max = max.formatNumber();
                 restItems = [
-                    {
-                        text : "Sélect "+max,
+                    ...this.renderCustomMenu(),
+                    ...(selectableMultiple ? [{
+                        label : "Sélect "+max,
                         icon : "select-all",
                         onPress : (x,event)=>{
                             this.handleAllRowsToggle(true);
                         }
                     },
                     {
-                        text : "Tout désélec",
+                        label : "Tout désélec",
                         onPress : (x,event)=>{
                             this.handleAllRowsToggle(false);
                         },
                         icon : "select"
-                    }
+                    }] : [])
                 ]
             }   
             const rPagination = showPagination ? <View style={[styles.paginationContainer]}>
@@ -192,6 +193,7 @@ const DatagridFactory = (Factory)=>{
                         <View testID={testID+"_HeaderQueryLimit"}>
                             {this.renderQueryLimit(this.state.data.length.formatNumber())}
                         </View>
+                        {this.renderCustomPagination()}
                         {!isMobile && <>
                             <Button normal style={[styles.paginationItem]} icon = {"refresh"} onPress = {this.refresh.bind(this)}>
                                 Rafraichir
@@ -214,19 +216,15 @@ const DatagridFactory = (Factory)=>{
                             >   
                                     {showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux'}
                             </Button>:null}
-                            {selectableMultiple && (<>
-                                {restItems.map((item,index)=>{
-                                    return <Button 
-                                        normal
-                                        style={styles.paginationItem}
-                                        key = {index}
-                                        icon = {item.icon}
-                                        onPress = {item.onPress}                                    
-                                    >
-                                        {item.text}
-                                    </Button>
-                                })}
-                            </>)}
+                            {restItems.map((item,index)=>{
+                                return <Button 
+                                    normal
+                                    key = {index}
+                                    {...item}
+                                    style={[styles.paginationItem,item.style]}
+                                    children = {item.children|| item.label}
+                                />
+                             })}
                         </>}
                         {exportable && (
                             <>{/**
@@ -320,6 +318,7 @@ const DatagridFactory = (Factory)=>{
                 </View>
                 <Table
                     ref = {this.listRef}
+                    {...rest}
                     hasFooters = {hasFooterFields}
                     showFilters = {showFilters}
                     showFooters = {showFooters}

package/src/components/TableLink/index.js

@@ -11,15 +11,16 @@ import {defaultStr,isPromise,defaultObj} from "$utils";
 import {open as openPreloader,close as closePreloader} from "$preloader";
 import {styles as _styles} from "$theme";
 import Tooltip from "$ecomponents/Tooltip";
+import {navigateToTableData} from "$enavigation/utils";
 
 const TableLinKComponent = React.forwardRef((props,ref)=>{
-    let {disabled,labelProps,server,containerProps,id,columnDef,tableName,table:customTable,data,testID,Component,routeName,routeParams,component,primary,triggerProps,onPress,children, ...rest} = props;
+    let {disabled,labelProps,server,containerProps,id,fetchForeignData,foreignKeyTable,foreignKeyColumn,data,testID,Component,routeName,routeParams,component,primary,triggerProps,onPress,children, ...rest} = props;
     testID = defaultStr(testID,"RN_TableDataLinkContainer")
-    tableName = defaultStr(tableName,customTable).trim();
+    foreignKeyTable = defaultStr(foreignKeyTable).trim();
+    foreignKeyColumn = defaultStr(foreignKeyColumn).trim();
     rest = defaultObj(rest);
     containerProps = defaultObj(containerProps)
     labelProps = defaultObj(labelProps);
-    columnDef = defaultObj(columnDef);
     data = defaultObj(data);
     id = defaultStr(id);
     if(!id){
@@ -28,10 +29,25 @@ const TableLinKComponent = React.forwardRef((props,ref)=>{
     const pointerEvents = disabled || !id? 'none' : 'auto';
     const onPressLink = (event)=>{
         React.stopEventPropagation(event);
-        const r = typeof onPress =='function'? onPress({...React.getOnPressArgs(event),...columnDef,tableName,table:tableName,data,id,value:id,}) : undefined;
+        const args = {...React.getOnPressArgs(event),...rest,foreignKeyTable,foreignKeyColumn,data,id,value:id};
+        let r = typeof onPress =='function'? onPress(args) : undefined;
+        if(r === false) return;
+        const cb = (a)=>{
+            const r2 = typeof fetchForeignData === 'function'? fetchForeignData({...args,...defaultObj(a)}) : undefined;
+            if(isPromise(r2)){
+                return r2.then((data)=>{
+                    if(isObj(data) && data[foreignKeyColumn] !== undefined){
+                        navigateToTableData({tableName:foreignKeyTable,data});
+                    }
+                });
+            }
+            return Promise.reject({msg:'type de données retournée par la fonction fetchForeignKeyData invalide'});
+        }
+        openPreloader("traitement de la requête...");
         if(isPromise(r)){
-            openPreloader("traitement de la requête...");
-            r.finally(closePreloader);
+            r.then(cb).finally(closePreloader);
+        } else {
+            cb().finally(closePreloader);
         }
     }
     rest.style = [rest.style,_styles.cursorPointer];
@@ -47,6 +63,9 @@ export default TableLinKComponent;
 
 
 TableLinKComponent.propTypes = {
+    foreignKeyColumn : PropTypes.string.isRequired,//le nom de la colonne de la clé étrangère
+    foreignKeyTable : PropTypes.string.isRequired, //le nom de la table référencée
+    fetchForeignData : PropTypes.func, // la fonction permettant de chercher la données à distance
     server : PropTypes.string,//le serveur sur lequel rechercher les données
     primary : PropTypes.bool,//si le composant sera stylé en theme primary de react
     ///les props à utiliser pour afficher la table de données en cas de click sur le lien

package/src/layouts/DatabaseStatistics/DatabaseStatistic.js

@@ -13,10 +13,8 @@ import cActions from "$cactions";
 import {View} from "react-native";
 
 export default function DatabaseStatisticContainer (props){
-    const [state,setState] = React.useState({
-        isLoading : true,
-        count : 0,
-    });
+    const [count,setCount] = React.useState(0);
+    const [isLoading,setIsLoading] = React.useState(true);
     let {table,fetchCount,index,testID,title,icon,onPress} = props;
     title = defaultStr(title)
     table = defaultObj(table);
@@ -28,14 +26,14 @@ export default function DatabaseStatisticContainer (props){
     const refresh = ()=>{
         if(refreshingRef.current || !isMounted()) return;
         refreshingRef.current = true;
+        setIsLoading(true);
         setTimeout(()=>{
            fetchCount().then((count)=>{
-                setState({...state,isLoading:false,count});
+                setCount(count);
+                setIsLoading(false);
                 refreshingRef.current = false;
             }).catch((e)=>{
-                setState({
-                    isLoading : false, count : 0,
-                });
+                setIsLoading(false);
                 refreshingRef.current = false;
             });
         },100);
@@ -50,10 +48,6 @@ export default function DatabaseStatisticContainer (props){
             APP.off(cActions.remove(tableName),refresh);
         }
     },[]);
-    React.useEffect(()=>{
-        refresh();
-    },[props])
-    const {isLoading,count} = state;
     return <Item
         testID = {defaultStr(testID,"RN_DatabaseStatistic_"+table)}
         onPress = {(args)=>{
@@ -65,7 +59,6 @@ export default function DatabaseStatisticContainer (props){
         left = {(aProps)=>{
             return <Avatar suffix={index} {...aProps} icon= {icon} size={40} label={title}/>
         }}
-        //right = {(rP)=><Icon {...rP} name='refresh' onPress={refresh}/>}
         title = {<Label splitText numberOfLines={1} primary style={[{fontSize:15}]}>{title}</Label>}
         titleProps = {{primary : true}}
         description = {isLoading?<View style={[theme.styles.justifyContentFlexStart,theme.styles.alignItemsFlexStart]}>

package/src/layouts/Screen/TableData.js

@@ -29,6 +29,43 @@ const DEFAULT_TABS_KEYS = "main-tabs";
 
 const TIMEOUT = 50;
 
+const checkPrimary = (data,f)=>{
+    return !(!(f in data) || (data[f] == null) || (!data[f] && typeof data !=='number'));
+}
+/*** vérifie si le document passé en paramètre est éditable
+ * @param {object} data la données à vérifier
+ * @param {object| array} les champs sur lesquels se baser pour vérifier si la donénes est une mise à jour
+ * @param {func} checkPrimaryKey la foncition permettant de vérifier s'il s'agit d'une clé primaire pour la données courante
+ */
+export const isDocEditing = (data,fields,checkPrimaryKey)=>{
+    if(!isObj(data) || !isObjOrArray(fields)) return false;
+    
+            let hasPrimaryFields = false;
+            let hasValidated = true;
+            for(let i in fields){
+                const field = fields[i];
+                if(typeof checkPrimaryKey =='function') {
+                    hasPrimaryFields = true;
+                    if(checkPrimaryKey({field,i,index:i,data}) === false){
+                        return false;
+                    }
+                    continue;
+                }
+                if(!isObj(field)) continue;
+                hasPrimaryFields = true;
+                const f = defaultStr(field.field,i);
+                if(field.primaryKey === true){
+                    if(!checkPrimary(data,f)){
+                        hasValidated = false;
+                    }
+                }
+            }
+            if(hasPrimaryFields){
+                return hasValidated;
+            }
+    return false;
+}
+
 export default class TableDataScreenComponent extends FormDataScreen{
     constructor(props){
         super(props);
@@ -49,7 +86,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
         Object.map(table.fields,(field,i)=>{
             if(isObj(field) && field.form !== false){
                 fields[i] = Object.clone(field);
-                if(field.primary === true){
+                if(field.primaryKey === true){
                     primaryKeyFields[field.field || i] = true;
                 }
             } else {
@@ -420,17 +457,9 @@ export default class TableDataScreenComponent extends FormDataScreen{
     isDocEditing(data){
         data = defaultObj(data);
         if(!this.isDocEditingProp){
-            let hasPrimaryFields = false;
-            let hasValidated = true;
-            Object.map(this.primaryKeyFields,(v,f)=>{
-                hasPrimaryFields = true;
-                if(!(f in data) || (data[f] == null) || (!data[f] && typeof data !=='number')){
-                    hasValidated = false;
-                }
-            });
-            if(hasPrimaryFields){
-                return hasValidated;
-            }
+            if(isDocEditing(data,this.primaryKeyFields,({index:field,data})=>{
+                return checkPrimary(data,field);
+            })) return true;
         }
         return super.isDocEditing(data);
     }