@fto-consult/expo-ui 1.3.11 → 1.3.13

package/babel.config.alias.js

@@ -34,7 +34,9 @@ module.exports = (opts)=>{
     r["$expo"] = r["$expo-ui"] = expo;
     r["$epreloader"] = path.resolve(expo,"components/Preloader");
     r["$eform"] = path.resolve(expo,"components","Form");
-    r["$eform-data"] = path.resolve(expo,"components","Form","FormData");
+    r["$form"] = r["$form"] || r["$eform"];
+    r["$eform-data"] = r["$eformData"]= path.resolve(expo,"components","Form","FormData");
+    r["$formData"] = r["$formData"] || r["$eformData"];
     r["$eform-manager"] = path.resolve(expo,"components","Form/utils/FormManager");
     r["$echart"] = path.resolve(expo,"components","Chart");
     r["$efile-system"] = path.resolve(expo,"media","file-system");

package/package.json

@@ -1,102 +1,103 @@
-{
-  "name": "@fto-consult/expo-ui",
-  "version": "1.3.11",
-  "description": "Bibliothèque de composants UI Expo,react-native",
-  "main": "index.js",
-  "scripts": {
-    "publish1": "npm publish --access=public",
-    "unpublish": "npm -f unpublish @fto-consult/expo-ui",
-    "build-web": "",
-    "dev": "npx expo start -c --no-minify",
-    "start": "npx expo start --dev --no-minify",
-    "start-d": "npx expo start -c --no-dev --no-minify",
-    "start-p": "npm run start-d",
-    "expo-start-client": "npx expo start --dev --no-minify --dev-client",
-    "start-m": "npx expo start - c--dev--no -minify",
-    "android": "npx expo start --android -c",
-    "ios": "npx expo start --ios",
-    "web": "npx expo start --web",
-    "web-c": "npx expo start --web -c",
-    "eject": "expo eject",
-    "emulator": "npm run android-emulator",
-    "web-server": "npx serve web-build",
-    "build-android": "eas build --clear-cache -p android --profile preview",
-    "build-android-local": "eas build --platform android --local",
-    "build-android-dist": "eas build --clear-cache -p android",
-    "build-ios": "eas build --clear-cache -p ios --profile preview",
-    "build-ios-dist": "eas build --clear-cache -p ios",
-    "install-apk": "adb -s emulator-5554 install myapp.apk",
-    "android-emulator": "emulator -avd EMULATOR",
-    "flipper": "npx cross-env METRO_SERVER_PORT=19000 E:\\Studies\\react-native\\debugger\\Flipper-win\\Flipper.exe",
-    "build-electron": "electron-webpack && electron-builder --dir -c.compression=store",
-    "test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
-    "compile-electron": "webpack --config ./electron/webpack.config.js",
-    "compile-electron-p": "webpack --config ./electron/webpack.config.js --mode=production",
-    "electron": "electron ./electron",
-    "logcat": "adb -d logcat com.ftc.apps.salite1:E > errors.txt",
-    "logcat-export": "adb -d logcat com.ftc.apps.salite1 *:S > logcat.txt",
-    "electron-c": "npm run compile-electron && npm run electron",
-    "electron-p": "npm run compile-electron-p && npm run electron",
-    "update-app-version": "node ./update-app-version.js",
-    "find-licenses": "node ./find-licenses.js",
-    "fix-dependencies": "expo doctor --fix-dependencies"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/borispipo/expo-ui.git"
-  },
-  "keywords": [
-    "Expo",
-    "React-Native"
-  ],
-  "author": "Boris Fouomene",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/borispipo/expo-ui/issues"
-  },
-  "homepage": "https://github.com/borispipo/expo-ui#readme",
-  "dependencies": {
-    "@babel/preset-react": "^7.18.6",
-    "@emotion/native": "^11.10.0",
-    "@expo/html-elements": "^0.2.0",
-    "@expo/metro-config": "^0.4.0",
-    "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.5.10",
-    "@gorhom/portal": "^1.0.14",
-    "@react-native-async-storage/async-storage": "~1.17.3",
-    "@react-native-community/datetimepicker": "6.2.0",
-    "@react-native-community/netinfo": "9.3.0",
-    "@react-navigation/native": "^6.0.13",
-    "@react-navigation/native-stack": "^6.9.1",
-    "@shopify/flash-list": "1.1.0",
-    "babel-plugin-inline-dotenv": "^1.7.0",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "expo": "^46.0.15",
-    "expo-camera": "~12.3.0",
-    "expo-image-picker": "~13.3.1",
-    "expo-linking": "~3.2.2",
-    "expo-sqlite": "~10.3.0",
-    "expo-status-bar": "~1.4.0",
-    "expo-system-ui": "~1.3.0",
-    "expo-web-browser": "~11.0.0",
-    "google-libphonenumber": "^3.2.31",
-    "htmlparser2-without-node-native": "^3.9.2",
-    "parent-package-json": "^2.0.1",
-    "prop-types": "^15.8.1",
-    "react-apexcharts": "^1.4.0",
-    "react-content-loader": "^6.2.0",
-    "react-dom": "18.0.0",
-    "react-native-big-list": "^1.5.5",
-    "react-native-gesture-handler": "~2.5.0",
-    "react-native-paper": "^4.12.5",
-    "react-native-paper-dates": "^0.9.2",
-    "react-native-reanimated": "~2.9.1",
-    "react-native-safe-area-context": "4.3.1",
-    "react-native-svg": "12.3.0",
-    "react-native-web": "~0.18.7",
-    "react-native-webview": "11.23.0",
-    "sharp-cli": "^2.1.0",
-    "tippy.js": "^6.3.7"
-  }
-}
+{
+  "name": "@fto-consult/expo-ui",
+  "version": "1.3.13",
+  "description": "Bibliothèque de composants UI Expo,react-native",
+  "main": "index.js",
+  "scripts": {
+    "publish1": "npm publish --access=public",
+    "unpublish": "npm -f unpublish @fto-consult/expo-ui",
+    "build-web": "",
+    "dev": "npx expo start -c --no-minify",
+    "start": "npx expo start --dev --no-minify",
+    "start-d": "npx expo start -c --no-dev --no-minify",
+    "start-p": "npm run start-d",
+    "expo-start-client": "npx expo start --dev --no-minify --dev-client",
+    "start-m": "npx expo start - c--dev--no -minify",
+    "android": "npx expo start --android -c",
+    "ios": "npx expo start --ios",
+    "web": "npx expo start --web",
+    "web-c": "npx expo start --web -c",
+    "eject": "expo eject",
+    "emulator": "npm run android-emulator",
+    "web-server": "npx serve web-build",
+    "build-android": "eas build --clear-cache -p android --profile preview",
+    "build-android-local": "eas build --platform android --local",
+    "build-android-dist": "eas build --clear-cache -p android",
+    "build-ios": "eas build --clear-cache -p ios --profile preview",
+    "build-ios-dist": "eas build --clear-cache -p ios",
+    "install-apk": "adb -s emulator-5554 install myapp.apk",
+    "android-emulator": "emulator -avd EMULATOR",
+    "flipper": "npx cross-env METRO_SERVER_PORT=19000 E:\\Studies\\react-native\\debugger\\Flipper-win\\Flipper.exe",
+    "build-electron": "electron-webpack && electron-builder --dir -c.compression=store",
+    "test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
+    "compile-electron": "webpack --config ./electron/webpack.config.js",
+    "compile-electron-p": "webpack --config ./electron/webpack.config.js --mode=production",
+    "electron": "electron ./electron",
+    "logcat": "adb -d logcat com.ftc.apps.salite1:E > errors.txt",
+    "logcat-export": "adb -d logcat com.ftc.apps.salite1 *:S > logcat.txt",
+    "electron-c": "npm run compile-electron && npm run electron",
+    "electron-p": "npm run compile-electron-p && npm run electron",
+    "update-app-version": "node ./update-app-version.js",
+    "find-licenses": "node ./find-licenses.js",
+    "fix-dependencies": "expo doctor --fix-dependencies"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/borispipo/expo-ui.git"
+  },
+  "keywords": [
+    "Expo",
+    "React-Native"
+  ],
+  "author": "Boris Fouomene",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/borispipo/expo-ui/issues"
+  },
+  "homepage": "https://github.com/borispipo/expo-ui#readme",
+  "dependencies": {
+    "@babel/preset-react": "^7.18.6",
+    "@emotion/native": "^11.10.0",
+    "@expo/html-elements": "^0.2.0",
+    "@expo/metro-config": "^0.4.0",
+    "@expo/webpack-config": "^0.17.2",
+    "@fto-consult/common": "^1.6.5",
+    "@gorhom/portal": "^1.0.14",
+    "@react-native-async-storage/async-storage": "~1.17.3",
+    "@react-native-community/datetimepicker": "6.2.0",
+    "@react-native-community/netinfo": "9.3.0",
+    "@react-navigation/native": "^6.0.13",
+    "@react-navigation/native-stack": "^6.9.1",
+    "@shopify/flash-list": "1.1.0",
+    "babel-plugin-inline-dotenv": "^1.7.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "expo": "^46.0.15",
+    "expo-camera": "~12.3.0",
+    "expo-clipboard": "~3.1.0",
+    "expo-image-picker": "~13.3.1",
+    "expo-linking": "~3.2.2",
+    "expo-sqlite": "~10.3.0",
+    "expo-status-bar": "~1.4.0",
+    "expo-system-ui": "~1.3.0",
+    "expo-web-browser": "~11.0.0",
+    "google-libphonenumber": "^3.2.31",
+    "htmlparser2-without-node-native": "^3.9.2",
+    "parent-package-json": "^2.0.1",
+    "prop-types": "^15.8.1",
+    "react-apexcharts": "^1.4.0",
+    "react-content-loader": "^6.2.0",
+    "react-dom": "18.0.0",
+    "react-native-big-list": "^1.5.5",
+    "react-native-gesture-handler": "~2.5.0",
+    "react-native-paper": "^4.12.5",
+    "react-native-paper-dates": "^0.9.2",
+    "react-native-reanimated": "~2.9.1",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-svg": "12.3.0",
+    "react-native-web": "~0.18.7",
+    "react-native-webview": "11.23.0",
+    "sharp-cli": "^2.1.0",
+    "tippy.js": "^6.3.7"
+  }
+}

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

