@fto-consult/expo-ui 2.6.0 → 2.7.0

package/{src/screens/NetworkLogin/index.web.js → delete-node-modules.txt}

@@ -2,6 +2,5 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-export default function NetworkLoginScreen(){
-    return null;
-}
+1.Installer le package rimraf: npm i -g rimraf
+2. Executer le script : npm run delete-node-modules

package/metro.config.js

@@ -24,5 +24,7 @@ module.exports = (opts)=>{
       ...sourceExts,"txt",
       'jsx', 'js','tsx',
   ]
+  // Remove all console logs in production...
+  config.transformer.minifierConfig.compress.drop_console = true;
   return config;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "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,77 @@
+// 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";
+/*** @see : https://icons.expo.fyi/ popur tous les icons supportés*/
+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") || true;
+    const isExpo = isIcon(name,"expo");
+    let Icon = isExpo ? null : 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;
+    }
+    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().rtrim().rtrim("-");
+    return name.contains(iconSet+"-") || name.contains(iconSet+"s"+"-") ? true : false;
+}
+
+export default theme.withStyles(FontIcon,{displayName:FontIcon.displayName,mode:'normal'});
+export const fonts = [
+    MaterialCommunityIcons.font,
+];
+
+export const fontsNames = {
+    MaterialCommunityIcons:true,
+}
+
+export function loadFonts() {
+    return Promise.all(fonts.map(font =>  {
+        if(!isObj(font)) return Promise.reject({message:'Invalid font'});
+        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,15 @@ 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";
 
 let MAX_BACK_COUNT = 1;
 let countBack = 0;
 let isBackConfirmShowing = false;  
 
 const resetExitCounter = ()=>{
-  countBack = 0;
+  countBack = 0
   isBackConfirmShowing = false;
 };
 
@@ -38,6 +40,15 @@ function App(props) {
      isInitialized:true,
   });
   React.useEffect(() => {
+    const loadResources = ()=>{
+       return new Promise((resolve)=>{
+          loadFonts().catch((e)=>{
+            console.warn(e," ierror loading app resources fonts");
+          }).finally(()=>{
+            resolve(true);
+          });
+       })
+    }
     const restoreState = () => {
        return new Promise((resolve,reject)=>{
           (async ()=>{
@@ -102,16 +113,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 +152,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);

package/src/navigation/Drawer/items/index.js

@@ -5,9 +5,6 @@
 import { isRouteActive} from "$cnavigation";
 import "$cutils";
 import appConfig from "$capp/config";
-import {isMobileNative} from "$platform";
-import NetworkLoginScreen from "$escreens/NetworkLogin";
-import {defaultVal} from "$utils";
 import APP from "$capp";
 ///les items du drawer
 import items from "$drawerItems";
@@ -46,13 +43,6 @@ export const getItems = (force)=>{
                 }
             ]
         };
-        /*if(false && __DEV__ && isMobileNative()){
-            dataHelp.items.unshift({
-                icon : 'math-log',
-                label : 'Inpecter les requêtes réseau',
-                routeName : NetworkLoginScreen.screenName,
-            });
-        }*/
         r.push(dataHelp);
     }
     return r;

package/src/screens/mainScreens.js

@@ -1,8 +1,6 @@
 import Auth from "./Auth";
 import Help  from "./Help";
-//import NetworkLoginScreen from "./NetworkLogin";
 export default  [
     ...Auth,
     ...Help,
-    //NetworkLoginScreen,
 ]

package/src/screens/NetworkLogin/index.js

@@ -1,22 +0,0 @@
-// 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 NetworkLogger from 'react-native-network-logger';
-import theme from "$theme";
-import Screen from "$elayouts/Screen/ScreenWithOrWithoutAuthContainer";
-
-const NetworkLoginScreen = () => {
-    return null;
-    <Screen withScrollView title="Débuggin du réseau" subtitle = {false}>
-        <NetworkLogger 
-            theme={theme.isDark()?"dark":undefined}
-        />
-    </Screen>
-};
-
-NetworkLoginScreen.displayName = "NetworkLogin";
-NetworkLoginScreen.authRequired = false;
-NetworkLoginScreen.Modal = true;
-
-export default NetworkLoginScreen;