@fto-consult/expo-ui 6.13.1 → 6.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.13.1",
+  "version": "6.14.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -62,7 +62,7 @@
     "@emotion/native": "^11.11.0",
     "@expo/html-elements": "^0.5.1",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.21.3",
+    "@fto-consult/common": "^3.22.0",
     "@gorhom/portal": "^1.0.14",
     "@pchmn/expo-material3-theme": "^1.3.1",
     "@react-native-async-storage/async-storage": "1.18.2",

package/src/components/AutoSizer/Vertical.js

@@ -47,9 +47,7 @@ const AutoSizerVerticalComponent = React.forwardRef(({onLayout,isScrollView,scre
       },500);
     }
     const dim = Dimensions.addEventListener("change",onResizePage);
-    //APP.on(APP.EVENTS.RESIZE_PAGE,onResizePage);
     return ()=>{
-      //APP.off(APP.EVENTS.RESIZE_PAGE,onResizePage);
       React.setRef(ref,null);
       dim?.remove();
     }

package/src/components/Drawer/hooks.js

@@ -0,0 +1,41 @@
+import React from "$react";
+import {isNonNullString,defaultStr} from "$cutils";
+import apiSession from "./session";
+export const useSession = (sessionName)=>{
+    sessionName = defaultStr(sessionName);
+    const sessionRef = React.useRef({});
+    return React.useStableMemo(()=>{
+        if(sessionName){
+            return {
+                sessionName,
+                get name(){
+                    return sessionName;
+                },
+                get : (a,b)=> {
+                    return apiSession.get(sessionName,a,b);
+                },
+                set : (a,b)=>{
+                    return apiSession.set(sessionName,a,b);
+                }
+            }
+        }
+        return {
+          sessionName,
+          get name(){
+            return sessionName;
+          },
+          get: key => {
+            if(isNonNullString(key)) return sessionRef.current[key];
+            return sessionRef.current;
+          },
+          set:(key,value)=>{
+              if(isObj(key)){
+                sessionRef.current = {...sessionRef.current,...key}
+              } else if(isNonNullString(key)) {
+                sessionRef.current[key] = value;
+              }
+              return sessionRef.current;
+          }
+        };
+    },[sessionName]);
+}

package/src/components/Drawer/index.js

@@ -10,12 +10,12 @@ import Dimensions,{isDesktopMedia,getCurrentMedia} from "$cplatform/dimensions";
 import {open,close} from "$epreloader";
 import {DRAWER_POSITIONS,DRAWER_TYPES,MINIMIZED_WIDTH,getDrawerWidth} from './utils';
 import Icon,{MENU_ICON} from "$ecomponents/Icon";
-import apiSession from "./session";
 import View from "$ecomponents/View";
 import {closeDrawer} from './DrawerItems/utils';
 import {DrawerContext} from "./Provider";
 import NavigationView from "./NavigationView";
 import { canBeMinimizedOrPermanent } from './utils';
+import { useSession } from './hooks';
 
 export * from "./Provider";
 
@@ -23,6 +23,7 @@ export {DrawerItems};
 export {default as DrawerItem} from "./DrawerItems/DrawerItem";
 
 export * from "./utils";
+export * from "./hooks";
 
 const canHandleExtra = x=> true;
 
@@ -33,40 +34,12 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
       minimized,drawerItems,hideStatusBar,overlayColor, onDrawerMinimize,onDrawerToggleMinimize,
       onDrawerOpen,onDrawerClose,onDrawerToggle,header,headerProps,toggleIconProps,
       permanentToggleIcon,minimizedToggleIcon,temporaryToggleIcon,withMinimizedIcon,
-      isItemActive,onPageResize,navigationViewRef,
-      children,
-      testID,
-      drawerType} = props;
-    sessionName = defaultStr(sessionName);
+      isItemActive,onPageResize,navigationViewRef,children,testID,drawerType} = props;
+    
     testID = defaultStr(testID,"RN_DrawerComponent")
