@fto-consult/expo-ui 6.4.5 → 6.5.0

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.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

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/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 style = useMediaQueryUpdateStyle(props);
     const autoSize = autoHeight||autoWidth ? true : false;
     const [state,setState] = autoSize ? React.useState({}) : [{}];
     const {width,height} = state;

package/src/hooks/index.js

@@ -0,0 +1,83 @@
+
+import Dimensions from "$cplatform/dimensions";
+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
+ *  @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);
+}
+
+/*** 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 [];