@fto-consult/expo-ui 8.16.1 → 8.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.16.1",
+  "version": "8.17.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "scripts": {
     "clear-npx-cache": "npx clear-npx-cache",
@@ -70,7 +70,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@faker-js/faker": "^8.0.2",
-    "@fto-consult/common": "^4.15.57",
+    "@fto-consult/common": "^4.18.3",
     "@fto-consult/expo-ui": "^8.16.0",
     "@fto-consult/node-utils": "^1.4.7",
     "apexcharts": "^3.45.2",
@@ -93,7 +93,7 @@
     "react-native-paper": "^5.12.3",
     "react-native-paper-dates": "^0.21.7",
     "react-native-web": "^0.19.10",
-    "react-virtuoso": "^4.6.2",
+    "react-virtuoso": "^4.6.3",
     "readable-stream": "^4.5.2",
     "sanitize-filename": "^1.6.3",
     "sharp-cli": "^2.1.0",

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

@@ -731,7 +731,9 @@ export default class CommonDatagridComponent extends AppComponent {
         const rowKeysColumns = {};
         Object.mapToArray(columns,(headerCol1,headerIndex)=>{
             if(!isObj(headerCol1)) return;
-            const header = Object.clone(headerCol1);
+            const hClone = Object.clone(headerCol1);
+            const header = isObj(hClone.datagrid) ? extendObj(true,{},hClone,hClone.datagrid) : hClone;
+            //delete header.render;
             header.field = defaultStr(header.field, headerIndex)
             if(header.primaryKey){
                 rowKeysColumns[header.field] = true;
@@ -1825,7 +1827,7 @@ export default class CommonDatagridComponent extends AppComponent {
     return this.SetExportOptions({excel:false,pdf:true}).then((opts)=>{
         const {data,config:cConfig,pdfConfig} = opts;
         const config = extendObj({},pdfConfig,cConfig);
-        data[0] = createTableHeader(data[0],{...config,filter:(a)=>{
+        data[0] = createTableHeader(data[0],{filter:(a)=>{
             return true;
         }});
         const pT = defaultStr(config.pdfDocumentTitle).trim();
@@ -2124,7 +2126,7 @@ export default class CommonDatagridComponent extends AppComponent {
     *       @param {object} chartType le type de chart, l'un des types du tableau displayTypes en haut du présent fichier
     *       @param {object} yAxisColumn la colonne de l'axe vertical y
     *       @param {object} xAxisColumn la colonne de l'axe des x de la courbe, pris dans les configurations du chart, config
-    *       @param {object} la fonction d'aggrégation, l'une des fonctions issues des fonctions d'aggrégations aggregatorsFuncions, @see : dans $ecomponents/Datagrid/Footer
+    *       @param {object} la fonction d'aggrégation, l'une des fonctions issues des fonctions d'aggrégations aggregatorsFuncions, @see : dans $components/Datagrid/Footer
     *   en affichage des tableaux de type sectionList, seul les colonnes de totalisation sont utilisées pour l'affichage du graphe
     *   Le nombre de graphes (series) à afficher est valable pour tous les graphes sauf les graphes de type pie/donut. 
     *   il est récupéré dans la variable chartConfig des configuration du chart, où par défaut le nombre de colonnes de totalisation des tableau (inférieur au nombre maximum de courbes surpportées par appexchart)
@@ -3572,8 +3574,8 @@ export default class CommonDatagridComponent extends AppComponent {
                 return rr;
             }
         }
-        const rkey = React.getKeyFromObj(row,rowIndex,rowKey);
-        if(rkey){
+        const rkey = React.getKeyFromObj(row,rowKey);
+        if(rkey && (typeof rkey =="number" || typeof rkey =="string")){
             return rkey;
         }
         if(isNonNullString(rowKey) && isObj(row) && (isNonNullString(row[rowKey]) || isDecimal(row[rowKey]))){

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

@@ -32,44 +32,44 @@ export const renderRowCell = (arg)=>{
     const extra = {style},renderArgs = arg;
     renderArgs.extra = extra;
     renderArgs.item = rowData;
-    const defaultValue = renderArgs.defaultValue = renderArgs.value = rowData[columnField];
+    renderArgs.defaultValue = renderArgs.value = rowData[columnField];
     let key = getRowKey.call(context,rowData,rowIndex)+"-"+columnField;
     if(isObj(columnDef.datagrid) && isFunction(columnDef.datagrid.render)){
         _render = columnDef.datagrid.render.call(context,renderArgs);
     } else if(isFunction(columnDef.multiplicater)){
         _render = defaultDecimal(columnDef.multiplicater({...renderArgs,value:rowData[columnField]}),rowData[columnField]);
-    } else {
-        _render = defaultValue;
+    } 
+    const cellValue = defaultVal(_render,rowData[columnField]);
+    {
+        _render = cellValue;
         if(!renderText && defaultStr(columnDef.format).toLowerCase() === 'hashtag'){
-        _render = <Hashtag>{_render}</Hashtag>
-        } else if(typeof columnDef.render === "function"){
-            _render = columnDef.render.call(context,renderArgs);
+            _render = <Hashtag>{_render}</Hashtag>
         } else if(arrayValueExists( _type,["date","datetime","time"])){
-            if(rowData[columnField]){
+            if(cellValue){
                 const sqlFormat =_type === 'time'? undefined : _type ==="datetime" ? DateLib.SQLDateTimeFormat : DateLib.SQLDateFormat;
-                let _dd =DateLib.parse(rowData[columnField],sqlFormat);
+                let _dd =DateLib.parse(cellValue,sqlFormat);
                 if(DateLib.isDateObj(_dd)){
                     const eFormat = defaultStr(columnDef.format,(_type === 'time'?DateLib.defaultTimeFormat:_type=="datetime"? DateLib.defaultDateTimeFormat:DateLib.masks.defaultDate));
                     _render = DateLib.format(_dd,eFormat);
                 }
             }
-            if(!_render) _render = rowData[columnField]
+            if(!_render) _render = cellValue
         } else if(arrayValueExists(_type,['switch','checkbox'])){
             let {checkedLabel,checkedValue,uncheckedLabel,uncheckedValue} = columnDef;
             checkedLabel = defaultStr(checkedLabel,'Oui')
             uncheckedLabel = defaultStr(uncheckedLabel,'Non')
             checkedValue = defaultVal(checkedValue,1); uncheckedValue = defaultVal(uncheckedValue,0)
-            let val = defaultVal(rowData[columnField],columnDef.defaultValue,columnDef.value)
-            if(val === checkedValue){
+            let val = defaultVal(cellValue,columnDef.defaultValue,columnDef.value)
+            if(val == checkedValue){
                 _render = checkedLabel;
             } else _render = uncheckedLabel;
         }
         else if(!renderText && (_type =='selectcountry')){
-            _render = <Flag withCode {...columnDef} length={undefined} width={undefined} height={undefined} code={defaultValue}/>
+            _render = <Flag withCode {...columnDef} length={undefined} width={undefined} height={undefined} code={cellValue}/>
         }
         ///le lien vers le table data se fait via la colonne ayant la propriété foreignKeyTable de type chaine de caractère non nulle
         else if(!renderText && (isNonNullString(columnDef.foreignKeyTable) || columnDef.primaryKey === true || arrayValueExists(['id','piece'],_type))){
-            const id = rowData[columnField]?.toString();
+            const id = defaultStr(cellValue,typeof cellValue ==="number" ? String(cellValue) : undefined)?.toString();
             if(isNonNullString(id) || typeof id ==='number'){
                 const foreignKeyTable = defaultStr(columnDef.foreignKeyTable,columnDef.table,columnDef.tableName);
                 const foreignKeyColumn = defaultStr(columnDef.foreignKeyColumn,columnDef.field);
@@ -100,7 +100,7 @@ export const renderRowCell = (arg)=>{
                             hasC = true;
                             renderedItems++;
                             const suffix = renderedItems === maxItemsToRender && idSplit.length > maxItemsToRender ? <Label>...et {" "+idSplit.length.formatNumber()+" de plus"}</Label> : null;
-                            return suffix ? <>
+                            return suffix ? <React.Fragment key={index}>
                                 <TableLink 
                                     key = {index}
                                     {...rProps}
@@ -109,7 +109,7 @@ export const renderRowCell = (arg)=>{
                                     {sep2+idd}
                                 </TableLink>
                                 {suffix}
-                            </> : <TableLink 
+                            </React.Fragment> : <TableLink 
                                     key = {index}
                                     {...rProps}
                                     id = {idd}
@@ -137,11 +137,11 @@ export const renderRowCell = (arg)=>{
             columnDef.size = defaultDecimal(columnDef.size,50);
             columnDef.readOnly = defaultBool(columnDef.readOnly,true)
             columnDef.rounded = defaultBool(columnDef.rounded,columnDef.round,true);
-            columnDef.src = rowData[columnField];
+            columnDef.src = cellValue;
             _render = <Image {...columnDef}/>
         } 
         if(_render === undefined || _render ===null){
-            _render = rowData[columnField];
+            _render = cellValue;
         }
         if(columnDef.type =="password" && isNonNullString(_render)){
             let l = Math.max(_render.length,20);
@@ -155,7 +155,7 @@ export const renderRowCell = (arg)=>{
         }
     } 
     if(_render ===undefined){
-        _render = rowData[columnField];
+        _render = cellValue;
     }
     if(isArray(_render)){
         _render = _render.join(arrayValueSeparator);
@@ -235,10 +235,10 @@ export const  renderSelectFieldCell= ({rowData,rowCellValue,columnDef,columnFiel
 }
 
 export const formatValue = (value,format,abreviateValues,formatter)=>{
+    if(typeof value !='number') return value;
     if(typeof value =='boolean'){
         return value ? "Oui" : "Non";
     }
-    if(typeof value !='number') return value;
     format = typeof format =='string'? format.toLowerCase().trim() : "";
     if(typeof formatter =='function'){
         return formatter({value,format,abreviateValues,abreviate:abreviateValues});

package/src/components/Datagrid/SWRDatagrid.js

@@ -25,6 +25,7 @@ import PropTypes from "prop-types";
 import {Menu} from "$ecomponents/BottomSheet";
 import session from "$session";
 import {useScreen,useSWR} from "$econtext/hooks";
+import {HStack} from "$ecomponents/Stack";
 
 export const getSessionKey = ()=>{
     return Auth.getSessionKey("swrDatagrid");
@@ -82,6 +83,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         icon : cIcon,
         swrOptions,
         pagination,
+        renderCustomPagination,
         ...rest
     } = props;
     const screenContext = useScreen();
@@ -308,13 +310,15 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
                 doRefresh(true);
                 return false;
             }}
-            renderCustomPagination = {({context})=>{
+            renderCustomPagination = {(...args)=>{
+                const cPagination = typeof renderCustomPagination =="function"? renderCustomPagination(...args) : null;
                 if(!canPaginate()) {
-                    return <View testID={testID+"_PaginationLabel"}>
+                    return <HStack testID={testID+"_PaginationLabel"}>
+                        {React.isValidElement(cPagination)? cPagination : null}
                         <Label textBold primary style={{fontSize:15}}>
                             {total.formatNumber()}
                         </Label>
-                    </View>
+                    </HStack>
                 }
                 const page = pageRef.current, totalPages = getTotalPages(), prevPage = getPrevPage(),nextPage = getNextPage();
                 const iconProp = {
@@ -324,6 +328,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
                 const sStyle = [styles.limitStyle1,theme.styles.noPadding,theme.styles.noMargin];
                 return <View testID={testID+"_PaginationContainer"} pointerEvents={pointerEvents}>
                     <View style={[theme.styles.row,theme.styles.w100]} pointerEvents={pointerEvents} testID={testID+"_PaginationContentContainer"}>
+                        {React.isValidElement(cPagination)? cPagination : null}
                         <Menu
                             testID={testID+"_SimpleSelect"}
                             style = {sStyle}

package/src/components/Dropdown/index.js

@@ -27,6 +27,7 @@ import {Content as BottomSheet,Menu as BottomSheetMenu,getContentHeight} from "$
 import {isWeb} from "$cplatform";
 import Tooltip from "$ecomponents/Tooltip";
 import TouchableRipple from "$ecomponents/TouchableRipple";
+import stableHash from "stable-hash";
 
 const _isIos = isIos();
 
@@ -168,7 +169,7 @@ class DropdownComponent extends AppComponent {
                     }
                 }
             }
-            if(this.props.onChange){
+            if(typeof this.props.onChange =="function" && stableHash(previousSelected) != stableHash(this.state.selected)){
                 this.props.onChange({value:this.state.selected,selectedKey:valueKey,selectedItems : this.getSelectedItems(),selectedItem,item:selectedItem,items:this.state.data});
             }
         },force);

package/src/components/Dropdown/utils.js

@@ -3,7 +3,7 @@ import {isNativeMobile,isTouchDevice} from "$cplatform";
 
 export const matchOperators = /[|\\{}()[\]^$+*?.]/g;
 
-export const SEARCH_TIMEOUT = 1500;
+export const SEARCH_TIMEOUT = 1000;
 
 export const MAX_AUTO_FOCUS_ITEMS = 10;
 

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

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import KeyboardEventHandler from "../KeyboardEventHandler";
-import { addMediaQueryUpdateStyeSubscription } from "$econtext/hooks";
+import { addMediaQueryUpdateStyeSubscription } from "$context/hooks";
 import Dimensions from "$cdimensions";
 const {getActions,getFormFields,Forms} = require("../utils")
 import TextField,{parseDecimal} from "$ecomponents/TextField";
@@ -23,7 +23,7 @@ import sprintf from "./sprintf";
 import ErrorMessage from "$ecomponents/ErrorBoundary/ErrorMessage";
 import { UPPER_CASE, LOWER_CASE} from "$common/lib/validator";
 import Label from "$ecomponents/Label";
-
+import stableHash from "stable-hash";
 
 export default class Field extends AppComponent {
     constructor(props) {
@@ -65,7 +65,7 @@ export default class Field extends AppComponent {
                 },override : false, writable : false
             },
             isFilter : {
-                value : ()=>defaultVal(renderfilter,render_filter) ? true : false,override : false,writable : false,
+                value : ()=>defaultVal(renderfilter,render_filter,this.props.renderfilter,this.props._render_filter) ? true : false,override : false,writable : false,
             },
             isEditableBySymbol : {
                 value : ()=>{
@@ -253,7 +253,7 @@ export default class Field extends AppComponent {
             this.INITIAL_STATE._lastValidatingValue = value;
             this.setState ({validValue:value,validatingValue:value,previousValue:this.state.validValue,errorText:"",error:false},()=>{
                 this._previousValue  = this.state.validValue;
-                let fields = getFormFields(this.formName);
+                const fields = getFormFields(this.formName);
                 let canEnable = true;
                 for(var k in fields){
                     if(k === this.getName()) continue;
@@ -267,12 +267,12 @@ export default class Field extends AppComponent {
                         break;
                     }
                 }
-                let actions = getActions(this.formName);
-                let action = canEnable?"enable":"disable";
+                const actions = getActions(this.formName);
+                const action = canEnable?"enable":"disable";
                 for(var k in actions){
                     actions[k][action]();
                 }
-                let form = Forms.getForm(this.formName);
+                const form = Forms.getForm(this.formName);
                 typeof this.props.onValidate=="function" && this.props.onValidate.call(this,{...defaultObj(rest),isFilter:this.isFilter(),props:this.props,formName:this.formName,form,name:this.name,field:this.name,value,event,context:this});
                 this.callOnChange({value,event,isValid:true,...rest});
                 if(form && form.props){
@@ -520,7 +520,7 @@ export default class Field extends AppComponent {
         return this._previousValue;
     }
     hasValueChanged(value){
-        return (JSON.stringify(this.state.previousValue) === JSON.stringify(value))? false : true;
+        return (stableHash(this.state.validatingValue) === stableHash(value))? false : true;
     }
     isValidRuleDynamic(){
         return false;
@@ -535,15 +535,15 @@ export default class Field extends AppComponent {
     }
     validate ({value,event,...rest}){
         value = this.parseDecimal(value);
+        if(!this.hasValueChanged(value) && (this.isFilter()? true : this.__hasAlreadyValidated)){
+            return;
+        }
+        this.__hasAlreadyValidated = true;
         this.validatingValue = value;
-        if((!this.canValidate()) && !this.isSelectField()){
-            if(this._isInitialized && !this.hasValueChanged(value)) {
-                return;
-            }
-            this._isInitialized = true;
+        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.validValue},()=>{
+                this.setState({validValue:value,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});
                     }
@@ -559,7 +559,7 @@ export default class Field extends AppComponent {
         if(this.isValidRuleDynamic()){
             this.INITIAL_STATE.validRule = this.INITIAL_STATE.validType = validRule;
         }
-        Validator.validate({...defaultObj(rest),onValidatorValid:this.onValidatorValid.bind(this),context:this,value,validRule,validType:validRule,validParams:this.INITIAL_STATE.validParams,event})
+        Validator.validate({...rest,onValidatorValid:this.onValidatorValid.bind(this),context:this,value,validRule,validType:validRule,validParams:this.INITIAL_STATE.validParams,event})
     }
 
     /**** met le focus sur l'élément précédent */
@@ -616,7 +616,9 @@ export default class Field extends AppComponent {
         if(this.canRegisterField()){
             Forms.trigger("registerField",this.getName(),this.getFormName(),this);
         }
-        if(defaultVal(validate,true) && !this.isFilter()) this.validate({context:this,value:defaultVal(this.props.defaultValue)});
+        if(!this.isFilter() && defaultVal(validate,true) && this.props.validateOnMount !== false) {
+            this.validate({context:this,value:defaultVal(this.props.defaultValue)}) 
+        }
     } 
     componentWillUnmount() {
         super.componentWillUnmount();
@@ -1043,6 +1045,9 @@ export default class Field extends AppComponent {
 }
 
 Field.propTypes = {
+    validateOnMount : PropTypes.oneOfType([
+        PropTypes.bool,//si la formField sera validée immédiatement au montage du composant
+    ]),
     left : PropTypes.oneOfType([
         PropTypes.node,
         PropTypes.func,

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

@@ -2,7 +2,6 @@ import Field from "./Field";
 import Dropdown from "$ecomponents/Dropdown";
 import PropTypes from "prop-types";
 import {isObj} from "$cutils";
-
 export default class FormSelectField extends Field{
     constructor(props) {
         super(props);
@@ -127,12 +126,7 @@ export default class FormSelectField extends Field{
                    props.onMount({context,...rest});
                 }
             }}
-            onChange = {(args)=>{
-                this.validateWithCallOnChange(args);
-                if(typeof props.onChange =='function'){
-                    props.onChange(args);
-                }
-            }}
+            onChange = {this.validateWithCallOnChange.bind(this)}
         />
     }
 }

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

@@ -14,12 +14,7 @@ export default class FormFieldSelectFontIcon extends SelectField{
                     props.onMount({context,...rest});
                  }
             }}
-            onChange = {(args)=>{
-                this.validateWithCallOnChange(args);
-                if(typeof props.onChange =='function'){
-                    props.onChange(args);
-                }
-            }}
+            onChange = {this.validateWithCallOnChange.bind(this)}
         />
     }
 }

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

@@ -5,12 +5,7 @@ export default class FormSelectStructDataField extends SelectField{
     _render(props){
         return <SelectStructData 
             {...props}
-            onChange = {(args)=>{
-                this.validateWithCallOnChange(args);
-                if(typeof this.props.onChange =='function'){
-                    this.props.onChange(args);
-                }
-            }}
+            onChange = {this.validateWithCallOnChange.bind(this)}
             ref = {(el)=>{
                 this._field = el;
             }}

package/src/components/Form/Fields/SelectTableData/Component.js

@@ -16,13 +16,15 @@ import {useSWR} from "$econtext/hooks";
 import stableHash from "stable-hash";
 import {formatValue} from "$ecomponents/Datagrid/Common/utils";
 
+
 /*** la tabledataSelectField permet de faire des requêtes distantes pour rechercher les données
  *  Elle doit prendre en paramètre et de manière requis : les props suivante : 
  *  foreignKeyColumn : La colonne dont le champ fait référence à la clé étrangère, ie fKeyTable dans laquelle faire les requêtes fetch
  *  foreignKeyTable : la tableData dans laquelle effectuer les donées de la requêtes
  *  foreignKeyLabel : Le libélé dans la table étrangère
  */
-const TableDataSelectField = React.forwardRef(({foreignKeyColumn,swrOptions,onChange,isStructData,getForeignKeyTable:cGetForeignKeyTable,prepareFilters:cPrepareFilters,bindUpsert2RemoveEvents,onAdd,showAdd:customShowAdd,canShowAdd,foreignKeyTable,fetchItemsPath,foreignKeyLabel,foreignKeyLabelIndex,dropdownActions,fields,fetchItems:customFetchItem,parseMangoQueries,mutateFetchedItems,onFetchItems,isFilter,isUpdate,isDocEditing,items:customItems,onAddProps,fetchOptions,...props},ref)=>{
+const TableDataSelectField = React.forwardRef(({foreignKeyColumn,swrOptions,foreignKeyLabelRenderers,onChange,isStructData,getForeignKeyTable:cGetForeignKeyTable,prepareFilters:cPrepareFilters,bindUpsert2RemoveEvents,onAdd,showAdd:customShowAdd,canShowAdd,foreignKeyTable,fetchItemsPath,foreignKeyLabel,foreignKeyLabelIndex,dropdownActions,fields,fetchItems:customFetchItem,parseMangoQueries,mutateFetchedItems,onFetchItems,isFilter,renderFilter,render_filter,isUpdate,isDocEditing,items:customItems,onAddProps,fetchOptions,...props},ref)=>{
+    isFilter = isFilter || !!renderFilter || !!render_filter;
     props.data = defaultObj(props.data);
     const type = defaultStr(props.type)?.toLowerCase();
     isStructData = isStructData || type?.replaceAll("-","").replaceAll("_","").trim().contains("structdata");
@@ -97,7 +99,6 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,swrOptions,onCh
     const hashKey = React.useMemo(()=>{
         return stableHash(fetchOptions);
     },[fetchOptions]);
-    const hasRefreshedRef = React.useRef(false);
     const showAdd = React.useMemo(()=>{
         if(isFilter || !foreignKeyTable) return false;
         if(typeof canShowAdd ==='function'){
@@ -112,10 +113,12 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,swrOptions,onCh
     fetchItemsRef.current = customFetchItem;
     swrOptions = Object.assign({},swrOptions);
     ///@see : https://swr.vercel.app/docs/revalidation#disable-automatic-revalidations
-    if(isFilter || isDisabled){
-        swrOptions.refreshInterval = 0;
-        swrOptions.revalidateOnFocus = false;
-        swrOptions.revalidateIfStale = false;
+    const canDisable = isFilter || isDisabled;
+    swrOptions.revalidateOnFocus = canDisable? false : typeof swrOptions.revalidateOnFocus === "boolean" ? swrOptions.revalidateOnFocus : false;
+    swrOptions.revalidateIfStale = canDisable? false : typeof swrOptions.revalidateIfStale ==="boolean"? swrOptions.revalidateIfStale : false;
+    if(canDisable){
+        swrOptions.refreshInterval = 2500*1000*60;
+        swrOptions.refreshWhenHidden = false;
         swrOptions.revalidateOnReconnect = false;
     }
     const restOptionsRef = React.useRef({});
@@ -157,7 +160,6 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,swrOptions,onCh
                 if(typeof onFetchItemsRef.current ==='function'){
                     onFetchItemsRef.current({...args,context:{refresh},props});
                 }
-                hasRefreshedRef.current = true;
                 fetchedResultRef.current = args;
                 return fetchedResultRef.current;
             }).catch((e)=>{
@@ -203,6 +205,7 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,swrOptions,onCh
     } else {
         dropdownActions.trefreshItem = refreshItem;
     }
+    foreignKeyLabelRenderers = defaultObj(foreignKeyLabelRenderers);
     const rItem = (p)=>{
         if(!isObj(p) || !isObj(p.item)) return null;
         let itemLabel = typeof foreignKeyLabel =='function'? foreignKeyLabel(p) : undefined;
@@ -258,14 +261,7 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,swrOptions,onCh
         showAdd = {showAdd}
         isLoading = {isLoading}
         dialogProps = {dialogProps}
-        onChange = {(...args)=>{
-            if(isFilter){
-                if(!hasRefreshedRef.current) return;
-                if(JSON.stringify(defaultValueRef.current) === JSON.stringify(args[0]?.value)) return;
-                defaultValueRef.current = args[0]?.value;
-            }
-            if(onChange) return onChange(...args);
-        }}
+        onChange = {onChange}
         ref = {ref}
         defaultValue = {foreignKeyColumnValue}
         dropdownActions = {dropdownActions}
@@ -307,6 +303,11 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,swrOptions,onCh
 TableDataSelectField.propTypes = {
     ...Dropdown.propTypes,
     swrOptions : PropTypes.object,//les options supplémentaires à passer à la fonction swr
+    /*** permet de faire le mappage entre les foreignKeyLabel et les type correspondants */
+    foreignKeyLabelRenderers : PropTypes.objectOf(PropTypes.oneOfType([
+        PropTypes.string, //représente le type de données associée à la colone dont le nom la clé 
+        PropTypes.func, //la fonction utilisée pour le rendu des colonnes de ce type
+    ])),
     prepareFilters : PropTypes.bool,//si les filtres seront customisé
     bindUpsert2RemoveEvents : PropTypes.bool,//si le composant écoutera l'évènement de rafraichissement des données
     onAdd : PropTypes.func, //({})=>, la fonction appelée lorsque l'on clique sur le bouton add

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

@@ -5,12 +5,7 @@ export default class FormSelectTableDataField extends SelectField{
     _render(props){
         return <SelectTableData 
             {...props}
-            onChange = {(args)=>{
-                this.validateWithCallOnChange(args);
-                if(typeof this.props.onChange =='function'){
-                    this.props.onChange(args);
-                }
-            }}
+            onChange = {this.validateWithCallOnChange.bind(this)}
             beforeFetchItems = {(opts)=>{
                 if(typeof props.beforeFetchItems =='function'){
                     return props.beforeFetchItems({...opts,context:this,dropdownContext : this._field})

package/src/components/Preloader/index.js

@@ -115,9 +115,12 @@ const styles = StyleSheet.create({
         justifyContent : 'center',
         paddingVertical : 15,
         paddingHorizontal : 20,
+        flexWrap : "wrap",
     },
     text : {
-        marginLeft:20
+        marginLeft:20,
+        paddingHorizontal : 5,
+        maxWidth : "98%",
     },
     content : {},
     indicatorLeft : {

package/src/context/hooks.js

@@ -34,6 +34,7 @@ export const useSWR =  (path,options)=>{
         ...Object.assign({},options),
         swrOptions : {
             provider: () => new Map(),
+            keepPreviousData : true,
             ...swrConfig,
             isOnline(...rest) {
                 if(isLocalHost) return true;

package/src/screens/Help/openLibraries.js

@@ -1,12 +1,8 @@
 module.exports = {
 	"@fto-consult/expo-ui": {
-		"name": "@fto-consult/expo-ui",
-		"version": "8.14.5",
-		"repository": {
-			"type": "git",
-			"url": "git+https://github.com/borispipo/expo-ui.git"
-		},
-		"homepage": "https://github.com/borispipo/expo-ui#readme"
+		"version": "8.16.0",
+		"url": "https://github.com/borispipo/expo-ui#readme",
+		"license": "ISC"
 	},
 	"@babel/plugin-proposal-export-namespace-from": {
 		"version": "7.18.9",
@@ -34,7 +30,7 @@ module.exports = {
 		"license": "MIT"
 	},
 	"@fto-consult/common": {
-		"version": "4.15.56",
+		"version": "4.18.3",
 		"url": "https://github.com/borispipo/common#readme",
 		"license": "ISC"
 	},
@@ -149,7 +145,7 @@ module.exports = {
 		"license": "MIT"
 	},
 	"react-virtuoso": {
-		"version": "4.6.2",
+		"version": "4.6.3",
 		"url": "https://virtuoso.dev/",
 		"license": "MIT"
 	},