@fto-consult/expo-ui 2.12.6 → 2.12.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.12.6",
+  "version": "2.12.7",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -58,13 +58,9 @@
   },
   "homepage": "https://github.com/borispipo/expo-ui#readme",
   "dependencies": {
-    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/preset-react": "^7.18.6",
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
-    "@expo/metro-config": "^0.4.0",
     "@expo/vector-icons": "^13.0.0",
-    "@expo/webpack-config": "^0.17.2",
     "@fto-consult/common": "^1.20.2",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
@@ -73,9 +69,6 @@
     "@react-navigation/native": "^6.0.13",
     "@react-navigation/native-stack": "^6.9.1",
     "@shopify/flash-list": "1.3.1",
-    "babel-plugin-inline-dotenv": "^1.7.0",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "expo": "^47.0.8",
     "expo-camera": "~13.1.0",
     "expo-clipboard": "~4.0.1",
@@ -110,5 +103,14 @@
     "react-native-webview": "11.23.1",
     "sharp-cli": "^2.1.0",
     "tippy.js": "^6.3.7"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/preset-react": "^7.18.6",
+    "@expo/metro-config": "^0.5.1",
+    "@expo/webpack-config": "^0.17.3",
+    "babel-plugin-inline-dotenv": "^1.7.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4"
   }
 }

package/readMe.md

@@ -0,0 +1,8 @@
+<!--
+ 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.
+-->
+
+## Installation des dépendences, packages de dévéloppement
+npm i --D @babel/plugin-proposal-export-namespace-from @babel/preset-react babel-plugin-inline-dotenv babel-plugin-module-resolver babel-plugin-transform-inline-environment-variables @expo/metro-config @expo/webpack-config

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

@@ -839,6 +839,9 @@ export default class CommonDatagridComponent extends AppComponent {
             this.setSessionData({showFooters:true})
         })
     }
