@fto-consult/expo-ui 6.4.5 → 6.5.1

package/babel.config.alias.js

@@ -69,6 +69,8 @@ module.exports = (opts)=>{
     if(typeof opts.mutator =='function'){
         opts.mutator(r);
     }
+    r.$eutils = path.resolve(expo,"utils");
+    r.$ehooks = path.resolve(expo,"hooks");
     ///le chemin racine du projet expo-ui
     r["$expo-ui-root-path"] = r["$expo-ui-root"]= path.resolve(expo,"..");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.4.5",
+  "version": "6.5.1",
   "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.20.0",
+    "@fto-consult/common": "^3.21.0",
     "@gorhom/portal": "^1.0.14",
     "@pchmn/expo-material3-theme": "^1.3.1",
     "@react-native-async-storage/async-storage": "1.18.2",

package/src/auth/Login.js

@@ -199,22 +199,16 @@ export default function LoginComponent(props){
     });
     const withScrollView = typeof customWithScrollView =='boolean'? customWithScrollView : true;
     const Wrapper = withPortal ? ScreenWithoutAuthContainer  : withScrollView ? ScrollView: View;
-    const mQueryUpdateProps = (a)=>{
-        const style = StyleSheet.flatten([updateMediaQueryStyle(),contentProps.style]);
-        if(typeof contentProps.updateMediaQueryStyle =='function'){
-            return contentProps.updateMediaQueryStyle({style})
-        }
-        return {style};
+    const mediaQueryUpdateStyle = (a)=>{
+        return StyleSheet.flatten([updateMediaQueryStyle(),contentProps.style]);
     };
     const wrapperProps = withPortal ? {appBarProps,authRequired:false,title:loginTitle,withScrollView} : { style:styles.wrapper};
-    const sH = React.isComponent(HeaderTopContent)? <HeaderTopContent
-        mediaQueryUpdateNativeProps = {mQueryUpdateProps}
-    /> : React.isValidElement(HeaderTopContent)? HeaderTopContent : null;
+    const sH = React.isComponent(HeaderTopContent)? <HeaderTopContent mediaQueryUpdateStyle = {mediaQueryUpdateStyle} /> : React.isValidElement(HeaderTopContent)? HeaderTopContent : null;
     return <Wrapper testID = {testID+"_Wrapper" }{...wrapperProps}>
         <DialogProvider ref={dialogProviderRef}/>
         {sH}
         <Surface {...containerProps} {...defaultObj(loginProps?.containerProps)} style={[styles.container,{backgroundColor},containerProps.style,loginProps?.containerProps?.style]}  testID={testID}>
-            <Surface elevation = {0} {...contentProps} mediaQueryUpdateNativeProps = {mQueryUpdateProps} {...contentProps} testID={testID+"_Content"} style={[styles.content,updateMediaQueryStyle(),{backgroundColor},contentProps.style]}>
+            <Surface elevation = {0} {...contentProps} mediaQueryUpdateStyle = {mediaQueryUpdateStyle} {...contentProps} testID={testID+"_Content"} style={[styles.content,{backgroundColor},contentProps.style]}>
                 <FormData 
                     formName = {formName}
                     testID = {testID+"_FormData"}

package/src/components/Avatar/index.js

@@ -64,6 +64,7 @@ const AvatarComponent = React.forwardRef((props,ref)=>{
     const c = <Component
             {...rest}
             {...cProps}
+            containerProps = {containerProps}
             ref={ref}
             onPress = {!handleOnPress && onPress ? onPress : undefined}
             title = {onPress?null : defaultVal(toolip,title)}
@@ -71,7 +72,7 @@ const AvatarComponent = React.forwardRef((props,ref)=>{
             style = {style}
             size= {size}
         />;
-    return onPress && handleOnPress ?  <Tooltip title={title} toolip={toolip} Component = {Pressable} testID={testID+"_Container"} {...containerProps} onPress={onPress}>{c}</Tooltip> : c;
+    return onPress && handleOnPress ?  <Tooltip title={title} toolip={toolip} Component = {Pressable} testID={testID+"_Container"}  onPress={onPress}>{c}</Tooltip> : c;
 });
 
 AvatarComponent.displayName = "AvatarComponent";

package/src/components/Dialog/Dialog.js

@@ -41,7 +41,7 @@ const DialogComponent = React.forwardRef((props,ref)=>{
         onCancelButtonPress,no,yes,
         onDismiss:customOnDismiss,backAction,onShow,backActionProps,
         fullScreen:customFullScreen,appBarProps,contentProps,actionsProps,
-        title,subtitle,onMount,onUnmount,mediaQueryUpdateNativeProps,
+        title,subtitle,onMount,onUnmount,
         titleProps,
         visible,
         scrollViewProps,withScrollView,
@@ -146,11 +146,6 @@ const DialogComponent = React.forwardRef((props,ref)=>{
         const {height} = Dimensions.get("window");
         return Math.max((height>600?(50):70)*height/100,MIN_HEIGHT);
     }
-    const modalStyle = React.useMediaQueryUpdateStyle({
-        mediaQueryUpdateStyle : (args)=>{
-            return null;
-        }
-    });
    const onModalShown = (a)=>{
       if(onShow){
         onShow(a);
@@ -197,7 +192,7 @@ const DialogComponent = React.forwardRef((props,ref)=>{
                 dismissable = {isDimissable}
                 onShow = {onModalShown}
                 visible={visible} 
-                style = {[styles.modal,modalProps.style,modalStyle]}
+                style = {[styles.modal,modalProps.style]}
                 ref={modalRef}
                 testID = {testID}
                 contentContainerProps = {contentContainerProps}

package/src/components/Dialog/DropdownAlert/index.js

@@ -672,9 +672,11 @@ export default class DropdownAlert extends Component {
               accessibilityLabel={accessibilityLabel}
               accessible={accessible}>
             <View style={style} testID={testID+"_ContentContainer"}>
-                  <View testID={testID+"_ContentWrapper"} style={[contentContainerStyle,getContainerStyle().style]}
-                     mediaQueryUpdateNativeProps={(args)=>{
-                       return getContainerStyle(args);
+                  <View testID={testID+"_ContentWrapper"} style={[contentContainerStyle]}
+                     mediaQueryUpdateStyle={({isMobile,isTablet,width,...rest})=>{
+                       return {
+                          maxWidth  : isMobile ? (90*width)/100 : isTablet? Math.max((70*width/100),350) : 500
+                       }
                     }}
                   >
                       {this._renderImage(imageSrc, imageStyle)}
@@ -690,16 +692,4 @@ export default class DropdownAlert extends Component {
       </Portal>
     );
   }
-}
-
-const getContainerStyle = (args)=>{
-  if(!isObj(args)){
-     args = {isMobile : isMobileMedia(),isTablet : isTabletMedia()};
-  }
-  const {width} = Dimensions.get("window");
-  return {
-    style : {
-       maxWidth  : args.isMobile ? (90*width)/100 : args.isTablet? Math.max((70*width/100),350) : 500
-    }
-  }
 }

package/src/components/Form/Fields/Field.js

@@ -1,5 +1,7 @@
 import PropTypes from "prop-types";
 import KeyboardEventHandler from "../KeyboardEventHandler";
+import { addMediaQueryUpdateStyeSubscription } from "$ehooks";
+import Dimensions from "$cdimensions";
 const {getActions,getFormFields,Forms} = require("../utils")
 import TextField,{parseDecimal} from "$ecomponents/TextField";
 import Icon from "$ecomponents/Icon";
@@ -219,10 +221,10 @@ export default class Field extends AppComponent {
         this.state.validatingValue = this.validatingValue = defaultVal(this.props.defaultValue);
         this.keybaordEvents = [...Object.keys(defaultKeyboardEvents),...this.keybaordEvents]
         this.state.isMobile = isMobileMedia();
-        this.state.textFieldMode = theme.textFieldMode;
         this.state.isReadOnlyOrDisabled = false;
         this.state.isFieldEditable = true;
         this.state.isFieldVisible = typeof this.props.visible =='boolean'? this.props.visible : true;
+        this.state.wrapperStyle = this.getMediaQueryUpdateStyle();
     }
     validatorBeforeValidate({value,validRule,validParams,event,...rest}){
         let _result = undefined;
@@ -610,18 +612,11 @@ export default class Field extends AppComponent {
         }
         return ob;
     }
-    componentDidUpdate(){
-        super.componentDidUpdate();
-        if(typeof this.props.updateNativePropsOnUpdate ==='function'){
-            this.props.updateNativePropsOnUpdate({
-                target : this.wrapperRef,
-                props : this.props,
-            });
-        }
-    }
+    
+    
     componentDidMount (validate){
         super.componentDidMount();
-        this.mediaQueryPropsSubscription = React.getMediaQueryPropsSubscription(this.mediaQueryUpdateNativeProps.bind(this),this.wrapperRef);
+        this.mediaQueryUpdateStyleSubscription = addMediaQueryUpdateStyeSubscription(this.doUpdateMediaQueryStyle.bind(this));
         if(this.canValidate !== false){
             Forms.trigger("registerField",this.getName(),this.getFormName(),this);
         }
@@ -632,8 +627,8 @@ export default class Field extends AppComponent {
         this._fieldRef = undefined;
         this.offAll();
         this.clearEvents();
-        if(this.mediaQueryPropsSubscription){
-            this.mediaQueryPropsSubscription.remove();
+        if(this.mediaQueryUpdateStyleSubscription && this.mediaQueryUpdateStyleSubscription?.remove){
+            this.mediaQueryUpdateStyleSubscription.remove();
         }
         if(this.canValidate !== false){
             Forms.trigger("unregisterField",this.getName(),this.getFormName());
@@ -642,20 +637,17 @@ export default class Field extends AppComponent {
     isHtml(){
         return false;
     }
-    mediaQueryUpdateNativeProps(args){
-        const {isMobile} = args;
-        if(typeof this.props.mediaQueryUpdateNativeProps =='function'){
-            args.props = this.props;
-            args.context = this;
-            return this.props.mediaQueryUpdateNativeProps(args);
-        }
-        const hasTextFieldModeChanged = true;// = this.state.textFieldMode !== theme.textFieldMode && this.state.isMobile !== isMobile;
-        if(this.props.responsive === false && !hasTextFieldModeChanged) return;
-        if((hasTextFieldModeChanged)){
-            this.setState({isMobile,textFieldMode:theme.textFieldMode});
-            return null;
+    doUpdateMediaQueryStyle(args){
+        const wrapperStyle = this.getMediaQueryUpdateStyle(args);
+        this.setState({isMobile:args.isMobile,wrapperStyle});
+    }
+    getMediaQueryUpdateStyle(args){
+        if(this.props.responsive === false) return null;
+        if(!isObj(args)){
+            args = Dimensions.getDimensionsProps();
         }
-        return {style:grid.col(this.props.windowWidth)};
+        const style2 = typeof this.props.mediaQueryUpdateStyle =='function'? this.props.mediaQueryUpdateStyle(args) : null;
+        return StyleSheet.flatten([grid.col(this.props.windowWidth),style2]);
     }
     onKeyEvent(key,event){
         let form = this.getForm();
@@ -1032,11 +1024,13 @@ export default class Field extends AppComponent {
                 rest.height = height;
             }
         }
-        return  <KeyboardEventHandler formFieldName={this.getName()} testID={'RN_FormFieldContainer_'+this.getName()} innerRef={this.wrapperRef} {...wrapperProps}
+        return  <KeyboardEventHandler formFieldName={this.getName()} testID={'RN_FormFieldContainer_'+this.getName()} innerRef={this.wrapperRef} 
+                {...wrapperProps}
                 handleKeys={this.keybaordEvents}
                 onKeyEvent = {this.onKeyEvent.bind(this)}
                 isDisabled = {rest.disabled}
-                style = {[wrapperProps.style,visibleStyle]}
+                mediaQueryUpdateStyle={null}
+                style = {[this.state.wrapperStyle,wrapperProps.style,visibleStyle]} 
             >
                 {(kProps)=>{
                     return this._render({...rest,...kProps},this.setRef.bind(this))

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

@@ -42,10 +42,10 @@ const FormDataDialogProvider = React.forwardRef((props,innerRef)=>{
     if(state.visible){
         formProps.fieldProps = defaultObj(formProps.fieldProps);
         formProps.fieldProps.windowWidth = !isMobile ? MAX_WIDTH : undefined;
-        formProps.fieldProps.updateNativePropsOnUpdate = ({target})=>{
-            if(!target || !target.current || target.setNativeProps || !formRef.current || !formRef.current.dialogRef || !formRef.current.dialogRef.current || !formRef.current.dialogRef.current.isFullScreen) return;
+        formProps.fieldProps.mediaQueryUpdateStyle = ({target})=>{
+            if(!formRef.current || !formRef.current.dialogRef || !formRef.current.dialogRef.current || !formRef.current.dialogRef.current.isFullScreen) return;
             const f = formRef.current.dialogRef.current.isFullScreen();
-            target.current.setNativeProps({ style : f? grid.col() : {width:'100%'}});
+            return f ? grid.col() : {width:'100%'};
         }
     }
     return <Dialog 

package/src/components/Grid/Cell.js

@@ -4,7 +4,7 @@ import React from '$react';
 import {Pressable, StyleSheet} from 'react-native';
 import Dimensions from "$cplatform/dimensions";
 import View from "$ecomponents/View";
-import {defaultStr} from "$cutils";
+import {defaultStr,isObj} from "$cutils";
 import PropTypes from "prop-types";
 import {medias} from "$theme/grid";
 import theme from "$theme";
@@ -66,14 +66,11 @@ export const getSizeStyle = (props)=>{
     }
     paddingMultiplicator = typeof paddingMultiplicator =='number'? paddingMultiplicator : 1.8;
     marginMultiplicator = typeof marginMultiplicator =="number"? marginMultiplicator : 0;
-    const marginRight = marginMultiplicator*gutter;
-    return {
-        style : {paddingRight:gutter*paddingMultiplicator,marginVertical:gutter,width : (((size)/totalSize)*100)+"%"}
-    }
+    return {paddingRight:gutter*paddingMultiplicator,marginVertical:gutter,width : (((size)/totalSize)*100)+"%"}
 }
 
 const GridCellComponent = React.forwardRef((p,ref)=>{
-    const {style,size,children,phoneSize,withSurface,elevation:cElev,mediaQueryUpdateNativeProps,contentProps:cProps,tabletSize,desktopSize,smallPhoneSize,onPress,activeOpacity,onLongPress,flex:customFlex,onPressIn,onPressOut,...props} = p;
+    const {style,size,children,phoneSize,withSurface,elevation:cElev,mediaQueryUpdateStyle,contentProps:cProps,tabletSize,desktopSize,smallPhoneSize,onPress,activeOpacity,onLongPress,flex:customFlex,onPressIn,onPressOut,...props} = p;
     const testID = defaultStr(props.testID,"RN_Grid.CellComponent");
     const contentProps = defaultObj(cProps);
     const C = onPress || onLongPress || onPressIn || onPressOut ? Pressable : View;
@@ -82,13 +79,16 @@ const GridCellComponent = React.forwardRef((p,ref)=>{
     return <View 
         {...props}
         testID={testID} 
-        mediaQueryUpdateNativeProps = {(args)=>{
-            console.log("calling ",args);
-            if(typeof mediaQueryUpdateNativeProps =='function' && mediaQueryUpdateNativeProps(args) === false) return;
-            return getSizeStyle(p);
+        mediaQueryUpdateStyle = {(args)=>{
+            const style2 = getSizeStyle(p);
+            const style = typeof mediaQueryUpdateStyle =='function' && mediaQueryUpdateStyle(args) || undefined;
+            if(isObj(style) || Array.isArray(style)){
+                return StyleSheet.flatten([style2,styles]);
+            }
+            return style2;
         }}
         ref={ref} 
-        style = {[styles.container,customFlex !== undefined && {flex:customFlex},getSizeStyle(p).style,style]}
+        style = {[styles.container,customFlex !== undefined && {flex:customFlex},style]}
     >
         <C testID={testID+"_Content"}  activeOpacity={activeOpacity}  {...contentProps}
              

package/src/components/View/index.js

@@ -3,10 +3,11 @@ import PropTypes from "prop-types";
 import React from "$react";
 import {isMobileNative} from "$cplatform";
 import {debounce,isNumber} from "$cutils";
+import {useMediaQueryUpdateStyle} from "$ehooks";
 
 
-const ViewComponent = React.forwardRef(({mediaQueryUpdateNativeProps,onRender,onLayoutTimeout,onLayout,autoHeight,autoWidth,elevation,...props},ref)=>{
-    const style = React.useMediaQueryUpdateStyle(props);
+const ViewComponent = React.forwardRef(({onRender,onLayoutTimeout,onLayout,autoHeight,autoWidth,elevation,...props},ref)=>{
+    const style = useMediaQueryUpdateStyle(props);
     const autoSize = autoHeight||autoWidth ? true : false;
     const [state,setState] = autoSize ? React.useState({}) : [{}];
     const {width,height} = state;
@@ -32,7 +33,7 @@ const ViewComponent = React.forwardRef(({mediaQueryUpdateNativeProps,onRender,on
             ]
          ]}
          onLayout = {isMobileNative()? onL : debounce(onL,typeof onLayoutTimeout =='number'? onLayoutTimeout : 100)}
-         ref={typeof mediaQueryUpdateNativeProps =='function' ? React.useMediaQueryUpdateNativeProps(mediaQueryUpdateNativeProps,ref) : ref}
+         ref={ref}
     />
 });
 
@@ -41,7 +42,6 @@ export default ViewComponent;
 ViewComponent.displayName = "ViewComponent";
 
 ViewComponent.propTypes = {
-    mediaQueryUpdateNativeProps : PropTypes.func,
     mediaQueryUpdateStyle : PropTypes.func,
     autoWidth : PropTypes.bool,//si la taille de la vue est calculée automatiquement
     autoHeight : PropTypes.bool,//si la taille de 

package/src/hooks/index.js

@@ -0,0 +1,41 @@
+
+import Dimensions from "$cplatform/dimensions";
+import useStableMemo  from "$react/useStableMemo";
+import { useWindowDimensions } from "$cdimensions";
+import {isObj} from "$cutils";
+import { StyleSheet } from "react-native";
+
+
+/*** permet d'attacher un lister sur la modification des props de manière responsive : 
+    permet de récupérer la fonction à attacher par défaut au listener DimensionChange, pour la mise à jour automatique de la propriété style
+   * @param mediaQueryUpdateStyleCb{function}, la fonction permettant de mettre à jour les props lorsque la taille de l'écran change
+   * @param timeout {number}, le délai d'attente à passer à la fonction debounce, pour pouvoir appeler la fonction de mise à jour des props lorsque la taile de l'écran change
+ *  @return {object{remove:function}||null} l'objet null ou ayan la fonction remove permettant de suprimer le listerner lorsque le composant est démonté
+ */
+export const addMediaQueryUpdateStyeSubscription = (mediaQueryUpdateStyleCb,timeout)=>{
+    if(typeof mediaQueryUpdateStyleCb !='function') return null;
+    const options = isObj(timeout)? timeout : {};
+    timeout = typeof timeout =='number'? timeout : typeof options.timeout =='number'? options.timeout : 200;
+    return Dimensions.addEventListener("change",debounce((dimensions)=>{
+        return mediaQueryUpdateStyleCb(Dimensions.getDimensionsProps(dimensions));
+    },timeout));
+}
+
+/*** met à jour dynamiquemnet les propriétés style d'un objet en fonction du changement de la taille de l'objet
+ * @param {useCurrentMedia} {boolean} si true, alors les propriétés sont mis à jour uniquement si le current media change
+   @param {mediaQueryUpdateStyle}, la fonction permettant d'obtenir les propriétés css du composant à retourner
+   @return {object}, le flatten style des propriétés css associés aux props du composant react l'object
+ */
+export function useMediaQueryUpdateStyle({useCurrentMedia,target,mediaQueryUpdateStyle,...props}){
+    if(typeof mediaQueryUpdateStyle !=='function') return props.style;
+    const dimensions = useWindowDimensions();
+    const handleProps = dimensions && useCurrentMedia === true ? Dimensions.getCurrentMedia() : dimensions;
+    return useStableMemo(()=>{
+        const args = Dimensions.getDimensionsProps();
+        args.props = props,
+        args.target = target;
+        const nStyle = mediaQueryUpdateStyle(args);
+        if(isObj(nStyle) || Array.isArray(nStyle)) return StyleSheet.flatten([props.style,nStyle]);
+        return StyleSheet.flatten(props.style)||{};
+    },[handleProps,useCurrentMedia,dimensions,props.style]);
+}

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

@@ -1,5 +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.
-
-export default [];