@fto-consult/expo-ui 2.44.0 → 2.45.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.44.0",
+  "version": "2.45.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^2.5.2",
+    "@fto-consult/common": "^2.7.0",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

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

@@ -3382,7 +3382,7 @@ export default class CommonDatagridComponent extends AppComponent {
         return false;
     }
     UNSAFE_componentWillReceiveProps(nextProps){
-        if(React.areEquals(nextProps.data,(this.props.data))) {
+        if(React.areEquals(nextProps.data,this.props.data) || (stableHash(nextProps.data) === stableHash(this.props.data))) {
             return false;
         }
         this.setIsLoading(true,true);

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 stableHash from "stable-hash";
 import Dimensions,{isMobileMedia,isTabletMedia,isDesktopMedia} from "$dimensions";
 import {
   StyleSheet,
@@ -345,14 +346,21 @@ export default class DropdownAlert extends Component {
   };
   _processQueue = () => {
     const data = this.queue.firstItem;
+    if(data && this.activeData){
+        if(data.type == this.activeData.type && React.getTextContent(data.title) == React.getTextContent(this.activeData.title) && React.getTextContent(data.message) == React.getTextContent(this.activeData.message)){
+            this.queue.dequeue();
+            return this._processQueue();
+        }
+    }
     if (data) {
       this.open(data);
     }
   };
   open = (data = {}) => {
+    this.activeData = data;
     this.alertData = data;
     const position = data.top || this.isKeyboardOpen() ? "top" : data.position;
-    this.setState({isOpen: true,key:!this.state.key,position},()=>{
+    this.setState({isOpen: true,position},()=>{
       this.animate(1, 450, () => {
         if (data.interval > 0) {
           this.closeAutomatic(data.interval);

package/src/components/Drawer/NavigationView.js

@@ -35,19 +35,24 @@ const DrawerNavigationViewComponent = React.forwardRef((props,ref)=>{
                         style = {flattenStyle([{margin:0,marginHorizontal:0},toggleIconProps.style])}
                         onPress = {(e)=>{
                             ///si le drawer n'est pas visible alors on le rend visible
-                            if(!isPermanent || !drawerRef.current.isOpen()){
-                                return context.toggle();
+                            if(typeof context.toggle === 'function'){
+                                if(!isPermanent || !drawerRef.current.isOpen()){
+                                    return context.toggle();
+                                }
                             }
-                            /*** si le drawer est minimisé */
-                            if(isMinimized){
-                                context.toggleMinimized(false);//on passe au mode non minimisé
-                            } else if(minimizable !== false) {
-                                return context.toggleMinimized(!isMinimized,{permanent:true});
+                            
+                            if(typeof context.toggleMinimized ==='function'){
+                                /*** si le drawer est minimisé */
+                                if(isMinimized){
+                                    context.toggleMinimized(false);//on passe au mode non minimisé
+                                } else if(minimizable !== false) {
+                                    return context.toggleMinimized(!isMinimized,{permanent:true});
+                                }
                             }
                         }}
                         onLongPress = {(e)=>{
                             React.stopEventPropagation(e);
-                            if(isMinimized || !canBeMinimizedOrPermanent()){
+                            if(isMinimized || (!canBeMinimizedOrPermanent() && !isPermanent)){
                             ///le long press n'a pas d'effet sur le drawer quand il est minimié
                                 return;
                             }

package/src/components/Drawer/index.js

@@ -1,4 +1,4 @@
-import {StyleSheet,useWindowDimensions} from 'react-native';  
+import {StyleSheet,Dimensions} from 'react-native';  
 import DrawerLayout from './DrawerLayout';
 import {isIos} from "$cplatform";
 import React from "$react";
@@ -6,14 +6,12 @@ import PropTypes from "prop-types";
 import {defaultObj,isObj,isNonNullString} from "$utils";
 import theme,{Colors,flattenStyle} from "$theme";
 import DrawerItems from './DrawerItems';
-import {isDesktopMedia} from "$cplatform/dimensions";
-import {isMobileNative} from "$cplatform";
+import {isDesktopMedia,getCurrentMedia} from "$cplatform/dimensions";
 import {open,close} from "$epreloader";
 import {DRAWER_POSITIONS,DRAWER_TYPES,MINIMIZED_WIDTH,getDrawerWidth,MINIMIZED_ICON_SIZE,ICON_SIZE} from './utils';
 import Icon,{MENU_ICON} from "$ecomponents/Icon";
 import apiSession from "./session";
 import View from "$ecomponents/View";
-import Dimensions from "$cdimensions";
 import {closeDrawer} from './DrawerItems/utils';
 import {DrawerContext} from "./Provider";
 import NavigationView from "./NavigationView";
@@ -36,9 +34,9 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
       onDrawerOpen,onDrawerClose,onDrawerToggle,header,headerProps,toggleIconProps,
       permanentToggleIcon,minimizedToggleIcon,temporaryToggleIcon,withMinimizedIcon,
       isItemActive,onPageResize,navigationViewRef,
-      children,drawerType} = props;
+      children,
+      drawerType} = props;
     sessionName = defaultStr(sessionName);
-    useWindowDimensions();
     const sessionRef = React.useRef({});
     const session = React.useMemo(()=>{
         if(sessionName){

package/src/components/ScrollView/index.js

@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import View from "$ecomponents/View";
 import theme from "$theme";
 import {defaultStr,defaultObj} from "$utils";
-import stableHash from "stable-hash";
 import APP from "$capp/instance";
 const ScrollViewComponent = React.forwardRef(({virtualized,contentProps,containerProps,mediaQueryUpdateNativeProps,testID:customTestID,children:cChildren,screenIndent:sIndent,...rest},ref) => {
   const isKeyboardOpenRef = React.useRef(false);
@@ -12,11 +11,7 @@ const ScrollViewComponent = React.forwardRef(({virtualized,contentProps,containe
   containerProps = defaultObj(containerProps)
   const [layout,setLayout] = React.useState(Dimensions.get("window"));
   const {height} = layout;
-  const [children,setChildren] = React.useState(cChildren);
-  const hash = stableHash(cChildren);
-  React.useEffect(()=>{
-    setChildren(children);
-  },[hash]);
+  const children = React.useStableMemo(()=>cChildren,[cChildren]);
   React.useEffect(()=>{
     const onKeyboardToggle = ({visible})=>{
       isKeyboardOpenRef.current = visible;

package/src/components/Tab/TabItems.js

@@ -5,13 +5,13 @@ import {
   StyleSheet,
   Platform,
 } from 'react-native';
-import ScrollView  from "$ecomponents/ScrollView";
 import PropTypes from "prop-types";
 import theme,{StylePropTypes,Colors} from "$theme";
 import {isMobileNative,isMobileBrowser} from "$cplatform"
 import {defaultStr} from "$utils";
 import {Elevations} from "$ecomponents/Surface";
-
+import stableHash from "stable-hash";
+import ScrollView from '$ecomponents/ScrollView';
 const showScrollBarIndicator = !isMobileBrowser() && !isMobileNative();
 
 import TabItem from "./TabItem";
@@ -96,6 +96,33 @@ const TabItemsComponent = ({
   indicatorStyle.left = getLeftPosition();
   testID = defaultStr(testID,"RNE_TabComponent");
   scrollViewProps = defaultObj(scrollViewProps)
+  const childrenContent = React.useMemo(()=>{
+    return React.Children.map(children, (child, index) => {
+      const active = index === activeIndex?true : false;
+      return React.cloneElement(
+        child,
+        {
+          onPress: () => {
+            onChange(index);
+          },
+          onLayout: (event) => {
+            const { width } = event.nativeEvent.layout;
+            const previousItemPosition =
+              tabItemsPosition.current[index - 1]?.position || 0;
+
+            tabItemsPosition.current[index] = {
+              position: previousItemPosition + width,
+              width,
+            };
+          },
+          activeIndex,
+          index,
+          active,
+          testID : testID+'_Children_'+index
+        }
+      );
+    })
+  },[stableHash({children,activeIndex})])
   return (<View
       {...rest}
       testID = {testID}
@@ -119,32 +146,9 @@ const TabItemsComponent = ({
       ref={scrollViewRef} 
       testID={testID+"_ScrollView"} 
       onScroll={onScrollHandler}
+      disableIndicator
     >
-      {React.Children.map(children, (child, index) => {
-            const active = index === activeIndex?true : false;
-            return React.cloneElement(
-              child,
-              {
-                onPress: () => {
-                  onChange(index);
-                },
-                onLayout: (event) => {
-                  const { width } = event.nativeEvent.layout;
-                  const previousItemPosition =
-                    tabItemsPosition.current[index - 1]?.position || 0;
-
-                  tabItemsPosition.current[index] = {
-                    position: previousItemPosition + width,
-                    width,
-                  };
-                },
-                activeIndex,
-                index,
-                active,
-                testID : testID+'_Children_'+index
-              }
-            );
-          })}
+      {childrenContent}
           {!disableIndicator && (
               <Animated.View
                 {...indicatorProps}