@fto-consult/expo-ui 2.7.13 → 2.9.0

package/package.json

@@ -1,115 +1,115 @@
-{
-  "name": "@fto-consult/expo-ui",
-  "version": "2.7.13",
-  "description": "Bibliothèque de composants UI Expo,react-native",
-  "main": "index.js",
-  "resolutions": {
-    "@expo/cli": "xxx"
-  },
-  "scripts": {
-    "publish1": "npm publish --access=public",
-    "unpublish": "npm -f unpublish @fto-consult/expo-ui",
-    "build-web": "",
-    "dev": "npx expo start -c --no-minify",
-    "start": "npx expo start --dev --no-minify",
-    "start-d": "npx expo start -c --no-dev --no-minify",
-    "start-p": "npm run start-d",
-    "expo-start-client": "npx expo start --dev --no-minify --dev-client",
-    "start-m": "npx expo start - c--dev--no -minify",
-    "android": "npx expo start --android -c",
-    "ios": "npx expo start --ios",
-    "web": "npx expo start --web",
-    "web-c": "npx expo start --web -c",
-    "eject": "expo eject",
-    "emulator": "npm run android-emulator",
-    "web-server": "npx serve web-build",
-    "build-android": "eas build --clear-cache -p android --profile preview",
-    "build-android-local": "eas build --platform android --local",
-    "build-android-dist": "eas build --clear-cache -p android",
-    "build-ios": "eas build --clear-cache -p ios --profile preview",
-    "build-ios-dist": "eas build --clear-cache -p ios",
-    "install-apk": "adb -s emulator-5554 install myapp.apk",
-    "android-emulator": "emulator -avd EMULATOR",
-    "flipper": "npx cross-env METRO_SERVER_PORT=19000 E:\\Studies\\react-native\\debugger\\Flipper-win\\Flipper.exe",
-    "build-electron": "electron-webpack && electron-builder --dir -c.compression=store",
-    "test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
-    "compile-electron": "webpack --config ./electron/webpack.config.js",
-    "compile-electron-p": "webpack --config ./electron/webpack.config.js --mode=production",
-    "electron": "electron ./electron",
-    "logcat": "adb -d logcat com.ftc.apps.salite1:E > errors.txt",
-    "logcat-export": "adb -d logcat com.ftc.apps.salite1 *:S > logcat.txt",
-    "electron-c": "npm run compile-electron && npm run electron",
-    "electron-p": "npm run compile-electron-p && npm run electron",
-    "update-app-version": "node ./update-app-version.js",
-    "find-licenses": "node ./find-licenses.js",
-    "fix-dependencies": "expo doctor --fix-dependencies",
-    "delete-node-modules": "rimraf ./**/node_modules"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/borispipo/expo-ui.git"
-  },
-  "keywords": [
-    "Expo",
-    "React-Native"
-  ],
-  "author": "Boris Fouomene",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/borispipo/expo-ui/issues"
-  },
-  "homepage": "https://github.com/borispipo/expo-ui#readme",
-  "dependencies": {
-    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/preset-react": "^7.18.6",
-    "@emotion/native": "^11.10.0",
-    "@expo/html-elements": "^0.2.0",
-    "@expo/metro-config": "^0.4.0",
-    "@expo/vector-icons": "^13.0.0",
-    "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.13.1",
-    "@gorhom/portal": "^1.0.14",
-    "@react-native-async-storage/async-storage": "~1.17.3",
-    "@react-native-community/datetimepicker": "6.5.2",
-    "@react-native-community/netinfo": "9.3.5",
-    "@react-navigation/native": "^6.0.13",
-    "@react-navigation/native-stack": "^6.9.1",
-    "@shopify/flash-list": "1.3.1",
-    "babel-plugin-inline-dotenv": "^1.7.0",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "expo": "^47.0.8",
-    "expo-camera": "~13.1.0",
-    "expo-clipboard": "~4.0.1",
-    "expo-font": "~11.0.1",
-    "expo-image-picker": "~14.0.2",
-    "expo-linking": "~3.2.3",
-    "expo-sqlite": "~11.0.0",
-    "expo-status-bar": "~1.4.2",
-    "expo-system-ui": "~2.0.1",
-    "expo-web-browser": "~12.0.0",
-    "google-libphonenumber": "^3.2.31",
-    "htmlparser2-without-node-native": "^3.9.2",
-    "mongo-parse": "^2.1.0",
-    "parent-package-json": "^2.0.1",
-    "prop-types": "^15.8.1",
-    "react": "18.1.0",
-    "react-apexcharts": "^1.4.0",
-    "react-content-loader": "^6.2.0",
-    "react-dom": "18.1.0",
-    "react-native": "0.70.5",
-    "react-native-big-list": "^1.5.5",
-    "react-native-gesture-handler": "~2.8.0",
-    "react-native-paper": "^4.12.5",
-    "react-native-paper-dates": "^0.9.2",
-    "react-native-reanimated": "~2.12.0",
-    "react-native-safe-area-context": "4.4.1",
-    "react-native-screens": "~3.18.0",
-    "react-native-svg": "13.4.0",
-    "react-native-web": "~0.18.7",
-    "react-native-webview": "11.23.1",
-    "sharp-cli": "^2.1.0",
-    "tippy.js": "^6.3.7",
-    "yargs": "^17.1.1-candidate.0"
-  }
-}
+{
+  "name": "@fto-consult/expo-ui",
+  "version": "2.9.0",
+  "description": "Bibliothèque de composants UI Expo,react-native",
+  "main": "index.js",
+  "resolutions": {
+    "@expo/cli": "xxx"
+  },
+  "scripts": {
+    "publish1": "npm publish --access=public",
+    "unpublish": "npm -f unpublish @fto-consult/expo-ui",
+    "build-web": "",
+    "dev": "npx expo start -c --no-minify",
+    "start": "npx expo start --dev --no-minify",
+    "start-d": "npx expo start -c --no-dev --no-minify",
+    "start-p": "npm run start-d",
+    "expo-start-client": "npx expo start --dev --no-minify --dev-client",
+    "start-m": "npx expo start - c--dev--no -minify",
+    "android": "npx expo start --android -c",
+    "ios": "npx expo start --ios",
+    "web": "npx expo start --web",
+    "web-c": "npx expo start --web -c",
+    "eject": "expo eject",
+    "emulator": "npm run android-emulator",
+    "web-server": "npx serve web-build",
+    "build-android": "eas build --clear-cache -p android --profile preview",
+    "build-android-local": "eas build --platform android --local",
+    "build-android-dist": "eas build --clear-cache -p android",
+    "build-ios": "eas build --clear-cache -p ios --profile preview",
+    "build-ios-dist": "eas build --clear-cache -p ios",
+    "install-apk": "adb -s emulator-5554 install myapp.apk",
+    "android-emulator": "emulator -avd EMULATOR",
+    "flipper": "npx cross-env METRO_SERVER_PORT=19000 E:\\Studies\\react-native\\debugger\\Flipper-win\\Flipper.exe",
+    "build-electron": "electron-webpack && electron-builder --dir -c.compression=store",
+    "test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
+    "compile-electron": "webpack --config ./electron/webpack.config.js",
+    "compile-electron-p": "webpack --config ./electron/webpack.config.js --mode=production",
+    "electron": "electron ./electron",
+    "logcat": "adb -d logcat com.ftc.apps.salite1:E > errors.txt",
+    "logcat-export": "adb -d logcat com.ftc.apps.salite1 *:S > logcat.txt",
+    "electron-c": "npm run compile-electron && npm run electron",
+    "electron-p": "npm run compile-electron-p && npm run electron",
+    "update-app-version": "node ./update-app-version.js",
+    "find-licenses": "node ./find-licenses.js",
+    "fix-dependencies": "expo doctor --fix-dependencies",
+    "delete-node-modules": "rimraf ./**/node_modules"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/borispipo/expo-ui.git"
+  },
+  "keywords": [
+    "Expo",
+    "React-Native"
+  ],
+  "author": "Boris Fouomene",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/borispipo/expo-ui/issues"
+  },
+  "homepage": "https://github.com/borispipo/expo-ui#readme",
+  "dependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/preset-react": "^7.18.6",
+    "@emotion/native": "^11.10.0",
+    "@expo/html-elements": "^0.2.0",
+    "@expo/metro-config": "^0.4.0",
+    "@expo/vector-icons": "^13.0.0",
+    "@expo/webpack-config": "^0.17.2",
+    "@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",
+    "@react-native-community/netinfo": "9.3.5",
+    "@react-navigation/native": "^6.0.13",
+    "@react-navigation/native-stack": "^6.9.1",
+    "@shopify/flash-list": "1.3.1",
+    "babel-plugin-inline-dotenv": "^1.7.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "expo": "^47.0.8",
+    "expo-camera": "~13.1.0",
+    "expo-clipboard": "~4.0.1",
+    "expo-font": "~11.0.1",
+    "expo-image-picker": "~14.0.2",
+    "expo-linking": "~3.2.3",
+    "expo-sqlite": "~11.0.0",
+    "expo-status-bar": "~1.4.2",
+    "expo-system-ui": "~2.0.1",
+    "expo-web-browser": "~12.0.0",
+    "google-libphonenumber": "^3.2.31",
+    "htmlparser2-without-node-native": "^3.9.2",
+    "mongo-parse": "^2.1.0",
+    "parent-package-json": "^2.0.1",
+    "prop-types": "^15.8.1",
+    "react": "18.1.0",
+    "react-apexcharts": "^1.4.0",
+    "react-content-loader": "^6.2.0",
+    "react-dom": "18.1.0",
+    "react-native": "0.70.5",
+    "react-native-big-list": "^1.5.5",
+    "react-native-gesture-handler": "~2.8.0",
+    "react-native-paper": "^4.12.5",
+    "react-native-paper-dates": "^0.9.2",
+    "react-native-reanimated": "~2.12.0",
+    "react-native-safe-area-context": "4.4.1",
+    "react-native-screens": "~3.18.0",
+    "react-native-svg": "13.4.0",
+    "react-native-web": "~0.18.7",
+    "react-native-webview": "11.23.1",
+    "sharp-cli": "^2.1.0",
+    "tippy.js": "^6.3.7",
+    "yargs": "^17.1.1-candidate.0"
+  }
+}

