@fto-consult/expo-ui 2.37.8 → 2.38.0

package/src/layouts/Screen/ScreenWithOrWithoutAuthContainer.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import {defaultObj,defaultStr,defaultNumber,defaultBool} from "$utils";
 import ScrollView from '$ecomponents/ScrollView';
 import View from "$ecomponents/View";
-import { useNavigation,getScreenProps } from '$cnavigation';
+import { useNavigation} from '$cnavigation';
 import Fab from "$elayouts/Fab";
 import APP from "$capp";
 import AppBar,{createAppBarRef} from "$elayouts/AppBar";
@@ -57,7 +57,7 @@ export default function MainScreenScreenWithOrWithoutAuthContainer(props) {
     renderChildren,
     renderProfilAvatar,
     ...rest
-  } = getScreenProps(props);
+  } = props;
   const insets = useSafeAreaInsets();
   testID = defaultStr(testID,"RN_MainScreenScreenWithOrWithoutAuthContainer")
   containerProps = defaultObj(containerProps);
@@ -75,8 +75,8 @@ export default function MainScreenScreenWithOrWithoutAuthContainer(props) {
   ];
   options = defaultObj(options);
   appBarProps = defaultObj(appBarProps)
-  title = defaultVal(title,appBarProps.title,options.title);
-  subtitle = defaultVal(appBarProps.subtitle,options.subtitle,subtitle);
+  title = defaultVal(title,appBarProps.title);
+  subtitle = defaultVal(subtitle,appBarProps.subtitle);
   const appBarRef = createAppBarRef();
   const navigation = useNavigation();
   authProps = Object.assign({},authProps),

package/src/layouts/Screen/TableData.js

@@ -16,7 +16,7 @@ import {isMobileOrTabletMedia} from "$platform/dimensions";
 import Tab  from "$ecomponents/Tab";
 import Surface from "$ecomponents/Surface";
 import View from "$ecomponents/View";
-import {getScreenProps,goBack as navGoBack} from "$cnavigation";
+import {goBack as navGoBack} from "$cnavigation";
 import {renderTabsContent,renderActions} from "./utils";
 import theme from "$theme";
 import cActions from "$cactions";
