@fto-consult/expo-ui 2.1.0 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -62,7 +62,7 @@
     "@expo/html-elements": "^0.2.0",
     "@expo/metro-config": "^0.4.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.10.2",
+    "@fto-consult/common": "^1.11.1",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

package/src/App.js

@@ -26,6 +26,12 @@ import {isMobileNative} from "$cplatform";
 import {setDeviceIdRef} from "$capp";
 import appConfig from "$capp/config";
 import {showPrompt} from "$components/Dialog/confirm";
+import * as Utils from "$utils";
+Object.map(Utils,(v,i)=>{
+  if(typeof v =='function' && typeof window !='undefined' && window && !window[i]){
+     window[i] = v;
+  }
+})
 
 export default function getIndex(options){
   const {App,onMount,onUnmount,preferences:appPreferences} = defaultObj(options);

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

@@ -11,6 +11,7 @@ import TextField from "$ecomponents/TextField";
 import Icon from "$ecomponents/Icon";
 import {StyleSheet,View} from "react-native";
 import DatePickerModal from '../DatePickerModal'
+import "../i18n";
 
 const validMinDate = (date,minDate)=>{
    if(!minDate || !date) return true;
@@ -55,6 +56,7 @@ const DatePickerInput = React.forwardRef(({
     visible : false
   })
   const inputFormat = useInputFormat(locale)
+  const inputFormatLabel = i18n.lang(inputFormat);
   const prevInputDate = React.usePrevious(state.inputDate,compareTwoDates)
   const formattedValue = !state.inputDate ? undefined : DateLib.format(state.inputDate,inputFormat.toLowerCase());
   const onDismiss = () => {
@@ -148,10 +150,10 @@ const DatePickerInput = React.forwardRef(({
     if(compareTwoDates(state.inputDate,prevInputDate) || state.errorText) return;
     if(onChange){
         const date = state.inputDate ? DateLib.toSQLDate(state.inputDate): undefined;
-        onChange({dateObject:state.inputDate,date,sqlDate:date,value:date})
+        onChange({dateObject:state.inputDate,date:state.inputDate,sqlDate:date,value:date})
     }
   },[state])
-  const labelText = render_filter ? label : withLabel!==false ? getLabel({ label, inputFormat, withDateFormatInLabel }):"";
+  const labelText = render_filter ? label : withLabel!==false ? getLabel({ label, inputFormat:inputFormatLabel, withDateFormatInLabel }):"";
   return (
     <>
         <TextField
@@ -166,8 +168,8 @@ const DatePickerInput = React.forwardRef(({
           ref={ref}
           label={labelText}
           defaultValue={formattedValue}
+          placeholder={inputFormatLabel}
           keyboardType={'number-pad'}
-          placeholder={inputFormat}
           mask={inputFormat}
           keyboardAppearance={theme.dark ? 'dark' : 'default'}
           error={hasError}
@@ -176,6 +178,7 @@ const DatePickerInput = React.forwardRef(({
               return <TextInputWithMask
                 {...inputProps}
                 locale = {locale}
+                placeholder={inputFormatLabel}
                 value = {formattedValue}
                 style = {[inputProps.style,styles.input,style]}
                 onChangeText={(date) => {

package/src/components/Date/DateTime.js

@@ -3,25 +3,102 @@
 // license that can be found in the LICENSE file.
 
 import Date from "./DatePickerInput";
-import Time from "./Time";
+import Time,{parseTime} from "./Time";
 import React from "$react";
 import PropTypes from "prop-types";
-import {defaultObj} from "$utils";
+import {defaultObj,isNumber,defaultNumber,defaultStr,defaultBool,isNonNullString} from "$utils";
+import theme,{flattenStyle} from "$theme";
+import DateLib from "$date";
+import { toDateObj } from "./utils";
 
-export default function DateTimePickerComponent({left,right,dateProps,timeProps,defaultValue,...porps}){
+export default function DateTimePickerComponent({left,withSeconds,right,format,dateFormat,timeFormat,defaultValue,onChange,testID,dateProps,disabled,readOnly,timeProps,...rest}){
     dateProps = defaultObj(dateProps);
     timeProps = defaultObj(timeProps);
+    testID = defaultStr(testID,"RN_DateTimeComponent")
+    const anchorTimeProps = defaultObj(timeProps.anchorProps);
+    const timePropsContainerProps = defaultObj(timeProps.containerProps);
+    const dateObj = toDateObj(defaultValue);
+    if(isNonNullString(format)){
+        format = format.trim().split(" ");
+        if(!isNonNullString(dateFormat)){
+            dateFormat = format[0].trim();
+        }
+        if(!isNonNullString(timeFormat) && format[1]){
+            timeFormat = format[1].trim();
+        }
+    }
+    const changeDateArgsRef = React.useRef({
+        date : dateObj,
+    });
+    const getTimeValue = (date)=>{
+        date = DateLib.isValid(date)? date : new Date();
+        const sqlTime = date.toSQLTimeFormat();
+        return sqlTime.substring(0,withSeconds ?sqlTime.length :5);
+    }
+    const timeDefaultValue = getTimeValue(dateObj);
+    const changedTimeArgsRef = React.useRef({...defaultObj(parseTime(timeDefaultValue,withSeconds))});
+    withSeconds = defaultBool(timeProps.withSeconds,withSeconds,true);
+
+    const maxWidth = 120;//withSeconds ? 120 : 120;
+    const callOnChange = ()=>{
+        if(onChange){
+            const dObj = changeDateArgsRef.current;
+            const tObj = changedTimeArgsRef.current;
+            if(!DateLib.isValid(dObj.date) || !isNumber(tObj.hours) || !isNumber(tObj.minutes)) return;
+            const date = dObj.date;
+            date.setHours(tObj.hours);
+            date.setMinutes(tObj.minutes);
+            date.setSeconds(withSeconds?defaultNumber(tObj.seconds):0);
+            const sqlDate = date.toSQLDateFormat();
+            const sqlTime = date.toSQLTimeFormat();
+            const time = getTimeValue(date);
+            const value = date.toFormat(defaultStr(dateFormat,DateLib.SQLDateFormat))+" "+time;
+            const args = {...dObj,...tObj,dateObject:date,sqlDate,date,sqlDateTime:date.toSQLDateTimeFormat(),value,sqlTime,time};
+            onChange(args);
+        }
+    }
     return <Date
-        defaultValue = {defaultValue}
+        defaultValue = {dateObj}
+        disabled = {disabled}
+        readOnly = {readOnly}
+        testID = {testID}
+        {...rest}
+        format = {dateFormat}
         {...dateProps}
+        style = {[rest.style,dateProps.style]}
         calendarIconBefore = {true}
+        onChange = {(args)=>{
+            changeDateArgsRef.current = args;
+            callOnChange();
+        }}
         left = {left}
         right = {(p)=>{
             const r = typeof right =='function'? right(p): React.isValidElement(right)? right : null;
             return <>
                 <Time 
-                    defaultValue = {defaultValue}
+                    defaultValue = {timeDefaultValue}
+                    disabled = {disabled}
+                    readOnly = {readOnly}       
+                    testID={testID+"_Time"}    
+                    format = {timeFormat}
                     {...timeProps}
+                    onChange = {(args)=>{
+                        changedTimeArgsRef.current = args;
+                        callOnChange();
+                    }}
+                    withLabel = {false}
+                    mode = {"flat"}
+                    containerProps = {{...timePropsContainerProps,style:[{maxWidth},timePropsContainerProps.style]}}
+                    divider = {false}
+                    anchorProps = {{
+                        ...anchorTimeProps,
+                        testID:testID+"_TimeAnchor",
+                        style : [theme.styles.noPadding,{borderRadius:0},theme.styles.noMargin,anchorTimeProps.style]
+                    }}
+                    inputProps = {{
+                        ...defaultObj(timeProps.inputProps),
+                        mode : "flat",
+                    }}
                 />
                 {r}
             </>
@@ -30,6 +107,13 @@ export default function DateTimePickerComponent({left,right,dateProps,timeProps,
 }
 
 DateTimePickerComponent.propTypes = {
+    ...Date.propTypes,
     dateProps : PropTypes.object,
     timeProps : PropTypes.object,
+    dateFormat : PropTypes.string, //Le format de date
+    timeFormat : PropTypes.string, //le format de time
+    defaultValue : PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+    ])
 }

package/src/components/Date/Time.js

@@ -7,29 +7,29 @@ import PropTypes from "prop-types";
 import theme,{styles} from "$theme";
 import { locale } from "./utils";
 import { TouchableRipple } from "react-native-paper";
-const getDate = (hours,minutes,seconds)=>{
+export const getDate = (hours,minutes,seconds)=>{
     return new Date(2000, 1, 1, defaultDecimal(hours), defaultDecimal(minutes),defaultDecimal(seconds))
 }
-const compareTimeState = (a,b,ignoreVisible)=>{ 
+export const compareTimeState = (a,b,ignoreVisible)=>{ 
     if(!a || !b) return false;
     if(ignoreVisible !== true && a.visible !== b.visible) return false;
     return a.hours === b.hours && a.minutes === b.minutes;
   }
-  const parseTime = (value,useSeconds)=>{
+export const parseTime = (value,withSeconds)=>{
     if(!isNonNullString(value)) return undefined;
     let split = value.trim().split(":");
     let ret = {
       hours:parseInt(split[0]) || 0,
       minutes : parseInt(split[1]) || 0,
     };
-    if(useSeconds !== false){
+    if(withSeconds !== false){
        ret.seconds = parseInt(split[2]) || 0;
     }
     ret.date = getDate(ret.hours,ret.minutes,ret.seconds);
-    ret.value = timeToString(ret,useSeconds);
+    ret.value = timeToString(ret,withSeconds);
     return ret;
   }
-  const timeToString = (value,useSeconds)=>{
+export const timeToString = (value,withSeconds)=>{
      if(!isObj(value)) return undefined;
      let {hours,minutes,seconds} = value;
      if(hours ===undefined && minutes === undefined) return undefined;
@@ -38,31 +38,33 @@ const compareTimeState = (a,b,ignoreVisible)=>{
      seconds = defaultDecimal(seconds);
      const d = new Date(0, 0, 0, hours, minutes,seconds);
      value = d.toSQLTime();
-     if(useSeconds !== false){
+     if(withSeconds !== false){
        return value;
      }
      return value.substring(0,5);
   }
-  export default function TimePickerComponent (props){
-    let {right:customRight,upper,anchorProps,dialogProps,withLabel,containerProps,mode,onChange,useSeconds,cancelLabel,confirmLabel,label,text,upperCase,defaultValue,disabled,editable,withModal,readOnly,...rest} = props;
+export default function TimePickerComponent (props){
+    let {right:customRight,upper,anchorProps,dialogProps,withLabel,containerProps,mode,onChange,withSeconds,cancelLabel,confirmLabel,label,text,upperCase,defaultValue,disabled,editable,withModal,readOnly,...rest} = props;
     rest = defaultObj(rest);
     const isEditable = disabled !== true && readOnly !== true && editable !== false?true : false;
     withModal = defaultBool(withModal,true);
     if(!isEditable){
        withModal = false;
     }
-    useSeconds = defaultBool(useSeconds,false);
+    withSeconds = defaultBool(withSeconds,true);
     const prevDefaultValue = React.usePrevious(defaultValue);
     const [state,setState] = React.useStateIfMounted({
         visible : false,
-        ...parseTime(defaultValue,useSeconds),
+        ...parseTime(defaultValue,withSeconds),
     })
     const prevState = React.usePrevious(state,compareTimeState)
-    label = withLabel !== false ? defaultStr(label,text)+" (HH:MM"+(useSeconds !== false?":SS":"")+")":"";
+    const formatLabel = "HH:MM"+(withSeconds !== false?":SS":"");
+    label = withLabel !== false ? defaultStr(label,text)+"("+formatLabel+")":"";
     dialogProps = defaultObj(dialogProps);
     const onConfirm = ({ hours, minutes }) => {
-      const value = hours !== undefined && minutes !== undefined ? timeToString({seconds:state.seconds,hours,minutes},useSeconds):undefined; 
-      setState({visible:false,seconds:value ? state.seconds:undefined,hours,minutes,value,date:value ? getDate(hours,minutes,useSeconds !== false ? seconds : 0):undefined})
+      const seconds = withSeconds ? state.seconds : 0;
+      const value = hours !== undefined && minutes !== undefined ? timeToString({seconds,hours,minutes},withSeconds):undefined; 
+      setState({visible:false,seconds:value ? seconds:undefined,hours,minutes,value,date:value ? getDate(hours,minutes,seconds):undefined})
     };
     anchorProps = defaultObj(anchorProps);
     customRight = React.isValidElement(customRight) || typeof customRight =='function'? customRight : null;
@@ -76,6 +78,7 @@ const compareTimeState = (a,b,ignoreVisible)=>{
                   setState({...state,visible:true});
               }}
               {...props}
+              style = {[props.style,anchorProps.style]}
               />
            {typeof customRight =='function'? customRight(props): customRight}  
           </>
@@ -83,7 +86,7 @@ const compareTimeState = (a,b,ignoreVisible)=>{
    } else right = customRight;
     React.useEffect(()=>{
       if(prevDefaultValue !== defaultValue){
-        const s = {...state,...parseTime(defaultValue,useSeconds)};
+        const s = {...state,...parseTime(defaultValue,withSeconds)};
         if(!defaultValue){
           s.hours = s.value = s.minutes = s.seconds = s.date = undefined;
         }
@@ -92,7 +95,7 @@ const compareTimeState = (a,b,ignoreVisible)=>{
     },[defaultValue]);
     React.useEffect(()=>{
         if(compareTimeState(state,prevState,true)) return;
-        const value = isNumber(state.hours) && isNumber(state.minutes)? timeToString(state,useSeconds) : undefined;
+        const value = isNumber(state.hours) && isNumber(state.minutes)? timeToString(state,withSeconds) : undefined;
         if(onChange){
            onChange({...state,visible:undefined,value});
         }
@@ -104,7 +107,9 @@ const compareTimeState = (a,b,ignoreVisible)=>{
       setState({...state,visible:false})
     }
     containerProps = defaultObj(containerProps);
-    mode = theme.textFieldMode;
+    if(!disabled){
+      containerProps.style = [containerProps.style,{opacity:1}]
+    }
     return <>
       <TouchableRipple {...containerProps} 
         disabled = {!isEditable}
@@ -113,14 +118,17 @@ const compareTimeState = (a,b,ignoreVisible)=>{
         rippleColor={containerProps.rippleColor}
       >
           <TextField
+          mode = {mode||theme.textFieldMode}
           {...rest}
-          mode = {mode}
           label = {label}
           right = {right}
           disabled = {disabled}
           editable = {false}
+          handleOpacity = {false}
+          style = {[rest.style,!disabled && {opacity:1,color:theme.colors.text}]}
           contentContainerProps = {{...defaultObj(rest.contentContainerProps),pointerEvents:'auto'}}
           defaultValue = {state.value}
+          placeholder = {formatLabel}
         />
       </TouchableRipple>
       {withModal && <TimePickerModal
@@ -150,5 +158,5 @@ const compareTimeState = (a,b,ignoreVisible)=>{
     dialogProps : PropTypes.shape({
       ...defaultObj(TimePickerModal.propTypes)
     }),
-    useSeconds : PropTypes.bool, //si les sécondes devrons être utilisées
+    withSeconds : PropTypes.bool, //si les sécondes devrons être utilisées
   }

package/src/components/Date/i18n.js

@@ -0,0 +1,11 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import i18n from "$i18n";
+
+i18n.dictionary({
+    fr : {
+        "DD/MM/YYYY" : "JJ/MM/AAAA"
+    }
+})

package/src/components/Filter/index.js

@@ -40,6 +40,7 @@ const _operators = {
    '$or' : 'Ou', //Array	Matches if any of the selectors in the array match. All selectors must use the same index.
 }
   
+/***** Coposant Filter, pour les filtres de données */
 export default class Filter extends AppComponent {
   constructor(props) {
     super(props);
@@ -81,7 +82,7 @@ export default class Filter extends AppComponent {
     })
     extendObj(this.state,{
         ...this.initFiltersOp(),
-        manualRun : false,
+        manualRun : this.getSessionManualRunValue(),
     });
     this.autobind();
   }
@@ -95,13 +96,15 @@ export default class Filter extends AppComponent {
         };
      })
   }
+  getSessionManualRunValue(){
+    return getSessionData(manualRunKey) ? true : false
+  }
   willRunManually (){
      return this.state.manualRun;
-     return getSessionData(manualRunKey) ? true : false
   }
   toggleManualRun(){
-    //setSessionData(manualRunKey,this.willRunManually()?0:1);
     this.setState({manualRun:!this.state.manualRun},()=>{
+       setSessionData(manualRunKey,this.state.manualRun?0:1);
        if(!this.willRunManually()){
          this.fireValueChanged(true);
        }
@@ -150,7 +153,7 @@ export default class Filter extends AppComponent {
     } else if(type == 'select'){
         actions = _inActions;
         defaultAct = "$in";
-    } else if(type == 'date') {
+    } else if(type == 'date' || type =='datetime') {
       actions = {$today:"Aujourd'hui",$prevWeek:"Semaine passée",$week:'Cette semaine',$month:'Ce mois',$period:"Période", ...actions}  
     } else if(type !== 'date2time' && type !== 'time' && type !== 'number' && type !== 'decimal'){
         actions = regexActions;
@@ -358,6 +361,7 @@ export default class Filter extends AppComponent {
       ref,
       data,
       testID,
+      filterContainerProps,
       ...rest
     } = {...this.props,...this.filterProps};
      const type = this.type;
@@ -439,7 +443,7 @@ export default class Filter extends AppComponent {
         <Menu 
              testID = {testID+"_Menu"}
              sheet = {withBottomSheet}
-             anchor = {(props)=><Icon {...props} {...anchorProps} primary={hasFilterVal} icon={hasFilterVal?'filter-menu':'filter-plus'}/>}
+             anchor = {(props)=><Icon {...props} {...anchorProps} style={[theme.styles.noPadding,theme.styles.mt0,theme.styles.mb0,theme.styles.ml0,props.style,anchorProps.style]} primary={hasFilterVal} icon={hasFilterVal?'filter-menu':'filter-plus'}/>}
              items = {[
                     {
                       text : !isMob ? 'Options' : ("Options de filtre ["+label+"]"),
@@ -502,15 +506,21 @@ export default class Filter extends AppComponent {
             ]}
         />
      </>
-     rest.containerProps = defaultObj(this.props.containerProps,rest.containerProps);
+     const containerProps = defaultObj(this.props.containerProps,rest.containerProps);
+     delete rest.containerProps;
      rest.onValidate = this.onFilterValidate.bind(this);
      const Component = this.Component;
-     return <Component
-        {...rest}
-        name = {this.name}
-        testID = {testID}
-        ref = {React.mergeRefs(this.searchFilter,ref)}
-    /> 
+     const responsiveProps = Object.assign({},responsiveProps);
+     responsiveProps.style = [theme.styles.w100,responsiveProps.style]
+     return <View testID={testID+"_FilterContainer"} {...containerProps} style={[theme.styles.w100,containerProps.style]}>
+        <Component
+          {...rest}
+          responsiveProps = {responsiveProps}
+          name = {this.name}
+          testID = {testID}
+          ref = {React.mergeRefs(this.searchFilter,ref)}
+      /> 
+     </View>
  }
 }
 

package/src/components/Filter/utils.js

@@ -386,7 +386,9 @@ export const prepareFilters = (filtersToPrepare,opts)=>{
             let sp = defaultStr(f.value);
             if(sp){
                 sp = sp.split("=>");
-                if(DateLib.isValidSQLDate(sp[0]) && DateLib.isValidSQLDate(sp[1])){
+                const isValid1 = DateLib.isValidSQLDate(sp[0]) || DateLib.isValidSQLDateTime(sp[0]);
+                const isValid2 = DateLib.isValidSQLDate(sp[1]) || DateLib.isValidSQLDateTime(sp[1]);
+                if(isValid1 && isValid2){
                     filters[f.operator].push({
                         [f.field] : {$gte:sp[0]}
                     })

package/src/components/Form/Fields/DateTime.js

@@ -0,0 +1,24 @@
+import DateTime from "$ecomponents/Date/DateTime";
+import {defaultObj} from "$utils";
+import Field  from"./Field";
+import React from "react";
+import DateLib from "$lib/date";
+
+export default class FormDateTimeField extends Field{
+    getValidValue(){
+        const v = super.getValidValue();
+        return DateLib.isDateObj(v)? v.toSQLDateTime() : isNonNullString(v)? v : undefined;
+    }
+    _render(props){
+        props.onChange = (args)=>{
+            this.validate(args);
+        }
+        return <DateTime
+            {...props}
+        />
+    }
+}
+
+FormDateTimeField.propTypes = {
+    ...defaultObj(DateTime.propTypes),
+}

package/src/components/Form/Fields/index.js

@@ -8,6 +8,7 @@ import Checkbox from "./Checkbox";
 import Slider from "./Slider";
 import ColorPicker from "./Color";
 import Date from "./Date";
+import DateTime from "./DateTime";
 import Time from "./Time";
 import Image from "./Image";
 import Tel from "./Tel";
@@ -26,6 +27,7 @@ export default {
     ,Slider
     ,ColorPicker
     ,Date
+    ,DateTime
     ,Time
     ,Image
     ,Tel

package/src/components/Form/FormData/componentsTypes.js

@@ -15,6 +15,8 @@ const componentTypes =  {
     selectcountry : Fields.SelectCountry,
     date : Fields.Date,
     time : Fields.Time,
+    datetime  : Fields.DateTime,
+    date2time : Fields.DateTime,
     checkbox : Fields.Checkbox,
     slider : Fields.Slider,
     color : Fields.ColorPicker,
@@ -92,8 +94,8 @@ export const getFilterComponentProps = (_props)=>{
         props = pR;
         props.items = [{code:checkedValue,label:checkedLabel},{code:uncheckedValue,label:uncheckedLabel}];
         component = Fields.SelectField;
-    } else if(type == "date" || type =="time"){
-        component = type === 'date'? Fields.Date : Fields.Time;
+    } else if(type == "date" || type =="time" || type =='datetime'){
+        component = type == 'datetime' ? Fields.DateTime : type === 'date'? Fields.Date : Fields.Time;
     }  else if(type == 'color' || type =='colorpicker') {
         component = Fields.ColorPicker;
     } else {

package/src/components/Form/KeyboardEventHandler/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { findMatchedKey} from './keyEvents';
 import View from "$ecomponents/View";
 import {isWeb} from "$cplatform";
+import {StyleSheet} from "react-native";
 
 let exclusiveHandlers = [];
 
@@ -90,7 +91,7 @@ export default class KeyboardEventHandler extends React.Component {
       children = children(events);
     }
     if(!React.isValidElement(children)) return null;
-    return <View {...rest} ref={React.mergeRefs(this.childRef,innerRef)}>
+    return <View {...rest} style={[styles.content,rest.style]} ref={React.mergeRefs(this.childRef,innerRef)}>
       {children}
     </View>
   }
@@ -112,4 +113,11 @@ KeyboardEventHandler.defaultProps = {
   //handleEventType: 'keypress',
   handleEventType: undefined,
   onKeyEvent: () => null,
-};
+};
+
+const styles = StyleSheet.create({
+  content : {
+     maxWidth : '100%',
+     position : 'relative'
+  }
+})

package/src/components/Icon/Icon.js

@@ -20,11 +20,14 @@ const IconComponentRef = React.forwardRef((props,ref)=>{
     }
     if(!rest.icon) return null;
     const flattenedStyle = flattenStyle(style);
+    if(button === false){
+        flattenedStyle.borderRadius = 0;
+    }
     return <Tooltip 
         animated 
         {...rest}  
         color={Colors.isValid(color) ? color : Colors.isValid(flattenedStyle.color)? flattenedStyle.color : theme.colors.text} 
-        style = {[flattenedStyle,button === false ? {borderRadius:0}:null]}
+        style = {flattenedStyle}
         Component={React.isComponent(Component)?Component:IconButton}
         ref = {ref}
     />

package/src/components/TextField/index.js

@@ -55,6 +55,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
         lower,
         dynamicBackgroundColor,
         lowerCase,
+        handleOpacity,
         ...props} = componentProps;
     upper = defaultBool(upper,upperCase,false);
     lower = defaultBool(lower,lowerCase,false);
@@ -218,7 +219,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 || editable === false)) ? READONLY_OPACITY : undefined;
-    const disabledStyle = opacity ? {opacity} : undefined;
+    const disabledStyle = handleOpacity != false && opacity ? {opacity} : undefined;
     if((editable === false || disabled === true) ){
         selection = defaultObj(selection);
         if(!isNumber(selection.start)){
@@ -746,5 +747,6 @@ 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
 };
 

package/src/navigation/Drawer/ProfilAvatar/index.js

@@ -54,10 +54,9 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,...props},ref)=>
                 }
             }
         ];
-      let pseudo = defaultStr(u.code,u.pseudo,u.email)
-      const label = defaultStr(u.label,u.name,u.fullName,u.userName,u.email)
-      //let pT = pseudo;
-      //pseudo = <Tooltip uppserCase={false} title={defaultStr(u.label)+" ["+pseudo+"]"}>{pT}</Tooltip>;
+      const userPseudo = Auth.getUserPseudo();
+      const pseudo = defaultStr(userPseudo,Auth.getUserEmail(),Auth.getUserCode());
+      const label = defaultStr(Auth.getUserFullName(),userPseudo)
       return <View ref ={ref}>
             <Menu
              anchor = { (aProps)=>{