@fto-consult/expo-ui 8.71.0 → 8.73.0

package/bin/create-app/dependencies.js

@@ -11,8 +11,8 @@
 	"@react-navigation/native-stack": "^6.9.26",
 	"@react-navigation/stack": "^6.3.29",
 	"@shopify/flash-list": "1.6.3",
-	"expo": "^50.0.15",
-	"expo-camera": "~14.1.2",
+	"expo": "^50.0.17",
+	"expo-camera": "~14.1.3",
 	"expo-clipboard": "~5.0.1",
 	"expo-font": "~11.10.3",
 	"expo-image-picker": "~14.7.1",
@@ -20,7 +20,7 @@
 	"expo-sharing": "~11.10.0",
 	"expo-sqlite": "~13.4.0",
 	"expo-status-bar": "~1.11.1",
-	"expo-system-ui": "~2.9.3",
+	"expo-system-ui": "~2.9.4",
 	"expo-web-browser": "~12.8.2",
 	"react": "18.2.0",
 	"react-native": "0.73.6",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.71.0",
+  "version": "8.73.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "react-native-paper-doc": "https://github.com/callstack/react-native-paper/tree/main/docs/docs/guides",
   "scripts": {
@@ -70,7 +70,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@faker-js/faker": "^8.0.2",
-    "@fto-consult/common": "^4.41.1",
+    "@fto-consult/common": "^4.44.3",
     "apexcharts": "^3.48.0",
     "file-saver": "^2.0.5",
     "google-libphonenumber": "^3.2.34",
@@ -85,9 +85,9 @@
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-mime-types": "^2.5.0",
     "react-native-paper": "^5.12.3",
-    "react-native-paper-dates": "^0.22.6",
+    "react-native-paper-dates": "^0.22.7",
     "react-native-web": "^0.19.10",
-    "react-virtuoso": "^4.7.8",
+    "react-virtuoso": "^4.7.9",
     "readable-stream": "^4.5.2",
     "sanitize-filename": "^1.6.3",
     "tippy.js": "^6.3.7",

package/src/components/BottomSheet/Sheet.js

@@ -228,7 +228,7 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
     
     React.setRef(ref,{close:closeModal,open})
     React.useEffect(()=>{
-        if(bindResizeEvent){
+        if(bindResizeEvent && false){
             APP.on(APP.EVENTS.RESIZE_PAGE,closeModal);
         }
         return ()=>{

package/src/components/Button/Status.js

@@ -28,7 +28,7 @@ const ButtonStatusComponent = React.forwardRef(({status,withIcon,color,backgroun
     left = typeof left =='function'? left(rP) : left;
     right = typeof right =='function'? right(rP) : right;
     const icProps = {color,size:15,...iconProps,style:[theme.styles.noMargin,theme.styles.noPadding,iconProps.style],onPress}
-    return <Pressable ref={ref} onPres={onPress} testID={`${testID}_Container`} {...containerProps} style={[{borderRadius:15,paddingVertical:4,paddingHorizontal:10,alignSelf: 'flex-start'},theme.styles.row,theme.styles.flexWrap,backgroundColor && {backgroundColor},style]}>
+    return <Pressable ref={ref} onPres={onPress} testID={`${testID}_Container`} {...containerProps} style={[styles.button,theme.styles.row,theme.styles.flexWrap,backgroundColor && {backgroundColor},style]}>
         {React.isValidElement(left)? left : null}
         {withIcon !== false && React.isValidElement(icon,true) ? <Icon {...icProps} icon={icon} />:null}
         {label ? <Label testID={`${testID}_Label`} {...labelProps} style={[color && {color},{fontSize:13},labelProps.style]}>{label}</Label> : null}
@@ -46,6 +46,15 @@ ButtonStatusComponent.defaultProps = {
     editable : false,
 }
 
+const styles = StyleSheet.create({
+    button : {
+        borderRadius:15,
+        paddingVertical:4,
+        paddingHorizontal:10,
+        alignSelf: 'flex-start',
+    }
+});
+
 ButtonStatusComponent.propTypes = {
     label : PropTypes.oneOfType([ //le libelé à faire figurer sur le status
         PropTypes.node,

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

@@ -552,7 +552,7 @@ const DatagridFactory = (Factory)=>{
                         extraData = {this.state.refresh}
                         contentInset={{ right: 10, top: 10, left: 10, bottom: 10 }}
                         itemHeight = {undefined}
-                        responsive = {defaultBool(responsive,rest.responsive,accordionProps.responsive,true)}
+                        responsive = {defaultBool(this.hasSectionListData()? false : undefined,responsive,rest.responsive,accordionProps.responsive,true)}
                         filter = {filter}
                         getItemType = {this.getFlashListItemType.bind(this)}
                         renderItem = {this.renderItem.bind(this)}

package/src/components/Dialog/Dialog.js

@@ -177,8 +177,11 @@ const DialogComponent = React.forwardRef((props,ref)=>{
             containerProps.mediaQueryUpdateStyle = (...rest)=>{
                 const r = typeof mediaQueryUpdateStyle =="function"? mediaQueryUpdateStyle(...rest) : undefined;
                 const {width,height} = rest[0];
-                const rW = setDimensions !==  false ? {width,height} : {};
-                return isFullScreenDialog()? [r,{...rW,maxWidth:"100%",maxHeight:"100%"}] : [r,setDimensions !== false && {maxHeight:getMaxHeight(),maxWidth:getMaxWidth()}];
+                let rW = setDimensions !==  false ? {width,height} : {};
+                if(setDimensions !== false && isFullScreenDialog()){
+                    rW = {width:'100%',height:'100%',minHeight:height,maxWidth:"100%",maxHeight:"100%"};
+                }
+                return isFullScreenDialog()? [r,rW] : [r,setDimensions !== false && {maxHeight:getMaxHeight(),maxWidth:getMaxWidth()}];
             }
         }
         return containerProps;

package/src/components/DocumentPicker/index.js

@@ -2,31 +2,135 @@ import Button from "$ecomponents/Button";
 import React from "$react";
 import PropTypes from "prop-types";
 import { pickDocument } from "$emedia/document";
+import { StyleSheet } from "react-native";
+import {isObj,isNonNullString,extendObj,defaultObj,defaultBool} from "$cutils";
+import Label from "$ecomponents/Label";
+import theme from "$theme";
 
-const DocumentPickerComponent = React.forwardRef(({pickOptions,onSuccess,onCancel,onPress,...props},ref)=>{
-    return <Button 
+
+const DocumentPickerComponent = React.forwardRef(({pickOptions,label,error,left,errorText,labelProps,containerProps,text:cText,onChange,onCancel,style,onPress,...props},ref)=>{
+    const [assets,setAssets] = React.useState([]);
+    label = React.isValidElement(label,true) && label || React.isValidElement(cText,true) && cText || null;
+    const changedRef = React.useRef(null);
+    labelProps = defaultObj(labelProps);
+    containerProps = defaultObj(containerProps);
+    const multiple = defaultBool(pickOptions?.multiple,props.multiple);
+    const {text,tooltip} = React.useMemo(()=>{
+        let text = ``,tooltip = "";
+        let counter = 0;
+        let breakCounter = 0;
+        (Array.isArray(assets) ?assets:[assets]).map((a)=>{
+            if(!isObj(a) || !isNonNullString(a.name)) return;
+            tooltip+=`${tooltip?",":""}${a.name}`
+            if(counter < 1){
+                text+=`${text?",":""}${a.name}`
+            } else {
+                breakCounter++;
+            }
+            counter++;
+        });
+        return {
+            text : text+(breakCounter> 0?` et ${breakCounter.formatNumber()} de plus`:""),
+            tooltip,
+        }
+    },[assets]);
+    React.useEffect(()=>{
+        if(!isObj(changedRef.current)) return;
+        const args = changedRef.current;
+        changedRef.current = null;
+        if(typeof onChange =="function"){
+            onChange({...args,value:assets});
+        } 
+    },[assets]);
+    const textColor = error? theme.colors.error : theme.colors.text;
+    const textFieldMode = theme.textFieldMode;
+    const borderColor = theme.colors[error?"error":"divider"];
+    const isFlatMode = textFieldMode == "flat";
+    const containerStyle = isFlatMode ? {} : {paddingHorizontal : 10}
+    const labelColor = error ? theme.colors.error : theme.Colors.setAlpha(theme.colors.text,theme.ALPHA);
+    const rStyle = isFlatMode ? {borderWidth:0,borderBottomWidth:1,borderBottomColor:borderColor} : {
+        borderWidth : 1,
+        borderRadius:15,
+        borderColor,
+    };
+    const btn = <Button 
         onPress = {(...r)=>{
             if(typeof onPress =="function" && onPress(...r) === false) return;
-            pickDocument(pickOptions).then((r)=>{
-                if(typeof onSuccess =="function"){
-                    onSuccess(r);
+            pickDocument(extendObj({},pickOptions,{multiple})).then((r)=>{
+                r.assets = Array.isArray(r.assets)? r.assets : [];
+                if(!multiple){
+                    r.assets  = r.assets[0];
                 }
+                changedRef.current = r;
+                setAssets(r.assets);
             }).catch((r)=>{
                 if(typeof onCancel =="function"){
                     onCancel(r);
                 }
             });
         }}
-        ref={ref} {...props}/>
+        left = {(props)=>{
+            const c = typeof left =="function"? left(props) : React.isValidElement(left)? left : null;
+            const lL = <Label children={`Choisir ${multiple ? "des fichiers":"un fichier" }`} style={[styles.leftLabel,{color:textColor,borderRightColor:theme.colors.divider}]}/>;
+            return React.isValidElement(c)? <>
+                {c}{lL}
+            </> : lL;
+        }}
+        style = {[styles.button,style]}
+        upperCase ={false}
+        ref={ref} {...props}
+        children = {text || "Aucun fichier choisit"}
+        tooltip = {tooltip}
+        title = {tooltip}
+        labelProps = {{style:styles.label,splitText:true,numberOfLines : 1,color:textColor}}
+        containerProps = {{...containerProps,style:[styles.container,containerStyle,rStyle,containerProps.style]}}
+    />;
+    return  <>
+        {label?<Label {...labelProps} style={[{color:labelColor},labelProps.style]} children={label}/> : null}
+        {btn}
+        {errorText? <Label error children={errorText}/>:null}
+    </> 
 });
 
 DocumentPickerComponent.displayName = "DocumentPickerComponent";
 
 export default DocumentPickerComponent;
 
+const styles = StyleSheet.create({
+    button : {
+        alignSelf: 'flex-start',
+    },
+    leftLabel : {
+        paddingVertical : 12,
+        borderRightWidth : 1,
+        textWrap : "nowrap",
+        paddingRight : 7,
+    },
+    label : {
+        paddingHorizontal : 5,
+        textWrap : "wrap",
+        textAlign : "left",
+    },
+    container : {
+        marginTop : 5,
+    }
+});
+
 DocumentPickerComponent.propTypes = {
+    label : PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.element,
+        PropTypes.string,
+        PropTypes.number,
+    ]),
+    text : PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.element,
+        PropTypes.string,
+        PropTypes.number,
+    ]),
     ...Object.assign({},Button.propTypes),
-    onSuccess : PropTypes.func,
+    onChange : PropTypes.func,
     onCancel : PropTypes.func,
     /*** @see : https://docs.expo.dev/versions/latest/sdk/document-picker/#documentpickeroptions */
     pickOptions : PropTypes.shape({

package/src/components/Dropdown/index.js

@@ -35,6 +35,11 @@ const MAX_SELECTED_ITEMS = 2;
 
 export const isValidValueKey = valueKey => isNonNullString(valueKey);
 
+/***
+    au cas où les données sont chargées depuis la bd,
+    la props isLoading doit être passée à true à ce compossant
+    elle devra être remise à false une fois le chargement des données terminé
+*/
 class DropdownComponent extends AppComponent {
     constructor(props){
         super(props);
@@ -106,7 +111,7 @@ class DropdownComponent extends AppComponent {
                     return index;
                 }, override : false, writable : false
             },
-            canHandleMultiple : {
+            isDefaultMultiplePropEnabled : {
                 value  : !!multiple,
                 override : false, writable : false,
             },
@@ -120,6 +125,7 @@ class DropdownComponent extends AppComponent {
 
         extendObj(this.state,{
             initialized : false,
+            selected : this.prepareSelected({defaultValue}),
             filterText : "",
             anchorHeight : undefined,
             isMobileMedia : isMobileOrTabletMedia(),
@@ -134,6 +140,9 @@ class DropdownComponent extends AppComponent {
         this.inputRef = React.createRef(null);
         this.listRef = React.createRef(null);
     }
+    canHandleMultiple (){
+        return !!this.props.multiple;
+    }
     updateSelected (nState,force){
         nState = defaultObj(nState);
         //this.countEee = defaultNumber(this.countEee)+1;
@@ -148,7 +157,7 @@ class DropdownComponent extends AppComponent {
             let selectedItem = null;
             const valueKey = this.getValueKey(this.state.selected);
             if(this.state.initialized && !force){
-                if(!this.canHandleMultiple){
+                if(!this.canHandleMultiple()){
                     if(valueKey && this.state.valuesKeys[valueKey]){
                         selectedItem = this.state.valuesKeys[valueKey].item;
                     }
@@ -185,9 +194,9 @@ class DropdownComponent extends AppComponent {
         },force);
     }
     selectItem ({value,select,valueKey}){
-        let selected = this.canHandleMultiple ? [...this.state.selected] : undefined;
+        let selected = this.canHandleMultiple() ? [...this.state.selected] : undefined;
         let selectedValuesKeys = {...this.state.selectedValuesKeys};
-        if(this.canHandleMultiple){
+        if(this.canHandleMultiple()){
             if(!select){
                 if(valueKey in selectedValuesKeys){
                     const newS = [];
@@ -215,7 +224,7 @@ class DropdownComponent extends AppComponent {
         }
         this.willHandleFilter = false;
         let nState = {};
-        if(!this.canHandleMultiple){
+        if(!this.canHandleMultiple()){
             nState.visible = false;
         }
         this.updateSelected({...nState,data:!this.isBigList?[...this.state.data]: this.state.data,selected,selectedValuesKeys});
@@ -234,7 +243,7 @@ class DropdownComponent extends AppComponent {
         if(valueKey && forceCheck !== true){
             return valueKey in this.state.selectedValuesKeys ? true : false;
         }
-        if(this.canHandleMultiple) {
+        if(this.canHandleMultiple()) {
             currentSelected = Array.isArray(currentSelected)? currentSelected :  this.state.selected;
             for(let i in currentSelected){
                 if(this.compare(currentValue,currentSelected[i])) return true;
@@ -246,7 +255,7 @@ class DropdownComponent extends AppComponent {
     }
     prepareSelected({defaultValue}){
         let s = defaultValue !== undefined ? defaultValue : undefined;
-        if(this.canHandleMultiple){
+        if(this.canHandleMultiple()){
             if(isNonNullString(s)){
                 s = s.split(",");//si c'est un tableau, ça doit être séparé de virgule
             } else {
@@ -291,7 +300,7 @@ class DropdownComponent extends AppComponent {
             if(isObj(valuesKeys[valueKey])){
                 const node = valuesKeys[valueKey];
                 const text = node.text;
-                if(!this.canHandleMultiple){
+                if(!this.canHandleMultiple()){
                     sDText = text;
                 } else {
                     counter++;
@@ -306,7 +315,7 @@ class DropdownComponent extends AppComponent {
                 for(let i in selectedValues){
                     const text = selectedValues[i];
                     if(!isNonNullString(text) && typeof text !=="number") continue;
-                    if(!this.canHandleMultiple){
+                    if(!this.canHandleMultiple()){
                         sDText = String(text);
                     } else {
                         counter++;
@@ -322,13 +331,13 @@ class DropdownComponent extends AppComponent {
         } else {
             this.toggleHasNoValidSelectedValue(false);
         }
-        if(this.canHandleMultiple && counter > maxCount && sDText){
+        if(this.canHandleMultiple() && counter > maxCount && sDText){
             sDText+= ", et "+((counter-maxCount).formatNumber()+" de plus")
         }
         return sDText;
     }
     pushSelectedValue(value,selectedStateValue){
-        if(this.canHandleMultiple){
+        if(this.canHandleMultiple()){
             selectedStateValue = Array.isArray(selectedStateValue)?selectedStateValue : [];
             selectedStateValue.push(value);
             return selectedStateValue;
@@ -349,7 +358,7 @@ class DropdownComponent extends AppComponent {
         const valuesKeys = {};
         const {filter} = this.props;
         const currentSelected = this.prepareSelected({defaultValue:this.props.defaultValue,...args});
-        let selected = this.canHandleMultiple ? []:undefined,selectedValuesKeys={};
+        let selected = this.canHandleMultiple() ? []:undefined,selectedValuesKeys={};
         const itemProps = defaultObj(this.props.itemProps);
         const itemsData = this.getItemsData(args);
         Object.map(itemsData,(item,index,_index)=>{
@@ -402,12 +411,12 @@ class DropdownComponent extends AppComponent {
         let hasChanged = false;
         selectOnlyOne = selectOnlyOne === true ? true : false;
         let newSelected = undefined;
-        if(this.canHandleMultiple){
+        if(this.canHandleMultiple()){
             newSelected = selectOnlyOne ? [] : [...this.state.selected];
         }
         const selectedValuesKeys = selectOnlyOne?{}:{...this.state.selectedValuesKeys};
         const sVal = this.prepareSelected({defaultValue:value});
-        if(this.canHandleMultiple){
+        if(this.canHandleMultiple()){
             if(sVal.length !== this.state.selected.length){
                 hasChanged = true;
             }
@@ -436,7 +445,7 @@ class DropdownComponent extends AppComponent {
     }
 
     selectAll (){
-        if(!this.canHandleMultiple) return;
+        if(!this.canHandleMultiple()) return;
         const newSelected = [],selectedValuesKeys={};
         this.state.data.map((item,_index)=>{
             const key = this.keysRefs[_index];
@@ -447,11 +456,11 @@ class DropdownComponent extends AppComponent {
         this.updateSelected({selected:newSelected,selectedValuesKeys,selectedText:this.getSelectedText(newSelected,selectedValuesKeys)});
     }
     unselectAll() {
-        if(!this.canHandleMultiple) return;
+        if(!this.canHandleMultiple()) return;
         this.updateSelected({selected:[],selectedValuesKeys:{},selectedText:''})
     }
     unselect (oState){
-        this.updateSelected({...defaultObj(oState),selected:this.canHandleMultiple ?[]:undefined,selectedValuesKeys:{},selectedText:""});
+        this.updateSelected({...defaultObj(oState),selected:this.canHandleMultiple() ?[]:undefined,selectedValuesKeys:{},selectedText:""});
     }
     getSelectedValue (){
         return this.getSelected();
@@ -461,7 +470,7 @@ class DropdownComponent extends AppComponent {
     }
     getSelectedItems (){
         let ret = {};
-        if(this.canHandleMultiple){
+        if(this.canHandleMultiple()){
             Object.map(this.state.selected,(value)=>{
                 const nodeKey = this.getNodeFromValue(value);
                 if(!nodeKey.valueKey) return;
@@ -654,15 +663,18 @@ class DropdownComponent extends AppComponent {
     UNSAFE_componentWillReceiveProps(nextProps){
         const {items,defaultValue,selected} = nextProps;
         const isFunc = typeof nextProps.items == "function";
+        if(nextProps.isLoading === true) return;
         if(isFunc || !React.areEquals(items,this.props.items)){
             const nState = this.prepareItems({items,defaultValue,selected});
             return this.updateSelected(nState,!isFunc);
         }
         let value = this.prepareSelected({defaultValue});
-        let areEquals = !this.canHandleMultiple ? this.compare(value,this.state.selected) : false;
-        if(areEquals) return;
-        let selectedValuesKeys = {}, newSelected = this.canHandleMultiple ? [] : value;
-        if(this.canHandleMultiple){
+        let areEquals = !this.canHandleMultiple() ? this.compare(value,this.state.selected) : false;
+        if(areEquals) {
+            return;
+        }
+        let selectedValuesKeys = {}, newSelected = this.canHandleMultiple() ? [] : value;
+        if(this.canHandleMultiple()){
             areEquals = value.length === this.state.selected.length;
             if(areEquals && !value.length){
                 areEquals = true;
@@ -771,7 +783,7 @@ class DropdownComponent extends AppComponent {
         const flattenStyle = StyleSheet.flatten(dropdownProps.style) || {};
         itemContainerProps = defaultObj(itemContainerProps);
         dropdownProps = defaultObj(dropdownProps);
-        const multiple = this.canHandleMultiple;
+        const multiple = this.canHandleMultiple();
         const renderTag = multiple && (display == 'tags' || display === 'tag' )? true : false;
         this.willRenderTag = renderTag;
     

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

@@ -0,0 +1,63 @@
+import Field from "./Field";
+import DocumentPicker from "$ecomponents/DocumentPicker";
+import {isObj,defaultObj} from "$cutils";
+export default class FormFieldDocumentPicker extends Field {
+    canFocus(){
+        return false;
+    }
+    isValid(){
+        return true;
+    }
+    compareAssets(assets){
+        if(Array.isArray(assets)){
+            const previousValue = this.getPreviousValue();
+            const allPrev = Array.isArray(previousValue)? previousValue : [previousValue];
+            for(let i in assets){
+                let hasFound = false;
+                for(let j in allPrev){
+                    if(this.compareSingleAssets(assets[i],allPrev[j])) {
+                        hasFound = true;
+                    }
+                    if(hasFound) break;
+                }
+                if(!hasFound) return false;
+            }
+            return true;
+        } 
+        return this.compareSingleAssets(assets,this.getPreviousValue());
+    }
+    compareSingleAssets(assets,previousValue){
+        if(!isObj(assets) || !isObj(previousValue)) return false;
+        return previousValue.lastModified === assets.lastModified && previousValue.mimeType == assets.mimeType && previousValue.name === assets.name && previousValue.size == assets.size && previousValue.uri == assets.uri;
+    }
+    onChange(args){
+        const assets = Array.isArray(args.assets) ? args.assets : [args.assets];
+        const value = this.props.multiple ? assets:assets[0];
+        if(this.compareAssets(value)){
+            return ;
+        }
+        this.validate({...args,value,context:this});
+    }
+    getComponent(){
+        return DocumentPicker;
+    }
+    _render({pickOptions,...props}){
+        pickOptions = defaultObj(pickOptions,props);
+        if(typeof this.props.multiple =="boolean"){
+            pickOptions.multiple = this.props.multiple;
+        }
+        return <DocumentPicker
+           {...props}
+           pickOptions = {pickOptions}
+           onChange = {this.onChange.bind(this)}
+        />
+    }
+    isTextField(){
+        return false;
+    }
+}
+
+FormFieldDocumentPicker.propTypes = {
+    ...Field.propTypes,
+    ...DocumentPicker.propTypes,
+}

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

@@ -251,8 +251,7 @@ export default class Field extends AppComponent {
             }
             this.validatingValue = value;
             this.INITIAL_STATE._lastValidatingValue = value;
-            this.setState ({validValue:value,validatingValue:value,previousValue:this.state.validValue,errorText:"",error:false},()=>{
-                this._previousValue  = this.state.validValue;
+            this.setState ({validValue:value,previousValidatedValue:this.state.validValue,validatingValue:value,previousValue:this.state.validValue,errorText:"",error:false},()=>{
                 const fields = getFormFields(this.formName);
                 let canEnable = true;
                 for(var k in fields){
@@ -405,7 +404,7 @@ export default class Field extends AppComponent {
         return this.formName;
     }
     getOldValue () {
-        return this._previousValue;
+        return this.state.previousValidatedValue;
     }
     /*** la valeur qui a été validée 
      * @param : l'ensemble des données du formulaire à retourner
@@ -517,7 +516,7 @@ export default class Field extends AppComponent {
         return false;
     }
     getPreviousValue (){
-        return this._previousValue;
+        return this.state.previousValidatedValue;
     }
     hasValueChanged(value){
         return (stableHash(this.state.validatingValue) === stableHash(value))? false : true;
@@ -541,9 +540,8 @@ export default class Field extends AppComponent {
         this.__hasAlreadyValidated = true;
         this.validatingValue = value;
         if(((!this.canValidate()) && !this.isSelectField()) || this.isFilter()){
-            this._previousValue = this.state.validValue;
             this.trigger("validate",{...defaultObj(rest),context:this,value,event,oldValue:this.INITIAL_STATE._lastValidatingValue},(results)=>{
-                this.setState({validValue:value,validatingValue:value,sk:!this.state.sk,previousValue:this.state.validatingValue},()=>{
+                this.setState({validValue:value,previousValidatedValue:this.state.validValue,validatingValue:value,sk:!this.state.sk,previousValue:this.state.validatingValue},()=>{
                     if(isFunction(this.props.onValidate)){
                         this.props.onValidate({...defaultObj(rest),props:this.props,name:this.name,field:this.name,value,event,context:this,oldValue:this.INITIAL_STATE._lastValidatingValue});
                     }

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

@@ -23,19 +23,15 @@ export default class FormFieldImage extends Field {
             return ;
         }
         this.validate({...args,value:dataUrl,context:this});
-        /*if(isFunction(this.props.onChange)){
-            this.props.onChange({dataUrl,src:dataUrl,dataURL:dataUrl,previousSrc:previousValue});
-        }*/
     }
     getComponent(){
         return Image;
     }
-    _render(props){
-        let {dbName,onChange,...p}  = props;
-        p.onChange = this.onChange.bind(this);
+    _render({onChange,...p}){
         return <Image
            {...p}
            src={defaultVal(p.src,p.defaultValue)}
+           onChange={this.onChange.bind(this)}
         />
     }
     isTextField(){
@@ -46,20 +42,5 @@ export default class FormFieldImage extends Field {
 FormFieldImage.propTypes = {
     width : PropTypes.number,
     height : PropTypes.number,
-    /*** le nom du champ qu'on valide 
-     *  si fieldName est définie, alors, il est utilisé pour la validation du champ.
-     *  lorsque la valeur est mise à jour, on recherche en base toutes les objets ayant pour valeur ladite valeur
-     *  Si est trouvé, alors une erreur est retournée.
-     *  Dans le cas où fieldName est définie, alors, l'id n'est pas utilisé pour la validation
-     * 
-    */
-    fieldName : PropTypes.string,
-    ...Field.propTypes,
-    /*** le nom de la table dans laquelle l'idField est enreigistré */
-    table : PropTypes.string,
-    tableName : PropTypes.string, //idem à table
-    /*** le nom de la bd où l'id field est enregistré */
-    dbName : PropTypes.string,
-    //la longueur maximale du champ
-    maxLength:PropTypes.number
+    ...Field.propTypes
 }

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

@@ -108,7 +108,7 @@ export default class FormSelectField extends Field{
                 args.selectedItems = this._field.getSelectedItems();
             }
             args.value = this._field.prepareSelected({defaultValue:args.value})
-            if(!this._field.canHandleMultiple && !args.selectedItem){
+            if(!(typeof this._field.canHandleMultiple =='function' && this._field.canHandleMultiple()) && !args.selectedItem){
                 const valueKey = this._field.getValueKey(args.value);
                 if(valueKey && isObj(this._field.state.valuesKeys) && this._field.state.valuesKeys[valueKey]){
                     args.selectedItem = args.item = this._field.state.valuesKeys[valueKey].item;