@fto-consult/expo-ui 2.34.0 → 2.34.2

package/appConfig.txt

@@ -15,5 +15,6 @@
     sprintfSelectors : {
          "&libele&" : selectLabel,
     }
-    getTableData : {function(tableName)=>table} retourne l'ojet table data
+    getTableData : {function(tableName)=>table} retourne l'ojet table data,
+    swrRefreshTimeout : {number} le délai d'inactivité auquel, une fois l'application active, les données de type listData sont rafraichies
  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.34.0",
+  "version": "2.34.2",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^1.26.0",
+    "@fto-consult/common": "^2.1.2",
     "@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

@@ -30,25 +30,37 @@ import appConfig from "$capp/config";
 import {showPrompt} from "$components/Dialog/confirm";
 import { AppState } from 'react-native'
 import {canFetchOffline} from "$capi/utils";
+import {defaultNumber} from "$utils";
+import { timeout as SWR_REFRESH_TIMEOUT} from '$ecomponents/Datagrid/SWRDatagrid';
 
 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);
   return function MainIndexComponent() {
     const isScreenFocusedRef = React.useRef(true);
+    ///garde pour chaque écran sa date de dernière activité
+    const screensRef = React.useRef({});//la liste des écrans actifs
+    const activeScreenRef = React.useRef('');
+    const prevActiveScreenRef = React.useRef('');
+    const appStateRef = React.useRef({});
     React.useEffect(()=>{
         ///la fonction de rappel lorsque le composant est monté
         let cb = typeof onMount =='function'? onMount() : null;
-        const onScreenFocus = ()=>{
+        const onScreenFocus = ({sanitizedName})=>{
+            prevActiveScreenRef.current = activeScreenRef.current;
+            if(activeScreenRef.current){
+               screensRef.current[activeScreenRef.current] = null;
+            }
+            screensRef.current[sanitizedName] = new Date();
+            activeScreenRef.current = sanitizedName;
             isScreenFocusedRef.current = true;
         }, onScreenBlur = ()=>{
-           isScreenFocusedRef.current = false;
+          isScreenFocusedRef.current = false;
         }
         APP.on(APP.EVENTS.SCREEN_FOCUS,onScreenFocus);
         APP.on(APP.EVENTS.SCREEN_BLUR,onScreenBlur);
@@ -86,18 +98,28 @@ export default function getIndex(options){
             return APP.isOnline();
           },
           isVisible() {
-            /* Customize the visibility state detector */
-            return false;
-            return isScreenFocusedRef.current;
+            const screen = activeScreenRef.current;
+            if(!screen) return false;
+            if(!screensRef.current[screen]){
+               screensRef.current[screen] = new Date();
+               return false;
+            }
+            const date = screensRef.current[screen];
+            const diff = new Date().getTime() - date.getTime();
+            const timeout = defaultNumber(appConfig.get("swrRefreshTimeout"),SWR_REFRESH_TIMEOUT)
+            //console.log(diff,"is diff and ",date.toFormat("HH:MM:ss"),screensRef,screen);
+            return diff >= timeout ? true : false;
           },
           initFocus(callback) {
             let appState = AppState.currentState
             const onAppStateChange = (nextAppState) => {
               /* If it's resuming from background or inactive mode to active one */
-              if (appState.match(/inactive|background/) && nextAppState === 'active') {
+              const active = appState.match(/inactive|background/) && nextAppState === 'active';
+              if (active) {
                 callback()
               }
-              appState = nextAppState
+              appState = nextAppState;
+              appStateRef.current = !!active;
             }
             // Subscribe to the app state change events
             const subscription = AppState.addEventListener('change', onAppStateChange);

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

@@ -12,7 +12,6 @@ import BottomSheet from "$ecomponents/BottomSheet/Provider";
 import {isMobileMedia} from "$cplatform/dimensions";
 import {isNativeMobile} from "$cplatform";
 import Icon,{MENU_ICON} from "$ecomponents/Icon";
-import SimpleSelect from "$ecomponents/SimpleSelect";
 import Dropdown from "$ecomponents/Dropdown";
 import React from "$react";
 import Footer from "../Footer/Footer";
@@ -21,13 +20,14 @@ import CommonTableDatagrid from "../Common/TableData";
 import BackToTop from "$ecomponents/BackToTop";
 import FiltersAccordionComponent from "./Filters";
 import RenderType from "../RenderType";
-import { flatMode,HEIGHT} from "$ecomponents/TextField";
-import List,{FlatList,FlashList} from "$ecomponents/List";
+import { flatMode} from "$ecomponents/TextField";
+import {FlashList} from "$ecomponents/List";
 import theme,{Colors} from "$theme";
 import {getRowStyle,styles as rStyles} from "../utils";
 import Avatar from "$ecomponents/Avatar";
 import {defaultObj,isOb,isNonNullString} from "$utils";
 import PropTypes from "prop-types";
+import {isTouchDevice} from "$platform";
 
 const DatagridFactory = (Factory)=>{
     Factory = Factory || CommonDatagrid;
@@ -431,7 +431,7 @@ const DatagridFactory = (Factory)=>{
             } = this.preparedColumns;
             const hasFootersFields = this.hasFootersFields();
             const datagridHeader = <View testID={testID+"_HeaderContainer"} pointerEvents={pointerEvents} style={[styles.datagridHeader]}>
-                <ScrollView testID={testID+"_HeaderScrollView"} horizontal contentContainerStyle={StyleSheet.flatten([styles.contentContainerStyle,styles.minW100])}>
+                <ScrollView testID={testID+"_HeaderScrollView"} horizontal showsHorizontalScrollIndicator = {!isTouchDevice()} contentContainerStyle={StyleSheet.flatten([styles.contentContainerStyle,styles.minW100])}>
                     <View testID={testID+"_HeaderContentCntainer"} style={[styles.table,styles.pullRight]}>
                         {dbSelector}
                         <View testID={testID+"_HeaderQueryLimit"} style={[styles.paginationItem]}>
@@ -568,7 +568,7 @@ const DatagridFactory = (Factory)=>{
                         {!canRenderChart && showFooters ? (
                             <View  testID={testID+"_FooterContainer"} pointerEvents={pointerEvents} style={[theme.styles.justifyContentCenter,theme.styles.pv1]}>
                                 <View  testID={testID+"_FooterContentContainer"} style={[styles.footersContainer]}>
-                                    <ScrollView testID={testID+"_FooterScrollView"} horizontal contentContainerStyle={[styles.contentContainerStyle]}>
+                                    <ScrollView testID={testID+"_FooterScrollView"} horizontal showsHorizontalScrollIndicator = {!isTouchDevice()}  contentContainerStyle={[styles.contentContainerStyle]}>
                                         <View testID={testID+"_FooterContent"} style={[styles.table,theme.styles.p1]}>
                                             {Object.mapToArray(this.getFooterValues(),(footer,field)=>{
                                                 return <Footer

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

@@ -13,7 +13,7 @@ import Image from "$ecomponents/Image";
 import Icon,{COPY_ICON} from "$ecomponents/Icon";
 import filterUtils from "$cfilters";
 import Hashtag from "$ecomponents/Hashtag";
-import {sortBy,isDecimal,extendObj,isObjOrArray,isObj,defaultNumber,defaultStr,isFunction,defaultBool,defaultArray,defaultObj,isNonNullString,defaultDecimal} from "$utils";
+import {sortBy,isDecimal,defaultVal,extendObj,isObjOrArray,isObj,defaultNumber,defaultStr,isFunction,defaultBool,defaultArray,defaultObj,isNonNullString,defaultDecimal} from "$utils";
 import {Datagrid as DatagridContentLoader} from "$ecomponents/ContentLoader";
 import React from "$react";
 import DateLib from "$lib/date";
@@ -1063,7 +1063,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 this.isUpdating = false;
                 this.setSessionData({showFilters});
             })
-       },100);
+        },100);
    }
    showFilters(){
        return this.toggleFilters(true);
@@ -1096,7 +1096,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 this.isUpdating = false;
                 this.setSessionData({showFooters:showOrHide})
             })
-        },200)
+        },0)
     }
     showFooters(){
         return this.toggleFooters(true);
@@ -1143,8 +1143,11 @@ export default class CommonDatagridComponent extends AppComponent {
         if(isObj(footers[field])){
             footers[field].visible = columns[field].visible;
         }
-        this.prepareColumns({columns});
-        this.setState({columns});
+        this.setIsLoading(true,()=>{
+            this.prepareColumns({columns});
+            this.setState({columns});
+            this.setIsLoading(false,false);
+        })
    }
    /****le nombre maximum de courbes supportées */
    getMaxSeriesSize(){
@@ -1236,26 +1239,24 @@ export default class CommonDatagridComponent extends AppComponent {
         } else {
             sectionListColumns[columnName] = {field:columnName};
         }
-        setTimeout(() => {
-            const {sectionListColumns:pSListColumns} = this.prepareColumns({sectionListColumns});
-            this.setIsLoading(true,()=>{
-                this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns:pSListColumns},(state)=>{
-                    this.setState({...state,sectionListColumns:pSListColumns},()=>{
-                        this.setIsLoading(false,false);
-                        this.setSessionData("sectionListColumns",Object.keys(pSListColumns));
-                    });
+        const {sectionListColumns:pSListColumns} = this.prepareColumns({sectionListColumns});
+        this.setIsLoading(true,()=>{
+            this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns:pSListColumns},(state)=>{
+                this.setState({...state,sectionListColumns:pSListColumns},()=>{
+                    this.setIsLoading(false,false);
+                    this.setSessionData("sectionListColumns",Object.keys(pSListColumns));
                 });
-            },true);
-        }, 100);
+            });
+        },true);
    }
    removeAllColumnsInSectionList(){
         const {sectionListColumns} = this.prepareColumns({sectionListColumns:{}});
         this.setIsLoading(true,()=>{
             this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns},(state)=>{
                 this.setState({...state,sectionListColumns,displayOnlySectionListHeaders:false},()=>{
-                    this.setIsLoading(false,false);
                     this.setSessionData("sectionListColumns",null);
                     this.setSessionData("displayOnlySectionListHeaders",false);
+                    this.setIsLoading(false,false);
                 });
             });
         },true);