@@ -28,7 +28,6 @@ import {getRowStyle,styles as rStyles} from "../utils";
 import Avatar from "$ecomponents/Avatar";
 import {defaultObj,isOb,isNonNullString} from "$utils";
 import PropTypes from "prop-types";
-import ActivityIndicator from "$ecomponents/ActivityIndicator";
 
 const DatagridFactory = (Factory)=>{
     Factory = Factory || CommonDatagrid;
@@ -127,6 +126,9 @@ const DatagridFactory = (Factory)=>{
                 }
                 rowProps = defaultObj(renderedContent.rowProps);
                 avatarProps.color = color;
+                if(typeof avatarContent =='function'){
+                    avatarContent = avatarContent({...avatarProps,suffix:index,testID:testID+"_Avatar"})
+                }
                 if(isNonNullString(avatarContent)){
                     let src = undefined;
                     let avatarSuffix = index;
@@ -212,19 +214,19 @@ const DatagridFactory = (Factory)=>{
             return INFINITE_SCROLL_PAGE_SIZE;
         }
         scrollToEnd(){
-            if(!this._isMounted()) return;
+            if(!this._isMounted() || !this.canScrollTo()) return;
             if(this.listRef.current && this.listRef.current.scrollToEnd){
                 this.listRef.current.scrollToEnd();
             }
         }
         scrollToTop(opts){
-            if(!this._isMounted()) return;
+            if(!this._isMounted() || !this.canScrollTo()) return;
             if(this.listRef.current && this.listRef.current.scrollToTop){
                 this.listRef.current.scrollToTop(defaultObj(opts));
             }
         }
         scrollToIndex(index){
-            if(!this._isMounted()) return;
+            if(!this._isMounted() || !this.canScrollTo()) return;
             index = typeof index =='number'? index : 0;
             if(this.listRef.current && this.listRef.current.scrollToIndex){
                 this.listRef.current.scrollToIndex({index});
@@ -318,6 +320,7 @@ const DatagridFactory = (Factory)=>{
                 testID,
                 renderEmpty,
             } = this.props
+            const hasData = this.state.data.length ? true : false;
             testID = defaultStr(testID,"RN_DatagridAccordion");
             backToTopProps = defaultObj(backToTopProps);
             accordionProps = defaultObj(accordionProps);
@@ -494,12 +497,12 @@ const DatagridFactory = (Factory)=>{
                                         ,text : (showFooter?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
                                     }:null,
                                     ...restItems,
-                                    {
+                                    this.canScrollTo() &&  {
                                         text : 'Retour en haut',
                                         icon : "arrow-up-bold",
                                         onPress : this.scrollToTop.bind(this)
                                     },
-                                    {
+                                    this.canScrollTo() && {
                                         text : 'Aller à la dernière ligne',
                                         icon : "arrow-down-bold",
                                         onPress : this.scrollToEnd.bind(this)
@@ -533,7 +536,6 @@ const DatagridFactory = (Factory)=>{
                     </View>
             </ScrollView>
         </View>  
-        const hasData = this.state.data.length ? true : false;
         renderEmpty = defaultFunc(accordionProps.renderEmpty,renderEmpty,x=>null)
         return <View testID={testID+"_Container"} pointerEvents={pointerEvents} style={[styles.container]} collapsable={false}>
                 { <View testID={testID+"_ContentContainer"} style={[this.bindResizeEvents()?{height:this.renderedListHeight}:undefined]}> 

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

@@ -1,25 +1,22 @@
 import theme from "$theme";
 import APP from "$capp";
-import {isMobileOrTabletMedia,isSmallPhoneMedia} from "$cplatform/dimensions";
+import {isMobileOrTabletMedia} from "$cplatform/dimensions";
 import PropTypes from "prop-types";
 import {Component as AppComponent} from "$react"
 import $session from "$session";
 import Auth from "$cauth";
-import Button from "$ecomponents/Button";
 import Tooltip from "$ecomponents/Tooltip";
 import setQueryLimit from "./setQueryLimit";
 import {notify,showConfirm} from "$ecomponents/Dialog";
 import Label from "$ecomponents/Label";
 import Image from "$ecomponents/Image";
 import Icon,{COPY_ICON} from "$ecomponents/Icon";
-//import TableLink from "$containers/TableLink";
-//import filterUtils from "$ccomponents/Filter/utils";
+import filterUtils from "$ecomponents/Filter/utils";
 import Hashtag from "$ecomponents/Hashtag";
-import {sortBy,extendObj,isObjOrArray,defaultNumber,defaultStr,isFunction,defaultBool,defaultArray,defaultObj,isNonNullString,defaultDecimal} from "$utils";
+import {sortBy,isDecimal,extendObj,isObjOrArray,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";
-//import dataFileManager from "$database/dataFileManager";
 import Filter,{canHandleFilter} from "$ecomponents/Filter";
 import {CHECKED_ICON_NAME} from "$ecomponents/Checkbox";
 import { COLUMN_WIDTH,DATE_COLUMN_WIDTH } from "../utils";
@@ -29,13 +26,13 @@ import Checkbox from "../Checkbox";
 import { TouchableRipple } from "react-native-paper";
 import { evalSingleValue } from "../Footer";
 import i18n from "$i18n";
-import { makePhoneCall,canMakePhoneCall as canMakeCall} from "$capp/MakePhoneCall";
+import { makePhoneCall,canMakePhoneCall as canMakeCall} from "$makePhoneCall";
 import copyToClipboard from "$capp/clipboard";
 import { Pressable } from "react-native";
 
 export const arrayValueSeparator = ", ";
 
-const databaseArgs = {};
+const dataSourceArgs = {};
 export const footerFieldName = "dgrid-fters-fields";
 
 
@@ -500,7 +497,7 @@ export default class CommonDatagridComponent extends AppComponent {
     getActionsArgs(selected){
         const r = isObj(selected)? selected : {};
         const ret = {
-            ...databaseArgs,
+            ...dataSourceArgs,
             selected : defaultBool(selected,false),
             ...r,
             isMobile : isMobileOrTabletMedia(),
@@ -544,7 +541,9 @@ export default class CommonDatagridComponent extends AppComponent {
             return r
         };
         let selectedR = this.props.selectedRowsActions;
-        let sArgs = this.getActionsArgs(true);
+        const sArgs = this.getActionsArgs(true);
+        sArgs.size = sArgs.selectedRowsCount = Object.size(sArgs.selectedRows);
+        sArgs.selectedRowsKeys = Object.keys(sArgs.selectedRows);
         if(isFunction(selectedR)) {
             selectedR = selectedR.call(this,sArgs)
         }
@@ -904,10 +903,11 @@ export default class CommonDatagridComponent extends AppComponent {
             if(!visible){
                 colProps.style.display = 'none';
             }
+            const title = header.text = header.text || header.label || header.title||header.field
             visibleColumnsNames[header.field] = visible ? true : false;
             visibleColumns.push({
                 onPress : ()=>{this.toggleColumnVisibility(header.field);return false},
-                title : header.text||header.title||header.field,
+                title : title,
                 icon : visible?CHECKED_ICON_NAME : null,
             });
             restCol.field = header.field;
@@ -1247,23 +1247,28 @@ export default class CommonDatagridComponent extends AppComponent {
         this.refresh(true);
     }
     setQueryLimit(){
-        this.currentDatagridQueryLimit = this.getSessionData("databaseQueryLimit");
+        if(!this.canHandleQueryLimit()) return;
+        this.currentDatagridQueryLimit = this.getSessionData("dataSourceQueryLimit");
         setQueryLimit(this.currentDatagridQueryLimit,(limit)=>{
-            this.setSessionData("databaseQueryLimit",limit)
+            this.setSessionData("dataSourceQueryLimit",limit)
             notify.success("Le nombre maximal d'élément a été définit à la valeur "+(limit==0?" infinit ":limit.formatNumber())+". Cette valeur sera prise en compte à la prochaine réactualisation du tableau")
         });
     }
     
     canSetQueryLimit(){
-        return isDecimal(this.props.queryLimit) && (this.props.queryLimit >=0) ? false : true;
+        return this.canHandleQueryLimit() && isDecimal(this.props.queryLimit) && (this.props.queryLimit >=0) ? false : true;
     }
     getQueryLimit(){
         if(isDecimal(this.props.queryLimit) && (this.props.queryLimit >=0)) return this.props.queryLimit 
-        let sLimit = this.getSessionData("databaseQueryLimit");
+        let sLimit = this.getSessionData("dataSourceQueryLimit");
         if(isDecimal(sLimit) && sLimit >= 0) return sLimit;
         return 0;
     }
+    canHandleQueryLimit(){
+        return true;
+    }
     renderQueryLimit(content){
+        if(!this.canHandleQueryLimit()) return null;
         let cLImit = this.getQueryLimit();
         if(cLImit == 0) cLImit = " infinit"
         let s = "";
@@ -1444,6 +1449,9 @@ export default class CommonDatagridComponent extends AppComponent {
             </>
         </TouchableRipple>
     }
+    canScrollTo(){
+        return this.state.data.length? true :false;
+    }
     renderSelectableCheckboxCell(props){
         const {containerProps} = props;
         if(isObj(containerProps)){
@@ -1502,24 +1510,15 @@ export default class CommonDatagridComponent extends AppComponent {
         
         renderArgs.extra = extra;
         renderArgs.item = rowData;
+        const defaultValue = renderArgs.defaultValue = renderArgs.value = rowData[columnField];
         let key = this.getRowKey(rowData,rowIndex)+"-"+columnField,isTagRender = defaultStr(columnDef.table).toLowerCase().contains("tags");
         if(isObj(columnDef.datagrid) && isFunction(columnDef.datagrid.render)){
             _render = columnDef.datagrid.render.call(this,renderArgs);
         } else if(isFunction(columnDef.multiplicater)){
             _render = defaultDecimal(columnDef.multiplicater({...renderArgs,value:rowData[columnField]}),rowData[columnField]);
         } else {
-             _render = rowData[columnField];
+             _render = defaultValue;
              let _type = defaultStr(columnDef.type).trim().toLowerCase();
-             if(false && _type == 'datafile' && !isFunction(columnDef.render)){
-                 columnDef.render = ({rowData,columnField})=>{
-                     let v = rowData[columnField];
-                     let dF = dataFileManager.get(v);
-                     if(dF){
-                         return dF.code.toUpperCase();
-                     }
-                     return isNonNullString(v)? v.toUpperCase() : isArray(v)? v.join(arrayValueSeparator): v;
-                 }
-             }
              if(defaultStr(columnDef.format).toLowerCase() === 'hashtag'){
                 _render = <Hashtag>{_render}</Hashtag>
              } else if(typeof columnDef.render === "function"){
@@ -1539,32 +1538,6 @@ export default class CommonDatagridComponent extends AppComponent {
                  if(val === checkedValue){
                      _render = checkedLabel;
                  } else _render = uncheckedLabel;
-             } else if(false && arrayValueExists(['piece','selecttabledata','id'],_type)){
-                let _id = rowData[columnField];
-                if(isNonNullString(_id)){
-                    let tableName = defaultStr(columnDef.tableName,columnDef.table).toUpperCase();
-                    let dbName = defaultStr(columnDef.dbName);
-                    if(!dataFileManager.isCommon(dbName) && (columnField == 'code' || _type =='piece')){
-                        dbName = defaultStr(rowData.dbId,dbName);
-                        tableName = defaultStr(rowData.table,tableName)
-                    }
-                    dbName = dataFileManager.sanitizeName(dbName,tableName);
-                    let pref = "";
-                    if(_type !=='piece'){
-                        pref = (tableName+"/").rtrim("/")+"/";
-                        _id = pref+_id.ltrim(pref);
-                    } 
-                    if(rowData[columnField+"FoundInDB"] === false){
-                        let fTitle = "Cet élément n'existe pas en base car n'a pas été trouvé dans un fichier";
-                        _render = <Button icon={"database-remove"} title={fTitle}>
-                            {rowData[columnField]}
-                        </Button> 
-                    } else {
-                        /*_render = <TableLink dbName={dbName} tableName = {tableName} _id = {
-                            _id
-                        }>{rowData[columnField]}</TableLink>*/
-                    }              
-                }
              } else if((_type.contains('select'))){
                  let v1 = rowData[columnField];
                  _render = v1;
@@ -1679,19 +1652,6 @@ export default class CommonDatagridComponent extends AppComponent {
 
 export const ProgressBar = CommonDatagridComponent.LinesProgressBar;
 
-///cette fonction permet de retourner le nom de la base de données à utiliser pour la récupération des données
-export const getDBName = CommonDatagridComponent.getDBName = (arg)=>{
-    if(isNonNullString(arg)){
-        arg = {dbName:arg};
-    }
-    arg = defaultObj(arg);
-    let {dbName} = arg;
-    if(typeof (dbName) =='function'){
-        dbName = dbName(arg)
-    }
-    return defaultStr(dbName);
-}
-
 CommonDatagridComponent.getDefaultPreloader = (props)=>{
     return <Preloader {...defaultObj(props)}/>
 }
@@ -1864,3 +1824,16 @@ const styles = StyleSheet.create({
         //width : 27,
     },
 })
+
+/**** cette fonction permet de retourner le nom de la source de données à utiliser pour l'exécution de la requête */
+export const getDataSource = CommonDatagridComponent.getDataSource = (arg)=>{
+    if(isNonNullString(arg)){
+        arg = {dataSource:arg};
+    }
+    arg = defaultObj(arg);
+    let {dataSource} = arg;
+    if(typeof (dataSource) =='function'){
+        dataSource = dataSource(arg)
+    }
+    return defaultStr(dataSource);
+}

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

@@ -1,34 +1,24 @@
 import CommonDatagrid from "./Common";
-import {defaultObj,defaultStr,isNonNullString,isFunction,isPromise} from "$utils";
-//import {mountDatabaseTable,unmountDatabaseTable,unlockTable,isTableLocked} from "$database/utils";
+import {defaultObj,extendObj,defaultStr,isNonNullString,isFunction,isPromise} from "$utils";
 import actions from "$actions";
 import PropTypes from "prop-types";
-import APP from "$capp";
-//import {getDataFunc} from "$database/getData";
 
 export default class CommonTableDatagrid extends CommonDatagrid{
     constructor(props){
         super(props);
         let {
-            data,
             tableName,
             table,
-            dbName,
-            server,
+            dataSource,
         } = props;
-        dbName = CommonDatagrid.getDBName({...props,server,dbName,context:this});
+        dataSource = CommonDatagrid.getDataSource({...props,dataSource,context:this});
         tableName = defaultStr(tableName,table).toUpperCase();
         if(tableName){
             Object.defineProperties(this,{
                 tableName : {value:tableName,override:false,writable:false}
             })
         }
-        if(isNonNullString(tableName)){
-            data = defaultVal(data,dbName+'['+tableName+']');
-            unlockTable(tableName);
-            mountDatabaseTable(tableName,dbName);
-        }
-        this.INITIAL_STATE.fetchData = defaultVal(this.props.fetchData,data);
+        this.INITIAL_STATE.fetchData = defaultVal(this.props.fetchData);
         let isPv = this.isPivotDatagrid();
         if(isPv){
             isPv = this.props.dbSelector !== false;
@@ -38,9 +28,9 @@ export default class CommonTableDatagrid extends CommonDatagrid{
             ['table','tableName'].map((tb,idx)=>{
                 dbSelectorProps[tb] = defaultStr(this.props[tb],dbSelectorProps[tb]);
             });
-            this.setSessionData({selectedDatabases:this.currentDatabases});
+            this.setSessionData({selectedDataSources:this.currentDataSources});
         } else {
-            this.currentDatabases = Object.toArray(this.currentDatabases);
+            this.currentDataSources = Object.toArray(this.currentDataSources);
         }
         this.state.isLoading = true;
     }
@@ -48,9 +38,6 @@ export default class CommonTableDatagrid extends CommonDatagrid{
     /*** lorsque la données est modifiée */
     onUpsertData =(arg) =>{
         if(!this._isMounted()) return;
-        if(isTableLocked(this.tableName)) {
-            return;
-        }
         this.isDataJustComeToUpsert = true; ///on empêche d'afficher le progress bar
         this.fetchData(true).finally(()=>{
             this.isDataJustComeToUpsert = undefined;
@@ -59,38 +46,29 @@ export default class CommonTableDatagrid extends CommonDatagrid{
 
     componentDidMount(){
         super.componentDidMount();
-        APP.extend(this._events,{
+        extendObj(this._events,{
             onUpsertData : this.onUpsertData.bind(this),
         });
-        if(isNonNullString(this.tableName)){
-            APP.on(actions.upsert(this.tableName),this._events.onUpsertData)
-            APP.on(actions.onRemove(this.tableName),this._events.onUpsertData)
-        }
         this.fetchData(true);
     }
 
     componentWillUnmount(){
         super.componentWillUnmount();
-        if(isNonNullString(this.tableName)){
-            unmountDatabaseTable(this.tableName);
-            APP.off(actions.upsert(this.tableName),this._events.onUpsertData);
-            APP.off(actions.onRemove(this.tableName),this._events.onUpsertData);
-        }
         this.clearEvents();
         this.setSelectedRows();
     }
 
-    onChangeDatabases(args){
-        let {databases,server} = args;
-        this.currentDatabases = databases;
-        if(JSON.stringify({databases:this.previousDatabases}) != JSON.stringify({databases})){
+    onChangeDataSources(args){
+        let {dataSources,server} = args;
+        this.currentDataSources = dataSources;
+        if(JSON.stringify({dataSources:this.previousDataSources}) != JSON.stringify({dataSources})){
             if(isObj(this.props.dbSelectorProps) && isFunction(this.props.dbSelectorProps.onChange)){
                 args.datagridContext = this;
                 this.props.dbSelectorProps.onChange(args);
             }
             this.refresh(true);
         } 
-        this.previousDatabases = databases;
+        this.previousDataSources = dataSources;
         this.previousServer = server;
     }
     refresh (force,cb){
@@ -112,7 +90,7 @@ export default class CommonTableDatagrid extends CommonDatagrid{
     }
     /**** retourne la liste des items, utile lorsqu'une s'agit d'une fonction 
         Lorsque data est une chaine de caractère, alors elle doit être sous la forme recommandée par la function 
-        getDataFunc de l'object database
+        getDataFunc de l'object dataSource
         la props data, peut être une chaine de caractère contenant le nom de la base et de la bd de travail de l'application
         example common[articles], dans ce cas, la fonction fetchData, aura pour rôle de chercher toutes les données qui match
         la table dans la base common.
@@ -160,9 +138,9 @@ export default class CommonTableDatagrid extends CommonDatagrid{
                 fetchOptions = defaultObj(fetchOptions);
                 fetchOptions.selector = defaultObj(fetchOptions.selector);
                 fetchOptions.selector.$and = defaultArray(fetchOptions.selector.$and);
-                fetchOptions.databases = this.currentDatabases;
-                fetchOptions = APP.extend(true,true,{},{selector : this.getFilters()},fetchOptions,this.filtersSelectors);
-                fetchOptions.databases = this.currentDatabases;
+                fetchOptions.dataSources = this.currentDataSources;
+                fetchOptions = extendObj(true,true,{},{selector : this.getFilters()},fetchOptions,this.filtersSelectors);
+                fetchOptions.dataSources = this.currentDataSources;
                 let limit = this.getQueryLimit();
                 if(limit > 0 && !this.isPivotDatagrid()){
                     fetchOptions.limit = limit;
@@ -172,13 +150,9 @@ export default class CommonTableDatagrid extends CommonDatagrid{
                     }
                 }
                 if(isFunction(this.props.fetchData)){
-                    //fetchOptions.limit = defaultNumber(fetchOptions.limit,100);
                     /**** l'on peut définir la props fetchData, qui est la fonction appelée pour la recherche des données */
                     fetchData = this.props.fetchData.call(this,fetchOptions);
                 }
-                if(isNonNullString(fetchData)) {
-                    //fetchData = getDataFunc(fetchData,fetchOptions);
-                } 
                 fetchData = isFunction(fetchData)? fetchData.call(this,fetchOptions) : fetchData;
                 this.updateProgress({isLoading:true},()=>{
                     if(isPromise(fetchData)){

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

@@ -103,21 +103,25 @@ const DatagridFactory = (Factory)=>{
             return super.updateLayout(e);
         }
         scrollToEnd(){
+            if(!this.canScrollTo()) return;
             if(this.listRef.current && this.listRef.current.scrollToEnd){
                 return this.listRef.current.scrollToEnd();
             }
         }
         scrollToLeft(){
+            if(!this.canScrollTo()) return;
             if(this.listRef.current && this.listRef.current.scrollToLeft){
                 return this.listRef.current.scrollToLeft();
             }
         }
         scrollToTop(opts){
+            if(!this.canScrollTo()) return;
             if(this.listRef.current && this.listRef.current.scrollToTop){
                 return this.listRef.current.scrollToTop(opts);
             }
         }
         scrollToIndex(index){
+            if(!this.canScrollTo()) return;
             index = typeof index =='number'? index : 0;
             if(this.listRef.current && this.listRef.current.scrollToIndex){
                 this.listRef.current.scrollToIndex({index});
@@ -296,17 +300,17 @@ const DatagridFactory = (Factory)=>{
                                 testID={testID+"_HeaderMenus"}
                                 anchor={(props)=>(<Icon {...props} icon={'axis-z-arrow'}/>)} 
                                 items = {[
-                                    {
+                                    this.canScrollTo() && {
                                         text : 'Retour en haut',
                                         icon : "arrow-up-bold",
                                         onPress : this.scrollToTop.bind(this)
                                     },
-                                    {
+                                    this.canScrollTo() &&{
                                         text : 'Retour A gauche',
                                         icon : "arrow-up-bold",
                                         onPress : this.scrollToLeft.bind(this)
                                     },
-                                    {
+                                    this.canScrollTo() &&{
                                         text : 'Aller à la dernière ligne',
                                         icon : "arrow-down-bold",
                                         onPress : this.scrollToEnd.bind(this)

package/src/components/Datagrid/index.js

@@ -11,7 +11,7 @@ export * from "./Common";
 const DatagridMainComponent = React.forwardRef((props,ref)=>{
     const isDesk = isDesktopMedia();
     const isMob = isMobileMedia();
-    const [isTableData] = React.useStateIfMounted(defaultStr(props.tableName,props.table) || typeof props.fetchData ==='function' || props.isTableData?true : false);
+    const [isTableData] = React.useState(defaultStr(props.tableName,props.table) || typeof props.fetchData ==='function' || props.isTableData?true : false);
     const TableComponent = isTableData ? DatagridTableData : Table;
     const AccordionComponent = isTableData ? TableDataAccordion : Accordion;
     let Component = TableComponent;

package/src/components/Date/{PickerInput → DatePickerInput}/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from '$react'
 
 import {useInputFormat,compareTwoDates,locale as defaultLocale,toDateObj} from "../utils";
 import TextInputWithMask from './TextInputMask'
@@ -34,6 +34,7 @@ const DatePickerInput = React.forwardRef(({
     withModal = true,
     withDateFormatInLabel = true,
     right:customRight,
+    left : customLeft,
     helperText,
     format,
     disabled,readOnly,editable
@@ -42,6 +43,7 @@ const DatePickerInput = React.forwardRef(({
     style,
     anchorProps,
     render_filter,
+    calendarIconBefore = false, //si l'icone calendar sera en position left où non
     ...rest
   },ref)=>{
   inputMode = defaultStr(inputMode,"start");
@@ -104,10 +106,14 @@ const DatePickerInput = React.forwardRef(({
   anchorProps = defaultObj(anchorProps);
   label = defaultStr(label,text);
   customRight = React.isValidElement(customRight) || typeof customRight =='function'? customRight : null;
-  let right = null;
+  let right = customRight,left = customLeft, isIconLeft = calendarIconBefore;
   if(withModal){
-      right = (props)=>{
+      const customLOrR = isIconLeft ? customLeft : customRight;
+      const leftOrRight = (props)=>{
+        let c = typeof customLOrR =='function'? customLOrR(props): customLOrR;
+        c = React.isValidElement(c)? c : null;
         return <>
+            {isIconLeft ? c : null}
             <Icon
             {...anchorProps}
             {...props}
@@ -119,10 +125,15 @@ const DatePickerInput = React.forwardRef(({
             hasTVPreferredFocus={undefined}
             tvParallaxProperties={undefined}
           />
-          {typeof customRight =='function'? customRight(props): customRight}
+          {!isIconLeft ? c : null}
         </>
       }
-  } else right = customRight;
+      if(isIconLeft){
+         left = leftOrRight;
+      } else {
+        right = leftOrRight;
+      }
+  }
   const onConfirm = (date,updateVisibility) => {
     const vDate = validateDate(date);
     const inputDate = !vDate.error ? date : state.inputDate;
@@ -149,6 +160,7 @@ const DatePickerInput = React.forwardRef(({
           style = {[styles.input,style]}
           editable = {editable}
           disabled = {disabled}
+          left = {left}
           right = {right}
           pointerEvents = {isEditable?"auto":"none"}
           ref={ref}
@@ -250,4 +262,5 @@ const styles = StyleSheet.create({
 DatePickerInput.propTypes = {
   onChange : PropTypes.func,
   anchorProps : PropTypes.object,///les props à appliquer à l'icone date permettant de sélectionner la date 
+  calendarIconBefore : PropTypes.bool,///la position de l'icone calendrier pour la sélection de la date
 }

package/src/components/Date/DatePickerModal/index.native.js

@@ -2,11 +2,12 @@ import  "../utils";
 import DateTimePicker from '@react-native-community/datetimepicker';
 import DateLib from "$lib/date";
 export default function DateTimePickerComponent(props){
-    const {visible,date,onDateChange,startDate,endDate,onCancel} = props;
+    const {visible,date,onDateChange,startDate,endDate,onCancel,...rest} = props;
     const value = DateLib.isDateObj(date)?date:new Date();
     return visible? <DateTimePicker
-        value = {value}
         mode = {"date"}
+        {...rest}
+        value = {value}
         minimumDate = {startDate}
         maximumDate = {endDate}
         onChange = {(e,selectedDate)=>{

package/src/components/Date/DateTime.js

@@ -2,5 +2,34 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import Date from "./Date";
-import Time from "./Time";
+import Date from "./DatePickerInput";
+import Time from "./Time";
+import React from "$react";
+import PropTypes from "prop-types";
+import {defaultObj} from "$utils";
+
+export default function DateTimePickerComponent({left,right,dateProps,timeProps,defaultValue,...porps}){
+    dateProps = defaultObj(dateProps);
+    timeProps = defaultObj(timeProps);
+    return <Date
+        defaultValue = {defaultValue}
+        {...dateProps}
+        calendarIconBefore = {true}
+        left = {left}
+        right = {(p)=>{
+            const r = typeof right =='function'? right(p): React.isValidElement(right)? right : null;
+            return <>
+                <Time 
+                    defaultValue = {defaultValue}
+                    {...timeProps}
+                />
+                {r}
+            </>
+        }}
+    />
+}
+
+DateTimePickerComponent.propTypes = {
+    dateProps : PropTypes.object,
+    timeProps : PropTypes.object,
+}

package/src/components/Date/TimePickerModal/index.native.js

@@ -2,12 +2,13 @@ import  "../utils";
 import DateLib from "$lib/date";
 import DateTimePicker from '@react-native-community/datetimepicker';
 export default function TimePickerComponent(props){
-    const {visible,date,onTimeChange,onCancel} = props;
+    const {visible,date,onTimeChange,onCancel,...rest} = props;
     const value = DateLib.isDateObj(date)?date:new Date();
     return visible? <DateTimePicker
-        value = {value}
         mode = {"time"}
         is24Hour={true}
+        {...rest}
+        value = {value}
         onChange = {(e,selectedDate)=>{
             if(!selectedDate){
                 if(typeof onCancel ==='function'){

package/src/components/Date/index.js

@@ -1,4 +1,4 @@
-import PickerInput from "./PickerInput";
+import PickerInput from "./DatePickerInput";
 
 export * from "./utils";
 
@@ -9,3 +9,5 @@ export default DateComponent;
 
 
 export {default as Time} from "./Time";
+
+export {default as DateTime} from "./DateTime";

package/src/components/Dialog/Dialog.js

@@ -52,6 +52,7 @@ const DialogComponent = React.forwardRef((props,ref)=>{
         onAlertRequestClose,
         isFormData,
         isPreloader,
+        borderRadius,
      ...modalProps
     } = props;
      withScrollView = typeof withScrollView =='boolean'? withScrollView : false;
@@ -161,9 +162,13 @@ const DialogComponent = React.forwardRef((props,ref)=>{
     const testID = defaultStr(modalProps.testID,"RN_DialogComponent");
     const maxHeight = getMaxHeight(),maxWidth = getMaxWidth();
     const backgroundColor = theme.surfaceBackgroundColor;
+    borderRadius = fullScreen || !isMobileNative() || isPreloader ? 0 : typeof borderRadius =='number'? borderRadius : 7*theme.roundness;
     const fullScreenStyle = fullScreen ? {width:dimensions.width,height:dimensions.height,marginHorizontal:0,paddingHorizontal:0}: {
         maxWidth,
         maxHeight,
+        borderRadius,
+        paddingTop : borderRadius,
+        paddingBottom : borderRadius,
     };
     const alertContentStyle = isAlert ? {paddingHorizontal:15} : null;
     content = <Surface ref={contentRef} testID = {testID+"_Content11"} {...contentProps} style={[fullScreen? {flex:1}:{maxWidth,maxHeight:maxHeight-Math.min(SCREEN_INDENT*2+50,100)},isPreloader && {paddingHorizontal:10},{backgroundColor},alertContentStyle,contentProps.style]}>

package/src/components/Drawer/DrawerItems/ExpandableItem.js

@@ -1,14 +1,15 @@
 import {Pressable} from "react-native";
 import View from "$ecomponents/View";
 import Icon from "$ecomponents/Icon";
-import {defaultObj,isBool,defaultBool} from "$utils";
+import {defaultObj,isBool,defaultBool,defaultStr} from "$utils";
 import PropTypes from "prop-types"
 import React from "$react";
 import DrawerItem from "./DrawerItem";
 import theme from "$theme";
 
 export default function ExpandableItem(props){
-    let {children,expanded,expandedIcon,minimized,onPress,expandIconProps,unexpandedIcon,onToggleExpand,wrapperProps,...rest} = props;
+    let {children,expanded,expandedIcon,testID,minimized,onPress,expandIconProps,unexpandedIcon,onToggleExpand,wrapperProps,...rest} = props;
+    testID = defaultStr(testID,"RN_ExpandableDrawerItemComponent")
     wrapperProps = defaultObj(wrapperProps);
     const [expandedControled,setExpended] = React.useStateIfMounted(defaultBool(expanded,false))
     let _expanded = expanded;
@@ -24,10 +25,10 @@ export default function ExpandableItem(props){
     }
     expandIconProps = defaultObj(expandIconProps);
     const icon = _expanded ? defaultVal(expandedIcon,"chevron-up") : defaultVal(unexpandedIcon,"chevron-down")
-    rest.right = (props)=> <Icon {...props} style={{margin:0}} size={minimized?15:24} icon={icon} onPress={_onToggleExpand}/>
-    return <View {...wrapperProps}>
-        <DrawerItem  color={_expanded?theme.colors.primary:undefined} {...rest} minimized={minimized} isExpandable onPress={_onToggleExpand}/>
-        {_expanded && <Pressable style={{marginLeft:10}}>
+    rest.right = (props)=> <Icon testID={testID+"_Right"} {...props} style={{margin:0}} size={minimized?15:24} icon={icon} onPress={_onToggleExpand}/>
+    return <View {...wrapperProps} testID={testID+"_Wrapper"}>
+        <DrawerItem testID={testID} color={_expanded?theme.colors.primary:undefined} {...rest} minimized={minimized} isExpandable onPress={_onToggleExpand}/>
+        {_expanded && <Pressable testID={testID+"_ExpandedContent"} style={{marginLeft:10}}>
             <React.Fragment>{children}</React.Fragment>
         </Pressable>}
     </View>

package/src/components/Expandable/index.js

@@ -1,7 +1,7 @@
 import {Colors} from "$theme";
 import React from 'react';
 import View from "$ecomponents/View";
-import {StyleSheet,TouchableWithoutFeedback} from 'react-native';
+import {StyleSheet,TouchableWithoutFeedback,ScrollView} from 'react-native';
 import {withTheme,TouchableRipple} from "react-native-paper"
 import Label from "$ecomponents/Label";
 import Icon from "$ecomponents/Icon"
@@ -42,6 +42,8 @@ const ExpandableComponent = React.forwardRef(({
   containerProps,
   autoMountChildren = false,
   expandIconPosition,
+  withScrollView = false,
+  scrollViewProps,
   ...props
 },ref) => {
   props = defaultObj(props);
@@ -88,6 +90,12 @@ const ExpandableComponent = React.forwardRef(({
     right = null;
   }
   testID = defaultStr(testID,"RN_ExpandableComponent");
+  if(withScrollView){
+    scrollViewProps = Object.assign({},scrollViewProps);
+    children = <ScrollView vertical style={[{flex:1}]} {...scrollViewProps} testID={testID+"_ScrollView"}>
+        {children}
+    </ScrollView>
+  }
   const expandIcon = showExpandIcon !== false ? <Icon
     color={titleColor}
     size={24}  
@@ -151,7 +159,8 @@ const ExpandableComponent = React.forwardRef(({
             </View>
           </TouchableWithoutFeedback>
         {(autoMountChildren !== false || isExpanded) ? <View testID={testID+'_Content'} {...contentProps} 
-          style={[styles.children,contentProps.style,!isExpanded && {opacity:0,height:0}]}>
+          style={[{maxWidth:'100%'},styles.children,contentProps.style,!isExpanded && {opacity:0,height:0}]}
+        >
             {children}
         </View> : null}
       </Surface>
@@ -217,6 +226,7 @@ ExpandableComponent.propTypes = {
     expandIconPosition : PropTypes.oneOf([
       'left','right'
     ]),
+    withScrollView : PropTypes.bool,///si le contenu sera rendu avec le scrollView
     autoMountChildren : PropTypes.bool,///si les enfants du composant seront montés mais masqués et lorsqu'on cliquera sur toggle ceux-ci seront affichés
     leftProps : PropTypes.object, ///les props à paser à la vue qui rend le contenu gouche
     rightProps : PropTypes.object, ///les props à passer à la vue qui rend le contenu droit

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

@@ -567,8 +567,11 @@ export default class Field extends AppComponent {
         let form = this.getForm();
         if(!this.canValidate) return; 
         let {keyboardEvents,onKeyEvent} = this.props;
-        let formInstance = this.getForm();
-        let arg = {key,event,context:this,isFormField:true,formInstance};
+        const formInstance = this.getForm();
+        const arg = {key,event,formInstance,field:this.name,formName:this.getFormName(),value:this.getValidRule(),validValue:this.getValidValue(),context:this,isFormField:true,data:{},formInstance};
+        if(formInstance ){
+            arg.data = formInstance.getData();
+        }
         let handler = undefined;
         if(isObj(keyboardEvents)){
             handler = keyboardEvents[key];
@@ -584,16 +587,19 @@ export default class Field extends AppComponent {
         }
         handler = undefined;
         if(formInstance && isObj(formInstance.props)){
-            let pIP = formInstance.props;
-            if(isObj(pIP.keyboardEvents)){
-                handler = pIP.keyboardEvents[key];
+            const formInstanceProps = formInstance.props;
+            if(key =='enter' && isFunction(formInstanceProps.onEnterKeyPress) && formInstance.isValid()){
+                if(formInstanceProps.onEnterKeyPress.call(this,arg) === false) return;
+            }
+            if(isObj(formInstanceProps.keyboardEvents)){
+                handler = formInstanceProps.keyboardEvents[key];
                 if(isFunction(handler)) handler.call(this,arg);
             }
             if(!isFunction(handler)){    
-                if(isFunction(pIP.keyboardEvents)){
-                    handler = pIP.keyboardEvents;
-                } if(isFunction(pIP.onKeyEvent)){
-                    handler = pIP.onKeyEvent;
+                if(isFunction(formInstanceProps.keyboardEvents)){
+                    handler = formInstanceProps.keyboardEvents;
+                } if(isFunction(formInstanceProps.onKeyEvent)){
+                    handler = formInstanceProps.onKeyEvent;
                 }
                 if(isFunction(handler)) handler.call(this,arg);
             }

package/src/components/Form/Form.js

@@ -101,6 +101,7 @@ export default class FormComponent extends React.AppComponent {
             onNoValidateField,
             onKeyEvent,
             keyboardEvents,
+            onEnterKeyPress,
             testID,
             ...rest
         } = this.props;
@@ -210,6 +211,7 @@ FormComponent.propTypes = {
         PropTypes.object,
         PropTypes.func,
     ]),
+    onEnterKeyPress : PropTypes.func, ///Lorsque l'on table la touche entrée du clavier
     onKeyEvent : PropTypes.func/*** l'évènement global appelé lorsqu'on clique sur une champ de la form */,
 }
 

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

@@ -55,7 +55,7 @@ export default class FormDataActionComponent extends FormData {
         }
         appBarProps.isEditing = isEditing;
         if(appBarProps.subtitle !== false && this.props.subtitle !== false && mainProps.subtitle !== false){
-            appBarProps.subtitle = subtitle = defaultVal(appBarProps.subtitle,subtitle);
+            appBarProps.subtitle = subtitle = defaultVal(appBarProps.subtitle,this.props.subtitle,subtitle);
         }
         return appBarProps;
     }

package/src/components/List/Common.js

@@ -159,7 +159,7 @@ const CommonListComponent = React.forwardRef((props,ref)=>{
     const restP = numColumns > 1 && isFlatList ? {
         columnWrapperStyle : [styles.columnWrapperStyle,props.columnWrapperStyle]
     } : {};
-    return <View {...containerProps} style={[{backgroundColor:theme.colors.surface},styles.container,containerProps.style]}>
+    return <View {...containerProps} style={[styles.container,containerProps.style]}>
         <Component
             onEndReachedThreshold={0}
             scrollEventThrottle={16}

package/src/components/Menu/Menu.js

@@ -20,6 +20,7 @@ import {defaultDecimal,extendObj} from "$utils";
 import theme,{StylePropTypes} from "$theme";
 import APP from "$app/instance";
 import MenuItem from "./Item";
+import {isWeb} from "$platform";
 
 const RESIZE_PAGE = APP.EVENTS.RESIZE_PAGE;
 
@@ -277,7 +278,6 @@ class _Menu extends AppComponent {
     } = this.props;
     const testID = defaultStr(this.props.testID,"RN_MainMenuComponent");
     const {
-      rendered1,
       menuLayout,
       anchorLayout,
       opacityAnimation,
@@ -389,12 +389,10 @@ class _Menu extends AppComponent {
 
     // Scrollable menu max height
     if(handleScroll){
-      scrollableMenuHeight =
-      scrollableMenuHeight > windowLayout.height - 2 * SCREEN_INDENT
+      scrollableMenuHeight = scrollableMenuHeight > windowLayout.height - 2 * SCREEN_INDENT
         ? windowLayout.height - 2 * SCREEN_INDENT
         : scrollableMenuHeight;
     }
-
     // _Menu is typically positioned below the element that generates it
     // So first check if it fits below the anchor (expands downwards)
     if (
@@ -475,7 +473,8 @@ class _Menu extends AppComponent {
     if(positionStyle.top < SCREEN_INDENT){
       positionStyle.top = SCREEN_INDENT;
     }
-    
+    const maxMenuHeight = windowLayout.height - top - SCREEN_INDENT;
+    const contentContainerStyle = maxMenuHeight > SCREEN_INDENT ? {maxHeight:maxMenuHeight} : undefined;
     return (
       <View
         testID = {testID}
@@ -521,8 +520,7 @@ class _Menu extends AppComponent {
                     ]
                   }
                 >
-                  {(scrollableMenuHeight && (
-                    <ScrollView testID={testID+"_ScrollView"}>{children}</ScrollView>
+                  {((scrollableMenuHeight|| contentContainerStyle) && (<ScrollView contentContainerStyle={contentContainerStyle} testID={testID+"_ScrollView"}>{children}</ScrollView>
                   )) || children}
                 </Surface>
               </Animated.View>

package/src/components/SimpleSelect/index.js

@@ -253,6 +253,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         pointerEvents,
         value,
         autoHeight : false,
+        ...rest,
         onPress : context.open.bind(context),
         ...selectedObj,
     }) : 
@@ -261,6 +262,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
             useReadOnlyOpacity = {false}
             affix = {false}
             mode = {mode}
+            {...rest}
             {...inputProps}
             label = {defaultVal(label,text,inputProps.label)}
             editable = {false}

package/src/components/TableLink/index.js

@@ -0,0 +1,67 @@
+// 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.
+/****Le composant TableLink est utilisé pour les liens cliquable vers les tables de données */
+import {TouchableOpacity,StyleSheet} from "react-native";
+import React from "$react";
+import View from "$components/View";
+import PropTypes from "prop-types";
+import Label from "$components/Label";
+import {defaultStr,isPromise,defaultObj} from "$utils";
+import {open as openPreloader,close as closePreloader} from "$preloader";
+import {styles as _styles} from "$theme";
+import Tooltip from "$components/Tooltip";
+
+const TableLinKComponent = React.forwardRef((props,ref)=>{
+    let {disabled,labelProps,server,containerProps,testID,Component,routeName,routeParams,component,_id,primary,triggerProps,onPress,children, ...rest} = props;
+    testID = defaultStr(testID,"RN_TableDataLinkContainer")
+    rest = defaultObj(rest);
+    containerProps = defaultObj(containerProps)
+    labelProps = defaultObj(labelProps);
+    _id = defaultStr(_id);
+    if(!_id){
+        disabled = true;
+    }
+    const pointerEvents = disabled || !_id? 'none' : 'auto';
+    const onPressLink = (event)=>{
+        React.stopEventPropagation(event);
+        const r = typeof onPress =='function'? onPress(event) : undefined;
+        if(isPromise(r)){
+            openPreloader("traitement de la requête...");
+            r.finally(closePreloader);
+        }
+    }
+    rest.style = [rest.style,_styles.cursorPointer];
+    const CP = disabled ? View : TouchableOpacity;
+    return <CP testID={testID} onLongPres={(e)=>React.stopEventPropagation(e)} {...containerProps} onPress={disabled? undefined : onPressLink} style={[styles.container,containerProps.style]}>
+        <Tooltip testID={testID+"_Tooltip"} {...rest} Component={Component}  onPress={disabled?undefined:onPressLink} ref={ref} pointerEvents={pointerEvents} disabled = {disabled}>
+            <Label testID={testID+"_Label"} underlined primary {...labelProps} style={[_styles.lh15,labelProps.style]} disabled={disabled}>{children}</Label>
+        </Tooltip>
+    </CP>
+});
+
+export default TableLinKComponent;
+
+
+TableLinKComponent.propTypes = {
+    server : PropTypes.string,//le serveur sur lequel rechercher les données
+    primary : PropTypes.bool,//si le composant sera stylé en theme primary de react
+    ///les props à utiliser pour afficher la table de données en cas de click sur le lien
+    triggerProps : PropTypes.object,
+    /*** l'id de la données à récupérer en cas de clic sur le lien */
+    _id : PropTypes.string.isRequired,
+    routeName : PropTypes.string,///la route via laquelle on devra naviguer
+    routeParam : PropTypes.object,///les props à passer à la route en question
+    children : PropTypes.node
+}
+
+const styles = StyleSheet.create({
+    container : {
+        alignSelf : 'flex-start',
+        flexGrow : 0,
+        paddingRight : 5,
+        paddingVertical : 5,
+    }
+})
+
+TableLinKComponent.displayName = "TableLinKComponent";

package/src/components/TextField/index.js

@@ -7,10 +7,10 @@ import PropTypes from "prop-types";
 import HelperText from "$ecomponents/HelperText";
 import Icon,{COPY_ICON} from "$ecomponents/Icon";
 import Label from "$ecomponents/Label";
-import {isAndroid as _isAndroid,isMobileNative,isIos as _isIos,isWeb as _isWeb} from "$cplatform";
+import {isAndroid as _isAndroid,isIos as _isIos,isWeb as _isWeb} from "$cplatform";
 import {isMobileMedia,isDesktopMedia} from "$cplatform/dimensions";
 import {keyboardTypes,FONT_SIZE,parseDecimal,HEIGHT,outlinedMode,modes,flatMode,normalMode,shadowMode} from "./utils";
-import {copyTextToClipboard} from "$capp/clipboard/utils";
+import {copyTextToClipboard} from "$clipboard/utils";
 import Surface from "$ecomponents/Surface";
 import View from "$ecomponents/View";
 const PADDING_HORIZONTAL_FLAT_MODE = 2;