@fto-consult/expo-ui 2.6.1 → 2.7.2

package/delete-node-modules.txt

@@ -0,0 +1,6 @@
+// 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.
+
+1.Installer le package rimraf: npm i -g rimraf
+2. Executer le script : npm run delete-node-modules

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.6.1",
+  "version": "2.7.2",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "resolutions": {
@@ -42,7 +42,8 @@
     "electron-p": "npm run compile-electron-p && npm run electron",
     "update-app-version": "node ./update-app-version.js",
     "find-licenses": "node ./find-licenses.js",
-    "fix-dependencies": "expo doctor --fix-dependencies"
+    "fix-dependencies": "expo doctor --fix-dependencies",
+    "delete-node-modules": "rimraf ./**/node_modules"
   },
   "repository": {
     "type": "git",
@@ -64,8 +65,9 @@
     "@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.12.3",
+    "@fto-consult/common": "^1.13.1",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",
@@ -106,6 +108,7 @@
     "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",
+    "expo-font": "~11.0.1"
   }
 }

package/src/App.js

@@ -22,10 +22,12 @@ import StatusBar from "$ecomponents/StatusBar";
 import SimpleSelect from '$ecomponents/SimpleSelect';
 import {Provider as AlertProvider} from '$ecomponents/Dialog/confirm/Alert';
 import APP from "$app";
+import FontIcon from "$ecomponents/Icon/Font"
 import {isMobileNative} from "$cplatform";
 import {setDeviceIdRef} from "$capp";
 import appConfig from "$capp/config";
 import {showPrompt} from "$components/Dialog/confirm";
