@fto-consult/expo-ui 6.16.5 → 6.16.7

package/package.json

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

package/src/components/Date/Time.js

@@ -7,6 +7,7 @@ import PropTypes from "prop-types";
 import theme,{styles} from "$theme";
 import { locale } from "./utils";
 import { TouchableRipple } from "react-native-paper";
+import View from "$ecomponents/View";
 export const getDate = (hours,minutes,seconds)=>{
     return new Date(2000, 1, 1, defaultDecimal(hours), defaultDecimal(minutes),defaultDecimal(seconds))
 }
@@ -72,7 +73,7 @@ export default function TimePickerComponent (props){
     let right = null;
     if(withModal){
       right = (props)=>{
-          return <>
+          return <View testID="RN_DatePickerRightContainer" style={[{pointerEvents:isEditable && !disabled ?"auto":"none"},styles.row,styles.justifyContentStart,styles.alignItemsCenter]}>
               <Icon title={label}  {...anchorProps} 
               icon="clock-outline" onPress={(e)=>{
                   React.stopEventPropagation(e);
@@ -82,7 +83,7 @@ export default function TimePickerComponent (props){
               style = {[props.style,anchorProps.style]}
               />
            {typeof customRight =='function'? customRight(props): customRight}  
-          </>
+          </View>
       }
    } else right = customRight;
     React.useEffect(()=>{
@@ -111,15 +112,16 @@ export default function TimePickerComponent (props){
     if(!disabled){
       containerProps.style = [containerProps.style,{opacity:1}]
     }
+    const tCursor = disabled || readOnly ?  styles.cursorNotAllowed:styles.cursorPointer;
     const iContainerProps = defaultObj(inputProps.containerProps);
     return <>
       <TouchableRipple {...containerProps} 
         disabled = {!isEditable}
-        style = {[containerProps.style,styles.cursorPointer]}
+        style = {[containerProps.style,tCursor]}
         onPress = {isEditable?openModal:undefined}
         rippleColor={containerProps.rippleColor}
       >
-          <TextField
+        <TextField
           mode = {mode||theme.textFieldMode}
           {...rest}
           {...inputProps}
@@ -128,12 +130,12 @@ export default function TimePickerComponent (props){
           right = {right}
           disabled = {disabled}
           readOnly = {true}
-          handleOpacity = {false}
-          style = {[rest.style,!disabled && {opacity:1,color:theme.colors.text}]}
+          useReadOnlyOpacity = {!disabled && !readOnly ? false : true}
+          style = {[rest.style,tCursor,!disabled && {color:theme.colors.text}]}
           contentContainerProps = {{...defaultObj(rest.contentContainerProps),pointerEvents:'auto'}}
           defaultValue = {state.value}
           placeholder = {formatLabel}
-        />
+       />
       </TouchableRipple>
       {withModal && <TimePickerModal
           {...dialogProps}

package/src/components/Date/TimePickerModal/index.js

@@ -1,3 +1,9 @@
-import {TimePickerModal} from 'react-native-paper-dates'
+import {TimePickerModal} from 'react-native-paper-dates';
+import {PaperProvider} from 'react-native-paper';
+import theme from "$theme";
 
-export default TimePickerModal;
+export default function TimePickerModalComponent(props){
+    return <PaperProvider theme={theme}>
+        <TimePickerModal {...props}/>
+    </PaperProvider>
+}

package/src/components/Drawer/index.js

@@ -103,8 +103,19 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
         callbackRef.current = callback;
         setState({minimized:false,permanent:true});
     }
+    const checkToggleBtn = (cb)=>{
+      if(!Dimensions.isDesktopMedia() && drawerRef?.current?.isPermanent()){
+          setState({permanent:false});
+          if(typeof cb ==='function'){
+            cb(getDrawerState());
+          }
+          return false;
+      }
+      return true;
+    }
     
     context.toggleMinimized = (minimized,s2)=>{
+        if(!checkToggleBtn()) return;
         if(!Dimensions.isDesktopMedia() || typeof minimized !== 'boolean' || !drawerRef.current || !drawerRef.current.isOpen()) return;
         if(!minimizable === false) return;
         let nS = {minimized};
@@ -119,6 +130,17 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
     context.isLeftPosition = ()=> isLeftPosition;
     context.canToggle = x=> canHandleExtra() ? true : permanent? false : true;
     context.canMinimize = x => minimizable !== false && canBeMinimizedOrPermanent() ? true : false;
+    context.togglePermanent = (x,cb)=>{
+      if(typeof x !== "boolean") return;
+      if(!checkToggleBtn(cb)) return;
+      const isPerm = drawerRef?.current?.isPermanent();
+      if(x && ! isPerm || !x && isPerm){
+        setState({permanent:x});
+      } 
+      if(typeof cb =="function"){
+        cb(getDrawerState());
+      }
+    }
                     
     let {permanent:isPermanent,minimized:isMinimized} = session.get();
     if(_canBeMinimizedOrPermanent && isPermanent){
@@ -288,9 +310,10 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
                         drawerRef.current.isOpen = context.isOpen = typeof drawerRef.current.isOpen =='function'? drawerRef.current.isOpen.bind(drawerRef.current) : x=> drawerRef && drawerRef.current ? drawerRef.current.drawerShown : false;
                         drawerRef.current.isClosed = context.isClosed = x => !drawerRef.current.isOpen();
                         context.toggle = drawerRef.current.toggleDrawer = drawerRef.current.toggle = cb =>{
+                          if(!checkToggleBtn(cb)) return;
                           if(isPermanent || isMinimized) {
                             if(typeof cb ==='function'){
-                                cb(getDrawerState(getDrawerState()));
+                                cb(getDrawerState());
                             }
                             return;
                           }

package/src/components/Dropdown/index.js

@@ -894,7 +894,7 @@ class DropdownComponent extends AppComponent {
                     {<TextField
                         defaultValue={selectedText}
                         autoHeight = {renderTag}
-                        useReadOnlyOpacity = {false}
+                        useReadOnlyOpacity = {!disabled && !readOnly ? false : true}
                         {...inputProps}
                         {...textInputProps}
                         mode = {mode}

package/src/components/SimpleSelect/index.js

@@ -240,7 +240,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
     }) : 
         <TextField
             autoHeight = {false}
-            useReadOnlyOpacity = {false}
+            useReadOnlyOpacity = {!disabled && !readOnly ? false : true}
             affix = {false}
             mode = {mode}
             {...rest}

package/src/components/TextField/index.js

@@ -221,7 +221,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     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)) ? READONLY_OPACITY : undefined;
-    const disabledStyle = handleOpacity != false && opacity ? {opacity} : undefined;
+    const disabledStyle = typeof opacity =="number" ? {opacity} : undefined;
     if((readOnly === true || disabled === true) ){
         selection = defaultObj(selection);
         if(!isNumber(selection.start)){
@@ -354,6 +354,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
             isWeb && { outline: 'none'},
             disabledStyle,
             {height},
+            readOnly || disabled && theme.styles.cursorNotAllowed,
             inputStyle2,
             isNormalMode && styles.inputNormalMode,
             isShadowMode && styles.inputShadowMode,
@@ -751,7 +752,7 @@ TextFieldComponent.propTypes = {
     ]),
     ///le style à afficher sur l'affix
     affixStyle : PropTypes.object,
-    handleOpacity : PropTypes.bool,///si l'opacité sera géré automatiquement en fonction du status disabled de la textField
+    //handleOpacity : PropTypes.bool,///si l'opacité sera géré automatiquement en fonction du status disabled de la textField
     toCase : PropTypes.func,
 };