@@ -1348,16 +1349,14 @@ export default class CommonDatagridComponent extends AppComponent {
    }
    toggleActiveAggregatorFunction(ag){
         if(!isValidAggregator(ag) || ag.code == this.state.aggregatorFunction) return null;
-        setTimeout(()=>{
-            this.setIsLoading(true,()=>{
-                this.prepareData({data:this.INITIAL_STATE.data,aggregatorFunction:ag.code},(state)=>{
-                    this.setState(state,()=>{
-                        this.setSessionData("aggregatorFunction",ag.code);
-                        this.setIsLoading(false,false);
-                    })
+        this.setIsLoading(true,()=>{
+            this.prepareData({data:this.INITIAL_STATE.data,aggregatorFunction:ag.code},(state)=>{
+                this.setState(state,()=>{
+                    this.setSessionData("aggregatorFunction",ag.code);
+                    this.setIsLoading(false,false);
                 })
-            },true);
-        },200);
+            })
+        },true);
    }
    renderAggregatorFunctionsMenu(){
         const m = this.getAggregatorFunctionsMenuItems(false,false);
@@ -1440,12 +1439,17 @@ export default class CommonDatagridComponent extends AppComponent {
                     },
                     dataLabels : {
                         type : 'switch',
-                        label : "Affich les valeurs",
+                        label : "Affich les etiquettes de valeurs",
                         checkedTooltip : "Les étiquettes de valeurs seront affichées sur le graphe",
                         checkedValue : true,
                         uncheckedValue : false,
                         defaultValue : this.isDashboard()? true : false,
                     },
+                    abreviateValues : {
+                        type : "switch",
+                        label : "Abréger les valeurs numériques",
+                        defaultValue : true,
+                    },
                     showXaxis : {
                         type : "switch",
                         text : "Afficher l'axe des X",
@@ -1864,6 +1868,8 @@ export default class CommonDatagridComponent extends AppComponent {
             chartProps[settingKey] = defaultObj(chartProps[settingKey]);
             chartProps[settingKey][key] = config[key];
         });
+        const mappedColumns = {};
+        const abreviateValues = defaultVal(config.abreviateValues,true);
         const dataLabelFormatter = typeof chartProps.dataLabels?.formatter =="function"? chartProps.dataLabels.formatter : undefined;
         const chartOptions = {
             ...chartProps,
@@ -1871,16 +1877,22 @@ export default class CommonDatagridComponent extends AppComponent {
                 formatter : (value, { seriesIndex, dataPointIndex, w })=> {
                     const serie = w.config.series[seriesIndex];
                     const serieName = serie.name;
-                    const column = isDonut ? defaultObj((this.state.columns[yAxisColumn.field],yAxisColumn)): defaultObj(this.chartSeriesNamesColumnsMapping[serieName]);
+                    const column = mappedColumns[seriesIndex] || isDonut ? defaultObj((this.state.columns[yAxisColumn.field],yAxisColumn)): defaultObj(this.chartSeriesNamesColumnsMapping[serieName]);
+                    if((column) && column.field){
+                        mappedColumns[seriesIndex] = column;
+                    }
+                    /*if(value>=660 && value < 661){
+                        console.log(value," will format ",column,seriesIndex,serieName)
+                    }*/
                     const columnField = defaultStr(column.field, isDonut? config.y : undefined);
                     if(dataLabelFormatter){
                         return dataLabelFormatter({value,column,columnDef:column,columnField,serie,serieName,seriesIndex})
                     }
                     if(typeof value !=='number') return value;
                     if(defaultStr(column.format).toLowerCase() ==='money'){
-                        return value.formatMoney();
+                        return abreviateValues ? value.abreviate2FormatMoney() : value.formatMoney();
                     }
-                    return value.formatNumber();
+                    return abreviateValues ? value.abreviate() : value.formatNumber();
                 }
             }),
             title :extendObj(true,{}, {
@@ -1940,13 +1952,10 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         yLabels.formatter = (value)=>{
             if(typeof value !='number') return value;
-            if(yLabelFormat =='money' || (isDonut && yAxisColumn.format =="money")){
-                return value.formatMoney();
-            }
-            if(yLabelsColumn && yLabelsColumn.format =='money'){
-                return value.formatMoney();
+            if((yLabelFormat =='money' || (isDonut && yAxisColumn.format =="money")) || (yLabelsColumn && yLabelsColumn.format =='money')){
+                return abreviateValues ? value.abreviate2FormatMoney() : value.formatMoney();
             }
-            return value.formatNumber();
+            return abreviateValues? value.abreviate() : value.formatNumber();
         }
         chartOptions.chart.id = this.chartIdPrefix+"-"+defaultStr(chartType.key,"no-key");
         if(!chartType.isDonut){
@@ -1991,8 +2000,11 @@ export default class CommonDatagridComponent extends AppComponent {
             const displayOnlySectionListHeaders = !!!this.state.displayOnlySectionListHeaders;
             this.setSessionData("displayOnlySectionListHeaders",displayOnlySectionListHeaders);
             if(!displayOnlySectionListHeaders){
-                return this.prepareData({data:this.INITIAL_STATE.data,displayOnlySectionListHeaders},(state)=>{
-                    this.setState({...state,showFooters})
+                return this.setIsLoading(true,()=>{
+                    this.prepareData({data:this.INITIAL_STATE.data,displayOnlySectionListHeaders},(state)=>{
+                        this.setState({...state,showFooters});
+                        this.setIsLoading(false,false);
+                    })
                 })
             } else {
                 this.setIsLoading(true,()=>{
@@ -2003,11 +2015,11 @@ export default class CommonDatagridComponent extends AppComponent {
                         }
                     });
                     this.setState({data,displayOnlySectionListHeaders,showFooters},()=>{
-                        this.setIsLoading(false),false;
+                        this.setIsLoading(false,false);
                     });
                 },true)
             }
-        },100);
+        },0);
    }
    /*** permet d'effectuer le rendu des colonnes groupable dans le menu item */
    renderSectionListMenu(){
@@ -2892,15 +2904,17 @@ export default class CommonDatagridComponent extends AppComponent {
         if(typeof enablePointerEvents =='boolean'){
             this.enablePointerEventsRef.current = enablePointerEvents;
         }
-        if(this.canSetIsLoading() && typeof loading =='boolean'){
-            return this.progressBarRef.current.setIsLoading(loading,()=>{
-                if(typeof cb =='function'){
-                    cb();
-                }
-            });
-        } else if(typeof cb =='function'){
-            cb();
-        }
+        setTimeout(()=>{
+            if(this.canSetIsLoading() && typeof loading =='boolean'){
+                return this.progressBarRef.current.setIsLoading(loading,()=>{
+                    if(typeof cb =='function'){
+                        cb();
+                    }
+                });
+            } else if(typeof cb =='function'){
+                cb();
+            }
+        },loading === false && enablePointerEvents === false ? 0 : 0);
         return false;
     }
      /**** met à jour l'état de progression de la mise à jour du tableau */

package/src/components/Datagrid/SWRDatagrid.js

@@ -49,14 +49,26 @@ export const setSessionData = (key,value)=>{
 
 
 
-const timeout = 5000*60*60;
-export const swrOptions = {
-    refreshInterval : timeout, //5 minutes
-    shouldRetryOnError : false, //retry when fetcher has an error
-    dedupingInterval : timeout,
-    errorRetryInterval : timeout*2,
-    errorRetryCount : 5,
+export const timeout = 5000*60//*60;
+/***@see : https://swr.vercel.app/docs/api */
+
+export const getSWROptions = ()=>{
+    const delay = defaultNumber(appConfig.get("swrRefreshTimeout"),timeout);
+    return {
+        dedupingInterval : delay,
+        errorRetryInterval : delay*2,
+        errorRetryCount : 5,
+        revalidateOnMount : false,//enable or disable automatic revalidation when component is mounted
+        revalidateOnFocus : true, //automatically revalidate when window gets focused (details)
+        revalidateOnReconnect : true, //automatically revalidate when the browser regains a network
+        refreshInterval : delay, //5 minutes : Disabled by default: refreshInterval = 0, If set to a number, polling interval in milliseconds, If set to a function, the function will receive the latest data and should return the interval in milliseconds
+        refreshWhenHidden : false, //polling when the window is invisible (if refreshInterval is enabled)
+        refreshWhenOffline : false, //polling when the browser is offline (determined by navigator.onLine)
+        shouldRetryOnError : false, //retry when fetcher has an error
+        dedupingInterval : delay,//dedupe requests with the same key in this time span in milliseconds
+    }
 }
+
 const getDefaultPaginationRowsPerPageItems = ()=>{
     return [5,10,15,20,25,30,40,50,60,80,100,500,1000,...(isDesktopMedia() ? [1500,2000,2500,3000,3500,4000,4500,5000,10000]:[])];
 }
@@ -203,7 +215,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         },
         showError  : false,
         swrOptions : {
-            ...swrOptions,
+            ...getSWROptions(),
             ...defaultObj(appConfig.swr),
         },
     });

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

@@ -20,28 +20,36 @@ import appConfig from "$appConfig";
  *  foreignKeyLabel : Le libélé dans la table étrangère
  */
 const TableDataSelectField = React.forwardRef((_props,ref)=>{
-    let {foreignKeyColumn,foreignKeyTable,foreignKeyLabel,dropdownActions,fields,fetchItems:customFetchItem,convertFiltersToSQL,mutateFetchedItems,getForeignKeyTable,onFetchItems,isFilter,isUpdate,isDocEditing,items,onAddProps,fetchDataOpts,...props} = _props;
+    let {foreignKeyColumn,foreignKeyTable,fetchItemsPath,foreignKeyLabel,dropdownActions,fields,fetchItems:customFetchItem,convertFiltersToSQL,mutateFetchedItems,getForeignKeyTable,onFetchItems,isFilter,isUpdate,isDocEditing,items,onAddProps,fetchDataOpts,...props} = _props;
     props = defaultObj(props);
     props.data = defaultObj(props.data);
     foreignKeyColumn = foreignKeyColumn.trim();
     convertFiltersToSQL = defaultVal(convertFiltersToSQL,willConvertFiltersToSQL());
     getForeignKeyTable = getForeignKeyTable || appConfig.getDatabaseTableData;
-    const fKeyTable = typeof getForeignKeyTable =='function' ? getForeignKeyTable(foreignKeyTable,props) : undefined
-    if(!isObj(fKeyTable) || !(defaultStr(fKeyTable.tableName,fKeyTable.table))){
+    let fKeyTable = typeof getForeignKeyTable =='function' ? getForeignKeyTable(foreignKeyTable,props) : undefined;
+    fetchItemsPath = defaultStr(fetchItemsPath).trim();
+    if(!fetchItemsPath && (!isObj(fKeyTable) || !(defaultStr(fKeyTable.tableName,fKeyTable.table)))){
         console.error("type de données invalide pour la fKeyTable ",fKeyTable," composant SelectTableData",_props);
         return null;
     }
+    fKeyTable = defaultObj(fKeyTable);
     foreignKeyTable = defaultStr(fKeyTable.tableName,fKeyTable.table,foreignKeyTable).trim().toUpperCase();
     const isMounted = React.useIsMounted();
-    const showAdd = isFilter ? false : React.useRef(Auth.isTableDataAllowed({foreignKeyTable,action:'create'}) ? defaultVal(props.showAdd,props.showAddBtn,true) : false).current;
+    const showAdd = isFilter || !foreignKeyTable ? false : React.useRef(Auth.isTableDataAllowed({foreignKeyTable,action:'create'}) ? defaultVal(props.showAdd,props.showAddBtn,true) : false).current;
     const [state,setState] = React.useState({
         items : [],isLoading : true,
     });
     fetchDataOpts = Object.clone(defaultObj(fetchDataOpts));
-    const fetchItems = typeof customFetchItem =='function' ? customFetchItem : typeof fKeyTable.queryPath =='string' ?  (opts)=>{
-        return fetch(fKeyTable.queryPath,opts);
-    } : undefined;
-    isUpdate = defaultBool(isUpdate,typeof isDocEditing ==='function' && isDocEditing({data:props.data,fKeyTable,foreignKeyTable}));
+    const queryPath = fetchItemsPath || typeof fKeyTable.queryPath =='string' && fKeyTable.queryPath || typeof fKeyTable.fetchPath =='string' && fKeyTable.fetchPath || '';
+    const cFetch = typeof customFetchItem =='function' && customFetchItem;
+    const fetchItems = (opts)=>{
+        opts.showError = false;
+        if(cFetch) return cFetch(queryPath,opts);
+        if(queryPath){
+            return fetch(queryPath,opts);
+        }
+    };
+    isUpdate = defaultBool(isUpdate,typeof isDocEditing ==='function' && isDocEditing({data:props.data,foreignKeyTable,foreignKeyColumn}));
     if(isFilter){
         isUpdate = false;
     }
@@ -98,13 +106,16 @@ const TableDataSelectField = React.forwardRef((_props,ref)=>{
             let opts = Object.clone(fetchDataOpts);
             opts.selector = prepareFilters(fetchDataOpts.selector,{convertToSQL:convertFiltersToSQL});
             opts = getFetchOptions(opts);
-            const r = fetchItems && fetchItems(opts);
+            const r = fetchItems(opts);
             if(r === false) return;
             if(isPromise(r)){
                 r.then((args)=>{
                     if(Array.isArray(args)){
                         args = {data : args};
                     }
+                    if(!isObj(args)) {
+                        args = {items:[]}
+                    }
                     let items = args.items = args.data = Array.isArray(args.items) ? args.items : Array.isArray(args.data) ? args.data : [];
                     if(dat && isUpdate){
                         if(isFunction(mutateFetchedItems)){
@@ -177,7 +188,6 @@ const TableDataSelectField = React.forwardRef((_props,ref)=>{
         {...props}
         isFilter = {isFilter}
         showAdd = {!isFilter && showAdd}
-        {...React.setProps(Dropdown,fKeyTable,{})}
         {...state}
         dialogProps = {dialogProps}
         ref = {ref}
@@ -220,14 +230,15 @@ TableDataSelectField.propTypes = {
     ...Dropdown.propTypes,
     mutateFetchedItems : PropTypes.func, //la fonction permettant d'effectuer une mutation sur l'ensemble des donnéees récupérées à distance
     fetchItems : PropTypes.func,//la fonction de rappel à utiliser pour faire une requête fetch permettant de selectionner les données à distance
+    getForeignKeyTable : PropTypes.func, //la fonction permettant de récupérer la fKeyTable data dont fait référence le champ
+    foreignKeyTable : PropTypes.string, //le nom de la fKeyTable data à laquelle se reporte le champ
+    fetchItemsPath : PropTypes.string, //le chemin d'api pour récupérer les items des données étrangères en utilisant la fonction fetch
     beforeFetchItems : PropTypes.func, //appelée immédiatement avant l'exécution de la requête fetch
     foreignKeyColumn : PropTypes.string.isRequired,//le nom de la clé étrangère à laquelle fait référence la colone dans la fKeyTable
     foreignKeyLabel : PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.func, //s'il s'agit d'une fonciton qui sera appelée
     ]),
-    getForeignKeyTable : PropTypes.func, //la fonction permettant de récupérer la fKeyTable data dont fait référence le champ
-    foreignKeyTable : PropTypes.string, //le nom de la fKeyTable data à laquelle se reporte le champ
     onFetchItems : PropTypes.func,
     fetchDataOpts : PropTypes.shape({
         fields : PropTypes.oneOfType([

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

@@ -108,6 +108,7 @@ export const getFilterComponentProps = (_props)=>{
         component = componentTypes[type.replaceAll("_","")];
     } else if(isNonNullString(props.foreignKeyColumn) && isNonNullString(props.foreignKeyTable)) {
         component = Fields.SelectTableData;
+        props.multiple = true;
     }else {
         const tt = type.replaceAll("_","").toLowerCase();
         if(React.isComponent(componentTypes[tt])){

package/src/components/ScrollView/index.js

@@ -4,6 +4,7 @@ import { ScrollView,Dimensions,useWindowDimensions } from 'react-native';
 import PropTypes from "prop-types";
 import View from "$ecomponents/View";
 import {isMobileNative,isTouchDevice} from "$cplatform";
+import {isDesktopMedia} from "$cdimensions";
 import {defaultStr,defaultObj} from "$utils";
 const isNative = isMobileNative();
 import APP from "$capp/instance";
@@ -25,7 +26,10 @@ const ScrollViewComponent = React.forwardRef((props,ref) => {
       APP.off(APP.EVENTS.RESIZE_PAGE,onResizePage);
     }
   },[])
+  const showIndicator = !isTouchDevice() || isDesktopMedia();
   return  virtualized ? <FlatList
+    showsHorizontalScrollIndicator = {showIndicator}  
+    showsVerticalScrollIndicator={showIndicator} 
     {...rest}
     ref = {ref}
     testID = {testID}
@@ -36,7 +40,8 @@ const ScrollViewComponent = React.forwardRef((props,ref) => {
     contentContainerStyle = {[!isNative && {flex:1,flexGrow: 1,maxHeight:Math.max(height-100,250)},rest.contentContainerStyle]}
     ListHeaderComponent={() => <View testID={testID+'_FlatListContent'} {...cProps} mediaQueryUpdateNativeProps = {mediaQueryUpdateNativeProps}
     >{children}</View>}
-    /> : <ScrollView ref={ref} {...rest} testID={testID} children={children}/>
+    /> : <ScrollView showsHorizontalScrollIndicator = {showIndicator}  
+      showsVerticalScrollIndicator={showIndicator} ref={ref} {...rest} testID={testID} children={children}/>
 });
 
 ScrollViewComponent.displayName = "ScrollViewComponent";