@fto-consult/expo-ui 6.26.17 → 6.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.26.17",
+  "version": "6.27.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

package/src/components/Swiper/index.js

@@ -440,11 +440,12 @@ const styles = {
   },
   // Fix web vertical scaling (like expo v33-34)
   container: (positionFixed, x, y, width, height,autoHeight) => addAutoHeight(({
-    backgroundColor: 'transparent',
+    backgroundColor: "transparent",
     // Fix safari vertical bounces
     position: positionFixed ? 'fixed' : 'relative',
     overflow: 'hidden',
     flexGrow: 1,
+    //flex : 1,
     top: positionFixed ? y : 0,
     left: positionFixed ? x : 0,
     width,
@@ -457,6 +458,7 @@ const styles = {
     left: 0,
     width:vertical ? width : width * count,
     flexDirection: vertical ? 'column' : 'row',
+    height : '100%',
   }),typeof height ==='number'? (vertical ? height * count : height) : undefiend,autoHeight),
   scrollViewContentContainer : {
     paddingBottom : 40,

package/src/context/Provider.js

@@ -9,6 +9,8 @@ import {ExpoUIContext} from "./hooks";
 import Login from "$eauth/Login";
 import {modes} from "$ecomponents/TextField";
 import {isMobileMedia} from "$cdimensions";
+import { prepareScreens } from "./TableData";
+
 
 /*****
     les utilitaires disponibles à passer au provider : 
@@ -27,7 +29,9 @@ import {isMobileMedia} from "$cdimensions";
             ReactComponent
         },
         loginPropsMutator : ({object})=><{object}>, la fonction permettant de muter les props du composant Login,
-        tableLinkPropsMutator : ({object})=><{object}>, la fonction permettant de muter les props du composant TableLink
+        tableLinkPropsMutator : ({object})=><{object}>, la fonction permettant de muter les props du composant TableLink,
+        TableDataScreen | TableDataScreenItem : {ReactComponent}, le composant TableDataScreenItem, à utiliser pour le rendu des écrans
+        TableDataScreenList | TableDataListScreen {ReactComponent}, le composant TableDataList à utiliser pour le rendu des écrans listants les éléments du table data
     },
     navigation : {
       screens : {Array}, les écrans de navigation,
@@ -39,8 +43,6 @@ const Provider = ({children,getTableData,navigation,components,convertFiltersToS
     const { theme : pTheme } = useMaterial3Theme();
     navigation = defaultObj(navigation);
     components = defaultObj(components);
-    const {screens} = navigation;
-    navigation.screens = [...(Array.isArray(screens)? screens : []),...eMainScreens];
     structsData = isObj(structsData)? structsData : null;
     appConfig.tablesData = tablesData;
     appConfig.structsData = appConfig.structsData = isObj(structsData)? structsData : null;
@@ -110,6 +112,16 @@ const Provider = ({children,getTableData,navigation,components,convertFiltersToS
           }
         }
     }
+    const {screens} = navigation;
+    navigation.screens = React.useMemo(()=>{
+       const r = prepareScreens({
+        tables:tablesData,
+        screens,
+        TableDataScreen:components.TableDataScreen || components.TableDataScreenItem,
+        TableDataScreenList:components.TableDataScreenList||components.TableDataListScreen
+      });
+      return [...r,...eMainScreens];
+    },[]);
     return <ExpoUIContext.Provider 
       value={{
         ...props,

package/src/context/TableData.js

@@ -0,0 +1,104 @@
+// 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 {getRouteOptions} from "$cnavigation";
+import React from "$react";
+import useExpo from "./hooks";
+import {defaultStr,defaultBool,isObj,isNonNullString} from "$cutils";
+import {getTableDataListRouteName,getTableDataRouteName,tableDataRouteName} from "$enavigation/utils";
+
+export function TableDataListScreen({tableName,table,screenName,...props}){
+    const {getTable} = useExpo();
+    const List = React.useMemo(()=>{
+        return TableDataScreenComponentRef.List;
+    },[]);
+    if(!React.isComponent(List)){
+        throw "Impossible d'effectuer le rendu de la liste des éléments liés à la table "+tableName+", Le composant List est invalide, rassurez vous de faire passer dans la fonction registerApp, un composant TableDataScreenList à utiliser pour le dit rendu";
+    }
+    tableName = defaultStr(tableName,table).toUpperCase();
+    let tableObj = getTable(tableName);
+    if(!tableObj){
+        throw `object table invalide, pour le rendu de la liste des éléments liés à la table ${tableName}.`;
+    }
+    const title = defaultStr(tableObj?.text,tableObj?.label);
+    return <List testID={"RN_TableDataScreenList_"+tableName.toUpperCase()} table={table} screenName={screenName} tableObj={tableObj} {...props} key={tableName}  tableName={tableName} title={title}/>;
+}
+
+TableDataListScreen.Stack = false;
+
+const loopForScreen = (lScreens,screens,foundTables)=>{
+    screens = Array.isArray(screens)? screens : [];
+    foundTables = isObj(foundTables) ? foundTables : {};
+    Object.map(lScreens,(Titem)=>{
+        if(!Titem) return;
+        if(Array.isArray(Titem)){
+            loopForScreen(Titem,screens,foundTables)
+        } else if(isNonNullString(Titem.screenName)) {
+            foundTables[Titem.screenName] = Titem;
+            screens.push(Titem);
+        }
+    });
+    return {screens,foundTables};
+}
+
+/****
+    prepare les différents écrans de l'application
+    @param {object} tables, les différentes tables de l'application
+    @param {Array} screens, les écrancs initiaux de l'application
+    @param {component} TableDataScreen, le composant react à utiliser pour le rendu TableDataScreen, d'un item du tableData
+    @return {Array}, la liste des écrans apprêtés
+*/
+export function prepareScreens ({tables,screens:screensProps,TableDataScreen,TableDataScreenList}){
+    const foundTables = {};
+    const screens = [];
+    TableDataScreenComponentRef.current = React.isComponent(TableDataScreen)? TableDataScreen : TableDataScreenComponentRef.current;
+    TableDataScreenComponentRef.List = React.isComponent(TableDataScreenList)? TableDataScreenList : TableDataScreenComponentRef.List;
+    const Modal = defaultBool(TableDataScreenComponentRef.current?.Modal,TableDataScreenComponentRef.current?.modal,true)
+    loopForScreen(screensProps,screens,foundTables);
+    Object.map(tables,(table,i)=>{
+        if(!isObj(table) || !isNonNullString(i)) return;
+        const screenName = getTableDataRouteName(i);
+        const listScreenName = getTableDataListRouteName(i);
+        if(!foundTables[screenName]){
+            screens.push({
+                Component : TableDataScreenItem,
+                screenName,
+                Modal
+            })
+            foundTables[screenName] = TableDataScreenItem;
+        } else if(React.isComponent(foundTables[screenName])){
+            foundTables[screenName].Modal = defaultBool(foundTables[screenName]?.Modal,foundTables[screenName].modal,Modal)
+        }
+        if(!foundTables[listScreenName] && table.datagrid !== false){
+            screens.push({
+                Component : TableDataListScreen,
+                screenName : listScreenName,
+            });
+            foundTables[listScreenName] = TableDataListScreen;
+        }
+    });
+    return screens;
+}
+
+export {tableDataRouteName};
+
+const TableDataScreenComponentRef = {current:null};
+export const TableDataScreenItem = (props)=>{
+    const Item = React.useMemo(()=>{
+        return TableDataScreenComponentRef.current;
+    },[])
+    if(!React.isComponent(Item)) {
+        throw "Impossible de rendre le composant TableDataScreen, car la fonction registerApp n'a pas été initialisé avec un composant devant servir pour le rendu des TableData screens item";
+    }
+    const {params,data,tableName:tbName} = getRouteOptions(props);
+    const {getTable} = useExpo();
+    const tableName = defaultStr(params?.tableName,params?.table,tbName);
+    const tableObj = getTable(tableName);
+    if(!isObj(tableObj)){
+        throw "Objet table invalide, impossible de rendre le contenu de la tableDataScreen liée à la table "+tableName;
+    }
+    return <Item testID={"RN_TableDataScreenItem_"+(defaultStr(tableName)).toUpperCase()}{...props} tableObj={tableObj} data={data} tableName={tableName} {...params}/>
+}
+TableDataScreenItem.Modal = true;
+
+TableDataScreenItem.displayName = "TableDataScreenItem";

package/src/context/index.js

@@ -2,4 +2,6 @@ export * from "./hooks";
 
 export {default} from "./hooks";
 
-export {default as Provider} from "./Provider";
+export {default as Provider} from "./Provider";
+
+export  *  from "./TableData";

package/src/layouts/ProfilAvatar/index.js

@@ -176,7 +176,7 @@ const styles = StyleSheet.create({
     labelContainer : {
         flexDirection : 'column',
         paddingRight : 5,
-        maxWidth : 150,
+        maxWidth : 140,
         minWidth : 100,
     },
     pseudo : {

package/src/layouts/Screen/TableData.js

@@ -385,10 +385,10 @@ export default class TableDataScreenComponent extends FormDataScreen{
         if(hasTabs){
             if(isMobOrTab){
                 renderingTabsProps.firstTab = <Tab.Item testID={testID+"_MainTab"} label={"Principal"} {...firstTabProps} key={tabKey}>
-                    <Surface testID={testID+"_MainTab_Content"} elevation={5} {...contentProps} style={[styles.noMarging,contentProps.style,styles.h100,styles.noPadding]}>
+                    <View testID={testID+"_MainTab_Content"} {...contentProps} style={[styles.noMarging,contentProps.style,styles.h100,styles.noPadding]}>
                         {header}
                         {content}
-                    </Surface>
+                    </View>
                 </Tab.Item>
             } else {
                 //tabsProps.tabItemsProps.elevation = 0;
@@ -400,25 +400,23 @@ export default class TableDataScreenComponent extends FormDataScreen{
             } else {
                 mainContent = <View  {...contentProps} testID={testID+"_ContentContainer"} style={[styles.container,styles.noPadding,contentProps.style]}>
                     <ScrollView  withAutoSizer testID={testID+"_MainContentScrollView"} contentProps={{style:theme.styles.p1}}>
-                        <Surface elevation={elevation} testID={testID+"_ContentHeader"} style={[styles.screenContent,theme.styles.p1,header?styles.screenContentWithHeader:null]}>
+                        <View testID={testID+"_ContentHeader"} style={[styles.screenContent,theme.styles.p1,header?styles.screenContentWithHeader:null]}>
                             {header}
                             {content}
-                        </Surface>
-                        {ct ? <Surface {...contentProps} testID={testID+"_DesktopContentTabs"} elevation={elevation} style={[contentProps.style]}>
+                        </View>
+                        {ct ? <View {...contentProps} testID={testID+"_DesktopContentTabs"} style={[contentProps.style]}>
                             {ct}
-                        </Surface> : null}
+                        </View> : null}
                     </ScrollView>
                 </View>
             }
         } else {
-            mainContent = <View  {...contentProps} testID={testID+"_MainContentContainer"} elevation={elevation} style={[styles.container,{backgroundColor:theme.colors[theme.isDark()?"background":"surface"]},styles.noPadding,{paddingTop:0,marginTop:0},contentProps.style]}>
-                <ScrollView withAutoSizer testID={testID+"_MainContentScrollViewWithoutTab"}>
-                    <View testID={testID+"_MainContent"} style={[styles.screenContent,!isMobOrTab && theme.styles.p1,header?styles.screenContentWithHeader:null]}>
-                        {header}
-                        {content}
-                    </View>
-                </ScrollView>
-            </View>
+            mainContent = <ScrollView testID={testID+"_MainContentScrollViewWithoutTab"}>
+                <View testID={testID+"_MainContent"} style={[styles.screenContent,!isMobOrTab && theme.styles.p1,header?styles.screenContentWithHeader:null]}>
+                    {header}
+                    {content}
+                </View>
+            </ScrollView>
         }
         const appBarProps = this.getAppBarActionsProps(restProps);
         if(hasTabs && isMobOrTab){

package/src/navigation/utils.js

@@ -37,6 +37,7 @@ const navigateToTableOrStructData = function(tableName,params,actionType){
     if(!isAllowed){
         return Auth.showError();
     }
+    params.tableName = tableName;
     params.routeName = buildScreenRoute(tableName,actionType =='structdata'? structDataRouteName : tableDataRouteName);
     return navigate(params)
 }

package/src/screens/index.js

@@ -46,6 +46,7 @@ export const handleScreen = ({Screen,Factory,ModalFactory,result,filter,index})=
                     groupName = GROUP_NAMES.PRIVATE;
                     authRequired = true;
                 }
+                authRequired = authRequired || groupName === GROUP_NAMES.PRIVATE;
             } else {
                 authRequired = false;
             }