@fto-consult/expo-ui 6.57.0 → 6.58.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.57.0",
+  "version": "6.58.1",
   "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,
-  TouchableWithoutFeedback,
+  Pressable,
   View,
 } from 'react-native';
 import Label from "$ecomponents/Label";
@@ -83,17 +83,17 @@ const AppbarContent = ({
 
   if (onPress) {
     return (
-      <TouchableWithoutFeedback
+      <Pressable
         testID={testID+"_Container"}
         {...containerProps}
         role={touchableRole}
         accessibilityTraits={touchableRole}
-        accessibilityComponentType="button"
+        //accessibilityComponentType="button"
         onPress={onPress}
         disabled={disabled}
       >
         {content}
-      </TouchableWithoutFeedback>
+      </Pressable>
     );
   }
   return content;

package/src/components/AutoSizer/AutoResizer.js

@@ -9,7 +9,7 @@ import PropTypes from "prop-types";
 import stableHash from "stable-hash";
 import {defaultNumber,isNumber} from "$cutils";
 
-const styles = StyleSheet.create({container: { flex: 1 }});
+const styles = StyleSheet.create({container: { flex: 1,pointerEvents:"box-none" }});
 
 const AutoResizerComponent = React.forwardRef((props,ref) =>{
     const {
@@ -80,7 +80,6 @@ const AutoResizerComponent = React.forwardRef((props,ref) =>{
         {...viewProps}
         ref={React.useMergeRefs(innerRef,ref)}
         onLayout={onLayout}
-        pointerEvents="box-none"
         style={[styles.container, viewProps.style]}
       >
         {canRender() && children({...result,left:result.x,top:result.y}) || null}

package/src/components/Checkbox/index.js

@@ -124,8 +124,7 @@ const CheckboxComponent = React.forwardRef((props,ref)=>{
             testID = {testID}
             disabled = {disabled}
             readOnly = {!isEditable}
-            pointerEvents = {pointerEvents}
-            style = {[styles.checkbox,style]}
+            style = {[styles.checkbox,style,{pointerEvents}]}
             position = {position}
             status = {status}
             color = {cColor}

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

@@ -5,9 +5,11 @@ import {
     Keyboard,
     PanResponder,
     StyleSheet,
-    TouchableWithoutFeedback,
+    Pressable,
     I18nManager,
+    TouchableWithoutFeedback,
 } from 'react-native';
+import { TouchableRipple } from 'react-native-paper';
 import PropTypes from "prop-types";
 import View from "$ecomponents/View";
 import {defaultStr} from "$cutils";
@@ -160,7 +162,6 @@ 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'){
@@ -173,22 +174,19 @@ export default class DrawerLayout extends React.PureComponent {
         return (
             <View
                 testID = {testID}
-                style={{ flex: 1, backgroundColor: 'transparent',flexDirection:permanent?'row':'column'}}
+                style={[styles.mainWrapper,permanent ? styles.mainWrapperPermanent : styles.mainWrapperTemporary]}
                 {...this._panResponder.panHandlers}
             >
-                {!permanent && <TouchableWithoutFeedback
+                {!permanent && this.isOpen() ? <Pressable
+                    testID={testID+"_Backdrow"}
                     pointerEvents={pointerEvents}
-                    testID = {testID+"_TouchableWithoutFeedBack"}
+                    ref = {this._backdropRef}
+                    style={[styles.overlay,{backgroundColor:theme.colors.backdrop,opacity: overlayOpacity}]}
+                    //pointerEvents={pointerEvents}
+                    //testID = {testID+"_TouchableWithoutFeedBack"}
                     onPress={this._onOverlayClick}
-                >
-                    <Animated.View
-                        testID={testID+"_Backdrow"}
-                        pointerEvents={pointerEvents}
-                        ref = {this._backdropRef}
-                        style={[styles.overlay,{backgroundColor:theme.colors.backdrop}, animatedOverlayStyles]}
-                    />
-                </TouchableWithoutFeedback>}
-                {posRight && this.renderContent({testID})}
+                /> : null}
+                {posRight ? this.renderContent({testID}):null}
                 <Animated.View
                     testID={testID+"_NavigationViewContainer"}
                     ref={React.mergeRefs(navigationViewRef,this._navigationViewRef)}
@@ -450,6 +448,20 @@ 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,TouchableWithoutFeedback} from 'react-native';
+import {StyleSheet,ScrollView,Pressable} 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}>
-          <TouchableWithoutFeedback
+          <Pressable
             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>
-          </TouchableWithoutFeedback>
+          </Pressable>
         {(autoMountChildren !== false || isExpanded) ? <View testID={testID+'_Content'} {...contentProps} 
           style={[{maxWidth:'100%'},styles.children,contentProps.style,!isExpanded && {opacity:0,height:0}]}
         >

package/src/components/Fab/GroupComponent.js

@@ -3,7 +3,7 @@ import {
   StyleSheet,
   Animated,
   SafeAreaView,
-  TouchableWithoutFeedback
+  Pressable
 } from 'react-native';
 import View from "$ecomponents/View";
 import {FAB,Text,Card,withTheme} from "react-native-paper";
@@ -116,19 +116,17 @@ const FABGroup = ({
   const itemComponentProps = isFormAction ? {Component : FabItem} : {};
   return (
     <View testID={testID+"_Container"} pointerEvents="box-none" style={[styles.container, style]}>
-      <TouchableWithoutFeedback testID={testID+"_TouchableOpacity"} onPress={close}>
-        <Animated.View
-          testID={testID+"_AnimatedView"}
-          pointerEvents={open ? 'auto' : 'none'}
-          style={[
-            styles.backdrop,
-            {
-              opacity: backdropOpacity,
-              backgroundColor: colors.backdrop,
-            },
-          ]}
-        />
-      </TouchableWithoutFeedback>
+      {open ? <Pressable testID={testID+"_TouchableOpacity"} onPress={close}
+        pointerEvents={open ? 'auto' : 'none'}
+        style={[
+          styles.backdrop,
+          {
+            opacity: backdropOpacity,
+            backgroundColor: colors.backdrop,
+          },
+        ]}
+      >
+      </Pressable>:null}
       <SafeAreaView testID={testID+"_SafeAreaView"} pointerEvents="box-none" style={styles.safeArea}>
         <View testID={testID+"_ItemsContainer"} style={[styles.itemsContainer]} pointerEvents={open ? 'box-none' : 'none'}>
           {actions.map((it, i) => {
@@ -173,7 +171,7 @@ const FABGroup = ({
           accessibilityLabel={accessibilityLabel}
           // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
           accessibilityTraits="button"
-          accessibilityComponentType="button"
+          //accessibilityComponentType="button"
           //role="button"
           accessibilityState={{ expanded: open }}
           style={StyleSheet.flatten([styles.fab, fabStyle])}

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 {TouchableWithoutFeedback,StyleSheet} from "react-native";
+import {Pressable,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 = <TouchableWithoutFeedback {...anchorProps} onPress={onPress}>{anchor}</TouchableWithoutFeedback>
+        anchor = <Pressable {...anchorProps} onPress={onPress}>{anchor}</Pressable>
     } 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,
-  TouchableWithoutFeedback,
+  Pressable,
 } from 'react-native';
 import BackHandler from "$ecomponents/BackHandler";
 import PropTypes from "prop-types";
@@ -41,8 +41,10 @@ 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;
     }
@@ -109,7 +111,7 @@ const ModalComponent = React.forwardRef((props,ref)=>{
     return !visible?null: <Portal>
       <Anim
         ref={ref}
-        testID={'RN__ModalComponent'}
+        testID={testID+"_RNModalComponent"}
         {...rest}
         pointerEvents={visible ? 'auto' : 'none'}
         accessibilityViewIsModal
@@ -120,25 +122,21 @@ const ModalComponent = React.forwardRef((props,ref)=>{
         animationDuration = {animationDuration}
         animationPosition = {animationPosition}
       >
-          <TouchableWithoutFeedback
+          <Pressable
             accessibilityLabel={overlayAccessibilityLabel}
             //role="button"
             disabled={!dismissable}
             onPress={dismissable ? hideModal : undefined}
             importantForAccessibility="no"
-            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"
+            testID={testID+"_ModalComponent__backdrop"}
+            {...backdropProps}
+            style={[
+              styles.backdrop,
+              {backgroundColor:theme.colors.backdrop},
+              backdropProps.style,
+            ]}
+          />
+          <Surface testID={testID+"_ModalComponent__ContentContainer"}
               elevation = {5}
               {...contentContainerProps}
               {...wrapperProps}

package/src/context/Provider.js

@@ -22,7 +22,7 @@ import {extendFormFields} from "$ecomponents/Form/Fields";
     getTableData : ()=>{object|array}
     getStructData : ()=>{object|array}
     tablesData : {object}, la liste des tables de données
-    strucsData : {object}, la liste des données de structures
+    structsData : {object}, la liste des données de structures
     handleHelpScreen : {boolean}, //si l'écran d'aide sera pris en compte, l'écran d'aide ainsi que les écrans des termes d'utilisations et autres
     convertFiltersToSQL : {boolean}, si les filtres de datagrid ou filtres seront convertis au format SQL
     components : {