@fto-consult/expo-ui 2.9.6 → 2.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.9.6",
+  "version": "2.10.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -65,7 +65,7 @@
     "@expo/metro-config": "^0.4.0",
     "@expo/vector-icons": "^13.0.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.15.2",
+    "@fto-consult/common": "^1.19.1",
     "@fto-consult/expo-ui": "^2.9.2",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",

package/src/App.js

@@ -1,5 +1,6 @@
 import '$session';
 import React from 'react';
+import {SWRConfig} from "$swr";
 import {defaultObj} from "$utils";
 import  {updateTheme,defaultTheme} from "$theme";
 import {Provider as PaperProvider } from 'react-native-paper';
@@ -27,6 +28,8 @@ import {isMobileNative} from "$cplatform";
 import {setDeviceIdRef} from "$capp";
 import appConfig from "$capp/config";
 import {showPrompt} from "$components/Dialog/confirm";
+import { AppState } from 'react-native'
+import {canFetchOffline} from "$capi/utils";
 
 import * as Utils from "$utils";
 Object.map(Utils,(v,i)=>{
@@ -38,10 +41,20 @@ Object.map(Utils,(v,i)=>{
 export default function getIndex(options){
   const {App,onMount,onUnmount,preferences:appPreferences} = defaultObj(options);
   return function MainIndexComponent() {
+    const isScreenFocusedRef = React.useRef(true);
     React.useEffect(()=>{
         ///la fonction de rappel lorsque le composant est monté
         let cb = typeof onMount =='function'? onMount() : null;
+        const onScreenFocus = ()=>{
+            isScreenFocusedRef.current = true;
+        }, onScreenBlur = ()=>{
+           isScreenFocusedRef.current = false;
+        }
+        APP.on(APP.EVENTS.SCREEN_FOCUS,onScreenFocus);
+        APP.on(APP.EVENTS.SCREEN_BLUR,onScreenBlur);
         return ()=>{
+          APP.off(APP.EVENTS.SCREEN_FOCUS,onScreenFocus);
+          APP.off(APP.EVENTS.SCREEN_BLUR,onScreenBlur);
           if(typeof onUnmount =='function'){
              onUnmount();
           }
@@ -64,38 +77,75 @@ export default function getIndex(options){
     const child = <Index theme={theme}/>;
     const children = typeof App =='function'? App({children:child,APP}) : child;
     return (
-      <GestureHandlerRootView style={{ flex: 1 }}>
-          <PaperProvider 
-              theme={theme}
-              settings={{
-                icon: (props) => {
-                   return <FontIcon {...props}/>
-                },
-              }}
-          >
-            <SafeAreaProvider>
-              <AuthProvider>
-                  <PortalProvider>
-                    <Portal.Host>
-                        <ErrorBoundary>
-                              <StatusBar/>
-                              <PreferencesContext.Provider value={preferences}>
-                                <DropdownAlert ref={notificationRef}/> 
-                                <PreloaderProvider/>   
-                                <DialogProvider responsive/>
-                                <AlertProvider SimpleSelect={SimpleSelect}/>
-                                <FormDataDialogProvider/>  
-                                {children}
-                                <ErrorBoundaryProvider/>
-                                <BottomSheetProvider/>
-                              </PreferencesContext.Provider>  
-                        </ErrorBoundary>
-                    </Portal.Host>
-                  </PortalProvider>
-                </AuthProvider>
-            </SafeAreaProvider>
-          </PaperProvider>
-      </GestureHandlerRootView>
+      <SWRConfig 
+        value={{
+          provider: () => new Map(),
+          isOnline() {
+            /* Customize the network state detector */
+            if(canFetchOffline) return true;
+            return APP.isOnline();
+          },
+          isVisible() {
+            /* Customize the visibility state detector */
+            return isScreenFocusedRef.current;
+          },
+          initFocus(callback) {
+            let appState = AppState.currentState
+            const onAppStateChange = (nextAppState) => {
+              /* If it's resuming from background or inactive mode to active one */
+              if (appState.match(/inactive|background/) && nextAppState === 'active') {
+                callback()
+              }
+              appState = nextAppState
+            }
+            // Subscribe to the app state change events
+            const subscription = AppState.addEventListener('change', onAppStateChange);
+            return () => {
+              subscription?.remove()
+            }
+          },
+          initReconnect(callback) {
+            /* Register the listener with your state provider */
+            APP.on(APP.EVENTS.GO_ONLINE,callback);
+            return ()=>{
+              APP.off(APP.EVENTS.GO_ONLINE,callback);
+            }
+          }
+        }}
+      >
+          <GestureHandlerRootView style={{ flex: 1 }}>
+            <PaperProvider 
+                theme={theme}
+                settings={{
+                  icon: (props) => {
+                    return <FontIcon {...props}/>
+                  },
+                }}
+            >
+              <SafeAreaProvider>
+                <AuthProvider>
+                    <PortalProvider>
+                      <Portal.Host>
+                          <ErrorBoundary>
+                                <StatusBar/>
+                                <PreferencesContext.Provider value={preferences}>
+                                  <DropdownAlert ref={notificationRef}/> 
+                                  <PreloaderProvider/>   
+                                  <DialogProvider responsive/>
+                                  <AlertProvider SimpleSelect={SimpleSelect}/>
+                                  <FormDataDialogProvider/>  
+                                  {children}
+                                  <ErrorBoundaryProvider/>
+                                  <BottomSheetProvider/>
+                                </PreferencesContext.Provider>  
+                          </ErrorBoundary>
+                      </Portal.Host>
+                    </PortalProvider>
+                  </AuthProvider>
+              </SafeAreaProvider>
+            </PaperProvider>
+        </GestureHandlerRootView>
+      </SWRConfig>
     );
   }
 };

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

@@ -413,7 +413,7 @@ const DatagridFactory = (Factory)=>{
             const containerHeight = winheight - y;
             this.renderedListHeight = Math.max(300,containerHeight - (this.hasScrollViewParent() ? 50:0));
             const isLoading = this.isLoading();
-            const _progressBar = this.getProgressBar(!this.state.isReady);
+            const _progressBar = this.getProgressBar();
             const pointerEvents = isLoading || _progressBar ? "none":"auto"; 
             
             const {

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

@@ -13,7 +13,7 @@ import Image from "$ecomponents/Image";
 import Icon,{COPY_ICON} from "$ecomponents/Icon";
 import filterUtils from "$cfilters";
 import Hashtag from "$ecomponents/Hashtag";
-import {sortBy,isDecimal,extendObj,isObjOrArray,defaultNumber,defaultStr,isFunction,defaultBool,defaultArray,defaultObj,isNonNullString,defaultDecimal} from "$utils";
+import {sortBy,isDecimal,extendObj,isObjOrArray,isOb,defaultNumber,defaultStr,isFunction,defaultBool,defaultArray,defaultObj,isNonNullString,defaultDecimal} from "$utils";
 import {Datagrid as DatagridContentLoader} from "$ecomponents/ContentLoader";
 import React from "$react";
 import DateLib from "$lib/date";
@@ -31,7 +31,8 @@ import copyToClipboard from "$capp/clipboard";
 import { Pressable } from "react-native";
 import TableLink from "$TableLink";
 import appConfig from "$capp/config";
-import stableHash from "stable-hash"
+import stableHash from "stable-hash";
+import DatagridProgressBar from "./ProgressBar";
 
 export const arrayValueSeparator = ", ";
 
@@ -96,9 +97,16 @@ export default class CommonDatagridComponent extends AppComponent {
             [footerFieldName] : {
                 value : uniqid(footerFieldName),override:false, writable: false
             },
+            progressBarRef : {
+                value : {current : null}
+            },
+            isLoadingRef : {
+                value : {current:false}
+            },
             currentFilteringColumns : {value:{}}
         }) 
-        
+        this.isLoading = this.isLoading.bind(this);
+        this.getProgressBar = this.getProgressBar.bind(this);
         this.state.sort.dir = defaultStr(this.state.sort.dir,this.state.sort.column == "date"?"desc":'asc')
         this.hasColumnsHalreadyInitialized = false;
         this.initColumns(props.columns);
@@ -142,6 +150,39 @@ export default class CommonDatagridComponent extends AppComponent {
             windowHeight,
         }
         this.selectableColumnRef = React.createRef(null);
+        let isPv = this.isPivotDatagrid();
+        if(isPv){
+            isPv = this.props.dataSourceSelector !== false;
+        } else isPv = this.props.dataSourceSelector === true ? true : false;
+        if(isPv){
+            let dataSourceSelectorProps = defaultObj(this.props.dataSourceSelectorProps);
+            ['table','tableName'].map((tb,idx)=>{
+                dataSourceSelectorProps[tb] = defaultStr(this.props[tb],dataSourceSelectorProps[tb]);
+            });
+            let cDB = []//DBSelector.getDefaultSelected(dataSourceSelectorProps,this.currentDataSources,this.props);
+            let sDB = this.getSessionData().selectedDataSources;
+            cDB = Object.toArray(cDB);
+            if(cDB.length){
+                this.currentDataSources = cDB
+            } else {
+                this.currentDataSources = sDB;
+            }   
+            this.setSessionData({selectedDataSources:this.currentDataSources});
+        } else {
+            this.currentDataSources = Object.toArray(this.currentDataSources);
+        }
+        if(isPv){
+            isPv = this.props.dataSourceSelector !== false;
+        } else isPv = this.props.dataSourceSelector === true ? true : false;
+        if(isPv){
+            let dataSourceSelectorProps = defaultObj(this.props.dataSourceSelectorProps);
+            ['table','tableName'].map((tb)=>{
+                dataSourceSelectorProps[tb] = defaultStr(this.props[tb],this[tb],dataSourceSelectorProps[tb]);
+            });
+            this.setSessionData({selectedDataSources:this.currentDataSources});
+        } else {
+            this.currentDataSources = Object.toArray(this.currentDataSources);
+        }
     }
     bindResizeEvents(){
         return false;
@@ -1082,7 +1123,7 @@ export default class CommonDatagridComponent extends AppComponent {
         } else if(force){
             this.setSelectedRows();
         }
-        const state = {data,isLoading:false,sort : this._sort};
+        const state = {data,sort : this._sort};
         if((cb)){
             cb(state);
         }
@@ -1124,15 +1165,21 @@ export default class CommonDatagridComponent extends AppComponent {
    
 
     getProgressBar(props){
-        if(!this.isLoading() && props !== true) return null;
         if(typeof props !=='object' || !props){
             props = {};
         }
-        if(React.isValidElement(this.props.progressBar)) return this.props.progressBar ;
-        if(this.props.useLinesProgressBar === true || this.props.useLineProgressBar === true){
-            return CommonDatagridComponent.LineProgressBar(props);
-        }
-        return this.getDefaultPreloader(props);
+        const children = React.isValidElement(this.props.progressBar) ? this.props.progressBar : 
+            this.props.useLinesProgressBar === true || this.props.useLineProgressBar === true ? CommonDatagridComponent.LineProgressBar(props)
+            : this.getDefaultPreloader(props);
+        return <DatagridProgressBar
+            {...props}
+            onChange = {(context)=>{
+                this.isLoadingRef.current = context.isLoading;
+            }}
+            isLoading = {defaultBool(this.props.isLoading,this.isLoading())}
+            children = {children}  
+            ref = {this.progressBarRef}
+        />
     }
     handlePagination(start, limit, page) {
         this._previousPagination = this._pagination;
@@ -1217,7 +1264,25 @@ export default class CommonDatagridComponent extends AppComponent {
         const preparedFilters = prepareFilters(this.filters,{filter:this.canHandleFilterVal.bind(this),convertToSQL:this.willConvertFiltersToSQL()});
         return preparedFilters;
     }
-    fetchData(){}
+    onChangeDataSources(args){
+        let {dataSources,server} = args;
+        if(this.props.onChangeDataSources =='function' && this.props.onChangeDataSources({dataSources,prev:this.currentDataSources}) === false) return;
+        this.currentDataSources = dataSources;
+        this.setSessionData({selectedDatabases:dataSources}) 
+        if(JSON.stringify({dataSources:this.previousDataSources}) != JSON.stringify({dataSources})){
+            if(isObj(this.props.dataSourceSelectorProps) && isFunction(this.props.dataSourceSelectorProps.onChange)){
+                args.datagridContext = this;
+                this.props.dataSourceSelectorProps.onChange(args);
+            }
+            this.refresh(true);
+        } 
+        this.previousDataSources = dataSources;
+        this.previousServer = server;
+    }
+    beforeFetchData(){}
+    fetchData({fetchOptions}){
+        return Promise.resolve(this.state.data);
+    }
     /****  Filtre le tableau */
     doFilter ({value,field,selector,event,force}){
         if(!this._isMounted()) return;
@@ -1247,7 +1312,7 @@ export default class CommonDatagridComponent extends AppComponent {
             this._pagination.start = 0;
         }
         this.filtersSelectors = {selector:this.getFilters()};
-        return this.fetchData(true,null,this.filtersSelectors);
+        return this.fetchData({force:true,fetchOptions:this.filtersSelectors});
     }
     onSetQueryLimit(){
         if(!this.canSetQueryLimit()) return;
@@ -1304,7 +1369,18 @@ export default class CommonDatagridComponent extends AppComponent {
     forceRefresh(){
         this.refresh(true);
     }
-    refresh (force,cb){}
+    refresh (force,cb){
+        if(isFunction(force)){
+            let t = cb;
+            cb = force;
+            force = isBool(t)? t : true;
+        }
+        return this.fetchData({force:defaultBool(force,true)}).then((data)=>{
+            if(isFunction(cb)){
+                cb(data);
+            }
+        })
+    }
     onResizePage(){}
     componentDidMount(){
         super.componentDidMount();
@@ -1353,12 +1429,32 @@ export default class CommonDatagridComponent extends AppComponent {
             max = max ? Math.min(max,this.state.data.length,max) : this.state.data.length;
         }
         return max;
+    }
+    canSetIsLoading(){
+        return isObj(this.progressBarRef.current) && typeof this.progressBarRef.current.setIsLoading =='function' ? true : false;
+    }
+    setIsLoading(loading,cb){
+        if(this.canSetIsLoading() && typeof loading =='boolean'){
+            return this.progressBarRef.current.setIsLoading(loading,()=>{
+                if(typeof cb =='function'){
+                    cb();
+                }
+            });
+        } else if(typeof cb =='function'){
+            cb();
+        }
+        return false;
     }
      /**** met à jour l'état de progression de la mise à jour du tableau */
-     updateProgress(state,cb){
-        state = defaultObj(state);
-        state.isLoading = defaultBool(state.isLoading,!!!this.state.isLoading);
-        this.setState({...state},cb);
+     updateProgress(isLoading,cb){
+        this.isLoadingRef.current = defaultBool(isLoading,!!!this.isLoadingRef.current);
+        cb = typeof cb =='function'?cb : typeof isLoading =='function'? isLoading : null
+        if(this.canSetIsLoading()){
+            return this.setIsLoading(isLoading,cb);
+        }
+        cb && setTimeout(() => {
+            cb();
+        }, 500);
     }
     isAllRowsSelected(update){
         return this.selectedRowsCount && this.selectedRowsCount === this.getMaxSelectableRows()? true : false;
@@ -1408,17 +1504,18 @@ export default class CommonDatagridComponent extends AppComponent {
         return false;
     }
     UNSAFE_componentWillReceiveProps(nextProps){
-        if(!this.isTableData() && 'data' in nextProps && isObjOrArray(nextProps.data) && nextProps.data != this.state.data && (stableHash(nextProps.data) != stableHash(this.state.data))){
-            this.prepareData({data:nextProps.data,force:true},(state)=>{
-                this.setState(state)
-            });
-        }
+        if(!isObjOrArray(nextProps.data) || nextProps.data == this.props.data || stableHash(nextProps.data) == stableHash(this.props.data)) return;
+        this.prepareData({data:nextProps.data,force:true},(state)=>{
+            this.setState(state)
+        });
     }
     getDefaultPreloader(props){
         return CommonDatagridComponent.getDefaultPreloader();
     }
     isLoading (){
-        return this.state.isLoading === true ? true : false;
+        if(this.state.isReady === false) return true;
+        if(typeof this.props.isLoading =='boolean') return this.props.isLoading;
+        return this.isLoadingRef.current === true ? true : false;
     }
     getLinesProgressBar(){
         return CommonDatagridComponent.LinesProgressBar(this.props);

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

@@ -0,0 +1,58 @@
+// 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 {defaultBool} from "$utils";
+
+const DatagridProgressBar = React.forwardRef(({isLoading:customIsLoading,onChange,children},ref)=>{
+    const [isLoading,_setIsLoading] = React.useState(defaultBool(customIsLoading));
+    const isMounted = React.useIsMounted();
+    const loadingCbRef = React.useRef(null);
+    const cb = loadingCbRef.current;
+    loadingCbRef.current = null;
+    const setIsLoading = (loading)=>{
+        _setIsLoading(loading);
+    }
+    const context = {
+        isLoading,
+        setIsLoading : (loading,cb)=>{
+            if(!isMounted()){
+                if(typeof cb =='function'){
+                    return cb({});
+                }
+                return;
+            }
+            if(typeof loading =='boolean' && loading != isLoading){
+                loadingCbRef.current = cb;
+                setIsLoading(loading);
+            } else if(typeof cb =='function'){
+                cb({isLoading});
+            }
+        }
+    }
+    React.setRef(ref,context);
+    React.useEffect(()=>{
+        if(typeof customIsLoading =='boolean' && customIsLoading != isLoading){
+            setIsLoading(customIsLoading);
+        }
+    },[customIsLoading])
+    React.useEffect(()=>{
+        if(typeof cb =='function'){
+            cb({isLoading});
+        }
+        loadingCbRef.current = null;
+        if(typeof onChange =='function'){
+            onChange(context);
+        }
+    },[isLoading])
+    React.useEffect(()=>{
+        return ()=>{
+            React.setRef(ref,null);
+        }
+    },[]);
+    return !isLoading || !React.isValidElement(children) ? null : children;
+});
+
+DatagridProgressBar.displayName ="DatagridProgressBar";
+
+export default DatagridProgressBar;

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

@@ -1,8 +1,6 @@
 import CommonDatagrid from "./Common";
 import {defaultObj,extendObj,defaultStr,isNonNullString,isFunction,isPromise} from "$utils";
-import actions from "$actions";
 import PropTypes from "prop-types";
-import stableHash from "stable-hash";
 
 export default class CommonTableDatagrid extends CommonDatagrid{
     constructor(props){
@@ -20,20 +18,6 @@ export default class CommonTableDatagrid extends CommonDatagrid{
                 tableName : {value:tableName,override:false,writable:false}
             })
         }
-        let isPv = this.isPivotDatagrid();
-        if(isPv){
-            isPv = this.props.dbSelector !== false;
-        } else isPv = this.props.dbSelector === true ? true : false;
-        if(isPv){
-            let dbSelectorProps = defaultObj(this.props.dbSelectorProps);
-            ['table','tableName'].map((tb,idx)=>{
-                dbSelectorProps[tb] = defaultStr(this.props[tb],dbSelectorProps[tb]);
-            });
-            this.setSessionData({selectedDataSources:this.currentDataSources});
-        } else {
-            this.currentDataSources = Object.toArray(this.currentDataSources);
-        }
-        this.state.isLoading = true;
     }
     prepareFetchData(fetchData){
         this.INITIAL_STATE.fetchData = defaultVal(fetchData,this.props.fetchData);
@@ -42,7 +26,7 @@ export default class CommonTableDatagrid extends CommonDatagrid{
     onUpsertData =(arg) =>{
         if(!this._isMounted()) return;
         this.isDataJustComeToUpsert = true; ///on empêche d'afficher le progress bar
-        this.fetchData(true).finally(()=>{
+        this.fetchData({force:true}).finally(()=>{
             this.isDataJustComeToUpsert = undefined;
         });
     }
@@ -52,7 +36,7 @@ export default class CommonTableDatagrid extends CommonDatagrid{
         extendObj(this._events,{
             onUpsertData : this.onUpsertData.bind(this),
         });
-        this.fetchData(true);
+        this.fetchData({force:true});
     }
 
     componentWillUnmount(){
@@ -63,32 +47,7 @@ export default class CommonTableDatagrid extends CommonDatagrid{
     isTableData(){
         return true;
     }
-    onChangeDataSources(args){
-        let {dataSources,server} = args;
-        this.currentDataSources = dataSources;
-        if(JSON.stringify({dataSources:this.previousDataSources}) != JSON.stringify({dataSources})){
-            if(isObj(this.props.dbSelectorProps) && isFunction(this.props.dbSelectorProps.onChange)){
-                args.datagridContext = this;
-                this.props.dbSelectorProps.onChange(args);
-            }
-            this.refresh(true);
-        } 
-        this.previousDataSources = dataSources;
-        this.previousServer = server;
-    }
-    refresh (force,cb){
-        if(isFunction(force)){
-            let t = cb;
-            cb = force;
-            force = isBool(t)? t : true;
-        }
-        force = defaultBool(force,true)
-        return this.fetchData(undefined,force).then((data)=>{
-            if(isFunction(cb)){
-                cb(data);
-            }
-        })
-    }
+    
     getProgressBar(props){
         if(this.isDataJustComeToUpsert) return null;
         return super.getProgressBar(props);
@@ -101,35 +60,16 @@ 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,force,fetchOptions){
-        if(!this._isMounted()) return Promise.resolve([]);
+    fetchData ({cb,callback,force,fetchOptions}){
+        if(!this._isMounted()) return Promise.resolve(this.state.data);
         if(this.isFetchingData) {
             if(!isPromise(this.fetchingPromiseData)){
-                this.fetchingPromiseData = Promise.resolve([])
+                this.fetchingPromiseData = Promise.resolve(this.state.data)
             }
             return this.fetchingPromiseData;
         };
         this.isFetchingData = true;
-        if(isObj(cb)){
-            let t =  cb;
-            if(!isObj(fetchOptions)){
-                fetchOptions = cb;
-            }
-            if(isBool(t)){    
-                let t1 = force;
-                force = t;
-                if(isFunction(t1)){
-                    cb = t1;
-                }
-            }
-        }
-        if(isBool(cb)){
-            let t = force;
-            force = cb;
-            if(isFunction(t)){
-                cb = t;
-            }
-        }
+        cb = typeof cb =='function'? cb : typeof callback =='function'? callback : undefined;
         this.fetchingPromiseData = new Promise((resolve,reject)=>{
             setTimeout(()=>{
                 if(typeof cb === 'boolean'){
@@ -139,11 +79,10 @@ export default class CommonTableDatagrid extends CommonDatagrid{
                 if(force !== true && isArray(this.INITIAL_STATE.data)) {
                     return this.resolveFetchedDataPromise({cb,data:this.INITIAL_STATE.data}).then(resolve).catch(reject)
                 }
-                let fetchData  = this.INITIAL_STATE.fetchData;
+                const fetchFilters = this.getFilters();
                 fetchOptions = isObj(fetchOptions)?Object.clone(fetchOptions):{};
                 fetchOptions.selector = defaultObj(fetchOptions.selector);
                 fetchOptions.dataSources = this.currentDataSources;
-                const fetchFilters = this.getFilters();
                 fetchOptions = extendObj(true,true,{},fetchOptions,{selector : fetchFilters});
                 fetchOptions.dataSources = this.currentDataSources;
                 fetchOptions.sort = this.state.sort;
@@ -155,12 +94,18 @@ export default class CommonTableDatagrid extends CommonDatagrid{
                         delete fetchOptions.limit
                     }
                 }
+                this.beforeFetchData(fetchOptions);
+                if(typeof this.props.beforeFetchData =='function' && this.props.beforeFetchData({context:this,fetchOptions,options:fetchOptions}) === false){
+                    this.isFetchingData = false;
+                    return resolve(this.state.data);
+                }
+                let fetchData  = this.INITIAL_STATE.fetchData;
                 if(isFunction(this.props.fetchData)){
                     /**** l'on peut définir la props fetchData, qui est la fonction appelée pour la recherche des données */
                     fetchData = this.props.fetchData.call(this,fetchOptions);
                 }
                 fetchData = isFunction(fetchData)? fetchData.call(this,fetchOptions) : fetchData;
-                this.updateProgress({isLoading:true},()=>{
+                this.updateProgress(true,()=>{
                     if(isPromise(fetchData)){
                         return fetchData.then(data=>{
                            return this.resolveFetchedDataPromise({cb,data,force}).then((data)=>{

package/src/components/Datagrid/IndexComponent.js

@@ -0,0 +1,45 @@
+// 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 Accordion,{ TableData as TableDataAccordion} from "./Accordion";
+import Table,{TableData as DatagridTableData} from "./Table";
+import {isDesktopMedia,isMobileMedia} from "$cplatform/dimensions";
+import {isFunction,defaultVal} from "$utils";
+import React from "$react";
+import {getRenderType} from "./utils";
+
+
+const DatagridMainComponent = React.forwardRef((props,ref)=>{
+    const isDesk = isDesktopMedia();
+    const isMob = isMobileMedia();
+    const isTableDataRef = React.useRef(defaultVal(props.isTableData,defaultStr(props.tableName,props.table) || typeof props.fetchData ==='function'?true : false));
+    const TableComponent = isTableDataRef.current ? DatagridTableData : Table;
+    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()
+    if(renderType == 'accordion' && canRenderAccordion){
+        Component = AccordionComponent;
+    } else if(renderType =='table'){
+        Component = TableComponent;
+    } else if(isMob && canRenderAccordion){
+        Component = AccordionComponent;
+    }
+    return <Component
+        {...props}
+        ref = {ref}
+    />;
+});
+
+export default DatagridMainComponent;
+
+DatagridMainComponent.displayName = "DatagridMainComponent";
+
+DatagridMainComponent.propTypes = {
+    ...DatagridTableData.propTypes
+}
+
+DatagridMainComponent.getDBName = DatagridTableData.getDBName;
+
+DatagridMainComponent.LinesProgressBar = DatagridMainComponent.LineProgressBar = DatagridTableData.LineProgressBar;