package/src/auth/Login.js

@@ -86,7 +86,7 @@ export default function LoginComponent(props){
             },1000)
         }
     },[withPortal])
-    const {header,withScrollView:customWithScrollView,children,initialize,contentTop,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,mutateData,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
+    const {header,withScrollView:customWithScrollView,children,initialize,contentTop,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,mutateData,beforeSubmit:beforeSubmitForm,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
         ...state,
         setState,
         state,
@@ -119,6 +119,7 @@ export default function LoginComponent(props){
      * par défaut, on envoie les données lorssqu'on est à l'étappe 2
      * **/
     const canSubmit = typeof canSubmitForm =='function'? canSubmitForm : ({step})=>step >= 2;
+    const beforeSubmit = typeof beforeSubmitForm =='function'? beforeSubmitForm : x=> true;
     const goToNext = ()=>{
         let step = state.step;
         const data = getData();
@@ -149,7 +150,7 @@ export default function LoginComponent(props){
             nextButtonRef.current?.enable();
         }
         if(step > 1){
-            if(canSubmit(args)){
+            if(canSubmit(args) && beforeSubmit(args) !== false){
                 ///pour modifier automatiquement la données à mettre à jour
                 if(typeof mutateData =='function'){
                     mutateData(data);
@@ -178,7 +179,7 @@ export default function LoginComponent(props){
             else {
                 loginFields[i] = Object.clone(field);
                 hasLoginFields = true;
-                if("autoFocusOnStep" in loginFields[i]){
+                if("autoFocusOnStep" in loginFields[i] && typeof loginFields[i].autoFocus !=='boolean'){
                     loginFields[i].autoFocus = !!loginFields[i].autoFocusOnStep;    
                 }
             }

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

@@ -11,7 +11,7 @@ import {notify,showConfirm} from "$ecomponents/Dialog";
 import Label from "$ecomponents/Label";
 import Image from "$ecomponents/Image";
 import Icon,{COPY_ICON} from "$ecomponents/Icon";
-import filterUtils from "$ecomponents/Filter/utils";
+import filterUtils from "$cfilters";
 import Hashtag from "$ecomponents/Hashtag";
 import {sortBy,isDecimal,extendObj,isObjOrArray,defaultNumber,defaultStr,isFunction,defaultBool,defaultArray,defaultObj,isNonNullString,defaultDecimal} from "$utils";
 import {Datagrid as DatagridContentLoader} from "$ecomponents/ContentLoader";
@@ -900,7 +900,7 @@ export default class CommonDatagridComponent extends AppComponent {
             field = header.field = defaultStr(header.field,field,headerIndex);
             delete restCol.filter;
             
-            const type = defaultStr(header.type).toLowerCase();
+            const type = defaultStr(header.jsType,header.type,"text").toLowerCase();
             sortType = defaultStr(sortType,type).toLowerCase();
             width = defaultDecimal(width);
             if(width <COLUMN_WIDTH/2){
@@ -929,6 +929,7 @@ export default class CommonDatagridComponent extends AppComponent {
             });
             restCol.field = header.field;
             restCol.label = defaultStr(header.text,header.label) ;
+            restCol.type = type;
             if(!restCol.label){
                 console.error(header," has not label or text in datagrid",columns,this.props)
             }
@@ -957,6 +958,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 delete restCol.sortable;
                 filterProps = {
                     ...restCol,
+                    type,
                     columnIndex,
                     visibleColumnIndex,
                     sortable:isColumnSortable,
@@ -986,6 +988,7 @@ export default class CommonDatagridComponent extends AppComponent {
             }
             this.prepareColumn({
                 visible,
+                type,
                 columnIndex,
                 visibleColumnIndex,
                 sortable:isColumnSortable,
@@ -1493,6 +1496,7 @@ export default class CommonDatagridComponent extends AppComponent {
         if(!isObj(rowData)) return {render:null,extra:{}};
          let _render = null;
          columnDef = defaultObj(columnDef);
+         let _type = defaultStr(columnDef.jsType,columnDef.type).trim().toLowerCase();
          if(this.isSelectableColumn(columnDef,columnField)){
              rowKey = rowKey ? rowKey : this.getRowKey(rowData,rowIndex);
              return {render :handleSelectableColumn === false ? null : this.renderSelectableCheckboxCell({
@@ -1528,7 +1532,6 @@ export default class CommonDatagridComponent extends AppComponent {
             _render = defaultDecimal(columnDef.multiplicater({...renderArgs,value:rowData[columnField]}),rowData[columnField]);
         } else {
              _render = defaultValue;
-             let _type = defaultStr(columnDef.type).trim().toLowerCase();
              if(defaultStr(columnDef.format).toLowerCase() === 'hashtag'){
                 _render = <Hashtag>{_render}</Hashtag>
              } else if(typeof columnDef.render === "function"){

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,