@fto-consult/expo-ui 2.12.7 → 2.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.12.7",
+  "version": "2.13.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^1.20.2",
+    "@fto-consult/common": "^1.21.1",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",
@@ -102,7 +102,8 @@
     "react-native-web": "~0.18.7",
     "react-native-webview": "11.23.1",
     "sharp-cli": "^2.1.0",
-    "tippy.js": "^6.3.7"
+    "tippy.js": "^6.3.7",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",

package/readMe.md

@@ -5,4 +5,7 @@
 -->
 
 ## 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
+
+```
+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/CountUp/index.js

@@ -5,7 +5,7 @@ import {defaultNumber,defaultStr} from "$utils";
 
 export const getDefaultStep = (count)=>{
     count = Math.abs(parseInt(count)||0);
-    return count <= 20 ? 1 : count <=  50 ? 3 : count <= 100 ? 10 : Math.floor(count/20);
+    return count <= 20 ? 5 : count <=  50 ? 5 : count <= 100 ? 10 : Math.floor(count/10);
 }
 
 const CountUpComponent = ({from,to,format,type,duration,step,formatter,interval,...props})=>{

package/src/components/Datagrid/SWRDatagrid.js

@@ -12,6 +12,7 @@ import Auth from "$cauth";
 import DateLib from "$lib/date";
 import {getFetchOptions} from "$cutils/filters";
 import {setQueryParams} from "$cutils/uri";
+import { getFetcherOptions } from "$capi/fetch";
 import Icon from "$ecomponents/Icon";
 import Label from "$ecomponents/Label";
 import { StyleSheet,View } from "react-native";
@@ -93,28 +94,40 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
     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)};
+    const dataRef = React.useRef(null);
+    const hasResultRef = React.useRef(false);
+    const totalRef = React.useRef(0);
+    const isFetchingRef = React.useRef(false);
+    const {error, isValidating,isLoading,refresh} = useSWR(fetchPath,{
+        fetcher : (url,opts)=>{
+            opts = extendObj({},opts,fetchOptionsRef.current);
+            opts.queryParams = defaultObj(opts.queryParams);
+            opts.queryParams.withTotal = true;
+            const fetchCB = ({data,total})=>{
+                totalRef.current = total;
+                dataRef.current = data;
+                hasResultRef.current = true;
+                return data;
+            };
+            hasResultRef.current = false;
+            isFetchingRef.current = true;
+            if(typeof fetcher =='function'){
+                url = setQueryParams(url,opts.queryParams);
+                return fetcher(url,opts).then(fetchCB).finally(()=>{
+                    isFetchingRef.current = false;
+                });
             }
+            const {url:fUrl,fetcher:cFetcher,...rest} = getFetcherOptions(url,opts);
+            return cFetcher(fUrl,rest).then(fetchCB).finally(()=>{
+                isFetchingRef.current = false;
+            });
         },
-        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])
@@ -126,7 +139,8 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         }
     },[isValidating,isLoading])
     const doRefresh = (showProgress)=>{
-        showProgressRef.current = showProgress ? typeof showProgress ==='boolean' : false;
+        if(isFetchingRef.current) return;
+        showProgressRef.current = showProgress ? typeof showProgress ==='boolean' : true;
         refreshCBRef.current = ()=>{
             showProgressRef.current = true;
         };
@@ -152,15 +166,14 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
             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;
+                opts = getFetchOptions({showError:showProgressRef.current,...opts});
                 fetchOptionsRef.current = opts;
                 doRefresh(true);
                 return false;
             }}
             isTableData
             fetchData = {undefined}
-            data = {data}
+            data = {dataRef.current}
             canMakePhoneCall={canMakePhoneCall} 
             key={tableName} 
             sessionName={defaultStr(sessionName,'list-data')} 

package/src/components/Drawer/index.js

@@ -10,7 +10,7 @@ import DrawerItems from './DrawerItems';
 import {isDesktopMedia} from "$cplatform/dimensions";
 import {isMobileNative} from "$cplatform";
 import {open,close} from "$epreloader";
-import {DRAWER_POSITIONS,DRAWER_TYPES,MINIMIZED_WIDTH,DRAWER_WIDTH,MINIMIZED_ICON_SIZE,ICON_SIZE} from './utils';
+import {DRAWER_POSITIONS,DRAWER_TYPES,MINIMIZED_WIDTH,getDrawerWidth,MINIMIZED_ICON_SIZE,ICON_SIZE} from './utils';
 import Icon,{MENU_ICON} from "$ecomponents/Icon";
 import apiSession from "./session";
 import View from "$ecomponents/View";
@@ -82,7 +82,7 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
     if(!overlayColor){
       overlayColor  = theme.colors.backdrop;// drawerType === DRAWER_TYPES.front ? 'black' : '#00000000';
     }
-    let drawerWidth = DRAWER_WIDTH;
+    let drawerWidth = getDrawerWidth();
     const restP = {};
     const isDesktop = isDesktopMedia();
     const _canBeMinimizedOrPermanent = canBeMinimizedOrPermanent();
@@ -155,7 +155,7 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
       isPermanent = false;
       isMinimized = false;
       restP.drawerLockMode = "unlocked";
-      drawerWidth = DRAWER_WIDTH;
+      drawerWidth = drawerWidth;
     }
     context.isMinimizable = ()=>{
       return minimizable !== false && canBeMinimizedOrPermanent() ? true : false;

package/src/components/Drawer/utils.js

@@ -1,4 +1,4 @@
-import {isDesktopMedia} from "$cdimensions";
+import Dimensions,{isDesktopMedia} from "$cdimensions";
 
 export * from "./DrawerItems/utils";
 
@@ -6,7 +6,17 @@ let activeItem = null;
 export const getActiveItem = x=> activeItem;
 export {default as session} from "./session";
 
-export const DRAWER_WIDTH = 300;
+const DRAWER_WIDTH = 320;
+const DESKTOP_DRAWER_WIDTH = 280;
+
+export const getDrawerWidth = ()=>{
+    if(isDesktopMedia()) return DESKTOP_DRAWER_WIDTH;
+    const {width} = Dimensions.get("window");
+    if(width > DRAWER_WIDTH + 100) return DRAWER_WIDTH;
+    const percent = Math.floor((width <= DRAWER_WIDTH?90:80)*width/100);
+    if(width <= DESKTOP_DRAWER_WIDTH) return percent;
+    return Math.max(percent,DESKTOP_DRAWER_WIDTH);
+}
 
 export const MINIMIZED_WIDTH = 85;
 

package/src/layouts/DatabaseStatistics/DatabaseStatistic.js

@@ -0,0 +1,96 @@
+import {defaultStr,isNonNullString} from "$utils";
+import React from "$react";
+import CountUp from "$ecomponents/CountUp";
+import Avatar from "$ecomponents/Avatar";
+import { ActivityIndicator } from "react-native-paper";
+import Item from "$ecomponents/Expandable/Item";
+import {navigateToTableDataList} from "$enavigation/utils";
+import theme from "$theme";
+import Label from "$ecomponents/Label";
+import PropTypes from "prop-types";
+import APP from "$capp/instance"
+import cActions from "$cactions";
+import {View} from "react-native";
+
+export default function DatabaseStatisticContainer (props){
+    const [state,setState] = React.useState({
+        isLoading : true,
+        count : 0,
+    });
+    let {table,fetchCount,index,testID,title,icon,onPress} = props;
+    title = defaultStr(title)
+    table = defaultObj(table);
+    const tableName = defaultStr(table.tableName,table.table).toUpperCase();
+    fetchCount = typeof table.fetchCount =='function'? table.fetchCount : typeof fetchCount =='function'? fetchCount : undefined;
+    if(!fetchCount || !tableName) return null;
+    const refreshingRef = React.useRef(null);
+    const isMounted = React.useIsMounted();
+    const refresh = ()=>{
+        if(refreshingRef.current || !isMounted()) return;
+        refreshingRef.current = true;
+        setTimeout(()=>{
+           fetchCount().then((count)=>{
+                setState({...state,isLoading:false,count});
+                refreshingRef.current = false;
+            }).catch((e)=>{
+                setState({
+                    isLoading : false, count : 0,
+                });
+                refreshingRef.current = false;
+            });
+        },100);
+    }
+
+    React.useEffect(()=>{
+        APP.on(cActions.upsert(tableName),refresh);
+        APP.on(cActions.remove(tableName),refresh);
+        refresh();
+        return ()=>{
+            APP.off(cActions.upsert(tableName),refresh);
+            APP.off(cActions.remove(tableName),refresh);
+        }
+    },[]);
+    React.useEffect(()=>{
+        refresh();
+    },[props])
+    const {isLoading,count} = state;
+    return <Item
+        testID = {defaultStr(testID,"RN_DatabaseStatistic_"+table)}
+        onPress = {(args)=>{
+            if(onPress && onPress(args) === false) return;
+            navigateToTableDataList(tableName,{
+                tableName
+            })
+        }}
+        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]}>
+            <ActivityIndicator color={theme.colors.primary}/>
+        </View>:<CountUp 
+            from={0} 
+            to={count}
+            style = {{fontSize:20,color:theme.colors.secondaryOnSurface}}
+        />}
+    >
+
+    </Item>
+}
+
+/*** DBSTAT, prend en paramètre le nom de la bd ainsi que celui de la table et affiche en statistic,: 
+ *  Le nombre d'éléments crées en bases ainsi que ceux actifs
+ */
+ DatabaseStatisticContainer.propTypes = {
+    ...Item.propTypes,
+    /*** La méthode fetchCount doit retourner une promèsse qui lorsqu'elle est résolue, résoue le nombre d'éléments de la table de données en bd */
+    fetchCount : PropTypes.func,//la fonction permettant de counter les éléments de la table data
+    table : PropTypes.shape({
+        table : PropTypes.string,
+        tableName : PropTypes.string,
+        fetchCount : PropTypes.func,//la fonction permettant de counter les éléments de la table data
+    }).isRequired,
+    title : PropTypes.string, //le titre à afficher
+}

package/src/layouts/DatabaseStatistics/index.js

@@ -0,0 +1,54 @@
+import Screen from "$screen";
+import Grid,{Cell} from "$components/Grid";
+import {defaultStr,defaultNumber,defaultVal} from "$utils";
+import React from "$react";
+import DatabaseStatistic from "./DatabaseStatistic";
+import theme from "$theme";
+import PropTypes from "prop-types";
+
+export const title = 'Statistiques en BD';
+export default function DatabaseStatisticScreen ({withScreen,title:customTitle,contentProps,containerProps,tables,Component,...props}){
+        Component = React.isComponent(Component)? Component : Grid;
+        containerProps = defaultObj(containerProps);
+        const title = containerProps.title = defaultStr(containerProps.title,DatabaseStatisticScreen.title);
+        contentProps = defaultObj(contentProps);
+        if(Component == Cell){
+            containerProps.desktopSize = defaultNumber(containerProps.desktopSize,12);
+            containerProps.tabletSize = defaultNumber(containerProps.tabletSize,8);
+            containerProps.phoneSize = defaultNumber(containerProps.phoneSize,4);
+        }
+        let content = [];
+        Object.map(tables,(table,index,suffix)=>{
+            if(isObj(table)){
+                content.push(
+                    <Cell elevation = {5} withSurface mobileSize={12} desktopSize={3} tabletSize={4} {...contentProps} key = {index} >
+                        <DatabaseStatistic
+                            icon = {table.icon}
+                            key = {index}
+                            table = {table}
+                            index = {suffix}
+                            title = {table.text|| table.title}
+                        ></DatabaseStatistic>
+                    </Cell>
+                )
+            }
+        });
+        if(!content.length) {
+            Auth.showError();
+            return null;
+        }
+        content = <Component  {...containerProps} style={[containerProps.style,theme.styles.mr1,theme.styles.ml1]}>
+            {content}
+        </Component>;
+        return  withScreen !== false ? <Screen withScrollView title={defaultVal(customTitle,title)} {...props}>{content}</Screen> : content;
+}   
+
+export const screenName = DatabaseStatisticScreen.screenName = "DatabaseStatistics";
+DatabaseStatisticScreen.title = title;
+
+DatabaseStatisticScreen.propTypes = {
+    tables : PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.object),
+        PropTypes.objectOf(PropTypes.object)
+    ]).isRequired
+}

package/src/media/file-system/exports.js

@@ -0,0 +1,16 @@
+import { readAsStringAsync } from "./utils";
+import { loadAsset } from "../Assets/utils";
+
+
+export * from "./utils";
+
+export const readFileAsText = async (asset)=>{
+    return await new Promise((resolve,reject)=>{
+        loadAsset(asset).then((a)=>{
+            readAsStringAsync(a.localUri).then((data) => {
+                resolve(data);
+            }).catch(reject);
+        }).catch(reject);
+    })
+}
+export const readFile = readFileAsText;

package/src/media/file-system/index.js

@@ -1,20 +1,9 @@
-import { readAsStringAsync } from "./utils";
-import { loadAsset } from "../Assets/utils";
+// 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.
 
-export * from "./utils";
+import * as FileSystem from "./exports";
 
-export const readFileAsText = async (asset)=>{
-    return await new Promise((resolve,reject)=>{
-        loadAsset(asset).then((a)=>{
-            readAsStringAsync(a.localUri).then((data) => {
-                resolve(data);
-            }).catch(reject);
-        }).catch(reject);
-    })
-}
-export const readFile = readFileAsText;
+export default FileSystem;
 
-export default {
-    readFileAsText,
-    readFile,
-}
+export * from "./exports";

package/src/media/file-system/utils/index.js

@@ -29,4 +29,6 @@ const readAs = async (asset,fn)=>{
 }
 export const readAsStringAsync = async (asset)=>{
     return readAs(asset);
-}
+}
+
+export * from "./write";

package/src/media/file-system/utils/write.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.
-import {defaultStr,isNonNullString,defaultNumber,defaultBool,dataURLToBase64,isBlob,isBase64,isDataURL} from "$utils";
+import {defaultStr,isNonNullString,getFileName,getFileExtension,defaultNumber,defaultBool,dataURLToBase64,isBlob,isBase64,isDataURL} from "$utils";
 const FileSaver = require('file-saver');
 const mime = require('mime-types')
+const XLSX = require("xlsx");
+import Preloader from "$preloader";
+
 /**** sauvegarde un fichier sur le disque 
      *  @param {object} {
      *      content {mix}: le contenu du fichier à enregistrer
@@ -16,9 +19,9 @@ const mime = require('mime-types')
      *      isBinary : si c'est un fichier binaire
      *  }
     */
- export const write = ({content,type,isBinary,timeout,delay,share,contentType,filename,path,directory,fileName})=>{    
+ export const write = ({content,type,isBinary,timeout,delay,share,contentType,path,directory,fileName})=>{    
     share = defaultBool(share,true);
-    fileName = sanitizeFileName(defaultStr(fileName,filename));
+    fileName = sanitizeFileName(fileName);
     contentType = defaultStr(contentType)  || mime.contentType(fileName) || mime.contentType(".txt");
     return new Promise((resolve,reject)=>{
         if(!isNonNullString(fileName)){
@@ -27,7 +30,7 @@ const mime = require('mime-types')
         }
         content = isBlob(content)? content : new Blob(content,contentType);
         try {
-            FileSaver.saveAs(blob, fileName);
+            FileSaver.saveAs(content, fileName);
             setTimeout(() => {
                 resolve({path:fileName,isWeb : true});
             }, defaultNumber(timeout,delay,3000));
@@ -39,4 +42,27 @@ const mime = require('mime-types')
 
 export const writeText = (args)=>{
     return write({...args,contentType:mime.contentType(".txt")});
+}
+/***
+ * @see https://ourtechroom.com/tech/mime-type-for-excel/ for excel mimesTypes
+ * .xls	 : application/vnd.ms-excel
+ */
+export const writeExcel = ({workbook,content,contentType,fileName,...rest})=>{
+    if(!isNonNullString(contentType) || !contentType.contains("application/vnd.")){
+        //contentType = "application/vnd.ms-excel";
+        contentType : "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+    }
+    let ext = defaultStr(getFileExtension(fileName,true),"xlsx");
+    fileName = sanitizeFileName(getFileName(fileName,true))+"."+ext;
+    if(!isNonNullString(fileName)){
+        return Promise.reject({status:false,message:'Nom de fichier invalide pour le contenu excel à créer'});
+    }
+    if(isBlob(content)){
+        return write({...rest,content,fileName,contentType})
+    }
+    Preloader.open("génération du fichier excel "+fileName);
+    XLSX.writeFile(workbook, fileName);
+    setTimeout(()=>{
+        Preloader.close();
+    },1000);
 }