+    setState(a,b){
+        super.setState(a,b);
+    }
     hideFooter (){
         if(!this._isMounted()) {
              this.isUpdating = false;
@@ -1513,7 +1516,7 @@ export default class CommonDatagridComponent extends AppComponent {
             if( typeof this.props.isLoading=='boolean' && nextProps.isLoading !== this.props.isLoading && typeof nextProps.isLoading =='boolean'){
                 this.setIsLoading(nextProps.isLoading)
             }
-            return;
+            return false;
         }
         this.prepareData({...nextProps,force:true},(state)=>{
             this.setState(state)

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

@@ -76,9 +76,6 @@ export default class CommonTableDatagrid extends CommonDatagrid{
                     force = cb;
                     cb = undefined;
                 }
-                if(force !== true && isArray(this.INITIAL_STATE.data)) {
-                    return this.resolveFetchedDataPromise({cb,data:this.INITIAL_STATE.data}).then(resolve).catch(reject)
-                }
                 const fetchFilters = this.getFilters();
                 fetchOptions = isObj(fetchOptions)?Object.clone(fetchOptions):{};
                 fetchOptions.selector = defaultObj(fetchOptions.selector);
@@ -99,6 +96,9 @@ export default class CommonTableDatagrid extends CommonDatagrid{
                     this.isFetchingData = false;
                     return resolve(this.state.data);
                 }
+                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;
                 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 */

package/src/components/Datagrid/SWRDatagrid.js

@@ -1,9 +1,12 @@
 // 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.
-
+/****
+ *  @see : https://swr.vercel.app/examples/infinite-loading
+ *  @see : 
+ */
 import Datagrid from "./IndexComponent";
-import {defaultStr,defaultObj,defaultVal,extendObj} from "$utils";
+import {defaultStr,defaultObj,defaultVal,isObjOrArray,isObj,extendObj} from "$utils";
 import React from "$react";
 import Auth from "$cauth";
 import DateLib from "$lib/date";
@@ -28,10 +31,14 @@ export const swrOptions = {
     errorRetryCount : 5,
 }
 
+/****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
+ */
 const SWRDatagridComponent = React.forwardRef((props,ref)=>{
     let {
         table,
-        data,
+        data:customData,
         saveButton,
         title,
         fab,
@@ -82,9 +89,11 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         title
     },rest.exportTableProps.pdf);
     const fetchOptionsRef = React.useRef({});
+    const refreshCBRef = React.useRef(null);
     fetchPath = defaultStr(fetchPath,table.queryPath,tableName.toLowerCase()).trim();
     const innerRef = React.useRef(null);
-    let {data:fetchedData, error, isValidating,size, setSize,isLoading,refresh} =  useSWR(fetchPath,{
+    const showProgressRef = React.useRef(true);
+    const {data:fetchedData, error, isValidating,size, setSize,isLoading,refresh} =  useSWR(fetchPath,{
         fetchOptionsMutator : (opts)=>{
             const {url} = opts;
             const fo = fetchOptionsRef.current;
@@ -99,32 +108,59 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
             ...defaultObj(appConfig.swr),
         },
     });
+    const fetchedRef = React.useRef(fetchedData);
+    const hasResult = !isLoading && !isValidating && isObj(fetchedData) && 'data' in fetchedData;
+    if(hasResult){
+        fetchedRef.current = fetchedData;
+    }
+    const data = fetchedRef.current?.data;
+    const total = fetchedRef.current?.total;
     React.useEffect(()=>{
         innerRef.current && innerRef.current.setIsLoading && innerRef.current.setIsLoading(isLoading);
     },[isLoading])
+    React.useEffect(()=>{
+        const cb = refreshCBRef.current;
+        refreshCBRef.current = null;
+        if(!isValidating && !isLoading && typeof cb =='function'){
+            cb();
+        }
+    },[isValidating,isLoading])
+    const doRefresh = (showProgress)=>{
+        showProgressRef.current = showProgress ? typeof showProgress ==='boolean' : false;
+        refreshCBRef.current = ()=>{
+            showProgressRef.current = true;
+        };
+        refresh();
+    }
     React.useEffect(()=>{
         const upsert = cAction.upsert(tableName);
         const remove = cAction.remove(tableName);
-        APP.on(remove,refresh);
-        APP.on(upsert,refresh);
+        const onUpsert = ()=>{
+            doRefresh(false);
+        }
+        APP.on(remove,onUpsert);
+        APP.on(upsert,onUpsert);
         return ()=>{
-            APP.off(upsert,refresh);
-            APP.off(remove,refresh);
+            APP.off(upsert,onUpsert);
+            APP.off(remove,onUpsert);
         }
-    },[])
+    },[]);
     return (
         <Datagrid 
             {...rest}
             {...defaultObj(table.datagrid)} 
-            isLoading = {isLoading|| isValidating}
+            isLoading = {isLoading|| isValidating && !error && showProgressRef.current && true || false}
             beforeFetchData = {({fetchOptions:opts})=>{
                 opts.fields = fetchFields;
-                opts = getFetchOptions({fetcher,...opts});
+                opts = getFetchOptions({fetcher,showError:showProgressRef.current,...opts});
+                opts.queryParams.withTotal = true;
                 fetchOptionsRef.current = opts;
-                refresh();
+                doRefresh(true);
+                return false;
             }}
+            isTableData
             fetchData = {undefined}
-            data = {error ? data : defaultObj(fetchedData).data}
+            data = {data}
             canMakePhoneCall={canMakePhoneCall} 
             key={tableName} 
             sessionName={defaultStr(sessionName,'list-data')} 

package/src/components/Grid/Cell.js

@@ -20,22 +20,42 @@ export const defaultDesktopSize = 4;
 
 const isV = x=> typeof x =='number' && x && x <= totalSize ? true : false;
 export const getSizeStyle = (props)=>{
-    let {size,smallPhoneSize,paddingMultiplicator,phoneSize,marginMultiplicator,mobileSize,tabletSize,gutter,desktopSize} = defaultObj(props);
+    let {size,smallPhoneSize,paddingMultiplicator,phoneSize,marginMultiplicator,mobileSize,tabletSize,gutter,desktopSize
+        ,smallPhoneGutter,phoneGutter,mobileGutter,tabletGutter,desktopGutter,
+    } = defaultObj(props);
     gutter = gutter === false ? 0 : typeof gutter =='number'? gutter : undefined;
-    if(Dimensions.isSmallPhoneMedia()){
-        size = isV(smallPhoneSize) ? smallPhoneSize : size || defaultMobileSize;
+    let hasFound = false;
+    const isValidSmallSize = isV(smallPhoneSize),
+    isValidPhoneSize = isV(phoneSize),
+    isValidMobileSize = isV(mobileSize),
+    isValidTabletSize = isV(tabletSize),
+    isValidDesktopSize = isV(desktopSize);
+    if(Dimensions.isSmallPhoneMedia() && isValidSmallSize){
+        size =  smallPhoneSize;
+        if(smallPhoneGutter !== undefined){gutter = smallPhoneGutter;}
         gutter = gutter !== undefined ? gutter : medias.sp;
-    } else if(Dimensions.isPhoneMedia()){
-        size = isV(phoneSize) ? phoneSize : size || defaultMobileSize;
+        hasFound = true;
+    } 
+    if(!hasFound && Dimensions.isPhoneMedia() && isValidPhoneSize){
+        size = phoneSize;
+        if(phoneGutter !== undefined){gutter = phoneGutter;}
         gutter = gutter !== undefined ? gutter : medias.mp;
-    } else if(Dimensions.isMobileMedia()){
-        size = isV(mobileSize) ? mobileSize : size || defaultMobileSize;
+        hasFound = true;
+    }
+    if(!hasFound && Dimensions.isMobileMedia()){
+        size = isValidMobileSize? mobileSize : size || defaultMobileSize;
+        if(mobileGutter !== undefined) gutter = mobileGutter;
         gutter = gutter !== undefined ? gutter : medias.xs;
-    } else if(Dimensions.isTabletMedia()){
-        size = isV(tabletSize) ? tabletSize : size || defaultTabletSize;
+        hasFound = true;
+    } 
+    if(!hasFound && Dimensions.isTabletMedia()){
+        size = isValidTabletSize ? tabletSize : size || defaultTabletSize;
+        if(tabletGutter !== undefined) gutter = tabletGutter;
         gutter = gutter !== undefined ? gutter : medias.sm;
-    } else {
-        size = isV(desktopSize)? desktopSize : size || defaultDesktopSize;
+        hasFound = true;
+    } else if(!hasFound){
+        size = isValidDesktopSize ? desktopSize : size || defaultDesktopSize;
+        if(desktopGutter !== undefined) gutter = desktopGutter;
         gutter = gutter !== undefined ? gutter : medias.md;
     }
     if(!isV(size)){

package/src/layouts/Screen/TableData.js

@@ -1,7 +1,7 @@
 import {defaultStr,isNumber,isPromise,defaultVal,extendObj,defaultObj,uniqid,isObj,isObjOrArray} from "$utils";
 import {FormData} from "$ecomponents/Form";
 import FormDataScreen from "./FormData";
-import ScreenContainer from "$screen";
+import ScreenContainer from "./Screen";
 import React from "$react";
 import { StyleSheet} from "react-native";
 import ScrollView from "$ecomponents/ScrollView";

package/src/layouts/Screen/index.js

@@ -8,5 +8,5 @@ Screen.FormData = FormData;
 Screen.List = List;
 
 export default Screen;
-
+export {default as TableData} from "./TableData";
 export {FormData,List,ScreenWithoutAuthContainer};