@fto-consult/expo-ui 6.5.0 → 6.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.5.0",
+  "version": "6.5.2",
   "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/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/TextField/index.js

@@ -229,7 +229,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
         }
     }
     selectionColor = Colors.isValid(selectionColor)? selectionColor : theme.colors.secondaryOnSurface;
-    const flattenStyle = StyleSheet.flatten([styles.input,styles.textInput,props.style,styles.w100,style,upperStyle]);
+    const flattenStyle = StyleSheet.flatten([{pointerEvents},styles.input,styles.textInput,props.style,styles.w100,style,upperStyle]);
     fontSize = defaultNumber(fontSize,flattenStyle.fontSize,FONT_SIZE);
     labelProps = defaultObj(labelProps);
     const alphaColor = isShadowMode || isNormalMode ? theme.colors.text : Colors.setAlpha(theme.colors.text,theme.ALPHA);
@@ -296,6 +296,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     const withAutoHeight = typeof autoHeight === 'boolean'? autoHeight : false;
     const height = withAutoHeight || multiline ? undefined : tHeight;
     const inputStyle2 = withAutoHeight || multiline ? {minHeight : heightRef.current} : null;
+    const containerStyle = StyleSheet.flatten(containerProps.style) || {};
     const inputProps= {
         caretHidden : false,
         ellipsizeMode : "head",
@@ -358,7 +359,6 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
             isShadowMode && styles.inputShadowMode,
             multiline && {paddingTop : isFlatMode? 12 : 7},
         ],
-        pointerEvents,
         secureTextEntry,
         inputMode,
         autoCapitalize : upper?(isAndroid?'characters':"none"):autoCapitalize,
@@ -399,7 +399,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     let hasRight = React.isValidElement(right),hasLeft = React.isValidElement(left);
     enableCopy = enableCopy ? true : false;
     fieldToCopy = defaultStr(fieldToCopy).toLowerCase().trim();
-    if(isEditable ||  isFilter || defaultStr(contentContainerProps.pointerEvents).toLowerCase().contains("none")){
+    if(isEditable ||  isFilter || defaultStr(containerStyle.pointerEvents).toLowerCase().contains("none")){
         enableCopy = false;
     }
     if(enableCopy){
@@ -530,7 +530,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
                 {label}
             </Label> : null}
             <>
-                <Surface testID={testID+"_ContentContainer"} pointerEvents={pointerEvents} {...contentContainerProps} elevation={elevation}  style={[styles.contentContainer,!left? styles.paddingLeft:null,styles.row,contentContainerStyle,contentContainerProps.style]}>
+                <Surface testID={testID+"_ContentContainer"}  {...contentContainerProps} elevation={elevation}  style={[styles.contentContainer,{pointerEvents},!left? styles.paddingLeft:null,styles.row,contentContainerStyle,contentContainerProps.style]}>
                     {left ? (<View testID={testID+"_Left"} {...leftContainerProps} style={[styles.AdornmentContainer,styles.leftAdornment,leftContainerProps.style,disabledStyle]}>
                         {left}
                     </View>) : null}

package/src/components/View/index.js

@@ -6,7 +6,7 @@ import {debounce,isNumber} from "$cutils";
 import {useMediaQueryUpdateStyle} from "$ehooks";
 
 
-const ViewComponent = React.forwardRef(({mediaQueryUpdateNativeProps,onRender,onLayoutTimeout,onLayout,autoHeight,autoWidth,elevation,...props},ref)=>{
+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({}) : [{}];
@@ -33,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}
     />
 });
 
@@ -42,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

@@ -4,63 +4,21 @@ import useStableMemo  from "$react/useStableMemo";
 import { useWindowDimensions } from "$cdimensions";
 import {isObj} from "$cutils";
 import { StyleSheet } from "react-native";
-import React from "$react";
 
-export const updateNativePropsOnDimensionsChanged = (hostRef,updateNativePropsCallback,dimensions)=>{
-    console.log("will set native propsss ",hostRef?.current?.setNativeProps," is native props",hostRef.current)
-    if(!hostRef || !hostRef.current|| typeof hostRef.current.setNativeProps !=='function') return null;
-    const args = Dimensions.getDimensionsProps(dimensions);
-    args.target = hostRef.current;
-    if(typeof updateNativePropsCallback !== 'function') return args;
-    const nProps = updateNativePropsCallback(args,hostRef); 
-    if(!isObj(nProps) || !Object.size(nProps,true)) return null;
-    return hostRef.current.setNativeProps(nProps);
-}
-
-/**** permet de récupérer la fonction à attacher par défaut au listener DimensionChange, pour la mise à jour automatique des props à l'aide de la fonction setNativeProps
- *  * @param updatePropsWithMediaQuery{function}, la fonction permettant de mettre à jour les props lorsque la taille de l'écran change
-    * @pram hostRef{func||object}, la référence de l'objet qu'on utilisera pour mettre à jour les props avec la méthode setNativeProps de react-native
-    * @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 {function||null} la fonction à attacher au listener
- */
-export const mediaQueryUpdateNativePropsCallback = (updatePropsWithMediaQuery,hostRef,timeout)=>{
-    if(typeof updatePropsWithMediaQuery !=='function') return null;
-    if(typeof hostRef ==='number'){
-        const t = timeout;
-        timeout = t;
-        hostRef = typeof t =='function' || isObj(t)? t : undefined;
-    }
-    let options = {};
-    if(typeof timeout =='object' && timeout){
-        options = timeout;
-    }
-    timeout = typeof timeout =='number'? timeout : typeof options.timeout =='number'? options.timeout : 200;
-    return debounce((dimensions)=>{
-        return updateNativePropsOnDimensionsChanged(hostRef,updatePropsWithMediaQuery,dimensions);
-    },timeout);
-}
 
-/*** permet d'attacher un lister sur la modification des props de manière responsive
+/*** 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 getMediaQueryPropsSubscription = (updatePropsWithMediaQuery,hostRef,timeout)=>{
-    const cb = mediaQueryUpdateNativePropsCallback(updatePropsWithMediaQuery,hostRef,timeout);
-    if(!cb) return null;
-    return Dimensions.addEventListener("change",cb);
-}
-
-/**** 
- * @parm {function}, la fonction de rappel à utiliser pour définir les props à passer à la référence
- * @param {ref}, la référence de l'objet dom auquel on écoutera le changement d'évènement
- * @parm timeout, le délai d'attente lorsque la dimension de l'écran change
- */
- export const useMediaQueryUpdateNativeProps = (updatePropsWithMediaQuery,ref,timeout)=>{
-    const hostRef = React.useRef(null);
-    React.useEffect(()=>{
-        const subscription = getMediaQueryPropsSubscription(updatePropsWithMediaQuery,hostRef,timeout);
-        return () => subscription?.remove();
-    },[]);
-    return React.useMergeRefs(hostRef,ref);
+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