@@ -72,7 +72,7 @@ export const isDocEditing = (data,fields,checkPrimaryKey)=>{
 export default class TableDataScreenComponent extends FormDataScreen{
     constructor(props){
         super(props);
-        const mainProps = getScreenProps(props);
+        const mainProps = props;
         extendObj(this.state,this.prepareStateData(mainProps));
         const table = defaultObj(mainProps.table);
         const fields = {},primaryKeyFields = {};
@@ -239,7 +239,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
             newElementLabel,
             prepareField,
             ...rest
-        } = getScreenProps(props);
+        } = props;
         const table = this.table;
         const {datas,currentIndex,data} = this.state; 
         const tableName = this.tableName;
@@ -353,7 +353,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
         return rActionsArg;
     }
     renderTabs(args){
-        const tabs = this.getMainProps().tabs;
+        const tabs = this.props.tabs;
         if(typeof tabs =='function'){
             return tabs(args);
         }
@@ -566,10 +566,9 @@ export default class TableDataScreenComponent extends FormDataScreen{
         return this.hidePreloaderTimeout;
     }
     UNSAFE_componentWillReceiveProps(nextProps){
-        const props = getScreenProps(nextProps);
-        const {data,datas}= props;
+        const {data,datas}= nextProps;
         if(stableHash({data,datas}) != stableHash({data:this.state.data,datas:this.state.datas})){
-            this.setState(this.prepareStateData(props));
+            this.setState(this.prepareStateData(nextProps));
         }
         return;
     }
@@ -809,12 +808,6 @@ export default class TableDataScreenComponent extends FormDataScreen{
     getAppBarTitle (){
         return defaultStr(this.titleProp,this.table.text,this.table.label);
     }
-    getMainProps(){
-        if(isObj(this.INITIAL_STATE.props) && Object.size(this.INITIAL_STATE.props,true)) {
-            this.INITIAL_STATE.props
-        }
-        return getScreenProps(this.props);
-    }
     getAppBarProps(a){
         const r = super.getAppBarProps(a);
         r.title  = this.getAppBarTitle();

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

@@ -3,7 +3,7 @@
 // license that can be found in the LICENSE file.
 import {defaultStr,base64toBlob,dataURLToBlob,getTypeFromDataURL,isNonNullString,getFileName,getFileExtension,defaultNumber,defaultBool,dataURLToBase64,isBlob,isBase64,isDataURL} from "$utils";
 const FileSaver = require('file-saver');
-const mime = require('mime-types')
+const mime = require('react-native-mime-types')
 const XLSX = require("xlsx");
 import Preloader from "$preloader";
 

package/src/screens/Auth/Profile.js

@@ -1,7 +1,7 @@
 import FormDataScreen from "$elayouts/Screen/FormData";
 import {defaultStr,defaultObj,isObjOrArray,isObj} from "$utils";
 import Auth from "$auth";
-import {getScreenProps,navigate} from "$cnavigation";
+import {navigate} from "$cnavigation";
 import SelectTheme from "$themeSelectorComponent";
 import Preloader from "$epreloader";
 import {SignIn2SignOut} from "$cauth";
@@ -10,8 +10,7 @@ import avatarProps from "$eauth/avatarProps";
 
 import {screenName} from "./utils";
 
-export default function UserProfileScreen(prs){
-    const props = getScreenProps(prs);
+export default function UserProfileScreen(props){
     const user = defaultObj(props.user,Auth.getLoggedUser());
     const testID = defaultStr(props.testID,"RN_UserProfile_FormData");
     const themeRef = React.useRef(defaultObj(user.theme));

package/src/screens/Auth/SignIn.js

@@ -2,12 +2,10 @@
 import {SIGN_IN} from "$cauth/routes"
 import Screen from "$escreen";
 import Login from "$eauth/Login";
-import {getScreenProps} from "$cnavigation";
 import {getTitle} from "./utils";
 
 
-function AuthSignInScreen(_props){
-    const props = getScreenProps(_props);
+function AuthSignInScreen(props){
     const title = getTitle();
     return <Screen 
         title = {title}

package/src/screens/Help/PrivacyPolicy/index.js

@@ -3,11 +3,9 @@ import title from "./title"
 import  Screen  from "$screen";
 import Link from "./Link";
 import Content from "$PrivacyPolicy";
-import {getScreenProps} from "$cnavigation";
 import React from "$react";
 
-export default function PrivacyPolicy(p){
-    const props = getScreenProps(p);
+export default function PrivacyPolicy(props){
     return <Screen 
         {...props}
         withDrawer = {false}

package/src/screens/Help/TermsOfUses/index.js

@@ -3,12 +3,10 @@ import title from "./title";
 import Screen from "$screen";
 import Link from "./Link";
 import Content from "$TermsOfUses";
-import {getScreenProps} from "$cnavigation";
 import {extendObj} from "$utils";
 import React from "$react";
 
-export default function TermsOfUses(p){
-    const props = getScreenProps(p);
+export default function TermsOfUses(props){
     return <Screen 
         {...props}
         withDrawer = {false}

package/src/screens/ScreenWrapper.js

@@ -0,0 +1,82 @@
+// Copyright 2023 @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 React from "$react";
+import { BackHandler } from "react-native";
+import APP from "$capp";
+import {useDrawer} from "$ecomponents/Drawer";
+import {navigationRef,getScreenProps,setRoute,setActiveNavigation,setScreenOptions,goBack} from "$cnavigation";
+import { SCREEN_OPTIONS } from "./utils";
+
+export default function ScreenWrapperNavComponent(_props){
+    const {navigation,route,...props} = getScreenProps(_props);
+    const sanitizedName = route.name;
+    const options = defaultObj(SCREEN_OPTIONS[sanitizedName]);
+    const {screenName,Screen,authRequired,isModal,...rest} = options;
+    const {drawerRef} = useDrawer()
+    setActiveNavigation(navigation);
+    setRoute(route);
+    React.useEffect(()=>{
+        const unsubscribe = navigation.addListener('focus', (a) => {
+            APP.trigger(APP.EVENTS.SCREEN_FOCUS,{
+                screenName,
+                sanitizedName,
+                options,
+            })
+        });
+        const unsubscribeBlur =  navigation.addListener('blur', (a) => {
+            APP.trigger(APP.EVENTS.SCREEN_BLUR,{
+                screenName,
+                sanitizedName,
+                options,
+            })
+        });
+        const backAction = (a) => {
+            if(drawerRef && drawerRef.current.canToggle() && drawerRef.current.isOpen()){
+                drawerRef.current.closeDrawer();
+                return true;
+            }
+            let isGoingBack = false;
+            if(navigationRef.canGoBack()){
+                if(isGoingBack) return true;
+                isGoingBack = true;
+                const opts = navigationRef.getCurrentOptions();
+                const aProps = defaultObj(opts.appBarProps);
+                goBack({...opts,...aProps,...defaultObj(aProps.appBarProps)});
+                isGoingBack = false;
+                return true;
+            }
+            APP.trigger(APP.EVENTS.BACK_BUTTON,{groupName,route:navigationRef.getCurrentRoute(),screenName:sanitizedName,source:'screen'});
+            return true;
+        };
+        const subscription = BackHandler.addEventListener('hardwareBackPress', backAction);
+        return ()=>{    
+            if(unsubscribe){
+                unsubscribe();
+            }
+            if(unsubscribeBlur){
+                unsubscribeBlur();
+            }
+            if(subscription?.remove)subscription.remove();
+            return BackHandler.removeEventListener('hardwareBackPress', backAction);
+        }
+    },[]);
+    setScreenOptions(options);
+    const allowDrawer = typeof options.allowDrawer ==='boolean'? options.allowDrawer : typeof Screen.allowDrawer =='boolean'? Screen.allowDrawer : Screen.isModalScreen == true ? false : true;
+    return <Screen 
+        {...rest}
+        key = {sanitizedName}
+        authRequired={authRequired||allowDrawer} 
+        backAction={isModal} 
+        modal={isModal} 
+        navigation = {navigation}
+        route = {route}
+        allowDrawer={allowDrawer} 
+        withDrawer = {allowDrawer !== false ? true : false} 
+        {...props} 
+        title = {defaultVal(props.title,options.title,rest.title)}
+        subtitle = {defaultVal(props.subtitle,options.subtitle,rest.subtitle)}
+        screenName={sanitizedName} 
+        options={options}
+     />
+}

package/src/screens/index.js

@@ -2,15 +2,11 @@ import {defaultBool,defaultArray,defaultVal,isObj,isNonNullString,defaultObj,isA
 import {sanitizeName,GROUP_NAMES} from "./utils";
 import mainScreens from "$mainScreens"
 import React from "$react";
-import { BackHandler } from "react-native";
-import APP from "$capp";
-import {useDrawer} from "$ecomponents/Drawer";
-import {navigationRef,getScreenProps,setRoute,setActiveNavigation,setScreenOptions,goBack} from "$cnavigation";
+import ScreenWrapper from "./ScreenWrapper";
+import { SCREEN_OPTIONS } from "./utils";
 
 export * from "./utils";
 
-export const SCREEN_OPTIONS = {};
-
 
 export const handleScreen = ({Screen,Factory,ModalFactory,result,useTheme,filter,index})=>{
     result = defaultObj(result);
@@ -33,9 +29,9 @@ export const handleScreen = ({Screen,Factory,ModalFactory,result,useTheme,filter
         screenName = defaultStr(screenName,Screen.screenName);
         if(isNonNullString(screenName)){
             let name = screenName;
-            let sanitizedName = sanitizeName(screenName);
+            const sanitizedName = sanitizeName(screenName);
             let extra = filter({Screen,name,sanitizedName}),
-            authRequired = !!Screen.authRequired;
+            authRequired = typeof Screen.authRequired =="boolean"? Screen.authRequired : true;
             if(extra ===false){
                 return null;
             }
@@ -62,6 +58,9 @@ export const handleScreen = ({Screen,Factory,ModalFactory,result,useTheme,filter
             screensGroups[groupName] = defaultArray(screensGroups[groupName]);
             screensGroups[groupName].push(<ScreenComponent key={sanitizedName} name={sanitizedName} options={args=>{
                 const options = typeof Screen.options === 'function'? Screen.options(args) : typeof screenOptions ==='function'? screenOptions(args) : defaultObj(Screen.options,screenOptions);
+                options.screenName = screenName;
+                options.Screen = Screen;
+                options.authRequired = authRequired;
                 SCREEN_OPTIONS[sanitizedName] = options;
                 options.withAppBar = Screen.isModalScreen ? true : false;
                 if(options.headerShown === false || Screen.headerShown === false){
@@ -69,67 +68,10 @@ export const handleScreen = ({Screen,Factory,ModalFactory,result,useTheme,filter
                 }
                 options.elevation = typeof options.elevation =='number'? options.elevation : typeof Screen.elevation =='number'? Screen.elevation : undefined;
                 options.back = args.navigation.canGoBack();
-                const {title,subtitle} = getScreenProps(args);
-                options.title = defaultVal(options.title,title);
-                options.subtitle = defaultVal(options.subtitle,subtitle);
+                options.extra = defaultObj(extra);
+                options.isModal = Screen.isModalScreen;
                 return options;
-            }}>
-                {props =>{
-                    const options = defaultObj(SCREEN_OPTIONS[sanitizedName]);
-                    const {drawerRef} = useDrawer()
-                    const {navigation,route} = props;
-                    setActiveNavigation(navigation);
-                    setRoute(route);
-                    React.useEffect(()=>{
-                        const unsubscribe = navigation.addListener('focus', (a) => {
-                            APP.trigger(APP.EVENTS.SCREEN_FOCUS,{
-                                screenName,
-                                sanitizedName,
-                                options,
-                            })
-                        });
-                        const unsubscribeBlur =  navigation.addListener('blur', (a) => {
-                            APP.trigger(APP.EVENTS.SCREEN_BLUR,{
-                                screenName,
-                                sanitizedName,
-                                options,
-                            })
-                        });
-                        const backAction = (a) => {
-                            if(drawerRef && drawerRef.current.canToggle() && drawerRef.current.isOpen()){
-                                drawerRef.current.closeDrawer();
-                                return true;
-                            }
-                            let isGoingBack = false;
-                            if(navigationRef.canGoBack()){
-                                if(isGoingBack) return true;
-                                isGoingBack = true;
-                                const opts = navigationRef.getCurrentOptions();
-                                const aProps = defaultObj(opts.appBarProps);
-                                goBack({...opts,...aProps,...defaultObj(aProps.appBarProps)});
-                                isGoingBack = false;
-                                return true;
-                            }
-                            APP.trigger(APP.EVENTS.BACK_BUTTON,{groupName,route:navigationRef.getCurrentRoute(),screenName:sanitizedName,source:'screen'});
-                            return true;
-                        };
-                        const subscription = BackHandler.addEventListener('hardwareBackPress', backAction);
-                        return ()=>{    
-                            if(unsubscribe){
-                                unsubscribe();
-                            }
-                            if(unsubscribeBlur){
-                                unsubscribeBlur();
-                            }
-                            if(subscription?.remove)subscription.remove();
-                            return BackHandler.removeEventListener('hardwareBackPress', backAction);
-                        }
-                    },[]);
-                    setScreenOptions(options);
-                    const allowDrawer = typeof options.allowDrawer ==='boolean'? options.allowDrawer : typeof Screen.allowDrawer =='boolean'? Screen.allowDrawer : Screen.isModalScreen == true ? false : true;
-                    return <Screen authRequired={authRequired||allowDrawer} backAction={Screen.isModalScreen} modal={Screen.isModalScreen} allowDrawer={allowDrawer} withDrawer = {allowDrawer !== false ? true : false} {...props} screenName={sanitizedName} extra ={defaultObj(extra)} options={options} />
-                }}
-            </ScreenComponent>)
+            }} component = {ScreenWrapper}/>);
         } else {
             console.error("Aucun nom définit pour l'écran ",Screen,index,". cet écran ne pourra pas être pris en compte dans l'application et peut provoquer des bugs.")
         }

package/src/screens/utils.js

@@ -11,3 +11,5 @@ export const GROUP_NAMES = {
     START : "INSTALL", //install est un alias à start
     DEFAULT : "PRIVATE",
 }
+
+export const SCREEN_OPTIONS = {};

package/webpack.config.js

@@ -18,7 +18,15 @@ module.exports = async function(env, argv,opts) {
         },
       },
       argv
-  );
+    );
+    config.module.rules.push(
+      {
+          test: /.mjs$/,
+          include: /node_modules/,
+          include: /node_modules/,
+          type: "javascript/auto",
+          use: {loader: 'babel-loader'}
+    });
     //config.resolve.alias['moduleA'] = 'moduleB';
     config.mode = config.mode =="development" || config.mode =='production' ? config.mode  : "development";
     // Maybe you want to turn off compression in dev mode.

package/src/components/Datagrid/Table/Cell.js

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, StylePropTypes, ViewStyle } from 'react-native';
-import {Text,TouchableRipple} from "react-native-paper";
-import Label from "$ecomponents/Label";
-import PropTypes from "prop-types";
-import {styleTypeProps} from "$theme";
-
-const DataTableCell = ({ children, style, numeric, ...rest }) => (
-  <TouchableRipple
-    {...rest}
-    style={[styles.container, numeric && styles.right, style]}
-  >
-    <Text numberOfLines={1}>{children}</Text>
-  </TouchableRipple>
-);
-
-DataTableCell.displayName = 'DataTable.Cell';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-
-  right: {
-    justifyContent: 'flex-end',
-  },
-});
-
-export default DataTableCell;
-
-
-DataTableCell.propTypes = {
-    children: PropTypes.node,
-    /**
-     * Align the text to the right. Generally monetary or number fields are aligned to right.
-     */
-    numeric : PropTypes.bool,
-    /**
-     * Function to execute on press.
-     */
-    onPress : PropTypes.func,
-    style : styleTypeProps,
-  }