@fto-consult/expo-ui 6.1.1 → 6.1.3

package/babel.config.js

@@ -46,13 +46,9 @@ module.exports = function(api,opts) {
   }
   
   return {
-    presets: [
-      ['babel-preset-expo']
-    ],
     plugins : [
       ["inline-dotenv",inlineDovOptions],
       ["module-resolver", {"alias": alias}],
-      ['@babel/plugin-proposal-export-namespace-from'],
       ['transform-inline-environment-variables',{
         "include": [
           "NODE_ENV"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.1.1",
+  "version": "6.1.3",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -113,9 +113,9 @@
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@expo/metro-config": "^0.7.1",
+    "@expo/metro-config": "^0.10.6",
     "babel-plugin-inline-dotenv": "^1.7.0",
-    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4"
   }
 }

package/readMe.md

@@ -1,7 +1,7 @@
 ## Installation des dépendences, packages de dévéloppement
 
 ```javascript
-npm i --D @babel/preset-react babel-plugin-inline-dotenv babel-plugin-module-resolver babel-plugin-transform-inline-environment-variables @expo/metro-config @expo/webpack-config
+npm i --D babel-plugin-inline-dotenv babel-plugin-module-resolver babel-plugin-transform-inline-environment-variables @expo/metro-config @expo/webpack-config
 ```
 
 ## **#ELECTRON**

package/src/components/Avatar/Image.js

@@ -1,5 +1,5 @@
 import React from '$react';
-import {Image,StyleSheet,TouchableOpacity} from 'react-native';
+import {Image,StyleSheet,Pressable} from 'react-native';
 import PropTypes from "prop-types";
 import { StyleProp } from '$theme';
 import {defaultStr,isNumber,defaultNumber} from "$cutils";
@@ -45,7 +45,7 @@ const AvatarImage = React.forwardRef(({
   }
   const cProps = !hasImage? {width,height} : {};
   return (
-    <TouchableOpacity
+    <Pressable
       ref = {ref}
       testID = {testID}
       style={[
@@ -78,7 +78,7 @@ const AvatarImage = React.forwardRef(({
           onProgress={onProgress}
         />
       )}
-    </TouchableOpacity>
+    </Pressable>
   );
 });
 

package/src/components/BottomSheet/Sheet.js

@@ -19,7 +19,7 @@ import Portal from "$ecomponents/Portal";
 import { ScrollView } from "react-native";
 import BackHandler from "$ecomponents/BackHandler";
 import {
-  TouchableOpacity,
+  Pressable,
   Animated,
   PanResponder,
   Dimensions,
@@ -250,7 +250,7 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
                 {...mProps}
                 style = {[styles.modal,bStyle,mProps.style]}
             >
-                <TouchableOpacity
+                <Pressable
                     testID={testID+"_Backdrop"}
                     {...backdropProps}
                     style={[styles.mask,backdropProps.style]}

package/src/components/Color/index.js

@@ -1,4 +1,4 @@
-import { StyleSheet,TouchableOpacity } from 'react-native'
+import { StyleSheet,Pressable } from 'react-native'
 import View from "$ecomponents/View";
 import TextField,{shadowMode} from "$ecomponents/TextField";
 import ColorPicker from './ColorPicker';
@@ -67,7 +67,7 @@ const ColorPickerComponent = React.forwardRef ((props,ref)=>{
     },[defaultValue]);
     const mode = defaultStr(rest.mode,theme.textFieldMode)
     return <>
-            <TouchableOpacity
+            <Pressable
                 {...containerProp}
                 role="button"
                 disabled = {!isEditable}
@@ -93,7 +93,7 @@ const ColorPickerComponent = React.forwardRef ((props,ref)=>{
                 style = {[rest.style,{color:selectionColor,backgroundColor:selectionColor},styles.input]}
                 contentContainerProps = {{style:textStyle}}
             />
-        </TouchableOpacity>
+        </Pressable>
         <Dialog
             visible = {state.visible}
             title = {_label+(color?("["+color+"]"):"")}

package/src/components/Dialog/DropdownAlert/index.js

@@ -7,7 +7,7 @@ import stableHash from "stable-hash";
 import Dimensions,{isMobileMedia,isTabletMedia,isDesktopMedia} from "$dimensions";
 import {
   StyleSheet,
-  TouchableOpacity,
+  Pressable,
   Animated,
   StatusBar,
   PanResponder,
@@ -590,11 +590,11 @@ export default class DropdownAlert extends Component {
       return renderCancel(this.props, this.alertData);
     }
     return (
-      <TouchableOpacity
+      <Pressable
         style={cancelBtnStyle}
         onPress={() => this.closeAction(ACTION.cancel)}>
         {this._renderImage(cancelBtnImageSrc, cancelBtnImageStyle)}
-      </TouchableOpacity>
+      </Pressable>
     );
   };
   render() {
@@ -663,7 +663,7 @@ export default class DropdownAlert extends Component {
             {...this.panResponder.panHandlers}
             testID={testID+"_AnimatedView"}
             style={[wrapperAnimStyle, wrapperStyle]}>
-            <TouchableOpacity
+            <Pressable
               activeOpacity={activeOpacity}
               onPress={onPress}
               disabled={!tapToCloseEnabled}
@@ -685,7 +685,7 @@ export default class DropdownAlert extends Component {
                       {this._renderCancel(showCancel)}
                 </View>
             </View>
-            </TouchableOpacity>
+            </Pressable>
         </Animated.View>
       </Portal>
     );

package/src/components/Dropdown/index.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import View from "$ecomponents/View";
-import {Dimensions,TouchableOpacity,StyleSheet,Animated,} from "react-native";
+import {Dimensions,Pressable,StyleSheet,Animated,} from "react-native";
 import {TouchableRipple} from "react-native-paper";
 import Divider from "$ecomponents/Divider";
 import React, {Fragment,Component as AppComponent} from "$react";
@@ -877,7 +877,7 @@ class DropdownComponent extends AppComponent {
         const testID = defaultStr(dropdownProps.testID,"RN_DropdownComponent");
         const defRight = defaultVal(textInputProps.right,inputProps.right);
         const enableCopy = defaultBool(inputProps.enableCopy,textInputProps.enableCopy,(iconDisabled || (!multiple && !showAdd)) && !loadingElement ?true : false);
-        const anchor = <TouchableOpacity
+        const anchor = <Pressable
                 activeOpacity = {0.3}   
                 onPress={this.open.bind(this)}
                 disabled = {disabled}
@@ -943,7 +943,7 @@ class DropdownComponent extends AppComponent {
                     {helperText}
                 </View>
             }</React.Fragment>}
-        </TouchableOpacity>
+        </Pressable>
 
         let restProps = {};
         if(!isMob){

package/src/components/Grid/Cell.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from '$react';
-import {TouchableOpacity, StyleSheet} from 'react-native';
+import {Pressable, StyleSheet} from 'react-native';
 import Dimensions from "$cplatform/dimensions";
 import View from "$ecomponents/View";
 import {defaultStr} from "$cutils";
@@ -76,7 +76,7 @@ const GridCellComponent = React.forwardRef((p,ref)=>{
     const {style,size,children,phoneSize,withSurface,elevation:cElev,mediaQueryUpdateNativeProps,contentProps:cProps,tabletSize,desktopSize,smallPhoneSize,onPress,activeOpacity,onLongPress,flex:customFlex,onPressIn,onPressOut,...props} = p;
     const testID = defaultStr(props.testID,"RN_Grid.CellComponent");
     const contentProps = defaultObj(cProps);
-    const C = onPress || onLongPress || onPressIn || onPressOut ? TouchableOpacity : View;
+    const C = onPress || onLongPress || onPressIn || onPressOut ? Pressable : View;
     const elevation = typeof elevation == "number"? elevation : withSurface ? 5 : undefined;
     const elevStyle = typeof elevation =="number" ? Elevations[elevation] || null : null;
     return <View 

package/src/components/Grid/Col.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from '$react';
-import {TouchableOpacity, StyleSheet} from 'react-native';
+import {Pressable, StyleSheet} from 'react-native';
 import {defaultStr} from "$cutils";
 import PropTypes from "prop-types";
 import View from "$ecomponents/View";
@@ -11,7 +11,7 @@ const GridColComponent = React.forwardRef((p,ref)=>{
     const flattenedStyle = StyleSheet.flatten(style);
     const testID = defaultStr(props.testID,"RN_Grid.ColComponent");
     const flex = customFlex !== undefined ? customFlex : (flattenedStyle && flattenedStyle.width) ? 0 : 1;
-    const C = onPress || onLongPress || onPressIn || onPressOut ? TouchableOpacity : View;
+    const C = onPress || onLongPress || onPressIn || onPressOut ? Pressable : View;
     return <C {...props} activeOpacity={activeOpacity} onLongPress={onLongPress} onPressIn={onPressIn} onPressOut={onPressOut}
         testID={testID} style={[styles.container,flattenedStyle,{flex}]} ref={ref} onPress={onPress}
     />

package/src/components/Grid/Grid.js

@@ -1,5 +1,5 @@
 import React from  '$react';
-import {TouchableOpacity,StyleSheet} from 'react-native';
+import {Pressable,StyleSheet} from 'react-native';
 import {grid} from "$theme";
 import {defaultStr} from "$cutils";
 import PropTypes from "prop-types";
@@ -11,7 +11,7 @@ const GridComponent = React.forwardRef(({onPress,responsive,activeOpacity,onLong
     const flattenedStyle = StyleSheet.flatten(style);
     flexGrow = typeof flexGrow =='number'? flexGrow : 0;
     const flex = customFlex !== undefined ? customFlex :   (flattenedStyle && (col && flattenedStyle.width || !col && flattenedStyle.height)) ? undefined : undefined;
-    const C = onPress || onLongPress || onPressIn || onPressOut ? TouchableOpacity : View;
+    const C = onPress || onLongPress || onPressIn || onPressOut ? Pressable : View;
     return <C {...props} activeOpacity={activeOpacity} onLongPress={onLongPress} onPressIn={onPressIn} onPressOut={onPressOut}
         testID={testID+"_Container"} onPress={onPress}
         style={[styles.container,{flexGrow},col && {flexDirection:'column'},responsive!== false && !col && grid.row(false),style,flex !== undefined && {flex}]} ref={ref}

package/src/components/Grid/Row.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from '$react';
-import {TouchableOpacity, StyleSheet} from 'react-native';
+import {Pressable, StyleSheet} from 'react-native';
 import View from "$ecomponents/View";
 import {defaultStr} from "$cutils";
 import PropTypes from "prop-types";
@@ -11,7 +11,7 @@ const GridRowComponent = React.forwardRef((p,ref)=>{
     const flattenedStyle = StyleSheet.flatten(style);
     const testID = defaultStr(props.testID,"RN_Grid.RowComponent");
     const flex = customFlex !== undefined ? customFlex : (flattenedStyle && flattenedStyle.height) ? 0 : 1;
-    const C = onPress || onLongPress || onPressIn || onPressOut ? TouchableOpacity : View;
+    const C = onPress || onLongPress || onPressIn || onPressOut ? Pressable : View;
     return <C {...props} activeOpacity={activeOpacity} onLongPress={onLongPress} onPressIn={onPressIn} onPressOut={onPressOut}
         onPress={onPress} testID={testID} style={[styles.container,flattenedStyle,{flex}]} ref={ref}
     />

package/src/components/Menu/index.js

@@ -17,7 +17,7 @@ export {Item};
 /****
  * @voir : https://callstack.github.io/react-native-paper/menu.html;
  * @param anchorProps a deux type de valuers : lorsque anchor n'est pas un élément réact valide, il s'agit des props du composant Icon de react-native-paper
- *        lorsque anchror est un element réact valide, il s'agit des props du composant TouchableOpacity de react-native
+ *        lorsque anchror est un element réact valide, il s'agit des props du composant Pressable de react-native
  *      si closeOnPress est différent de false, alors le menu sera fermé lorsqu'on clique sur un item
  *      anchorProps peut être de la forme : {
  *          Component {default : Icon}  qui est le composant qui sera rendu

package/src/components/PhoneInput/index.js

@@ -1,7 +1,7 @@
 import React from "$react";
 import {defaultObj,defaultStr,isNonNullString} from "$cutils";
 import TextField from "$ecomponents/TextField";
-import { StyleSheet,Image,TouchableOpacity} from 'react-native';
+import { StyleSheet,Image,Pressable} from 'react-native';
 import PropTypes from "prop-types";
 import theme,{DISABLED_OPACITY} from "$theme";
 import {keyboardTypes,flatMode} from "$ecomponents/TextField";
@@ -162,7 +162,7 @@ export default function PhoneInputComponent(props){
                     disabled = {props.disabled}
                     pointerEvents = {pointerEvents}
                     left = {
-                        <TouchableOpacity testID={testID+"_Left"} style={[styles.flag,disabledStyle,!isFlatMode && styles.notFlatModeFlag]}
+                        <Pressable testID={testID+"_Left"} style={[styles.flag,disabledStyle,!isFlatMode && styles.notFlatModeFlag]}
                             role="button"
                             disabled = {props.disabled}
                             pointerEvents = {pointerEvents}
@@ -173,7 +173,7 @@ export default function PhoneInputComponent(props){
                                 : null}
                                 <Icon testID={testID+"_FlagChevronIcon"} name="chevron-down" size={16} style={[styles.flagIcon]} onPress={onPressFlag} />
                             </>
-                        </TouchableOpacity>
+                        </Pressable>
                     }
                     inputMode ={keyboardTypes.number}
                     defaultValue = {state.displayValue}

package/src/components/SimpleSelect/index.js

@@ -1,7 +1,7 @@
 import React from "$react";
 import {defaultObj,isDecimal,defaultStr,debounce,extendObj,defaultVal,defaultFunc} from "$cutils";
 import TextField,{flatMode} from "$ecomponents/TextField";
-import {TouchableOpacity,Dimensions,StyleSheet} from "react-native";
+import {Pressable,Dimensions,StyleSheet} from "react-native";
 import { TouchableRipple} from "react-native-paper";
 import View from "$ecomponents/View";
 import Divider from "$ecomponents/Divider";
@@ -277,7 +277,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
     const renderingItems = getItems();
     const autoFocus = canAutoFocusSearchField({visible,items:renderingItems});
     testID = defaultStr(testID, "RN_SimpleSelectComponent");
-    anchor =  <TouchableOpacity
+    anchor =  <Pressable
         role="button"
         activeOpacity={0.3}
         testID = {testID}
@@ -290,7 +290,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         onLayout={onLayout}
     >
         <>{anchor}</>
-    </TouchableOpacity>
+    </Pressable>
     const getItemLayout = typeof listProps.itemHeight ==='number' && listProps.itemHeight ? (data, index) => (
         {length: listProps.itemHeight, offset: listProps.itemHeight * index, index}
       ) : undefined;

package/src/components/TableLink/index.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 /****Le composant TableLink est utilisé pour les liens cliquable vers les tables de données */
-import {TouchableOpacity,StyleSheet} from "react-native";
+import {Pressable,StyleSheet} from "react-native";
 import React from "$react";
 import View from "$ecomponents/View";
 import PropTypes from "prop-types";
@@ -56,7 +56,7 @@ const TableLinKComponent = React.forwardRef((props,ref)=>{
         }
     }
     rest.style = [rest.style,_styles.cursorPointer];
-    const CP = disabled || readOnly ? View : TouchableOpacity;
+    const CP = disabled || readOnly ? View : Pressable;
     return <CP testID={testID} onLongPres={(e)=>React.stopEventPropagation(e)} {...containerProps} onPress={disabled? undefined : onPressLink} style={[styles.container,containerProps.style]}>
         <Tooltip testID={testID+"_Tooltip"} {...rest} Component={Component}  onPress={disabled || readOnly?undefined:onPressLink} ref={ref} pointerEvents={pointerEvents} readOnly={readOnly} disabled = {disabled}>
             <Label testID={testID+"_Label"} underlined primary {...labelProps} style={[_styles.lh15,labelProps.style]} disabled={disabled} readOnly={readOnly}>{children}</Label>

package/src/components/Tooltip/Popover/index.js

@@ -8,7 +8,7 @@ import View from "$ecomponents/View";
 import {
   Modal,
   Animated,
-  TouchableOpacity,
+  Pressable,
   StyleSheet,
   Pressable,
   Dimensions,
@@ -150,7 +150,7 @@ const TooltipPopoverComponent = React.forwardRef(({
     hideModal();
   }}>
         <View style={[styles.overlay, overlayStyle]} />
-        <TouchableOpacity
+        <Pressable
           activeOpacity={1}
           style={[{ flex: 1 }, modalButtonStyle]}
           onPress={hideModal}
@@ -162,7 +162,7 @@ const TooltipPopoverComponent = React.forwardRef(({
               containerStyle,
             ]}
           >
-            <TouchableOpacity onPress={isModalOpen ? hideModal : openModal}>
+            <Pressable onPress={isModalOpen ? hideModal : openModal}>
                   <View
                     style={[styles.innerContainer]}
                   >
@@ -170,7 +170,7 @@ const TooltipPopoverComponent = React.forwardRef(({
                     onLayout={onInnerContentLayout} 
                     style={[{color:theme.colors.primaryText,backgroundColor:theme.colors.primary,padding:10,borderRadius:5}]}>{content}</Label>
               </View>
-            </TouchableOpacity>
+            </Pressable>
           </View>
           <Animated.View
             style={[
@@ -179,7 +179,7 @@ const TooltipPopoverComponent = React.forwardRef(({
               arrowStyle,
             ]}
           />
-        </TouchableOpacity>
+        </Pressable>
       </Modal>;
   if(typeof children =='function'){
       return <>