@fto-consult/expo-ui 6.26.18 → 6.27.1

package/package.json

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

package/src/components/BottomSheet/Provider.js

@@ -43,10 +43,15 @@ const Provider = React.forwardRef((props,innerRef)=>{
         }
     };
     React.setRef(ref,context);        
-    return <Menu {...props} {...state} visible={visible} sheet controlled onDismiss = {(e)=>{
+    return <Menu {...props} {...state} visible={visible} sheet controlled onDismiss = {(...args)=>{
         if(visible){
             setVisible(false);
         }
+        if(typeof state.onDismiss =='function'){
+            state.onDismiss(...args)
+        } else if(typeof props.onDismiss =='function'){
+            props.onDismiss(...args);
+        }
     }}/>
 });
 

package/src/components/Datagrid/Accordion/Row.js

@@ -6,7 +6,6 @@ import Label from "$ecomponents/Label";
 import PropTypes from "prop-types";
 import React from "$react";
 import theme from "$theme"
-import {isMobileNative} from "$cplatform";
 import {styles as rStyles,getRowStyle} from "../utils";
 import Swipeable from 'react-native-gesture-handler/Swipeable';
 import { useIsRowSelected,useDatagrid} from "../hooks";
@@ -30,7 +29,7 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
         callArgs,
     } = props;
     const {context} = useDatagrid();
-    let {wrapperStyle,title,right,rightProps,description,avatarContent,rowProps} = props;
+    let {title,right,rightProps,description,avatarContent,rowProps} = props;
     rightProps = defaultObj(rightProps);
     if(!isObj(item)) {
         return null;
@@ -108,6 +107,11 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
     } 
     right = typeof right === 'function'? right ({color:theme.colors.primaryOnSurface,selectable:true,style:[rStyles.lineHeight,styles.right]}) : right;
     const swipeableRef = React.useRef(null);
+    React.useEffect(()=>{
+        return ()=>{
+            React.setRef(swipeableRef,null);
+        }
+    },[])
     return  <Pressable
                 disabled = {selectable===false?true : false}
                 {...rowProps}
@@ -125,7 +129,15 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
                     selectable !== false && theme.styles.cursorPointer,
                     //style,
                 ]}
-                ref = {React.useMergeRefs(ref,innerRef)}
+                ref = {(el)=>{
+                    if(el){
+                        el.toggleExpand = (expand)=>{
+                            setExpanded(typeof expand =='boolean'? expand : !expanded);
+                        }
+                    }
+                    React.setRef(ref,el);
+                    React.setRef(innerRef,el);
+                }}
         >
         <Swipeable
             ref = {swipeableRef}
@@ -168,7 +180,9 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
                 style={[styles.renderedContent,viewWrapperStyle]} 
                 testID={testID+'_ContentContainer'}
             >
-                {avatarContent}
+                {hasAvatar?<View testID={testID+"_AvatarContentContainer"} style={[styles.avatarContent]}>
+                    {avatarContent}
+                </View> : avatarContent}
                 <View testID={testID+"_Content"} style={[styles.content,styles.wrap]}>
                     {title}
                     {description}

package/src/components/Datagrid/Accordion/index.js

@@ -201,9 +201,9 @@ const DatagridFactory = (Factory)=>{
                 numColumns = {numColumns}
                 key = {index}
                 ref = {(el)=>{
-                    if(isObj(this.renderingItemsProps) && isObj(this.renderingItemsProps[rowKey]) ){
-                        this.renderingItemsProps[rowKey].ref = el;
-                    }
+                    this.renderingItemsProps = defaultObj(this.renderingItemsProps);
+                    this.renderingItemsProps[rowKey] = defaultObj(this.renderingItemsProps[rowKey]);
+                    this.renderingItemsProps[rowKey].ref = el;
                 }}
                 style = {style}
                 callArgs = {this.getItemCallArgs({item,index})}
@@ -263,9 +263,14 @@ const DatagridFactory = (Factory)=>{
         /*** affiche les infos de l'item */
         onToggleExpandItem({item,index,rowIndex,rowKey,...rest}){
             if(!isObj(this.bottomSheetContext) || typeof this.bottomSheetContext.open !=='function') return;
+            if(!isObj(this.renderingItemsProps) || !isObj(this.renderingItemsProps[rowKey])) return;
             const callArgs = this.getItemCallArgs({item,index})
             return this.bottomSheetContext.open({
                 ...rest,
+                onDismiss : ()=>{
+                    const ref = this.renderingItemsProps[rowKey].ref;
+                    ref?.toggleExpand && ref?.toggleExpand(false);
+                },
                 children : <View style={[styles.expandedItemContent]} testID={'RN_DatagridAccordionExpanded'}>
                     {Object.mapToArray(this.state.columns,(columnDef,columnField,index)=>{
                         callArgs.columnDef = columnDef;
@@ -552,7 +557,7 @@ const DatagridFactory = (Factory)=>{
                         items = {this.state.data}
                         isLoading = {isLoading}
                         ref = {this.listRef}
-                        style = {styles.list}
+                        style = {[styles.list,rest.style]}
                         backToTopRef = {backToTopRef?(e)=>{
                             return this.backToTopRef.current;
                         }:false}
@@ -607,7 +612,7 @@ const styles = StyleSheet.create({
         maxHeight : 60
     },
     list : {
-        paddingHorizontal : 5,
+        paddingHorizontal : isNativeMobile()?10:0,
     },
     container : {
         position : 'relative',
@@ -628,7 +633,7 @@ const styles = StyleSheet.create({
         flexDirection:'row',
         alignItems : 'center',
         flex:1,
-        paddingHorizontal : 10,
+        paddingHorizontal : 0,
     },
     pullRight : {
         flexDirection : 'row',

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,

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/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;
             }