@fto-consult/expo-ui 2.0.14 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.0.14",
+  "version": "2.2.0",
   "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/Datagrid/Accordion/Filters.js

@@ -17,7 +17,6 @@ let windowWidth = Dimensions.get("window").width;
 const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
     const {filters,isLoading,filteredColumns,children,filterTitle:customFilterTitle,visible:customVisible,orOperator,andOperator,onToggleFilters,context:customContext,...restProps} = props;
     const context = defaultObj(customContext);
-    const filtersValuesRef = React.useRef({});
     const [state,setState] = React.useState({
         visible : defaultBool(customVisible,false),
         visibleColumns : defaultObj(filteredColumns),
@@ -55,8 +54,7 @@ const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
                     }}
                 />)
                 if(!visible) return;
-                const fOp = defaultObj(filtersValuesRef.current[key]);
-                let defVal = isObj(filtersValuesRef.current[key]) ? filtersValuesRef.current[key].defaultValue : "";
+                let defVal = filter.defaultValue;
                 if(typeof defVal !== 'string' && typeof defVal !=='boolean'){
                     if(Array.isArray(defVal)){
                         defVal = "["+defVal.join(",")+"]";
@@ -69,13 +67,11 @@ const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
                 mainFilterTitle +=(content.length?",":"")+"\n"+defaultStr(filter.label,filter.text,filter.field)+" : "+defVal+""
                 content.push(<Filter
                         {...filter}
-                        {...fOp}
                         dynamicRendered
                         isLoading = {isLoading && filteredRef.current[key] ? true : false}
                         orOperator = {defaultBool(orOperator,filter.orOperator,true)}
                         andOperator = {defaultBool(andOperator,filter.andOperator,true)}
                         onChange = {(arg)=>{
-                            filtersValuesRef.current[key] = getFilterStateValues(arg);
                             const canHandle = canHandleFilter(arg);
                             if(filteredRef.current[key] !== canHandle){
                                 if(canHandle){
@@ -90,7 +86,6 @@ const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
                             }
                         }}
                         withBottomSheet
-                        //style = {[styles.filter,filter.style]}
                         containerProps = {{...containerProps}}
                         inputProps = {{containerProps}}
                     />)

package/src/components/Datagrid/Accordion/index.js

@@ -245,7 +245,7 @@ const DatagridFactory = (Factory)=>{
         getMaxSelectedRows(){
             return isMobileMedia()? 30 : 50;
         }
-        renderFilter(props,headerFilters){
+        prepareFilter(props,headerFilters){
             return headerFilters.push(props);
         }
         showFilters(){

package/src/components/Datagrid/Common/Common.js

@@ -31,6 +31,7 @@ import copyToClipboard from "$capp/clipboard";
 import { Pressable } from "react-native";
 import TableLink from "$TableLink";
 import appConfig from "$capp/config";
+import stableHash from "stable-hash"
 
 export const arrayValueSeparator = ", ";
 
@@ -115,10 +116,10 @@ export default class CommonDatagridComponent extends AppComponent {
             if(isPlainObject(f)){
                 this.filters[v] = f;
                 this.filters[v].field = defaultStr(f.field,v);
-                this.filters[v].originalValue = defaultVal(this.filters[v].originalValue,f.defaultValue,f.value)
+                this.filters[v].originValue = defaultVal(this.filters[v].originValue,f.defaultValue,f.value)
             } else {
                 this.filters[v] = {
-                    originalValue : f,
+                    originValue : f,
                     field : v
                 }
             }
@@ -845,7 +846,9 @@ export default class CommonDatagridComponent extends AppComponent {
             if(removeFocus) document.body.click();
         });
    }
+   prepareFilter(props,filteredColumns){
 
+   }
    renderFilter(props){
        return <Filter {...props}/>
    }
@@ -884,7 +887,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 width,
                 ...restCol
             } = header;
-            restCol = defaultObj(restCol);
+            restCol = Object.clone(defaultObj(restCol));
             let colFilter = defaultVal(restCol.filter,true);
             field = header.field = defaultStr(header.field,field,headerIndex);
             delete restCol.filter;
@@ -899,7 +902,7 @@ export default class CommonDatagridComponent extends AppComponent {
             }
             totalWidths +=width;
             widths[header.field] = width;
-            let colProps = {id,key}
+            const colProps = {id,key}
             colProps.key = isNonNullString(key)?key : (header.field||("datagrid-column-header-"+headerIndex))
             colProps.style = Object.assign({},StyleSheet.flatten(restCol.style));
             if(!visible){
@@ -937,7 +940,7 @@ export default class CommonDatagridComponent extends AppComponent {
             const sortedProps =  isColumnSorted ? {...sortedColumn} : {};
             let filterProps = {};
             if(colFilter){
-                let fCol = {...defaultObj(this.filters[header.field])}
+                const fCol = defaultObj(this.filters[header.field]);
                 this.filters[header.field] = fCol;
                 delete restCol.sortable;
                 filterProps = {
@@ -948,14 +951,14 @@ export default class CommonDatagridComponent extends AppComponent {
                     andOperator : filterAndOperator,
                     searchIconTooltip : 'Filtre',
                     searchIcon : 'filter_list',  
-                    defaultValue : fCol.originalValue,
+                    defaultValue : fCol.originValue,
                     name : header.field,
                     onClearFilter : this.onClearFilter.bind(this),
                     onChange : this.onFilterChange.bind(this),
                     operator : fCol.operator,
                     action : defaultStr(fCol.originAction,fCol.action),
                 };
-                this.renderFilter(filterProps,headerFilters); 
+                this.prepareFilter(filterProps,headerFilters); 
             }
             this.prepareColumn({
                 visible,
@@ -1129,7 +1132,7 @@ export default class CommonDatagridComponent extends AppComponent {
             if(!isObj(f)) return;
             defValue = undefined;
             if(f.type =="select") defValue = [];
-            filters[i] = {...f,value:defValue,defaultValue:defValue,originalValue:defValue}
+            filters[i] = {...f,value:defValue,defaultValue:defValue,originValue:defValue}
         })
         this.filters = filters;
         this.refresh(true);
@@ -1155,7 +1158,7 @@ export default class CommonDatagridComponent extends AppComponent {
         field = defaultStr(field,name);
         if(field){
             let v = defaultStr(type).toLowerCase() == "select"? []:undefined
-            this.filters[field] = {value:v,defaultValue:v,originalValue:v,originValue:v}
+            this.filters[field] = {value:v,defaultValue:v,originValue:v,originValue:v}
             this.doFilter({value:v,field,force:true})
         }
     }
@@ -1165,11 +1168,20 @@ export default class CommonDatagridComponent extends AppComponent {
     }
     onFilterChange(arg){
         this.filteredValues = defaultObj(this.filteredValues);
-        let {field,operator,action,value} = defaultObj(arg);        
+        let {field,operator,originAction,action,value} = defaultObj(arg);     
+        const filters = this.preparedColumns.filters;   
         if(isNonNullString(field) && isNonNullString(operator) && isNonNullString(action)){
             this.filteredValues[field] = {
                 operator,action,value,field
             }
+            Object.map(filters,(filter)=>{
+                if(isObj(filter) && filter.field == field){
+                    filter.originValue = filter.defaultValue = arg.defaultValue;
+                    filter.operator = operator;
+                    filter.action = defaultStr(originAction,action);
+                }
+            });
+            
         }
         return this.doFilter(arg);
     }
@@ -1369,8 +1381,11 @@ export default class CommonDatagridComponent extends AppComponent {
             }
         },isObj(p) && typeof p.force ==='boolean'?p.force : !this.state.isReady)
     }
+    isTableData(){
+        return false;
+    }
     UNSAFE_componentWillReceiveProps(nextProps){
-        if('data' in nextProps && isObjOrArray(nextProps.data)){
+        if(!this.isTableData() && 'data' in nextProps && isObjOrArray(nextProps.data) && nextProps.data != this.state.data && (stableHash(nextProps.data) != stableHash(this.state.data))){
             this.prepareData({data:nextProps.data,force:true},(state)=>{
                 this.setState(state)
             });

package/src/components/Datagrid/Common/TableData.js

@@ -2,6 +2,7 @@ import CommonDatagrid from "./Common";
 import {defaultObj,extendObj,defaultStr,isNonNullString,isFunction,isPromise} from "$utils";
 import actions from "$actions";
 import PropTypes from "prop-types";
+import stableHash from "stable-hash";
 
 export default class CommonTableDatagrid extends CommonDatagrid{
     constructor(props){
@@ -13,12 +14,12 @@ export default class CommonTableDatagrid extends CommonDatagrid{
         } = props;
         dataSource = CommonDatagrid.getDataSource({...props,dataSource,context:this});
         tableName = defaultStr(tableName,table).toUpperCase();
+        this.prepareFetchData();
         if(tableName){
             Object.defineProperties(this,{
                 tableName : {value:tableName,override:false,writable:false}
             })
         }
-        this.INITIAL_STATE.fetchData = defaultVal(this.props.fetchData);
         let isPv = this.isPivotDatagrid();
         if(isPv){
             isPv = this.props.dbSelector !== false;
@@ -34,7 +35,9 @@ export default class CommonTableDatagrid extends CommonDatagrid{
         }
         this.state.isLoading = true;
     }
-
+    prepareFetchData(fetchData){
+        this.INITIAL_STATE.fetchData = defaultVal(fetchData,this.props.fetchData);
+    }
     /*** lorsque la données est modifiée */
     onUpsertData =(arg) =>{
         if(!this._isMounted()) return;
@@ -57,7 +60,9 @@ export default class CommonTableDatagrid extends CommonDatagrid{
         this.clearEvents();
         this.setSelectedRows();
     }
-
+    isTableData(){
+        return true;
+    }
     onChangeDataSources(args){
         let {dataSources,server} = args;
         this.currentDataSources = dataSources;

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

@@ -6,22 +6,90 @@ import Date from "./DatePickerInput";
 import Time 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 defaultValueRef = React.useRef(toDateObj(defaultValue,format));
+    const dateObj = defaultValueRef.current;
+    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({});
+    const changedTimeArgsRef = React.useRef({});
+    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(defaultNumber(tObj.seconds))
+            const sqlTime = date.toSQLTimeFormat();
+            const time = sqlTime.substring(0,withSeconds ?sqlTime.length :5);
+            const value = date.toFormat(defaultStr(dateFormat,DateLib.SQLDateFormat))+" "+time;
+            const args = {...dObj,...tObj,dateObject:date,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 = {dateObj}
+                    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 +98,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

@@ -15,21 +15,21 @@ const compareTimeState = (a,b,ignoreVisible)=>{
     if(ignoreVisible !== true && a.visible !== b.visible) return false;
     return a.hours === b.hours && a.minutes === b.minutes;
   }
-  const parseTime = (value,useSeconds)=>{
+  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)=>{
+  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;
+    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;
@@ -170,7 +173,7 @@ export default class Filter extends AppComponent {
       if(!isObjOrArray(value) && (isNullOrEmpty(value,true) || value ==='undefined') ){
           value = undefined;
       }
-      let originalValue = value;
+      let originValue = value;
       const type = defaultStr(this.props.type).toLowerCase().trim();
       value = parseDecimal(value,type);
       if(action =="$today"){
@@ -215,7 +218,7 @@ export default class Filter extends AppComponent {
                 }
              }
           }
-          this.props.onChange({...this.getStateValues(),value,originValue:originalValue,originalValue,field:this.props.field,action,operator,selector,originAction,context:this});
+          this.props.onChange({...this.getStateValues(),value,originValue:originValue,originValue,field:this.props.field,action,operator,selector,originAction,context:this});
       }
   }
   componentDidUpdate (){
@@ -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

@@ -164,6 +164,10 @@ export const matchPouchDBOperator = (operator,value)=>{
           return {operator:"$lt",value}
         case "LTE":
           return {operator:"$lte",value}
+        case "IN":
+            return {operator:"$in",value}
+        case "NOT IN":
+            return {operator:"$in",value}
     }
   }
 
@@ -486,6 +490,7 @@ const operatorsMap = {
     $gte: '>=',
     $ne: '!=',
     $in: 'IN',
+    $nin : 'NOT IN',
     $eq: '=',
     $regex : "LIKE"
   }

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/TableLink/index.js

@@ -13,9 +13,9 @@ import {styles as _styles} from "$theme";
 import Tooltip from "$ecomponents/Tooltip";
 
 const TableLinKComponent = React.forwardRef((props,ref)=>{
-    let {disabled,labelProps,server,containerProps,id,columnDef,tableName,data,testID,Component,routeName,routeParams,component,primary,triggerProps,onPress,children, ...rest} = props;
+    let {disabled,labelProps,server,containerProps,id,columnDef,tableName,table:customTable,data,testID,Component,routeName,routeParams,component,primary,triggerProps,onPress,children, ...rest} = props;
     testID = defaultStr(testID,"RN_TableDataLinkContainer")
-    tableName = defaultStr(tableName).trim();
+    tableName = defaultStr(tableName,customTable).trim();
     rest = defaultObj(rest);
     containerProps = defaultObj(containerProps)
     labelProps = defaultObj(labelProps);

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)=>{