@fto-consult/expo-ui 2.8.0 → 2.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.8.0",
+  "version": "2.9.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "resolutions": {
@@ -67,7 +67,7 @@
     "@expo/metro-config": "^0.4.0",
     "@expo/vector-icons": "^13.0.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.14.15",
+    "@fto-consult/common": "^1.14.16",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

package/src/components/Chart/appexChart/index.js

@@ -11,7 +11,7 @@ const AppexChartComponent = React.forwardRef(({chartContext,options,...props},re
         if (chartContext.current && typeof chartContext.current.destroy === 'function') {
           setTimeout(()=>{
             try {chartContext.current.destroy();} catch{}
-          },500);
+          },1000);
         }
       }
     },[]);

package/src/components/Chart/index.js

@@ -1,6 +1,6 @@
 import React from '$react'
 import PropTypes from 'prop-types'
-import {defaultStr} from "$utils";
+import {defaultStr,defaultObj,uniqid} from "$utils";
 import {extend} from "./utils"
 import stableHash from 'stable-hash';
 import Chart from "./appexChart";
@@ -14,30 +14,34 @@ import Chart from "./appexChart";
  *  options {number} - les options supplémentaires au chart
  * 
 */
-const ChartComponent = React.forwardRef(({type, height, width, series, options,testID,webViewProps, ...props },ref)=>{
+const ChartComponent = React.forwardRef(({type, height,chartId, width, series, options,testID,webViewProps, ...props },ref)=>{
   const chartContext = React.useRef(null);
+  options = defaultObj(options);
+  const chartIdRef = React.useRef(defaultStr(chartId,options.chart?.id,uniqid("chart-id")));
   const config = extend(options,{
     chart: {
       type,
       height,
-      width
+      width,
+      id : chartIdRef.current
     },
     series,
   });
+  config.chart.id = chartIdRef.current;
   testID = defaultStr(testID,"RN_ChartComponent");
   const prevWidth = React.usePrevious(width), prevHeight = React.usePrevious(height);
-  const prevOptions = React.usePrevious(options,stableHash);
+  const prevOptions = React.usePrevious(options,JSON.stringify);
   const prevSeries = React.usePrevious(series,JSON.stringify);
   React.useEffect(()=>{
     if(chartContext.current && chartContext.current.updateOptions){
-        if((JSON.stringify(prevSeries) == JSON.stringify(series)) || width != prevWidth || height != prevHeight){
+        if((prevSeries == series) || width != prevWidth || height != prevHeight){
             chartContext.current.updateOptions(config);
-        } else if(JSON.stringify(prevOptions) != JSON.stringify(options)){
+        } else if(prevOptions != options){
             chartContext.current.updateSeries(series);
         } 
     }
   },[stableHash({type,options,series,width,height})])
-  return <Chart {...props} options={config} chartContext={chartContext} testID={testID} ref={ref}/>
+  return <Chart {...props} options={config} chartId={chartIdRef.current} chartContext={chartContext} testID={testID} ref={ref}/>
 });
 
 

package/src/components/Datagrid/Common/Common.js

@@ -1458,7 +1458,7 @@ export default class CommonDatagridComponent extends AppComponent {
                     onPress = {sortMe}
                     primary
                 />: null}
-                <Label primary={isColumnSorted}>{ret}</Label>
+                <Label textBold style={[{fontSize:13}]} primary={isColumnSorted}>{ret}</Label>
             </>
         </TouchableRipple>
     }

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

@@ -3,6 +3,7 @@ import {isObj,defaultStr} from "$utils";
 import View from "$ecomponents/View";
 import Portal from "$ecomponents/Portal";
 import theme,{Colors} from "$theme";
+import Dimensions,{isMobileMedia,isTabletMedia,isDesktopMedia} from "$dimensions";
 import {
   StyleSheet,
   TouchableOpacity,
@@ -598,7 +599,7 @@ export default class DropdownAlert extends Component {
       wrapperStyle,
       tapToCloseEnabled,
       accessibilityLabel,
-      testID,
+      testID:customTestId,
       accessible,
       contentContainerStyle,
       defaultTextContainer,
@@ -608,6 +609,7 @@ export default class DropdownAlert extends Component {
       showCancel,
       imageStyle,
     } = this.props;
+    const testID = defaultStr(customTestId,"RN_DropdownAlert");
     const {animationValue, bottomValue, height} = this.state;
     const {type, payload} = this.alertData;
     let style = this.getStyleForType(type);
@@ -641,14 +643,6 @@ export default class DropdownAlert extends Component {
       right: 0,
       elevation: elevation,
     };
-    /*wrapperAnimStyle.zIndex = 1000100;
-    if (zIndex != null) {
-      wrapperAnimStyle.zIndex = zIndex;
-    }*/
-    let ContentView = View//SafeAreaView;
-    if (IS_IOS_BELOW_11 || IS_ANDROID) {
-      ContentView = View;
-    }
     const activeOpacity = !tapToCloseEnabled || showCancel ? 1 : 0.95;
     const onPress = !tapToCloseEnabled
       ? null
@@ -658,28 +652,45 @@ export default class DropdownAlert extends Component {
           <Animated.View
             ref={(ref) => (this.mainView = ref)}
             {...this.panResponder.panHandlers}
+            testID={testID+"_AnimatedView"}
             style={[wrapperAnimStyle, wrapperStyle]}>
             <TouchableOpacity
-            activeOpacity={activeOpacity}
-            onPress={onPress}
-            disabled={!tapToCloseEnabled}
-            onLayout={(event) => this._onLayoutEvent(event)}
-            testID={testID}
-            accessibilityLabel={accessibilityLabel}
-            accessible={accessible}>
-            <View style={style}>
-                <ContentView style={StyleSheet.flatten(contentContainerStyle)}>
-                {this._renderImage(imageSrc, imageStyle)}
-                <View style={StyleSheet.flatten(defaultTextContainer)}>
-                    {this._renderTitle()}
-                    {this._renderMessage()}
+              activeOpacity={activeOpacity}
+              onPress={onPress}
+              disabled={!tapToCloseEnabled}
+              onLayout={(event) => this._onLayoutEvent(event)}
+              testID={testID}
+              accessibilityLabel={accessibilityLabel}
+              accessible={accessible}>
+            <View style={style} testID={testID+"_ContentContainer"}>
+                  <View testID={testID+"_ContentWrapper"} style={[contentContainerStyle,getContainerStyle().style]}
+                     mediaQueryUpdateNativeProps={(args)=>{
+                       return getContainerStyle(args);
+                    }}
+                  >
+                      {this._renderImage(imageSrc, imageStyle)}
+                      <View testID={testID+"_Content"} style={defaultTextContainer}>
+                          {this._renderTitle()}
+                          {this._renderMessage()}
+                      </View>
+                      {this._renderCancel(showCancel)}
                 </View>
-                {this._renderCancel(showCancel)}
-                </ContentView>
             </View>
             </TouchableOpacity>
         </Animated.View>
       </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/Fab/Group.js

@@ -9,8 +9,122 @@ import Group from "./GroupComponent";
 import Portal from "$ecomponents/Portal";
 import {isAllowedFromStr} from "$cauth/perms";
 
+const activeRef = {current:null};
+
+export const isValid = (context)=>{
+    if(!isObj(context) || !isNonNullString(context.fabId) || typeof context.show !=="function" || context.hide !="function") return false;
+    return true;
+}
+/*** retourne le fab d'ont l'id est passé en paramètre */
+export const getFab = (fabId)=>{
+    if(!isNonNullString(fabId)) return null;
+    return isValid(allFabs[fabId])? allFabs[fabId] : null;
+}
+const allFabs = {};
+///les ids des fabs
+const fabIdRefs = {current:[]};
+
+//ajoute l'id du fab dans la lite des fabActif
+export const activateFabId = (fabId)=>{
+    if(!isNonNullString(fabId)) return fabIdRefs.current;
+    const nIds = desactivateFabId(fabId);
+    ///le fab active devient en top des id
+    nIds.push(fabId);
+    fabIdRefs.current = nIds;
+}
+
+export const desactivateFabId = (fabId)=>{
+    if(!isNonNullString(fabId)) return fabIdRefs.current;
+    const nIds = [];
+    for(let i in fabIdRefs.current){
+        if(fabIdRefs.current[i] != fabId){
+            nIds.push(fabIdRefs.current[i]);
+        }
+    }
+    fabIdRefs.current = nIds;
+    return nIds;
+}
+
+export const isActive = (fabId)=>{
+    return isNonNullString(fabId) && fabIdRefs.current[fabIdRefs.current.length-1] == fabId && isValid(getFab(fabId));
+}
+
+export const MANAGER = {
+    get active (){
+        return activeRef.current;
+    },
+    ///la liste des fabs
+    get all (){
+        return allFabs;
+    },
+    ///la liste des fabs Id
+    get fabIds (){
+        return fabIdRefs.current;
+    },
+    set active(active){
+        active = isValid(active)? active : null;
+        if(active){
+            ///on désactive l'ancien fab qui était actif
+            if(isValid(activeRef.current)){
+                activeRef.current.hide();
+            }
+            activateFabId(active.fabId);
+            activeRef.current = active;
+        } else {
+            //l'ancien fab devient active
+            let length = fabIdRefs.current.length-1;
+            let prevActive = null,prevFabId = null;
+            ///ça veut dire que l'ancien fab active a été démonté
+            if(isValid(activeRef.current)){
+                prevFabId = activeRef.current.fabId
+            }
+            while(length >=0 && !isValid(prevActive)){
+                const fId = fabIdRefs.current[length];
+                if(isNonNullString(fId) && fId !== prevFabId){
+                    prevActive = allFabs[fId];
+                    if(isValid(prevActive)){
+                        break;
+                    }
+                }
+                length --;
+            }   
+            if(!prevActive){
+                fabIdRefs.current = [];
+                Object.map(allFabs,(f,i)=>{
+                    delete allFabs[i];
+                })
+            }
+            if(isValid(prevActive)){
+                prevActive.show();
+                activateFabId(prevActive.fabId);
+            }
+            activeRef.current = prevActive;
+        }
+    },
+    get hasActive(){
+        return isValid(activeRef.current);
+    },
+    get get (){
+        return getFab;
+    }
+};
+
+export const activate = (args)=>{
+    const {context,fabId} = args;
+    if(!isNonNullString(fabId)|| !isObj(context)) return false;
+    let hasFound = false;
+    for(let i in allFabs){
+       if(allFabs[i]?.fabId == fabId){
+         hasFound = true;
+         break;
+       }
+    }
+}
 const FabGroupComponent = React.forwardRef((props,innerRef)=>{
-    let {openedIcon,screenName,display:customDisplay,primary,actionMutator,secondary,onOpen,prepareActions,fabStyle,open:customOpen,onClose,onStateChange:customOnStateChange,closedIcon,color,actions:customActions,children,...customRest} = props;
+    let {openedIcon,screenName,fabId,display:customDisplay,onMount,onUnmount,primary,actionMutator,secondary,onOpen,prepareActions,fabStyle,open:customOpen,onClose,onStateChange:customOnStateChange,closedIcon,color,actions:customActions,children,...customRest} = props;
+    const fabIdRef = React.useRef(defaultStr(fabId,uniqid("fab-id-ref")));
+    fabId = fabIdRef.current;
+    const isMountedRef = React.useRef(false);
     const [state, setState] = React.useStateIfMounted({ 
         open: typeof customOpen =='boolean'? customOpen : false,
         display : typeof customDisplay ==='boolean'? customDisplay : true,
@@ -27,6 +141,8 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
     const context = {
         open:x=>setState({...state,open:true}),
         close : x=> {setState({...state,open:false})},
+        fabId,
+        id : fabId,
         hide : x=> {
             setState({...state,display:false})
         },
@@ -35,9 +151,11 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
         },
         isHidden : x => !state.display,
         isShown : x => state.display,
+        isVisible : x=> state.display,
         isClosed : x => !state.open,
         isOpened : x => state.open,
     }
+    allFabs[fabId] = context;
     const {open,display} = state;
     openedIcon = defaultStr(openedIcon,"close");
     closedIcon = defaultStr(closedIcon,MENU_ICON);
@@ -77,11 +195,24 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
     },[customActions,prepareActions,open])();
     
     React.useEffect(()=>{
+        onMount && onMount(context);
         React.setRef(innerRef,context);
+        isMountedRef.current = true;
         return ()=>{
+            onUnmount && onUnmount({fabId});
+            delete allFabs[fabId];
+            desactivateFabId(fabId);
+            isMountedRef.current = false;
             React.setRef(innerRef,null);
         }
     },[])
+    React.useEffect(()=>{
+        if(display){
+            MANAGER.active = context;
+        } else {
+            MANAGER.active = null;
+        }
+    },[display]);
     return <Portal>
         <Group
           {...rest}
@@ -112,6 +243,9 @@ const actionType = PropTypes.shape({
 });
 FabGroupComponent.propTypes = {
     ...defaultObj(FAB.Group.propTypes),
+    fabId : PropTypes.string,//l'id du fab
+    onMount : PropTypes.func, ///lorsque le composant est monté
+    onUnmount : PropTypes.func, //lorsque le composant est démonté
     actionMutator : PropTypes.func,
     prepareActions : PropTypes.bool, //si un retraitement sera effectué sur les actions du FAB
     onOpen : PropTypes.func,

package/src/components/Link/index.js

@@ -1,10 +1,11 @@
 import { Pressable } from "react-native";
 import { navigate } from "$cnavigation";
 import PropTypes from "prop-types";
-import {defaultStr} from "$utils";
+import {defaultStr,defaultNumber} from "$utils";
 import React from "$react";
+
 const LinkComponent= React.forwardRef((props,ref)=>{
-    let {Component,navigation,children,params,stopEventPropagation,source,onPress,routeParams,routeName,routeSource,routeType, ...rest} = props;
+    let {Component,navigation,children,params,stopEventPropagation,timeout,delay,source,onPress,routeParams,routeName,routeSource,routeType, ...rest} = props;
     const onRoutePress = (e)=>{
         if(stopEventPropagation !== false){
             React.stopEventPropagation(e);
@@ -12,7 +13,9 @@ const LinkComponent= React.forwardRef((props,ref)=>{
         if(onPress && onPress(e) === false){
             return;
         }
-        navigate({routeName,previousRoute:undefined,routeParams,params,type:routeType,source:defaultStr(routeSource,source)},navigation);
+        setTimeout(()=>{
+            navigate({routeName,previousRoute:undefined,routeParams,params,type:routeType,source:defaultStr(routeSource,source)},navigation);
+        },defaultNumber(timeout,delay))
     };
     if(typeof children =='function'){
         return children ({...rest,onPress:onRoutePress},ref);
@@ -26,6 +29,8 @@ const LinkComponent= React.forwardRef((props,ref)=>{
 LinkComponent.propTypes = {
     stopEventPropagation : PropTypes.bool, //si la propagation d'évènement sera effective une fois qu'on ait cliqué sur le lien
     onPress : PropTypes.func,
+    timeout : PropTypes.number,
+    delay : PropTypes.number,//le delay d'attente lorsqu'on clique sur l'élément avant de faire la navigation
     routeName : PropTypes.string.isRequired,
     routeParams : PropTypes.object, //les paramètres à passer à la route
     routeType : PropTypes.string, //le type de route : stack ou drawer

package/src/components/Table/index.js

@@ -213,7 +213,7 @@ const TableComponent = React.forwardRef(({containerProps,renderEmpty,isRowSelect
     React.setRef(tableRef,context);
     const cStyle = {width:listWidth}
     const absoluteScrollViewRef = React.useRef(null);
-    return <View testID= {testID+"_Container"} {...containerProps} style={[styles.container,{alignItems:'stretch'},containerProps.style,theme.styles.pl0,theme.styles.pr0]}>
+    return <View testID= {testID+"_Container"} {...containerProps} style={[styles.container,{alignItems:'stretch'},containerProps.style]}>
             <RNView style={[cStyle]} testID={testID+"_Headers_ScrollViewContainer"}>
                 <ScrollView
                     testID={testID+"_HeaderScrollView"}
@@ -352,7 +352,8 @@ const styles = StyleSheet.create({
         width : '100%',
         minHeight : 300,
         paddingBottom : 50,
-        paddingHorizontal : 5,
+        paddingLeft : 10,
+        paddingRight : 10,
         flex : 1,
         position : 'relative',
     },

package/src/layouts/Fab/index.js

@@ -16,6 +16,7 @@ const FABContainer = React.forwardRef((props,ref)=>{
   ref = ref || createFabRef(screenName);
   React.useEffect(()=>{
     const onFocusFab = ({sanitizedName})=>{
+        console.log(sanitizedName," is dddddd focused")
         const isFocused = sanitizedName === sScreenName;
         if(isFocused && ref.current && ref.current.show){
             ref.current.show();

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

@@ -107,8 +107,8 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,...props},ref)=>
                         }}
                     >
                     <View style={styles.labelContainer}>
-                        <Label splitText style={{color:theme.colors.primaryOnSurface}}>{pseudo}</Label>
-                        <Label splitText style={{fontSize:12,color:theme.colors.secondaryOnSurface,marginTop:6}}>
+                        <Label splitText numberOfLines={1} style={{color:theme.colors.primaryOnSurface,fontSize:14}}>{pseudo}</Label>
+                        <Label splitText numberOfLines={1} style={{fontSize:12,color:theme.colors.secondaryOnSurface,marginTop:6}}>
                             {label}
                         </Label>
                         {deviceName && <Label.withRef textBold splitText title={"Identifiant unique de l'application, installé sur cet appareil"} ref={deviceNameRef} secondary style={{fontSize:10}}>

package/src/screens/NetWork

@@ -1,4 +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.
-