@fto-consult/expo-ui 6.58.5 → 6.58.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.58.5",
+  "version": "6.58.6",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "main",
   "scripts": {

package/src/components/AppBar/Content.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {
   Platform,
   StyleSheet,
-  Pressable,
+  TouchableWithoutFeedback,
   View,
 } from 'react-native';
 import Label from "$ecomponents/Label";
@@ -83,17 +83,17 @@ const AppbarContent = ({
 
   if (onPress) {
     return (
-      <Pressable
+      <TouchableWithoutFeedback
         testID={testID+"_Container"}
         {...containerProps}
         role={touchableRole}
         accessibilityTraits={touchableRole}
-        //accessibilityComponentType="button"
+        accessibilityComponentType="button"
         onPress={onPress}
         disabled={disabled}
       >
         {content}
-      </Pressable>
+      </TouchableWithoutFeedback>
     );
   }
   return content;

package/src/components/Drawer/DrawerLayout/index.js

@@ -5,11 +5,9 @@ import {
     Keyboard,
     PanResponder,
     StyleSheet,
-    Pressable,
-    I18nManager,
     TouchableWithoutFeedback,
+    I18nManager,
 } from 'react-native';
-import { TouchableRipple } from 'react-native-paper';
 import PropTypes from "prop-types";
 import View from "$ecomponents/View";
 import {defaultStr} from "$cutils";
@@ -162,6 +160,7 @@ export default class DrawerLayout extends React.PureComponent {
             outputRange: [0, 0.7],
             extrapolate: 'clamp',
         });
+        const animatedOverlayStyles = { opacity: overlayOpacity };
         const pointerEvents = drawerShown || permanent ? 'auto' : 'none';
         position = defaultStr(position).toLowerCase();
         if(position !=='left' && position !=='right'){
@@ -174,19 +173,22 @@ export default class DrawerLayout extends React.PureComponent {
         return (
             <View
                 testID = {testID}
-                style={[styles.mainWrapper,permanent ? styles.mainWrapperPermanent : styles.mainWrapperTemporary]}
+                style={{ flex: 1, backgroundColor: 'transparent',flexDirection:permanent?'row':'column'}}
                 {...this._panResponder.panHandlers}
             >
-                {!permanent && this.isOpen() ? <Pressable
-                    testID={testID+"_Backdrow"}
+                {!permanent && <TouchableWithoutFeedback
                     pointerEvents={pointerEvents}
-                    ref = {this._backdropRef}
-                    style={[styles.overlay,{backgroundColor:theme.colors.backdrop,opacity: overlayOpacity}]}
-                    //pointerEvents={pointerEvents}
-                    //testID = {testID+"_TouchableWithoutFeedBack"}
+                    testID = {testID+"_TouchableWithoutFeedBack"}
                     onPress={this._onOverlayClick}
-                /> : null}
-                {posRight ? this.renderContent({testID}):null}
+                >
+                    <Animated.View
+                        testID={testID+"_Backdrow"}
+                        pointerEvents={pointerEvents}
+                        ref = {this._backdropRef}
+                        style={[styles.overlay,{backgroundColor:theme.colors.backdrop}, animatedOverlayStyles]}
+                    />
+                </TouchableWithoutFeedback>}
+                {posRight && this.renderContent({testID})}
                 <Animated.View
                     testID={testID+"_NavigationViewContainer"}
                     ref={React.mergeRefs(navigationViewRef,this._navigationViewRef)}
@@ -448,20 +450,6 @@ const styles = StyleSheet.create({
         right: 0,
         zIndex: 1000,
     },
-    mainWrapper : {
-        flex: 1, backgroundColor: 'transparent'
-    },
-    mainWrapperPermanent : {
-        flexDirection : "row",
-    },
-    mainWrapperTemporary : {
-        flexDirection : "column",
-    },
-    touchableWithoutFeedBack : {
-        //backgroundColor:'transparent',
-        height : "100%",
-        width : '100%',
-    }
 });
 
 DrawerLayout.propTypes = {

package/src/components/Expandable/index.js

@@ -1,7 +1,7 @@
 import {Colors} from "$theme";
 import React from 'react';
 import View from "$ecomponents/View";
-import {StyleSheet,ScrollView,Pressable} from 'react-native';
+import {StyleSheet,ScrollView,TouchableWithoutFeedback} from 'react-native';
 //import ScrollView from "$ecomponents/ScrollView";
 import Label from "$ecomponents/Label";
 import Icon from "$ecomponents/Icon"
@@ -105,11 +105,11 @@ const ExpandableComponent = React.forwardRef(({
   />:null;
   return ( <View testID={testID+"_ExpandableContainer"} {...containerProps}>
         <Surface {...props} ref={ref} testID={testID}>
-          <Pressable
+          <TouchableWithoutFeedback
             delayPressIn={0}
             borderless = {false}  
             accessibilityTraits="button"
-            //accessibilityComponentType="button"
+            accessibilityComponentType="button"
             //role="button"
             style={[styles.container,props.style]}
             onPress={handlePressAction}
@@ -157,7 +157,7 @@ const ExpandableComponent = React.forwardRef(({
                 {!isIconPositionLeft ? expandIcon:null}
               </View>
             </View>
-          </Pressable>
+          </TouchableWithoutFeedback>
         {(autoMountChildren !== false || isExpanded) ? <View testID={testID+'_Content'} {...contentProps} 
           style={[{maxWidth:'100%'},styles.children,contentProps.style,!isExpanded && {opacity:0,height:0}]}
         >

package/src/components/Menu/index.js

@@ -1,7 +1,7 @@
 import Icon from "$ecomponents/Icon";
 import {defaultObj,isPlainObject,} from "$cutils";
 import React from "$react";
-import {Pressable,StyleSheet} from "react-native";
+import {TouchableWithoutFeedback,StyleSheet} from "react-native";
 import PropTypes from "prop-types";
 import { renderItems } from "./utils";
 
@@ -55,7 +55,7 @@ const MenuComponent = React.forwardRef((props,ref)=>{
     if(typeof anchor =='function'){
         anchor = anchor({onPress:openMenu});
     } else if(React.isValidElement(anchor)){
-        anchor = <Pressable {...anchorProps} onPress={onPress}>{anchor}</Pressable>
+        anchor = <TouchableWithoutFeedback {...anchorProps} onPress={onPress}>{anchor}</TouchableWithoutFeedback>
     } else if(React.isComponent(anchor)){
         const A = anchor;
         anchor = <A 

package/src/components/Modal/index.js

@@ -2,7 +2,7 @@ import React from "$react";
 import {
   StyleSheet,
   View,
-  Pressable,
+  TouchableWithoutFeedback,
 } from 'react-native';
 import BackHandler from "$ecomponents/BackHandler";
 import PropTypes from "prop-types";
@@ -41,10 +41,8 @@ const ModalComponent = React.forwardRef((props,ref)=>{
         onDismiss,
         isPreloader,
         children,
-        testID,
         ...rest
     } = props;
-    testID = defaultStr(testID,'RN__ModalComponent');
     if(animate !== false && isMobileNative() && defaultStr(animationType).toLowerCase().trim() !=='slide'){
        animate = false;
     }
@@ -111,7 +109,7 @@ const ModalComponent = React.forwardRef((props,ref)=>{
     return !visible?null: <Portal>
       <Anim
         ref={ref}
-        testID={testID+"_RNModalComponent"}
+        testID={'RN__ModalComponent'}
         {...rest}
         pointerEvents={visible ? 'auto' : 'none'}
         accessibilityViewIsModal
@@ -122,21 +120,25 @@ const ModalComponent = React.forwardRef((props,ref)=>{
         animationDuration = {animationDuration}
         animationPosition = {animationPosition}
       >
-          <Pressable
+          <TouchableWithoutFeedback
             accessibilityLabel={overlayAccessibilityLabel}
             //role="button"
             disabled={!dismissable}
             onPress={dismissable ? hideModal : undefined}
             importantForAccessibility="no"
-            testID={testID+"_ModalComponent__backdrop"}
-            {...backdropProps}
-            style={[
-              styles.backdrop,
-              {backgroundColor:theme.colors.backdrop},
-              backdropProps.style,
-            ]}
-          />
-          <Surface testID={testID+"_ModalComponent__ContentContainer"}
+            testID="RN__ModalComponent__backdrop_Container"
+          >
+            <View
+              testID="RN__ModalComponent__backdrop"
+              {...backdropProps}
+              style={[
+                styles.backdrop,
+                {backgroundColor:theme.colors.backdrop},
+                backdropProps.style,
+              ]}
+            />
+          </TouchableWithoutFeedback>
+          <Surface testID="RN__ModalComponent__ContentContainer"
               elevation = {5}
               {...contentContainerProps}
               {...wrapperProps}

package/src/screens/ScreenWrapper.js

@@ -70,7 +70,7 @@ export default function ScreenWrapperNavComponent(_props){
         {...rest}
         key = {sanitizedName}
         authRequired={authRequired === false ? false : authRequired || allowDrawer} 
-        backAction={options.backAction !== false && Screen.backAction !==false && isModal || false} 
+        backAction={options.backAction === false || Screen.backAction ===false ? false : isModal} 
         modal={isModal} 
         navigation = {navigation}
         route = {route}