@fto-consult/expo-ui 6.60.4 → 6.61.0

package/package.json

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

package/src/components/Datagrid/SWRDatagrid.js

@@ -14,10 +14,11 @@ import DateLib from "$lib/date";
 import {getFetchOptions} from "$cutils/filters";
 import {setQueryParams} from "$cutils/uri";
 import {uniqid} from "$cutils";
-import apiFetch,{ getFetcherOptions,prepareFetchOptions } from "$capi/fetch";
+import apiFetch from "$capi/fetch";
 import Icon from "$ecomponents/Icon";
 import Label from "$ecomponents/Label";
-import { StyleSheet,View } from "react-native";
+import { StyleSheet} from "react-native";
+import View from "$ecomponents/View";
 import theme from "$theme";
 import useSWR from "$swr";
 import {getRowsPerPagesLimits} from "./Common/utils";

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

@@ -177,15 +177,14 @@ export default class DrawerLayout extends React.PureComponent {
                 {...this._panResponder.panHandlers}
             >
                 {!permanent && <TouchableWithoutFeedback
-                    pointerEvents={pointerEvents}
+                    style={{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]}
+                        style={[styles.overlay,{backgroundColor:theme.colors.backdrop},{pointerEvents}, animatedOverlayStyles]}
                     />
                 </TouchableWithoutFeedback>}
                 {posRight && this.renderContent({testID})}

package/src/components/Fab/GroupComponent.js

@@ -115,22 +115,22 @@ const FABGroup = ({
   const Item = isFormAction ? Action : FabItem;
   const itemComponentProps = isFormAction ? {Component : FabItem} : {};
   return (
-    <View testID={testID+"_Container"} pointerEvents="box-none" style={[styles.container, style]}>
+    <View testID={testID+"_Container"} 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,
+              pointerEvents : open ? 'auto' : 'none',
             },
           ]}
         />
       </TouchableWithoutFeedback>
-      <SafeAreaView testID={testID+"_SafeAreaView"} pointerEvents="box-none" style={styles.safeArea}>
-        <View testID={testID+"_ItemsContainer"} style={[styles.itemsContainer]} pointerEvents={open ? 'box-none' : 'none'}>
+      <SafeAreaView testID={testID+"_SafeAreaView"} style={styles.safeArea}>
+        <View testID={testID+"_ItemsContainer"} style={[styles.itemsContainer,{pointerEvents:open ? 'box-none' : 'none'}]}>
           {actions.map((it, i) => {
              const itemProps = {
                 ...it,
@@ -148,9 +148,9 @@ const FABGroup = ({
                   {
                     marginHorizontal:
                       typeof it.small || it.small ? 24 : 16,
+                      pointerEvents : open ? 'box-none' : 'none',
                   },
                 ]}
-                pointerEvents={open ? 'box-none' : 'none'}
               >
                 <Item
                   {...itemProps}
@@ -288,7 +288,7 @@ const _FabItem = function({children,label,disabled:customDisabled,pointerEvents,
   const dStyle = disabled ? disabledStyle : null;
   return <>
        {label ? (
-         <View testID = {testID+"_LabelContainer"} style={dStyle} pointerEvents={pointerEvents}>
+         <View testID = {testID+"_LabelContainer"} style={[dStyle,{pointerEvents}]}>
                <Card
                 testID={testID+"_Card"}
                  style={
@@ -323,7 +323,6 @@ const _FabItem = function({children,label,disabled:customDisabled,pointerEvents,
              icon={icon}
              color={color}
              disabled = {disabled}
-             pointerEvents={pointerEvents}
              style={
                [
                  style,
@@ -333,6 +332,7 @@ const _FabItem = function({children,label,disabled:customDisabled,pointerEvents,
                   transform: [{ scale}],
                   opacity,
                   backgroundColor,
+                  pointerEvents,
                 },
                ] 
              }
@@ -356,6 +356,7 @@ export const FabItem = theme.withStyles(_FabItem,{displayName:"FabItemComponent"
 const styles = StyleSheet.create({
   safeArea: {
     alignItems: 'flex-end',
+    pointerEvents : "box-none",
   },
   itemsContainer : {
     marginBottom : 70,
@@ -363,6 +364,7 @@ const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
     justifyContent: 'flex-end',
+    pointerEvents : "box-none",
   },
   fab: {
     marginHorizontal: 16,

package/src/components/Image/index.js

@@ -252,13 +252,12 @@ export default function ImageComponent(props){
     }
     const _label = defaultString(label);
     const isDisabled = menuItems.length > 0 ? true : false; 
-    const pointerEvents = isDisabled ? "auto" :"none";
     return <View testID={testID+"_FagmentContainer"}>
         {!createSignatureOnly ? (<Menu
                 {...menuProps}
                 disabled = {isDisabled}
                 anchor = {(props)=>{
-                    return <View accessibilityLabel = {_label} testID={testID+"_Container"} {...containerProps} pointerEvents={disabled|| readOnly? "none":"auto"} style={[label?styles.align:null,containerProps.style,label?styles.container:null]}>
+                    return <View accessibilityLabel = {_label} testID={testID+"_Container"} {...containerProps} style={[label?styles.align:null,containerProps.style,{pointerEvents:disabled|| readOnly? "none":"auto"},label?styles.container:null]}>
                         {<Label testID={testID+"_Label"} {...labelProps} disabled={disabled} style={[styles.label,labelProps.style]}>{label}</Label>}
                         {<Avatar
                             resizeMethod = {"auto"}

package/src/components/Menu/Item.js

@@ -96,10 +96,10 @@ const MenuItemComponent = React.forwardRef(({
         ) : null}
         <View
           testID={testID+"_Right2LabelContainer"}
-          pointerEvents={!right?"none":"auto"}
           {...contentContainerProps}
           style={[
             styles.item,
+            {pointerEvents:!right?"none":"auto"},
             styles.content,
             !maxWidthStyle && icon ? styles.widthWithIcon : null,
             contentStyle,

package/src/components/Modal/index.js

@@ -111,11 +111,10 @@ const ModalComponent = React.forwardRef((props,ref)=>{
         ref={ref}
         testID={'RN__ModalComponent'}
         {...rest}
-        pointerEvents={visible ? 'auto' : 'none'}
         accessibilityViewIsModal
         role="polite"
         onAccessibilityEscape={hideModal}
-        style = {[styles.modal,rest.style]}
+        style = {[styles.modal,rest.style,{pointerEvents:visible ? 'auto' : 'none'}]}
         animationType = {animationType}
         animationDuration = {animationDuration}
         animationPosition = {animationPosition}
@@ -144,7 +143,6 @@ const ModalComponent = React.forwardRef((props,ref)=>{
               {...wrapperProps}
               ref = {contentContainerRef}
               style={[styles.contentContainer,{ marginTop: TOP_INSET, marginBottom: BOTTOM_INSET,backgroundColor:'transparent' },contentContainerProps.style]}
-              pointerEvents="box-none"
           >
             {children}  
           </Surface>
@@ -162,6 +160,7 @@ const styles = StyleSheet.create({
   },
   contentContainer: {
     ...StyleSheet.absoluteFillObject,
+    pointerEvents : "box-none",
     alignItems : 'center',
     justifyContent : 'center',
     flex : 1,

package/src/components/PhoneInput/index.js

@@ -162,10 +162,8 @@ export default function PhoneInputComponent(props){
                     disabled = {props.disabled}
                     pointerEvents = {pointerEvents}
                     left = {
-                        <Pressable testID={testID+"_Left"} style={[styles.flag,disabledStyle,!isFlatMode && styles.notFlatModeFlag]}
-                            //role="button"
+                        <Pressable testID={testID+"_Left"} style={[styles.flag,{pointerEvents},disabledStyle,!isFlatMode && styles.notFlatModeFlag]}
                             disabled = {props.disabled}
-                            pointerEvents = {pointerEvents}
                             onPress={onPressFlag}
                         >
                             <>

package/src/components/SimpleSelect/index.js

@@ -277,17 +277,18 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
     const renderingItems = getItems();
     const autoFocus = canAutoFocusSearchField({visible,items:renderingItems});
     testID = defaultStr(testID, "RN_SimpleSelectComponent");
+    anchorContainerProps = defaultObj(anchorContainerProps);
     anchor =  <Pressable
         //role="button"
         activeOpacity={0.3}
         testID = {testID}
-        {...defaultObj(anchorContainerProps)}
+        {...anchorContainerProps}
         onPress={show}
         disabled = {!isEditable}
-        pointerEvents = {pointerEvents}
         accessibilityLabel={defaultStr(label,text)}
         rippleColor={undefined}
         onLayout={onLayout}
+        style = {[{pointerEvents},anchorContainerProps.style]}
     >
         {anchor}
     </Pressable>
@@ -323,10 +324,10 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
                     },
                     isMob && {flex:1},
                     !isMob && {paddingRight : 0},
-                    contentContainerProps.style
+                    contentContainerProps.style,
+                    {pointerEvents:contentContainerProps.pointerEvents||pointerEvents||undefined},
                 ]
                 }
-                pointerEvents = {pointerEvents}
             >
                 {showSearch !== false && <>
                     <TextField