+
 import * as Utils from "$utils";
 Object.map(Utils,(v,i)=>{
   if(typeof v =='function' && typeof window !='undefined' && window && !window[i]){
@@ -63,7 +65,14 @@ export default function getIndex(options){
     const children = typeof App =='function'? App({children:child,APP}) : child;
     return (
       <GestureHandlerRootView style={{ flex: 1 }}>
-          <PaperProvider theme={theme}>
+          <PaperProvider 
+              theme={theme}
+              settings={{
+                icon: (props) => {
+                   return <FontIcon {...props}/>
+                },
+              }}
+          >
             <SafeAreaProvider>
               <AuthProvider>
                   <PortalProvider>

package/src/components/Icon/Font.js

@@ -0,0 +1,138 @@
+// 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 theme from "$theme";
+import React from "react";
+import {defaultStr,isNonNullString} from "$utils";
+import PropTypes from "prop-types";
+import { StyleSheet } from "react-native";
+import * as FontAsset from 'expo-font';
+
+/*** @see :  https://materialdesignicons.com/ pour les icon MaterialComunityIcons*/
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import FontAwesome5 from "@expo/vector-icons/FontAwesome5";
+import AntDesign from "@expo/vector-icons/AntDesign";
+import Fontisto from "@expo/vector-icons/Fontisto";
+import Foundation from "@expo/vector-icons/Foundation";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import Octicons from "@expo/vector-icons/Octicons";
+import SimpleLineIcons from "@expo/vector-icons/SimpleLineIcons";
+import Zocial from "@expo/vector-icons/Zocial";
+
+/*** @see : https://icons.expo.fyi/ popur tous les icons supportés*/
+/*** L'iconSet par défaut est le MaterialCommunityIcon qui ne nécessite pas de préfixer les noms des icones
+ *  Les prefix suivant doivent être utilisés : 
+ *      fa - pour l'iconSet FontAweSome5
+ *      ant - pour l'iconSet AntDesign
+ *      fontisto - pour l'iconSet Fontisto
+ *      foundation - pour l'iconSet Foundation
+ *      ionic - pour l'iconSet IonicIcons
+ *      octicons - pour l'iconSet Octicons
+ *      simple-line - pour l'iconSet SimpleLinesIcons
+ *      zocial - pour l'iconSet Zocial
+ */
+const FontIcon = React.forwardRef(({icon,name,testID,color,iconStyle,backgroundColor,style,...props},ref)=>{
+    icon = defaultStr(icon,name).trim();
+    testID = defaultStr(testID,"RN_FontIconComponent");
+    const fStyle = StyleSheet.flatten(style) || {};
+    color = theme.Colors.isValid(color)? color : fStyle.color || theme.colors.text;
+    backgroundColor = theme.Colors.isValid(backgroundColor)? backgroundColor : fStyle.backgroundColor || 'transparent';
+    const isMaterial = isIcon(name,"material");
+    const isFa = isIcon(name,"fa");
+    const isAnt = isIcon(name,"ant");
+    const isFontisto = isIcon(name,"fontisto");
+    const isFoundation = isIcon(name,"foundation");
+    const isIonicons = isIcon(name,"ionic");
+    const isOcticons = isIcon(name,"octicons");
+    const isSimpleLineIcons = isIcon(name,"simple-line");
+    const isZocial = isIcon(name,"zocial");
+    let Icon = isMaterial ? MaterialIcons : 
+            isFa ? FontAwesome5 :  
+            isFontisto ? Fontisto : 
+            isAnt ? AntDesign : 
+            isFoundation ? Foundation : 
+            isIonicons ? Ionicons : 
+            isOcticons ? Octicons: 
+            isSimpleLineIcons ? SimpleLineIcons :
+            isZocial ? Zocial : 
+            MaterialCommunityIcons;
+    if(!icon || !Icon){
+        console.warn("Icone non définie pour le composant FontIcon, icon [{0}], merci de spécifier une icone supportée par la liste du module https://github.com/expo/vector-icons/MaterialCommunityIcons".sprintf(icon),props);
+        return null;
+    }
+    const iconName = icon.ltrim("")
+    return <Icon {...props} 
+        ref = {ref}
+        testID = {testID}
+        color={color}
+        name = {icon}
+        backgroundColor = {backgroundColor}
+    />
+});
+
+FontIcon.propTypes = {
+    name : PropTypes.string,
+    icon : PropTypes.string,
+    color : PropTypes.string,
+    size : PropTypes.number,
+    borderRadius : PropTypes.oneOfType([
+        PropTypes.number,
+    ]),
+    onPress : PropTypes.func,
+    direction: PropTypes.oneOf(['rtl','ltr','auto']),
+    iconStyle : theme.StyleProps,
+
+}
+FontIcon.displayName = "FontIconComponent";
+
+/*** vérfie si l'icon passé en paramètre est un icon pour l'icon set
+ * @param {string} name le nom de l'icone à vérifier
+ * @param {string} iconSet, le set d'icon dans lequel vérifier
+ */
+export const isIcon = (name,iconSet)=>{
+    if(!isNonNullString(name) || !isNonNullString(iconSet)) return false;
+    name = name.toLowerCase();
+    iconSet = iconSet.toLowerCase().trim();
+    return name.startsWith(iconSet+"-") || name.startsWith(iconSet+"s"+"-") ? true : false;
+}
+
+export default theme.withStyles(FontIcon,{displayName:FontIcon.displayName,mode:'normal'});
+export const fonts = [
+    MaterialCommunityIcons.font,
+    FontAwesome5.font,
+    AntDesign.font,
+    Fontisto.font,
+    Foundation.font,
+    Ionicons.font,
+    MaterialIcons.font,
+    Octicons.font,
+    SimpleLineIcons.font,
+    Zocial.font,
+];
+export const fontsNames = {};
+Object.map(fonts,(f,k)=>{
+    if(isObj(f)){
+        for(let i in f){
+            fontsNames[i] = true;
+        }
+    }
+});
+
+/*** chage les fonts liés à l'application
+ * @param {function} filter, le filtre prenant en paramètr ele fontAsset en suite et le nom de la font en question
+ * @return {Promise}
+ */
+export function loadFonts(filter) {
+    filter = typeof filter =='function'? filter : (f,name,nameLower)=> name.toLowerCase().contains("material") ? true : false;
+    return Promise.all(fonts.map(font =>  {
+        if(!isObj(font)) return Promise.reject({message:'Invalid font'});
+        const fontName = Object.keys(font)[0]?.toLowerCase();
+        if(!isNonNullString(fontName) || !fontsNames[fontName] || !filter(font,fontName,fontName.toLowerCase)) return Promise.resolve({
+            status : false,
+            message : 'Font {0} introuvable'.sprintf(fontName)
+        });
+        return FontAsset.loadAsync(font);
+    }))
+ };
+  

package/src/components/Icon/index.js

@@ -1,10 +1,12 @@
 import Checkbox from "./Checkbox";
 import Icon from "./Icon";
-
+import Font from "./Font";
 export * from "./utils";
+export * from "./Font";
 
 Icon.Checkbox = Checkbox;
+Icon.Font = Font;
 
-export {Checkbox};
+export {Checkbox,Font};
 
-export default Icon;
+export default Icon;

package/src/components/Table/index.js

@@ -160,11 +160,12 @@ const TableComponent = React.forwardRef(({containerProps,renderEmpty,isRowSelect
     const scrollContentContainerStyle = {flex:1,width:listWidth,minWidth:totalWidths,height:'100%'};
     const scrollEventThrottle = isMobileNative()?200:50;
     const scrollViewFlexGrow = {flexGrow:0};
+    const maxScrollheight = f.length && fFilters.length ? 170  : f.length || fFilters.length ? 120 : 80;
     const allScrollViewProps = {
         scrollEventThrottle,
         horizontal : true,
         ...scrollViewProps,
-        style : [{maxHeight:130},scrollViewProps.style],
+        style : [{maxHeight:maxScrollheight},scrollViewProps.style],
         contentContainerStyle : [styles.scrollView,scrollViewProps.contentContainerStyle,scrollViewFlexGrow,scrollContentContainerStyle]
     }
     const listWidth = '100%';
@@ -377,7 +378,7 @@ const styles = StyleSheet.create({
         flexWrap : 'wrap',
     },
     footers : {
-        minHeight : 50,
+        minHeight : 40,
     },
     headerItemOrCell : {
         alignItems: 'flex-start',

package/src/index.js

@@ -17,13 +17,16 @@ import {notify} from "$ecomponents/Dialog";
 import {decycle} from "$utils/json";
 import init from "$capp/init";
 import { setIsInitialized} from "$capp/utils";
+import {isObj,isNonNullString} from "$cutils";
+import {loadFonts} from "$ecomponents/Icon/Font";
+import appConfig from "$capp/config";
 
 let MAX_BACK_COUNT = 1;
 let countBack = 0;
 let isBackConfirmShowing = false;  
 
 const resetExitCounter = ()=>{
-  countBack = 0;
+  countBack = 0
   isBackConfirmShowing = false;
 };
 
@@ -38,6 +41,16 @@ function App(props) {
      isInitialized:true,
   });
   React.useEffect(() => {
+    const loadResources = ()=>{
+       return new Promise((resolve)=>{
+          //FontsIconsFilter porte le nom de la props de appConfig dans lequel définir les filtres à utiliser pour charger l'iconSet désirée pour l'appication
+          loadFonts(appConfig.get("FontsIconsFilter")).catch((e)=>{
+            console.warn(e," ierror loading app resources fonts");
+          }).finally(()=>{
+            resolve(true);
+          });
+       })
+    }
     const restoreState = () => {
        return new Promise((resolve,reject)=>{
           (async ()=>{
@@ -102,16 +115,18 @@ function App(props) {
     NetInfo.fetch().catch((e)=>{
       console.log(e," is net info heinn")
     });
-    init().then(()=>{
-      if(Auth.isLoggedIn()){
-        Auth.loginUser(false);
-      }
-      setState({
-        ...state,isInitialized:true,isLoading : false,
-      });  
-    }).catch((e)=>{
-        console.error(e," initializing app")
-        setState({...state,isInitialized:true,isLoading : false});
+    loadResources().finally(()=>{
+      init().then(()=>{
+        if(Auth.isLoggedIn()){
+          Auth.loginUser(false);
+        }
+        setState({
+          ...state,isInitialized:true,isLoading : false,
+        });  
+      }).catch((e)=>{
+          console.error(e," initializing app")
+          setState({...state,isInitialized:true,isLoading : false});
+      })
     });
 
     const Events = {}
@@ -139,7 +154,7 @@ function App(props) {
   }, []);
   const {isInitialized} = state;
   const hasGetStarted = true;
-  const isLoading = state.isLoading || !isInitialized || !appReadyRef.current ? true : false;
+  const isLoading = state.isLoading || !isInitialized || !appReadyRef.current? true : false;
     React.useEffect(()=>{
       if(isInitialized){
           setIsInitialized(true);