@fto-consult/expo-ui 6.0.1 → 6.1.0

package/src/components/Modal/index.js

@@ -1,10 +1,10 @@
 import React from "$react";
 import {
-  BackHandler,
   StyleSheet,
   View,
   TouchableWithoutFeedback,
 } from 'react-native';
+import BackHandler from "$ecomponents/BackHandler";
 import PropTypes from "prop-types";
 import theme,{StyleProp} from "$theme";
 //import Animated  from "react-native-reanimated";
@@ -108,7 +108,7 @@ const ModalComponent = React.forwardRef((props,ref)=>{
         {...rest}
         pointerEvents={visible ? 'auto' : 'none'}
         accessibilityViewIsModal
-        accessibilityLiveRegion="polite"
+        role="polite"
         onAccessibilityEscape={hideModal}
         style = {[styles.modal,rest.style]}
         animationType = {animationType}
@@ -117,7 +117,7 @@ const ModalComponent = React.forwardRef((props,ref)=>{
       >
           <TouchableWithoutFeedback
             accessibilityLabel={overlayAccessibilityLabel}
-            accessibilityRole="button"
+            role="button"
             disabled={!dismissable}
             onPress={dismissable ? hideModal : undefined}
             importantForAccessibility="no"

package/src/components/PhoneInput/index.js

@@ -125,7 +125,7 @@ export default function PhoneInputComponent(props){
         setState(nState);
         return nState;
     }
-    const pointerEvents = props.disabled || props.editable === false || props.readOnly ? "none":"auto";
+    const pointerEvents = props.disabled || props.readOnly ? "none":"auto";
     const isFlatMode = theme.textFieldMode === flatMode;
     testID = defaultStr(testID,"RN_PhoneInputComponent");
     return <SelectCountry
@@ -163,7 +163,7 @@ export default function PhoneInputComponent(props){
                     pointerEvents = {pointerEvents}
                     left = {
                         <TouchableOpacity testID={testID+"_Left"} style={[styles.flag,disabledStyle,!isFlatMode && styles.notFlatModeFlag]}
-                            accessibilityRole="button"
+                            role="button"
                             disabled = {props.disabled}
                             pointerEvents = {pointerEvents}
                             onPress={onPressFlag}
@@ -175,7 +175,7 @@ export default function PhoneInputComponent(props){
                             </>
                         </TouchableOpacity>
                     }
-                    keyboardType ={keyboardTypes.number}
+                    inputMode ={keyboardTypes.number}
                     defaultValue = {state.displayValue}
                     onChange = {(args)=>{
                         const {value:nValue} = args;

package/src/components/Radio/index.js

@@ -37,7 +37,6 @@ const RadioComponent = React.forwardRef((props,ref)=>{
         labelStyle,
         helperText,
         position,
-        editable,
         disabled,
         readOnly,
         primaryOnCheck,
@@ -45,7 +44,7 @@ const RadioComponent = React.forwardRef((props,ref)=>{
         ...p
     } = props;
     disabled = defaultBool(disabled,false);
-    const isEditable = !disabled && readOnly !== true && editable !== false ? true : false;
+    const isEditable = !disabled && readOnly !== true ? true : false;
     const pointerEvents = isEditable ? "auto" : "none";
     p = defaultObj(p);
     checkedValue = defaultVal(checkedValue,1);
@@ -117,7 +116,7 @@ const RadioComponent = React.forwardRef((props,ref)=>{
             Component = {RadioButton.Item}
             {...p}
             disabled = {disabled}
-            editable = {isEditable}
+            readOnly = {!isEditable}
             pointerEvents = {pointerEvents}
             style = {[styles.checkbox,style]}
             position = {position}

package/src/components/SelectCurrency/Format.js

@@ -8,8 +8,8 @@ import {isNonNullString,defaultStr} from "$cutils";
 import Icon from "$ecomponents/Icon";
 import {styles} from "$theme";
 
-const CurrencyFormat = React.forwardRef(({disabled,readOnly,right,isFilter,editable,...props},ref)=>{
-    const isEditable = disabled !== true && readOnly !== true && editable !== false;
+const CurrencyFormat = React.forwardRef(({disabled,readOnly,right,isFilter,...props},ref)=>{
+    const isEditable = disabled !== true && readOnly !== true;
     const defaultValue = isNonNullString(props.defaultValue) && props.defaultValue.contains("v" && props.defaultValue) && props.defaultValue || defaultStr(appConfig.currencyFormat,"%v %s");
     const title = "Format d'affichage des valeurs numériques : une chaine de caractère constituée des lettre %v et %s où %v représente la valeur du montant et %s représente la devise : exemple %s%v => $10 et %v %s => 10 $";
     return <TextField      
@@ -17,8 +17,7 @@ const CurrencyFormat = React.forwardRef(({disabled,readOnly,right,isFilter,edita
         enableCopy = {false}
         {...props}
         disabled = {disabled}
-        readOnly = {readOnly}
-        editable = {isEditable}
+        readOnly = {readOnly || !isEditable}
         defaultValue = {defaultValue}
         right = {!isEditable || isFilter ? right : (rP)=>{
             const r = typeof right =='function'? right(rP) : right;

package/src/components/SelectCurrency/index.js

@@ -18,8 +18,8 @@ CurrencySelector.Format = Format;
 
 export default CurrencySelector;
 
-export const selectCurrencyFieldProps = ({disabled,readOnly,isFilter,editable,...props})=>{
-    const isEditable = disabled !== true && readOnly !== true && editable !== false;
+export const selectCurrencyFieldProps = ({disabled,readOnly,isFilter,...props})=>{
+    const isEditable = disabled !== true && readOnly !== true;
     const currency = appConfig.currency;
     return {
         items : currencies,
@@ -31,7 +31,7 @@ export const selectCurrencyFieldProps = ({disabled,readOnly,isFilter,editable,..
         ...props,
         isFilter,
         disabled : !isEditable,
-        editable : isEditable,
+        readOnly : readOnly || !isEditable,
         type : 'select',
     }
 }

package/src/components/SimpleSelect/index.js

@@ -16,7 +16,7 @@ import { matchOperators,getSearchTimeout,canAutoFocusSearchField} from "$ecompon
 import Dialog from "$ecomponents/Dialog";
 
 const  SimpleSelect = React.forwardRef((props,ref)=>{
-    let {style : customStyle,onMount,mode,showSearch,anchorContainerProps,renderText,contentContainerProps,withCheckedIcon,testID,selectionColor,dialogProps,onShow,anchor,onUnmont,controlled:cr,onDismiss,visible:controlledVisible,selectedColor,inputProps,itemProps,itemContainerProps,label,listProps,editable,readOnly,text,filter,renderItem,itemValue,getItemValue,defaultValue,items:menuItems,onPress,onChange,disabled,...rest} = props;
+    let {style : customStyle,onMount,mode,showSearch,anchorContainerProps,renderText,contentContainerProps,withCheckedIcon,testID,selectionColor,dialogProps,onShow,anchor,onUnmont,controlled:cr,onDismiss,visible:controlledVisible,selectedColor,inputProps,itemProps,itemContainerProps,label,listProps,readOnly,text,filter,renderItem,itemValue,getItemValue,defaultValue,items:menuItems,onPress,onChange,disabled,...rest} = props;
     const flattenStyle = StyleSheet.flatten(customStyle) || {};
     const controlledRef = React.useRef(typeof controlledVisible ==='boolean'? true : false);
     const controlled = controlledRef.current;
@@ -127,7 +127,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         }
     },[value]);
     const [canEdit,setCanEdit] = React.useState(true);
-    const isEditable = canEdit && !disabled && !readOnly && editable !== false ? true : false;
+    const isEditable = canEdit && !disabled && !readOnly ? true : false;
     const pointerEvents = isEditable ? "auto" : "none";
     const isMob = !isDesktopMedia();
     const prevIsMob = React.usePrevious(isMob);
@@ -231,7 +231,6 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         label : defaultVal(label,text,inputProps.label),
         disabled,
         readOnly,
-        editable : false,
         pointerEvents,
         value,
         autoHeight : false,
@@ -247,13 +246,12 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
             {...rest}
             {...inputProps}
             label = {defaultVal(label,text,inputProps.label)}
-            editable = {false}
+            readOnly = {typeof readOnly ==='boolean'? readOnly : true}
             disabled = {disabled}
-            readOnly = {readOnly}
             defaultValue = {selectedObj.textContent}
         />
     const inputRef = React.useRef(null);
-    const canFilter = !props.disabled && !props.readOnly && props.editable !== false && visible;
+    const canFilter = !props.disabled && !props.readOnly && visible;
     const [filterText,setFilterText] = React.useState("");
     let filterRegex = undefined;
     if(canFilter && isNonNullString(filterText)){
@@ -261,7 +259,6 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
     }
     const textInputProps = {
         disabled : props.disabled,
-        editable : props.editable,
         readOnly : props.readOnly,
         label : props.label,
         mode:flatMode,
@@ -281,7 +278,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
     const autoFocus = canAutoFocusSearchField({visible,items:renderingItems});
     testID = defaultStr(testID, "RN_SimpleSelectComponent");
     anchor =  <TouchableOpacity
-        accessibilityRole="button"
+        role="button"
         activeOpacity={0.3}
         testID = {testID}
         {...defaultObj(anchorContainerProps)}
@@ -308,7 +305,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
             visible = {visible}
             onDismiss={close}
             disabled = {!isEditable}
-            editable = {editable !== false? true : false}
+            readOnly = {readOnly === true? true : false}
             style = {[{marginTop}]}
             anchor = {anchor}
             contentProps = {{style:{flex:1}}}

package/src/components/Slider/index.js

@@ -31,7 +31,6 @@ const SliderComponent = React.forwardRef((props,ref)=>{
         renderValue,
         step,
         percentage,
-        editable,
         disabled,
         readOnly,
         ...p
@@ -39,7 +38,7 @@ const SliderComponent = React.forwardRef((props,ref)=>{
     p = defaultObj(p);
     disabled = defaultBool(disabled,false);
     readOnly = defaultBool(readOnly,false);
-    const isEditable = !disabled && !readOnly && editable !== false ? true : false;
+    const isEditable = !disabled && !readOnly ? true : false;
     const pointerEvents = isEditable ? "auto" : "none";
     containerProps = defaultObj(containerProps);
     valueProps = defaultObj(valueProps);
@@ -95,7 +94,7 @@ const SliderComponent = React.forwardRef((props,ref)=>{
                 <Slider
                     {...p}
                     disabled = {disabled}
-                    editable = {isEditable}
+                    readOnly = {readOnly || !isEditable}
                     thumbTintColor = {Colors.isValid(p.thumbTintColor)? p.thumbTintColor:tinColor}
                     minimumTrackTintColor = {Colors.isValid(p.minimumTrackTintColor)
                         ?p.minimumTrackTintColor:tinColor}

package/src/components/Snackbar/index.js

@@ -128,7 +128,7 @@ const Snackbar = ({
     >
       <Surface
         pointerEvents="box-none"
-        accessibilityLiveRegion="polite"
+        role="polite"
         elevation = {elevation}
         {...rest}
         testID={testID}

package/src/components/SplashScreen/index.js

@@ -101,7 +101,7 @@ const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,lo
   }
   const child = (animationDone && isLoaded)? React.isValidElement(children) && children : null;
   return (
-    <View style={[styles.container]} testID={testID} nativeID={testID}>
+    <View style={[styles.container]} testID={testID} id={testID}>
       {!animationDone && <View style={StyleSheet.absoluteFill} testID={testID+"_Animation"}/>}
       <View style={styles.containerGlue}>
         {!animationDone && (

package/src/components/Switch/index.js

@@ -39,7 +39,6 @@ const SwitchComponent = React.forwardRef((props,ref)=>{
         checked,
         testID,
         title,
-        editable,
         disabled,
         readOnly,
         right,
@@ -50,7 +49,7 @@ const SwitchComponent = React.forwardRef((props,ref)=>{
     } = props;
     p = defaultObj(p);
     disabled = defaultBool(disabled,false);
-    const isEditable = !disabled && readOnly !== true && editable !== false ? true : false;
+    const isEditable = !disabled && readOnly !== true ? true : false;
     const pointerEvents = isEditable ? "auto" : "none";
     checkedValue = defaultVal(onValue,checkedValue,1);
     uncheckedValue = defaultVal(offValue,uncheckedValue,0);
@@ -105,7 +104,7 @@ const SwitchComponent = React.forwardRef((props,ref)=>{
    const disabledStyle = undefined;//disabled ? {opacity : DISABLED_OPACITY} : undefined;
    const sw = <Switch
         disabled = {disabled}
-        editable = {isEditable}
+        readOnly = {readOnly || !isEditable}
         pointerEvents={pointerEvents}
         style = {[{paddingHorizontal:0,['margin'+(isLeftPosition?'Right':'Left')]:10},style,disabledStyle]}
         value = {isSwitchOn}
@@ -116,7 +115,7 @@ const SwitchComponent = React.forwardRef((props,ref)=>{
                 {...p} 
                 tooltip={tooltip} 
                 accessibilityLabel={label}
-                accessibilityRole="switch"
+                role="switch"
                 disabled = {!isEditable}
                 pointerEvents = {pointerEvents}
                 accessibilityState={{checked:isSwitchOn}}

package/src/components/Tab/TabItem.js

@@ -44,7 +44,7 @@ const TabItemComponentNotThemed = ({
   const isIconTop = iconPosition =='top'? true : false;
   
   return (<TouchableRipple
-          accessibilityRole="tab"
+          role="tab"
           accessibilityState={{ selected: active }}
           accessibilityValue={
             typeof label === 'string' ? { text: label } : undefined

package/src/components/TextField/index.js

@@ -33,11 +33,11 @@ const isIos = _isIos();
 const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     let {defaultValue,toCase:toCustomCase,color,validType,validRule,placeholder,outlined,placeholderColor,
         label,labelProps,labelStyle,fontSize,containerProps,selection,roundness,
-        autoCapitalize,disabled,editable,readOnly,elevation,divider,render,
+        autoCapitalize,disabled,readOnly,elevation,divider,render,
         leftContainerProps,left,right,rightContainerProps,rows,
         emptyValue,usePlaceholderWhenEmpty,
         numberOfLines,mode,selectionColor,activeOutlineColor,multiline
-        ,underlineColor,alwaysUseLabel,activeUnderlineColor,autoHeight,multiple,keyboardType,setRef,type,error,
+        ,underlineColor,alwaysUseLabel,activeUnderlineColor,autoHeight,multiple,inputMode,setRef,type,error,
         style,maxLength,length,affixStyle,affix,helperText, upperCase,
         upper,onChangeText,onChange,onMount,onUnmount,
         format , 
@@ -97,32 +97,29 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     if(type =="pass") type = "password";
     const ref = React.useRef(null);
     disabled = defaultBool(disabled,false);
-    editable = defaultBool(editable,true);
     readOnly = defaultBool(readOnly,false);
-    if(readOnly){
-        editable = false;
-    }
-    const isEditable = !disabled && !readOnly && editable !== false;
-    keyboardType = defaultStr(keyboardType).toLowerCase();
+
+    const isEditable = !disabled && !readOnly;
+    inputMode = defaultStr(inputMode).toLowerCase();
     let hasFountKeyboardType = false;
-    if(isNonNullString(keyboardType)){
-        if(!keyboardTypes[keyboardType]){
+    if(isNonNullString(inputMode)){
+        if(!keyboardTypes[inputMode]){
             for(let i in keyboardTypes){
-                if(keyboardType === keyboardTypes[i]){
+                if(inputMode === keyboardTypes[i]){
                     hasFountKeyboardType = true;
                 }
             }
         }
     }
-    if(!hasFountKeyboardType && (!keyboardType || !keyboardTypes[keyboardType])){
+    if(!hasFountKeyboardType && (!inputMode || !keyboardTypes[inputMode])){
         if(canValueBeDecimal){
-            keyboardType = keyboardTypes.decimal;
+            inputMode = keyboardTypes.decimal;
         } else if(type == "email"){
-            keyboardType = keyboardTypes.email;
+            inputMode = keyboardTypes.email;
         } else if(type =="phone" || type =="tel"){
-            keyboardType = keyboardTypes.phone;
+            inputMode = keyboardTypes.phone;
         } else if(!keyboardTypes[type]){
-            keyboardType = keyboardTypes.default;
+            inputMode = keyboardTypes.default;
         }
     }
     const isSecureText = type =="password"?true : false;
@@ -222,9 +219,9 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     rightContainerProps = defaultObj(rightContainerProps);
     const pointerEvents = isEditable?"auto":'none';
     const upperStyle =  text && (upper || lower) && !isAndroid ? {textTransform:upper?'uppercase':'lowercase'} : null;
-    const opacity = disabled ? DISABLED_OPACITY : (useReadOnlyOpacity !== false && !error && (readOnly || editable === false)) ? READONLY_OPACITY : undefined;
+    const opacity = disabled ? DISABLED_OPACITY : (useReadOnlyOpacity !== false && !error && (readOnly)) ? READONLY_OPACITY : undefined;
     const disabledStyle = handleOpacity != false && opacity ? {opacity} : undefined;
-    if((editable === false || disabled === true) ){
+    if((readOnly === true || disabled === true) ){
         selection = defaultObj(selection);
         if(!isNumber(selection.start)){
             selection.start = 0;
@@ -339,7 +336,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
         },
 
         disabled,
-        editable : isEditable,
+        readOnly : readOnly || !isEditable,
         error : !!error,
         mode,
         underlineColor,
@@ -364,7 +361,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
         ],
         pointerEvents,
         secureTextEntry,
-        keyboardType,
+        inputMode,
         autoCapitalize : upper?(isAndroid?'characters':"none"):autoCapitalize,
         value : currentDefaultValue,
         realValue : text,

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

@@ -43,7 +43,7 @@ const TippyTooltipComponent  = React.forwardRef((props,ref)=>{
     },[content])
     const cProps = {
         ...defaultObj(rest),
-        nativeID:instanceIdRef.current,
+        id:instanceIdRef.current,
     }
     if(typeof children =='function'){
         return children(cProps,innerRef);

package/src/components/Tooltip/index.js

@@ -21,7 +21,7 @@ const TooltipComponent = React.forwardRef((props,ref)=>{
         rest.children = children;
     }
     const ct = <Component {...rest}/>
-    if(!content || rest.disabled === true || rest.readOnly === true || rest.editable === false){
+    if(!content || rest.disabled === true || rest.readOnly === true){
         return typeof children =='function'? children(rest,ref) : ct;
     }
     return <Popover 

package/src/index.js

@@ -1,5 +1,6 @@
 import React from "$react"
-import { AppState,BackHandler,} from "react-native";
+import { AppState} from "react-native";
+import BackHandler from "$ecomponents/BackHandler";
 import * as Linking from 'expo-linking';
 import APP from "$capp";
 import {AppStateService,trackIDLE,stop as stopIDLE} from "$capp/idle";

package/src/layouts/ProfilAvatar/index.js

@@ -120,7 +120,7 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
                             size={size}
                             style = {styles.itemLeft}
                             testID = {"RN_ProfilAvatar_Avatar"}
-                            editable
+                            readOnly = {false}
                             defaultSource ={avatarProps.defaultSrc}
                             onChange = {onChangeAvatar}
                         />
@@ -146,7 +146,7 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
                             size={size}
                             style = {styles.itemLeft}
                             testID = {"RN_ProfilAvatar_AvatarImage"}
-                            editable
+                            readOnly = {false}
                             defaultSource ={avatarProps.defaultSrc}
                             onChange = {onChangeAvatar}
                         />}

package/src/layouts/Screen/ScreenWithOrWithoutAuthContainer.js

@@ -122,7 +122,7 @@ export default function MainScreenScreenWithOrWithoutAuthContainer(props) {
               ...authProps,
               required : authRequired,
             },
-              children : <View testID={testID} nativeID={portalId} {...containerProps}   style={[styles.container,{backgroundColor},modal && styles.modal,containerProps.style]}>
+              children : <View testID={testID} id={portalId} {...containerProps}   style={[styles.container,{backgroundColor},modal && styles.modal,containerProps.style]}>
                   {withStatusBar !== false ? <StatusBar/> : null}
                   {appBar === false ? null : React.isValidElement(appBar)? state.AppBar :  <AppBar 
                       testID={testID+'_AppBar'} {...appBarProps} 

package/src/layouts/Screen/TableData.js

@@ -46,7 +46,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
                 const f = fields[i];
                 f.type = defaultStr(f.jsType,f.type).toLowerCase();
                 const name = f.field = defaultStr(f.field,i);
-                if((f.type =='id' || f.type =='piece' || f.primaryKey || f.unique === true) && f.unique !== false && f.disabled !== true && f.editable !== false && f.readOnly !== true){
+                if((f.type =='id' || f.type =='piece' || f.primaryKey || f.unique === true) && f.unique !== false && f.disabled !== true && f.readOnly !== true){
                     const {onBlur} = f;
                     f.onBlur = (args)=>{
                         args = {...f,...args,fetch,columnField:name,fieldName:name,id:args.value};

package/src/screens/ScreenWrapper.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.
 import React from "$react";
-import { BackHandler } from "react-native";
+import BackHandler from "$ecomponents/BackHandler";
 import APP from "$capp";
 import {useDrawer} from "$ecomponents/Drawer";
 import {navigationRef,getScreenProps,setRoute,setActiveNavigation,setScreenOptions,goBack} from "$cnavigation";