-    const sessionRef = React.useRef({});
-    const session = React.useMemo(()=>{
-        if(sessionName){
-            return {
-                get : (a,b)=> {
-                    return apiSession.get(sessionName,a,b);
-                },
-                set : (a,b)=>{
-                    return apiSession.set(sessionName,a,b);
-                }
-            }
-        }
-        return {
-          get: key => {
-            if(isNonNullString(key)) return sessionRef.current[key];
-            return sessionRef.current;
-          },
-          set:(key,value)=>{
-              if(isObj(key)){
-                sessionRef.current = {...sessionRef.current,...key}
-              } else if(isNonNullString(key)) {
-                sessionRef.current[key] = value;
-              }
-              return sessionRef.current;
-          }
-        };
-    },[sessionName]);
-   const sessionValue = session.get();
+    const session = useSession(sessionName);
+    sessionName = session.sessionName;
+    const sessionValue = session.get();
     const drawerRef = React.useRef(null);
     const onSlideCallbackRef = React.useRef(null);
     drawerItemsContainerProps = defaultObj(drawerItemsContainerProps);
@@ -247,7 +220,8 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
         }
     }
     return (
-      <DrawerContext.Provider value={{
+      <DrawerContext.Provider 
+      value={{
           ...context,
           context,
           drawerRef,

package/src/components/Form/Form.js

@@ -109,7 +109,7 @@ export default class FormComponent extends React.AppComponent {
                 return null;
         }
         rest = defaultObj(rest);
-        const ComponentNode = defaultVal(Component,defaultComponentNode);
+        const ComponentNode = React.isComponent(Component) && Component || defaultComponentNode;
         testID = defaultStr(testID,"RN_FormComponent");
         return (<KeyboardAvoidingView testID={testID+"_KeyboardAvoidingView"}>
             <ComponentNode  {...rest} testID={testID} style={[styles.container,rest.style]}>

package/src/components/Form/FormData/FieldContent.js

@@ -0,0 +1,87 @@
+import React from "$react";
+import PropTypes from "prop-types";
+import {defaultStr,isNonNullString,defaultObj,defaultBool} from "$cutils";
+import getComponentFromType from "./componentsTypes";
+import appConfig from "$capp/config";
+import Colors from "$theme/colors";
+
+const FieldContentComponent = React.forwardRef(({field,data,index,fields,formName,fieldProps,backgroundColor,primaryKey:customPrimaryKey,increment,fieldProp,archivable,disabled,windowWidth,responsive,responsiveProps,archived,...props},ref)=>{
+    if(field?.form === false) return null;
+    fieldProp = defaultObj(fieldProp);
+    const name = defaultStr(field.name,field.field,index);
+    const type = defaultStr(field.jsType,field.type,"text").trim().toLowerCase().replaceAll(" ","").replaceAll("-","").replaceAll("_","");
+    const jsType = defaultStr(field.jsType,field.type,"text");
+    const isDate = (type.contains('date') || type.contains('time'));
+    let {defaultValue,renderfilter,render_filter,useDefaultValueFromData,primaryKey,hidden,renderFormDataField,getMediaQueryStyle,printLabels,queryLimit,selected,value,dataFilesInterest,perm,ignore,form,responsiveProps:customResponsiveProps,...rest} = field;
+    delete rest.import;
+    delete rest.export;
+    const isFilter = renderfilter || render_filter || false;
+    if(customPrimaryKey === true){
+        primaryKey = true;
+    }
+    if(form === false || ignore || (isNonNullString(perm) && !Auth.isAllowedFromStr(perm))){
+        return null;
+    }
+    if(rest.nullable === false){
+        rest.required = true;
+    }
+    if(primaryKey === true && typeof rest.required !=='boolean'){
+        rest.required = true;
+    }
+    if(typeof rest.filter !=='function'){
+        delete rest.filter;
+    }
+    if(name){
+        rest.defaultValue = useDefaultValueFromData === false ? defaultValue : (name in data && data[name] !== undefined && data[name] !== null? data[name]: defaultValue);
+        if((type == 'selecttabledata' || type == 'datafile')){
+            rest._defaultValue = data[rest.name];
+        }
+    } else {
+        rest.defaultValue  = defaultValue;
+    }
+    if(rest.defaultValue === null){
+        rest.defaultValue = undefined;
+    }
+    // les champs de type date par défaut qui sont requis, auront comme valeur par défaut la date actuelle s'il ne sont pas définies
+    if(rest.autoSetDefaultValue !== false && (!rest.defaultValue && typeof rest.defaultValue !=='boolean' && typeof rest.defaultValue !=='number')){
+        if(isDate && rest.required === true ){
+            rest.defaultValue = new Date();
+        } else if(!isDate && isNonNullString(rest.appConfigDefaultValueKey)){
+            rest.defaultValue = appConfig.get(rest.appConfigDefaultValueKey);
+        }
+    }
+    return React.useMemo(()=>{
+        customResponsiveProps = defaultObj(customResponsiveProps);
+        const Component = getComponentFromType(jsType);
+        return <Component 
+            {...props}
+            data = {data} 
+            windowWidth = {windowWidth}
+            index = {index} 
+            disabled = {disabled || archived} 
+            archived = {archived}
+            {...fieldProps}
+            {...rest}
+            style = {[fieldProps.style,Colors.isValid(backgroundColor) && {backgroundColor},rest.style]}
+            formName = {formName}
+            key={index} 
+            type = {type}
+            jsType = {jsType}
+            archivable = {archivable}  
+            name = {name}
+            responsive = {responsive}
+            responsiveProps = {{...responsiveProps,...customResponsiveProps,style:[responsiveProps.style,customResponsiveProps.style]}}
+        />
+    },[rest.defaultValue,type,jsType,defaultValue,rest,windowWidth,backgroundColor,isFilter,name,!!responsive]);
+});
+
+FieldContentComponent.displayName = "FieldContentComponent";
+
+export default FieldContentComponent;
+
+FieldContentComponent.propTypes = {
+    field : PropTypes.object.isRequired,
+    data : PropTypes.object,
+    formName : PropTypes.string.isRequired,
+    responsiveProps : PropTypes.object,
+}

package/src/components/Form/FormData/FieldsContent.js

@@ -1,81 +1,48 @@
 import React from "$react";
 import Divider from "$ecomponents/Divider";
 import {isObj,isNonNullString,defaultStr,defaultObj} from "$utils";
-import getComponentFromType from "./componentsTypes";
-import appConfig from "$capp/config";
 import {flattenStyle,Colors} from "$theme";
+import FieldContent from "./FieldContent";
+import stableHash from "stable-hash";
 
 export default function FieldsContent({fields,formName,disabled,archived,archivable,fieldProps,primaryKeyFields,responsiveProps,responsive,style,data,windowWidth}){
     windowWidth = typeof windowWidth ==='number' && windowWidth > 100?windowWidth : undefined;
-    return React.useStableMemo(()=>{
+    primaryKeyFields = isObj(primaryKeyFields) ? primaryKeyFields :  Array.isArray(primaryKeyFields) ? primaryKeyFields: [];
+    const isPArray = Array.isArray(primaryKeyFields);
+    const backgroundColor = flattenStyle(style)?.backgroundColor;
+    const prevResponsive = React.usePrevious(responsive);
+    return React.useMemo(()=>{
         const content = [];
-        style = defaultObj(flattenStyle(style));
-        primaryKeyFields = Array.isArray(primaryKeyFields) ? primaryKeyFields: [];
         fieldProps = defaultObj(fieldProps);
-        Object.map(fields,(field,index,i)=>{//on ignore tous les champs supposés être à ignorer
+        console.log("rendering fields contens alla ",fieldProps,fields,data,responsive,prevResponsive);
+        //console.log("rendering form data ",formName,archived,backgroundColor,primaryKeyFields,responsive,responsiveProps)
+        Object.map(fields,(field,index,i)=>{
             if(field === 'divider'){
                 content.push(<Divider key = {index} style={theme.styles.w100}/>)
-            } else if(isObj(field) && field.form !== false) {
-                const name = defaultStr(field.name,field.field,index);
-                const type = defaultStr(field.jsType,field.type,"text").trim().toLowerCase().replaceAll(" ","").replaceAll("-","").replaceAll("_","");
-                const isDate = (type.contains('date') || type.contains('time'));
-                const Component = getComponentFromType(defaultStr(field.jsType,field.type,"text"));
-                let {defaultValue,useDefaultValueFromData,primaryKey,hidden,renderFormDataField,getMediaQueryStyle,printLabels,queryLimit,selected,value,dataFilesInterest,perm,ignore,form,responsiveProps:customResponsiveProps,...rest} = field;
-                delete rest.import;
-                delete rest.export;
-                if(primaryKey === true && name && !field.filter){
-                    primaryKeyFields[name] = field;
-                }
-                if(form === false || ignore || (isNonNullString(perm) && !Auth.isAllowedFromStr(perm))){
-                    return null;
-                }
-                if(rest.nullable === false){
-                    rest.required = true;
-                }
-                if(primaryKey === true && typeof rest.required !=='boolean'){
-                    rest.required = true;
-                }
-                if(typeof rest.filter !=='function'){
-                    delete rest.filter;
-                }
-                if(name){
-                    rest.defaultValue = useDefaultValueFromData === false ? defaultValue : (name in data && data[name] !== undefined && data[name] !== null? data[name]: defaultValue);
-                    if((type == 'selecttabledata' || type == 'datafile')){
-                        rest._defaultValue = data[rest.name];
-                    }
-                } else {
-                    rest.defaultValue  = defaultValue;
-                }
-                if(rest.defaultValue === null){
-                    rest.defaultValue = undefined;
-                }
-                // les champs de type date par défaut qui sont requis, auront comme valeur par défaut la date actuelle s'il ne sont pas définies
-                if(rest.autoSetDefaultValue !== false && (!rest.defaultValue && typeof rest.defaultValue !=='boolean' && typeof rest.defaultValue !=='number')){
-                    if(isDate && rest.required === true ){
-                        rest.defaultValue = new Date();
-                    } else if(!isDate && isNonNullString(rest.appConfigDefaultValueKey)){
-                        rest.defaultValue = appConfig.get(rest.appConfigDefaultValueKey);
-                    }
-                }
-                customResponsiveProps = defaultObj(customResponsiveProps);
-                content.push(<Component 
-                        data = {data} 
-                        windowWidth = {windowWidth}
-                        index = {index} 
-                        disabled = {disabled || archived} 
-                        archived = {archived}
-                        {...fieldProps}
-                        {...rest}
-                        style = {[fieldProps.style,Colors.isValid(style.backgroundColor) && {backgroundColor:style.backgroundColor},rest.style]}
-                        formName = {formName}
-                        key={index} 
-                        archivable = {archivable}  
-                        name = {name}
-                        responsive = {responsive}
-                        responsiveProps = {{...responsiveProps,...customResponsiveProps,style:[responsiveProps.style,customResponsiveProps.style]}}
-                />);
+                return;
             }
+            //on ignore tous les champs supposés être à ignorer
+            if(!isObj(field) || field.form === false) return null;
+            const name = defaultStr(field?.name,field?.field,i);
+            content.push(<FieldContent
+                field = {field}
+                index = {index}
+                increment = {i}
+                archivable={archivable}
+                disabled = {disabled}
+                archived = {archived}
+                backgroundColor = {backgroundColor}
+                windowWidth = {windowWidth}
+                responsive = {responsive}
+                responsiveProps = {responsiveProps}
+                key = {defaultStr(field.name,field.field,index)|| index}
+                formName = {formName}
+                fields = {fields}
+                primaryKey = {isPArray && primaryKeyFields.includes(name) || primaryKeyFields[name] || (name in primaryKeyFields)}
+                fieldProps = {fieldProps}
+                data = {data}
+            />)
         });
         return content;
-    },[formName,archived,archivable,disabled,fields,data,windowWidth,responsive,responsiveProps])
+    },[formName,archived,backgroundColor,archivable,primaryKeyFields,isPArray,disabled,fields,responsiveProps,responsive])
 }

package/src/components/ScrollView/index.js

@@ -7,7 +7,7 @@ import {Vertical as AutoSizeVertical} from "$ecomponents/AutoSizer";
 const ScrollViewComponent = React.forwardRef(({withAutoSizer,autoSizerProps,testID,...rest},ref) => {
   testID = defaultStr(testID,'RN_ScrollViewComponent');
   const autoSize = React.useRef(withAutoSizer).current;
-    if(!autoSize || rest.horizontal === true || rest.vertical === false){
+  if(!autoSize || rest.horizontal === true || rest.vertical === false){
       return <ScrollView testID={testID} ref={ref} {...rest}/>
   }
   autoSizerProps = defaultObj(autoSizerProps);

package/src/components/Tab/index.js

@@ -79,7 +79,7 @@ const TabComponent = React.forwardRef((props,ref)=>{
         })
         return {tabs,contents,childrenProps}
     },[children]);
-    return <View {...rest} testID={testID} style={[styles.container,tabItemsProps.style]}>
+    return <View {...rest} testID={testID} style={[styles.container,tabItemsProps.style,rest.style]}>
         <TabItems testID={testID+"_TabItems"} {...tabItemsProps} activeIndex={index} style={[styles.tab,rest.style]} onChange={setActiveIndex}>
             {tabs}
         </TabItems>

package/src/layouts/Screen/TableData.js

@@ -399,7 +399,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
                 contentProps.style = [contentProps.style,styles.noMarging,styles.noPadding,styles.content]
                 mainContent = ct;
             } else {
-                mainContent = <View  {...contentProps} testID={testID+"_ContentContainer"} style={[styles.container,styles.noPadding]}>
+                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]}>
                             {header}
@@ -412,14 +412,14 @@ export default class TableDataScreenComponent extends FormDataScreen{
                 </View>
             }
         } else {
-            mainContent = <Surface  {...contentProps} testID={testID+"_MainContentContainer"} elevation={elevation} style={[styles.container,styles.noPadding,{paddingTop:0,marginTop:0}]}>
+            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>
-            </Surface>
+            </View>
         }
         const appBarProps = this.getAppBarActionsProps(restProps);
         if(hasTabs && isMobOrTab){

package/src/navigation/Drawer/index.js

@@ -8,14 +8,12 @@ import Login from "$eauth/Login";
 import {navigate} from "$cnavigation";
 import theme from "$theme";
 import Logo  from "$ecomponents/Logo";
-import Dimensions from "$dimensions";
 
 const DrawerNavigator = React.forwardRef(({content,children:customChildren,state,...props},ref)=>{
     const drawerRef = React.useRef(null);
     const mergedRefs = React.useMergeRefs(drawerRef,ref);
     const forceRender = React.useForceRender();
     const refreshItemsRef = React.useRef(false);
-    const [currentMedia,setCurrentMedia] = React.useState(Dimensions.getCurrentMedia());
     const items = useGetItems({refresh:()=>{
         if(drawerRef.current && drawerRef.current && drawerRef.current.forceRenderNavigationView){
             return  drawerRef.current.forceRenderNavigationView();
@@ -31,23 +29,13 @@ const DrawerNavigator = React.forwardRef(({content,children:customChildren,state
             forceRender();
             refreshItemsRef.current = false;
         };
-        const onResizePage = ()=>{
-            //forceRender();
-        }
         APP.on(APP.EVENTS.AUTH_LOGOUT_USER,onLogoutUser);
-        const bindResize = Dimensions.addEventListener("change",()=>{
-            const cMedia = Dimensions.getCurrentMedia();
-            if(cMedia !== currentMedia){
-               setCurrentMedia(cMedia);
-            }
-        })
         APP.on(APP.EVENTS.UPDATE_THEME,refreshItems);
         return ()=>{
             APP.off(APP.EVENTS.AUTH_LOGOUT_USER,onLogoutUser);
             APP.off(APP.EVENTS.UPDATE_THEME,refreshItems);
-            if(typeof bindResize ==='function') bindResize();
         }
-    },[])
+    },[]);
     const headerCB = ({isMinimized})=>{
         if(isMinimized) return null;
         if(!theme.showProfilAvatarOnDrawer){

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

@@ -29,12 +29,11 @@ const useGetItems = (options)=>{
         APP.on(APP.EVENTS.REFRESH_MAIN_DRAWER,refreshItems);
         APP.on(APP.EVENTS.AUTH_LOGIN_USER,refreshItems);
         APP.on(APP.EVENTS.AUTH_LOGOUT_USER,refreshItems);
-        //APP.on(APP.EVENTS.UPDATE_THEME,refreshItems);
         return ()=>{
             APP.off(APP.EVENTS.REFRESH_MAIN_DRAWER,refreshItems);
             APP.off(APP.EVENTS.AUTH_LOGIN_USER,refreshItems);
             APP.off(APP.EVENTS.AUTH_LOGOUT_USER,refreshItems);
-            //APP.off(APP.EVENTS.UPDATE_THEME,onLogoutUser);
+            APP.off(APP.EVENTS.UPDATE_THEME,onLogoutUser);
         }
     },[])
     return useMemo(()=>{