@fto-consult/expo-ui 2.12.5 → 2.12.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.12.5",
+  "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

@@ -0,0 +1,215 @@
+// 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,isObjOrArray,isObj,extendObj} from "$utils";
+import React from "$react";
+import Auth from "$cauth";
+import DateLib from "$lib/date";
+import {getFetchOptions} from "$cutils/filters";
+import {setQueryParams} from "$cutils/uri";
+import Icon from "$ecomponents/Icon";
+import Label from "$ecomponents/Label";
+import { StyleSheet,View } from "react-native";
+import theme from "$theme";
+import useSWR,{useInfinite} from "$swr";
+import appConfig from "$capp/config";
+import APP from "$capp/instance";
+import cAction from "$cactions";
+import PropTypes from "prop-types";
+
+const timeout = 5000*60*60;
+export const swrOptions = {
+    refreshInterval : timeout, //5 minutes
+    shouldRetryOnError : false, //retry when fetcher has an error
+    dedupingInterval : timeout,
+    errorRetryInterval : timeout*2,
+    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:customData,
+        saveButton,
+        title,
+        fab,
+        rowKey,
+        actions,
+        sessionName,
+        server,
+        columns,
+        canMakePhoneCall,
+        makePhoneCallProps,
+        fetchData,
+        fetchPath,
+        fetcher,
+        ...rest
+    } = props;
+    rest = defaultObj(rest);
+    rest.exportTableProps = defaultObj(rest.exportTableProps)
+    const tableName = defaultStr(table.tableName,table.table).trim().toUpperCase();
+    canMakePhoneCall = defaultBool(canMakePhoneCall,table.canMakePhoneCall);
+    makePhoneCallProps = defaultObj(makePhoneCallProps,rest.makePhoneCallProps,table.makePhoneCallProps);
+    const isExportable = !!Auth.isTableDataAllowed({table:tableName,action:'export'});
+    rest.exportable = isExportable;
+    rowKey = defaultStr(rowKey,table.rowKey,table.primaryKeyColumnName);
+    title = defaultStr(title,table.label,table.text)
+    columns = table.fields;
+    const fetchFields = [];
+    Object.map(columns,(column,i)=>{
+        if(isObj(column)){
+            fetchFields.push(defaultStr(column.field,i));
+        }
+    })
+    actions = defaultVal(table.actions,actions);
+    for(let i in Datagrid.propTypes){
+        if(i in table){
+            rest[i] = isObj(rest[i])? extendObj(true,{},rest[i],table[i]) : table[i];
+        }
+    }
+    rest.actions = actions;
+    rest.columns = columns || [];
+    const icon = defaultStr(table.icon);
+    rest.tableName = tableName;
+    rest.canMakePhoneCall = canMakePhoneCall;
+    rest.makePhoneCallProps = makePhoneCallProps;
+    rest.exportTableProps.fileName = defaultStr(rest.exportTableProps.fileName,title+"-"+DateLib.format(DateLib.toObj(),'dd-mm-yyyy HH-MM'))
+    rest.exportTableProps.pdf = defaultObj(rest.exportTableProps.pdf);
+    rest.exportTableProps.pdf = extendObj(true,{},{
+        fileName : rest.exportTableProps.fileName,
+        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);
+    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;
+            if(Object.size(fo.queryParams,true)){
+                return {url : setQueryParams(url,fo.queryParams)};
+            }
+        },
+        fetcher,
+        showError  : false,
+        swrOptions : {
+            ...swrOptions,
+            ...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);
+        const onUpsert = ()=>{
+            doRefresh(false);
+        }
+        APP.on(remove,onUpsert);
+        APP.on(upsert,onUpsert);
+        return ()=>{
+            APP.off(upsert,onUpsert);
+            APP.off(remove,onUpsert);
+        }
+    },[]);
+    return (
+        <Datagrid 
+            {...rest}
+            {...defaultObj(table.datagrid)} 
+            isLoading = {isLoading|| isValidating && !error && showProgressRef.current && true || false}
+            beforeFetchData = {({fetchOptions:opts})=>{
+                opts.fields = fetchFields;
+                opts = getFetchOptions({fetcher,showError:showProgressRef.current,...opts});
+                opts.queryParams.withTotal = true;
+                fetchOptionsRef.current = opts;
+                doRefresh(true);
+                return false;
+            }}
+            isTableData
+            fetchData = {undefined}
+            data = {data}
+            canMakePhoneCall={canMakePhoneCall} 
+            key={tableName} 
+            sessionName={defaultStr(sessionName,'list-data')} 
+            ref={React.useMergeRefs(ref,innerRef)} 
+            rowKey={rowKey}
+            renderEmpty = {(p)=>{
+                return <View style={styles.emptyAccordion}>
+                    {icon ? <Icon name={icon} color={theme.colors.primaryOnSurface} size={80}/> : null}
+                    {<Label secondary style={styles.labelTitle}>{title}</Label>}
+                    <Label  style={[styles.emptyText]}>
+                        {"Aucune données enrégistrée!!"}
+                    </Label>
+                </View>
+            }}    
+        />
+    )
+});
+
+export default SWRDatagridComponent;
+
+SWRDatagridComponent.displayName = "SWRDatagridComponent";
+
+SWRDatagridComponent.propTypes = {
+    ...Datagrid.propTypes,
+    fetchPath : PropTypes.string,
+    fetchData : PropTypes.func,
+    table : PropTypes.shape({
+        tableName : PropTypes.string,
+        table : PropTypes.string,
+        fields : PropTypes.oneOfType([
+            PropTypes.objectOf(PropTypes.object),
+            PropTypes.arrayOf(PropTypes.object),
+        ])
+    }).isRequired,
+}
+
+const styles = StyleSheet.create({
+    emptyAccordion : {
+        alignSelf : 'center',
+        alignItems:'center'
+    },
+    labelTitle: {
+        fontSize : 18,
+    },
+    emptyText : {
+        fontSize : 16,
+        fontWeight : 'bold',
+        flexWrap : 'wrap',
+        marginVertical : 10,
+        textAlign : 'center'
+    }
+})

package/src/components/Datagrid/index.js

@@ -4,4 +4,6 @@
 
 export * from "./Common";
 
-export {default} from "./IndexComponent";
+export {default} from "./IndexComponent";
+
+export {default as SWRDatagrid} from "./SWRDatagrid";

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};