@fto-consult/expo-ui 5.8.11 → 5.10.0

package/babel.config.alias.js

@@ -16,8 +16,34 @@ module.exports = (opts)=>{
     const cpath = fs.existsSync(euCommon)? path.resolve(euCommon,"babel.config.alias") : "@fto-consult/common/babel.config.alias";
     const r = require(`${cpath}`)(opts);
     const expo = path.resolve(expoUI,"src");
-    r["$eauth"] = path.resolve(expo,"auth");
+    
+    /**** package json */
+    const packagePath = path.resolve(base,"package.json");
+    const configPath = path.resolve(expo,"app.config.json");
+    if(fs.existsSync(packagePath)){
+        try {
+            const packageObj = require(`${packagePath}`);
+            if(typeof packageObj.name =="string"){
+                packageObj.name = packageObj.name.toUpperCase();
+            }
+            if(packageObj){
+                ["scripts","private","main","repository","keywords","bugs","dependencies","devDependencies"].map(v=>{
+                    delete packageObj[v];
+                })
+                fs.writeFileSync(configPath,JSON.stringify(packageObj,null,"\t"));
+            }
+        } catch (e){
+            console.log(e," writing file sync on package JSON, file : $common/babel.config.alias")
+        }
+    }
+    if(fs.existsSync(configPath)){
+        r["$package.json"] = r["$packageJSON"] = configPath;
+    }
+    
     r["$ecomponents"] = r["$expo-components"] = path.resolve(expo,"components");
+    r["$econfirm"] = path.resolve(r["$expo-components"],"Dialog","confirm");
+    r["$confirm"] = r["$confirm"] || r["$econfirm"];
+    r["$eauth"] = path.resolve(expo,"auth");
     r["$etableLink"] = r["$eTableLink"] = path.resolve(r["$ecomponents"],"TableLink");
     r.$tableLink = r.$TableLink = r.$tableLink || r.$TableLink || path.resolve(r.$etableLink,"default");
     r["$components"] = r["$components"] || r["$ecomponents"];

package/babel.config.js

@@ -14,7 +14,6 @@ module.exports = function(api,opts) {
       inlineDovOptions.path ='./.env';
     }
     /*** par défaut, les variables d'environnements sont stockés dans le fichier .env situé à la racine du projet, référencée par la prop base  */
-    
     const alias =  require("./babel.config.alias")(options);
     return {
       presets: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "5.8.11",
+  "version": "5.10.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -58,10 +58,10 @@
   },
   "homepage": "https://github.com/borispipo/expo-ui#readme",
   "dependencies": {
-    "@emotion/native": "^11.10.6",
+    "@emotion/native": "^11.11.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.12.0",
+    "@fto-consult/common": "^3.14.1",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-native-community/datetimepicker": "^6.7.3",
@@ -70,8 +70,8 @@
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
     "@shopify/flash-list": "^1.4.0",
-    "apexcharts": "^3.37.2",
-    "expo": "^48.0.15",
+    "apexcharts": "^3.40.0",
+    "expo": "^48.0.17",
     "expo-camera": "~13.2.1",
     "expo-clipboard": "~4.1.1",
     "expo-font": "~11.1.1",
@@ -91,20 +91,20 @@
     "react-content-loader": "^6.2.1",
     "react-dom": "^18.2.0",
     "react-native": "^0.71.3",
-    "react-native-big-list": "^1.6.0",
+    "react-native-big-list": "^1.6.1",
     "react-native-blob-util": "^0.17.0",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-mime-types": "^2.3.0",
-    "react-native-paper": "^5.4.1",
-    "react-native-paper-dates": "^0.15.1",
+    "react-native-paper": "^5.8.0",
+    "react-native-paper-dates": "^0.16.2",
     "react-native-reanimated": "~2.14.4",
-    "react-native-safe-area-context": "^4.5.0",
-    "react-native-screens": "~3.20.0",
+    "react-native-safe-area-context": "^4.5.3",
+    "react-native-screens": "^3.20.0",
     "react-native-svg": "13.4.0",
     "react-native-web": "~0.18.7",
     "react-native-webview": "^11.26.0",
-    "react-virtuoso": "^4.0.9",
+    "react-virtuoso": "^4.3.7",
     "sharp-cli": "^2.1.0",
     "tippy.js": "^6.3.7",
     "websql": "^2.0.3",

package/src/App.js

@@ -2,18 +2,11 @@ import '$session';
 import React from 'react';
 import {SWRConfig} from "$swr";
 import {defaultObj} from "$cutils";
-import  {updateTheme,defaultTheme} from "$theme";
-import {Provider as PaperProvider } from 'react-native-paper';
 import Index from './index';
 import notify  from "$notify";
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { PreferencesContext } from './Preferences';
-import {AuthProvider} from '$cauth';
-import ErrorBoundary from "$ecomponents/ErrorBoundary";
 import {GestureHandlerRootView} from "react-native-gesture-handler";
-import StatusBar from "$ecomponents/StatusBar";
 import APP from "$app";
-import FontIcon from "$ecomponents/Icon/Font"
 import {isMobileNative} from "$cplatform";
 import {setDeviceIdRef} from "$capp";
 import appConfig from "$capp/config";
@@ -30,7 +23,7 @@ Object.map(Utils,(v,i)=>{
      window[i] = v;
   }
 });
-export default function getIndex({onMount,onUnmount,swrConfig,render,onRender,preferences:appPreferences,...rest}){
+export default function getIndex({onMount,onUnmount,swrConfig,onRender,...rest}){
   const isScreenFocusedRef = React.useRef(true);
     ///garde pour chaque écran sa date de dernière activité
     const screensRef = React.useRef({});//la liste des écrans actifs
@@ -97,19 +90,7 @@ export default function getIndex({onMount,onUnmount,swrConfig,render,onRender,pr
           }
         }
     },[])
-    const [theme,setTheme] = React.useState(updateTheme(defaultTheme));
-    const updatePreferenceTheme = (customTheme,persist)=>{
-      setTheme(updateTheme(customTheme));
-    };
-    const forceRender = React.useForceRender();
-    const pref = typeof appPreferences =='function'? appPreferences({setTheme,forceRender,updateTheme:updatePreferenceTheme}) : appPreferences;
-    const preferences = React.useMemo(()=>({
-        updateTheme:updatePreferenceTheme,
-        theme,
-        ...defaultObj(pref),
-    }),[theme,pref]);
-    const child = <Index {...rest} theme={theme}/>;
-    const content = typeof render == 'function'? render({children:child,appConfig,config:appConfig}) : child;  
+      
     return (
       <SWRConfig 
         value={{
@@ -160,25 +141,9 @@ export default function getIndex({onMount,onUnmount,swrConfig,render,onRender,pr
         }}
       >
           <GestureHandlerRootView style={{ flex: 1 }}>
-            <PaperProvider 
-                theme={theme}
-                settings={{
-                  icon: (props) => {
-                    return <FontIcon {...props}/>
-                  },
-                }}
-            >
-              <SafeAreaProvider>
-                <AuthProvider>
-                    <ErrorBoundary>
-                      <StatusBar/>
-                      <PreferencesContext.Provider value={preferences}>
-                        {React.isValidElement(content) && content || child}
-                      </PreferencesContext.Provider>  
-                    </ErrorBoundary>
-                  </AuthProvider>
-              </SafeAreaProvider>
-            </PaperProvider>
+          <SafeAreaProvider>
+            <Index {...rest}/>
+          </SafeAreaProvider>
         </GestureHandlerRootView>
       </SWRConfig>
     );

package/src/app.config.json

@@ -0,0 +1,31 @@
+{
+	"name": "SALITE",
+	"version": "7.0.0",
+	"description": "Logiciel de gestion commerciale pour PME",
+	"realeaseDateStr": "1er Juin 2021",
+	"releaseDate": "2020-05-23",
+	"devMail": "saliteapp@gmail.com",
+	"devWebsite": "http://fto-consulting.com/salite/",
+	"copyRight": "firsto consulting@Jan 2020",
+	"id": "com.ftc.apps.salite7",
+	"pouchdbNamePrefix": "com.ftc.apps.slite-",
+	"includeFieldsInDatagridFetchOptions": false,
+	"feeds": {
+		"VIDEOS": {
+			"link": "http://fto-consulting.com/salite/feeds",
+			"label": "Bibliothèque vidéo",
+			"provider": "",
+			"icon": "file-video"
+		}
+	},
+	"theme": {
+		"light": {
+			"primary": "#0073B1",
+			"secondary": "#EC008C",
+			"primaryOnSurface": "#0073B1",
+			"secondaryOnSurface": "#EC008C"
+		}
+	},
+	"author": "@fto-consulting",
+	"license": "ISC"
+}

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

@@ -40,6 +40,7 @@ import Button from "$ecomponents/Button";
 import stableHash from "stable-hash";
 import * as XLSX from "xlsx";
 import {convertToSQL} from "$ecomponents/Filter";
+import appConfig from "$capp/config";
 
 export const TIMEOUT = 100;
 
@@ -934,19 +935,22 @@ export default class CommonDatagridComponent extends AppComponent {
         })
         if(size === 1 && canMakePhoneCall === true && canMakeCall()){
             const rowKey = Object.keys(this.selectedRows)[0], rowData = defaultObj(this.selectedRows[rowKey]);
-            let callProps = typeof makePhoneCallProps == 'function'? makePhoneCallProps(rowData,rowKey) : makePhoneCallProps;
-            callProps = defaultObj(callProps);
-            r.push({
-                text : defaultStr(callProps.text,callProps.label,'Appeler'),
-                icon : defaultStr(callProps.icon,'phone'),
-                flat : true,
-                onPress : ()=>{
-                    return makePhoneCall(
-                        rowData,
-                        callProps
-                    );
-                }
-            })
+            const table = defaultStr(this.props.table,this.props.tableName).trim();
+            let callProps = typeof makePhoneCallProps == 'function'? makePhoneCallProps({rowData,rowKey,table,tableName:table,data:rowData,key:rowKey,context:this,props:this.props}) : makePhoneCallProps;
+            if(callProps !== false){
+                callProps = defaultObj(callProps);
+                r.push({
+                    text : defaultStr(callProps.text,callProps.label,'Appeler'),
+                    icon : defaultStr(callProps.icon,'phone'),
+                    flat : true,
+                    onPress : ()=>{
+                        return makePhoneCall(
+                            rowData,
+                            callProps
+                        );
+                    }
+                })   
+            }
         }
         if(isObj(this.props.columns) && size ===1){
             r.push({
@@ -3365,17 +3369,20 @@ export default class CommonDatagridComponent extends AppComponent {
         fetchOptions.dataSources = this.currentDataSources;
         fetchOptions.selector = fetchFilters;
         fetchOptions.sort = this.getSort();
-        const ff = this.getFilterableColumnsNames();
-        let fields = ff;
-        if(this.isFetchOnlyVisibleColumnsEnabled()){
-            fields = [];
-            Object.map(ff,(field)=>{
-                if(isNonNullString(field) && isObj(this.state.columns[field]) && this.state.columns[field].visible !== false){
-                    fields.push(field);
-                }
-            });
+        const canIncludeField = typeof this.props.includeFieldsInFetchOptions =='boolean'? this.props.includeFieldsInFetchOptions : defaultBool(appConfig.get("includeFieldsInDatagridFetchOptions"),appConfig.includeFieldsInDatagridFetchOptions) !== false;
+        if(canIncludeField){
+            const ff = this.getFilterableColumnsNames();
+            let fields = ff;
+            if(this.isFetchOnlyVisibleColumnsEnabled()){
+                fields = [];
+                Object.map(ff,(field)=>{
+                    if(isNonNullString(field) && isObj(this.state.columns[field]) && this.state.columns[field].visible !== false){
+                        fields.push(field);
+                    }
+                });
+            }
+            fetchOptions.fields = fields;
         }
-        fetchOptions.fields = fields;
         let limit = this.getQueryLimit();
         if(limit > 0 && !this.isPivotDatagrid()){
             fetchOptions.limit = limit;
@@ -3809,6 +3816,7 @@ CommonDatagridComponent.propTypes = {
         PropTypes.node,
         PropTypes.element,
     ]),
+    includeFieldsInFetchOptions : PropTypes.bool,//si les champs de colonnes seront inclus dans les fetchOptions du datagrid
     canMakePhoneCall : PropTypes.bool,//si l'on peut faire un appel sur la données sélectionnées
     makePhoneCallProps : PropTypes.oneOfType([
         PropTypes.object,

package/src/components/Datagrid/SWRDatagrid.js

@@ -65,7 +65,7 @@ export const getSWROptions = ()=>{
     }
 }
 
-
+const isValidMakePhoneCallProps = p=> isObj(p) && Object.size(p,true) || typeof p ==='function';
 /****la fonction fetcher doit toujours retourner : 
  *  1. la liste des éléments fetchés dans la props data
  *  2. le nombre total d'éléments de la liste obtenue en escluant les clause limit et offset correspondant à la même requête
@@ -118,7 +118,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         delete sort.column;
     }
     canMakePhoneCall = defaultBool(canMakePhoneCall,table.canMakePhoneCall);
-    makePhoneCallProps = defaultObj(makePhoneCallProps,rest.makePhoneCallProps,table.makePhoneCallProps);
+    makePhoneCallProps = isValidMakePhoneCallProps(makePhoneCallProps) && makePhoneCallProps || isValidMakePhoneCallProps(rest.makePhoneCallProps) && rest.makePhoneCallProps ||  isValidMakePhoneCallProps(table.makePhoneCallProps) && table.makePhoneCallProps || {};
     const isExportable = !!Auth.isTableDataAllowed({table:tableName,action:'export'});
     rest.exportable = isExportable;
     rowKey = defaultStr(rowKey,table.rowKey,table.primaryKeyColumnName);

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

@@ -397,7 +397,7 @@ export default class Field extends AppComponent {
     getValidValue (data){
         let v = this.state.validValue;
         if(isFunction(this.props.getValidValue)){
-            let v1 = this.props.getValidValue.call(this,{data,context:this,props:this.props});
+            let v1 = this.props.getValidValue.call(this,{data,context:this,value:v,validValue:v,state:this.state,props:this.props});
             if(v1 !== undefined){
                 v = v1;
             }

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

@@ -55,7 +55,6 @@ export default class FormIDField extends TextField {
     /*** retourne la valeur validée */
     getValidValue(data){
         const validValue = super.getValidValue(data);
-        console.log(data, " is valid value ",data);
         if(!isNonNullString(this.name)) return validValue;
         data[this.name] = defaultStr(data[this.name],validValue,this.newFieldIdValue);
         return validValue;

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

@@ -3,7 +3,7 @@
 // license that can be found in the LICENSE file.
 
 import Dropdown from "$ecomponents/Dropdown";
-import {defaultStr,isFunction,defaultVal,isObjOrArray,defaultObj} from "$cutils";
+import {defaultStr,extendObj,isFunction,defaultVal,isObjOrArray,defaultObj} from "$cutils";
 import PropTypes from "prop-types";
 import actions from "$cactions";
 import {navigateToTableData} from "$enavigation/utils";
@@ -19,7 +19,7 @@ import appConfig from "$appConfig";
  *  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,bindUpsert2RemoveEvents,onAdd,showAdd:customShowAdd,canShowAdd,foreignKeyTable,fetchItemsPath,foreignKeyLabel,foreignKeyLabelIndex,dropdownActions,fields,fetchItems:customFetchItem,convertFiltersToSQL,mutateFetchedItems,getForeignKeyTable,onFetchItems,isFilter,isUpdate,isDocEditing,items,onAddProps,fetchOptions,...props},ref)=>{
+const TableDataSelectField = React.forwardRef(({foreignKeyColumn,prepareFilters:cPrepareFilters,bindUpsert2RemoveEvents,onAdd,showAdd:customShowAdd,canShowAdd,foreignKeyTable,fetchItemsPath,foreignKeyLabel,foreignKeyLabelIndex,dropdownActions,fields,fetchItems:customFetchItem,convertFiltersToSQL,mutateFetchedItems,getForeignKeyTable,onFetchItems,isFilter,isUpdate,isDocEditing,items,onAddProps,fetchOptions,...props},ref)=>{
     props.data = defaultObj(props.data);
     if(!foreignKeyColumn && isNonNullString(props.field)){
         foreignKeyColumn = props.field;
@@ -138,8 +138,12 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,bindUpsert2Remo
             if(!isMounted()) return;
             if(typeof beforeFetchItems ==='function' && beforeFetchItems(fetchOptions) === false) return;
             let opts = Object.clone(fetchOptions);
-            opts.selector = prepareFilters(fetchOptions.selector,{convertToSQL:convertFiltersToSQL});
-            opts = getFetchOptions(opts);
+            if(cPrepareFilters !== false){
+                opts.selector = prepareFilters(fetchOptions.selector,{convertToSQL:convertFiltersToSQL});
+                opts = getFetchOptions(opts);
+            } else {
+                opts = {fetchOptions};
+            }
             const r = fetchItems(opts);
             if(r === false) return;
             setIsLoading(true);
@@ -296,6 +300,7 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,bindUpsert2Remo
 
 TableDataSelectField.propTypes = {
     ...Dropdown.propTypes,
+    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
     canShowAdd : PropTypes.func, //({foreignKeyTable,foreignKeyColumn})=><boolean> la fonction permettant de spécifier si l'on peut afficher le bouton showAdd

package/src/components/InlineIndicator/Select.js

@@ -43,6 +43,7 @@ const styles = StyleSheet.create({
     inputContainer : {
         paddingVertical : 0,
         marginVertical : 0,
+        paddingHorizontal : 10,
         backgroundColor : 'transparent',
     },
     contentContainer : {

package/src/components/InlineIndicator/index.js

@@ -121,7 +121,7 @@ const styles = StyleSheet.create({
         textAlign : 'right'
     },
     priceType : {
-        width:32
+        width:32,
     },
     weightUnit : {
         width : 30,

package/src/components/SimpleSelect/index.js

@@ -312,7 +312,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
             style = {[{marginTop}]}
             anchor = {anchor}
             contentProps = {{style:{flex:1}}}
-            minWidth = {150}
+            minWidth = {180}
             contentStyle = {[{paddingVertical:0},rProps.contentStyle]}
         >
             <View 
@@ -322,7 +322,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
                         paddingHorizontal : 10,
                         paddingVertical:0,
                         height : !isMob?contentContainerHeight:'90%',
-                        width : !isMob ? Math.max(layout.width,150) : undefined,
+                        width : !isMob ? Math.max(layout.width,180) : undefined,
                     },
                     isMob && {flex:1},
                     !isMob && {paddingRight : 0},

package/src/components/SplashScreen/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 /*** fork of https://www.npmjs.com/package/react-native-animated-splash-screen */
 import PropTypes from "prop-types"
-import * as React from "react"
+import React from "$react"
 import {Animated, StyleSheet } from "react-native";
 import View from "$ecomponents/View";
 import {isNativeMobile} from "$cplatform";
@@ -19,167 +19,136 @@ import styles, {
 const isNative = isNativeMobile();
 const Component = isNative? Animated.View : View;
 
-class AnimatedSplash extends React.Component {
-  static defaultProps = {
-    isLoaded: false,
-  }
-
-  state = {
+const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,logoHeight,backgroundColor,imageBackgroundSource,imageBackgroundResizeMode,
+  testID,
+  disableAppScale,
+  disableImageBackgroundAnimation,preload})=>{
+  const [state,setState] = React.useState({
     animationDone: false,
     loadingProgress: new Animated.Value(0)
-  }
-
-  componentDidUpdate(prevProps) {
-    const { isLoaded , duration, delay } = this.props
-    const { loadingProgress } = this.state
-
-    if (isLoaded && !prevProps.isLoaded) {
-      if(!isNativeMobile()){
-          this.setState({animationDone:true});
-      } else {
-        Animated.timing(loadingProgress, {
-            toValue: 100,
-            duration: duration || 1000,
-            delay: delay || 0,
-            useNativeDriver: true,
-        }).start(() => {
-            this.setState({
-              animationDone: true,
-            })
-        })
-      }
-    }
-  }
-
-  renderChildren() {
-    const { children, preload, isLoaded } = this.props
-    if (preload || preload == null) {
-      return children
+  });
+  const { loadingProgress, animationDone } = state;
+  const prevIsLoaded = React.usePrevious(isLoaded);
+  React.useEffect(()=>{
+    if(prevIsLoaded == isLoaded || !isLoaded) return;
+    if(!isNativeMobile()){
+      setState({...state,animationDone:true});
     } else {
-      if (isLoaded) {
-        return children
-      }
+      Animated.timing(loadingProgress, {
+          toValue: 100,
+          duration: duration || 1000,
+          delay: delay || 0,
+          useNativeDriver: true,
+      }).start(() => {
+          setState({
+            ...state,
+            animationDone: true,
+          })
+      })
     }
-
-    return null
+  },[isLoaded]);
+  testID = defaultStr(testID,"RN_SplashscreenComponent")
+  logoWidth = defaultDecimal(logoWidth,150);
+  logoHeight = defaultDecimal(logoHeight,250);
+  const opacityClearToVisible = {
+    opacity: loadingProgress.interpolate({
+      inputRange: [0, 15, 30],
+      outputRange: [0, 0, 1],
+      extrapolate: "clamp",
+    }),
+  }
+  const imageScale = {
+    transform: [
+      {
+        scale: loadingProgress.interpolate({
+          inputRange: [0, 10, 100],
+          outputRange: [1, 1, 65],
+        }),
+      },
+    ],
   }
 
-  render() {
-    const { loadingProgress, animationDone } = this.state
-    let {
-      logoImage,
-      logoWidth,
-      logoHeight,
-      backgroundColor,
-      imageBackgroundSource,
-      imageBackgroundResizeMode,
-      testID,
-      disableAppScale,
-      disableImageBackgroundAnimation,
-    } = this.props
-    testID = defaultStr(testID,"RN_SplashscreenComponent")
-    logoWidth = defaultDecimal(logoWidth,150);
-    logoHeight = defaultDecimal(logoHeight,250);
-    const opacityClearToVisible = {
-      opacity: loadingProgress.interpolate({
-        inputRange: [0, 15, 30],
-        outputRange: [0, 0, 1],
-        extrapolate: "clamp",
-      }),
-    }
-
-    const imageScale = {
-      transform: [
-        {
-          scale: loadingProgress.interpolate({
-            inputRange: [0, 10, 100],
-            outputRange: [1, 1, 65],
-          }),
-        },
-      ],
-    }
-
-    const logoScale = {
-      transform: [
-        {
-          scale: loadingProgress.interpolate({
-            inputRange: [0, 10, 100],
-            outputRange: [1, 0.8, 10],
-          }),
-        },
-      ],
-    }
+  const logoScale = {
+    transform: [
+      {
+        scale: loadingProgress.interpolate({
+          inputRange: [0, 10, 100],
+          outputRange: [1, 0.8, 10],
+        }),
+      },
+    ],
+  }
 
-    const logoOpacity = {
-      opacity: loadingProgress.interpolate({
-        inputRange: [0, 20, 100],
-        outputRange: [1, 0, 0],
-        extrapolate: "clamp",
-      }),
-    }
+  const logoOpacity = {
+    opacity: loadingProgress.interpolate({
+      inputRange: [0, 20, 100],
+      outputRange: [1, 0, 0],
+      extrapolate: "clamp",
+    }),
+  }
 
-    const appScale = {
-      transform: [
-        {
-          scale: loadingProgress.interpolate({
-            inputRange: [0, 7, 100],
-            outputRange: [1.1, 1.05, 1],
-          }),
-        },
-      ],
-    }
-    
-    return (
-      <View style={[styles.container]} testID={testID} nativeID={testID}>
-        {!animationDone && <View style={StyleSheet.absoluteFill} testID={testID+"_Animation"}/>}
-        <View style={styles.containerGlue}>
-          {!animationDone && (
-            <Animated.View
-              style={_staticBackground(logoOpacity, backgroundColor)}
-              testID={testID+"_AnimationDone"}
-            />
-          )}
-          {(animationDone || isNative) && <Component style={[!disableAppScale && appScale, opacityClearToVisible, styles.flex]}>
-            {this.renderChildren()}
-          </Component>}
-          {!animationDone && (
-            <Animated.Image
-              testID={testID+"AnimateImage"}
-              resizeMode={imageBackgroundResizeMode || "cover"}
-              source={imageBackgroundSource}
-              style={[disableImageBackgroundAnimation && _staticBackground(
-                logoOpacity,
-                backgroundColor
-              ), disableImageBackgroundAnimation && _dynamicImageBackground(
-                imageScale,
-                logoOpacity,
-                backgroundColor
-              )]}
-            />
-          )}
-          {!animationDone && (
-            <View testID={testID+"_LogoContainer"} style={[StyleSheet.absoluteFill, styles.logoStyle]}>
-              {(
-                <Animated.View
-                  testID={testID+"_Logo"}
-                  style={_dynamicCustomComponentStyle(
-                        logoScale,
-                        logoOpacity,
-                        logoWidth,
-                        logoHeight
-                    )}>
-                  {<LogoProgress/>}
-                </Animated.View>
-              )}
-            </View>
-          )}
-        </View>
-      </View>
-    )
+  const appScale = {
+    transform: [
+      {
+        scale: loadingProgress.interpolate({
+          inputRange: [0, 7, 100],
+          outputRange: [1.1, 1.05, 1],
+        }),
+      },
+    ],
   }
+  const child = (animationDone && isLoaded)? React.isValidElement(children) && children : null;
+  return (
+    <View style={[styles.container]} testID={testID} nativeID={testID}>
+      {!animationDone && <View style={StyleSheet.absoluteFill} testID={testID+"_Animation"}/>}
+      <View style={styles.containerGlue}>
+        {!animationDone && (
+          <Animated.View
+            style={_staticBackground(logoOpacity, backgroundColor)}
+            testID={testID+"_AnimationDone"}
+          />
+        )}
+        {(animationDone || isNative) && <Component style={[!disableAppScale && appScale, opacityClearToVisible, styles.flex]}>
+          {child}
+        </Component>}
+        {!animationDone && (
+          <Animated.Image
+            testID={testID+"AnimateImage"}
+            resizeMode={imageBackgroundResizeMode || "cover"}
+            source={imageBackgroundSource}
+            style={[disableImageBackgroundAnimation && _staticBackground(
+              logoOpacity,
+              backgroundColor
+            ), disableImageBackgroundAnimation && _dynamicImageBackground(
+              imageScale,
+              logoOpacity,
+              backgroundColor
+            )]}
+          />
+        )}
+        {!animationDone && (
+          <View testID={testID+"_LogoContainer"} style={[StyleSheet.absoluteFill, styles.logoStyle]}>
+            {(
+              <Animated.View
+                testID={testID+"_Logo"}
+                style={_dynamicCustomComponentStyle(
+                      logoScale,
+                      logoOpacity,
+                      logoWidth,
+                      logoHeight
+                  )}>
+                {<LogoProgress/>}
+              </Animated.View>
+            )}
+          </View>
+        )}
+      </View>
+    </View>
+  )
 }
 
-AnimatedSplash.propTypes = {
+
+SplashScreenComponent.propTypes = {
   preload: PropTypes.bool,
   logoWidth: PropTypes.number,
   children: PropTypes.element,
@@ -197,4 +166,5 @@ AnimatedSplash.propTypes = {
   delay: PropTypes.number,
 }
 
-export default AnimatedSplash
+SplashScreenComponent.displayName = "SplashScreenComponent";
+export default SplashScreenComponent;

package/src/index.js

@@ -31,6 +31,13 @@ import {PortalProvider,PortalHost } from '$ecomponents/Portal';
 import ErrorBoundaryProvider from "$ecomponents/ErrorBoundary/Provider";
 import notify, {notificationRef} from "$notify";
 import DropdownAlert from '$ecomponents/Dialog/DropdownAlert';
+import {AuthProvider} from '$cauth';
+import { PreferencesContext } from './Preferences';
+import ErrorBoundary from "$ecomponents/ErrorBoundary";
+import  {updateTheme,defaultTheme} from "$theme";
+import StatusBar from "$ecomponents/StatusBar";
+import {Provider as PaperProvider } from 'react-native-paper';
+import FontIcon from "$ecomponents/Icon/Font";
 
 let MAX_BACK_COUNT = 1;
 let countBack = 0;
@@ -48,13 +55,13 @@ const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
  *  initialRouteName : la route initiale par défaut
  *  getStartedRouteName : la route par défaut de getStarted lorsque l'application est en mode getStarted, c'est à dire lorsque la fonction init renvoie une erreur (reject)
  */
-function App({init:initApp,initialRouteName:appInitialRouteName,getStartedRouteName}) {
+function App({init:initApp,initialRouteName:appInitialRouteName,render,preferences:appPreferences,getStartedRouteName}) {
   AppStateService.init();
   const [initialState, setInitialState] = React.useState(undefined);
   const appReadyRef = React.useRef(true);
   const [state,setState] = React.useState({
      isLoading : true,
-     isInitialized:true,
+     isInitialized:false,
   });
   React.useEffect(() => {
     const loadResources = ()=>{
@@ -220,35 +227,67 @@ function App({init:initApp,initialRouteName:appInitialRouteName,getStartedRouteN
       }
   },[isInitialized]);
   const hasGetStarted = state.hasGetStarted !== false? true : false;
+  
+  const [theme,setTheme] = React.useState(updateTheme(defaultTheme));
+    const updatePreferenceTheme = (customTheme,persist)=>{
+      setTheme(updateTheme(customTheme));
+    };
+    const forceRender = React.useForceRender();
+    const pref = typeof appPreferences =='function'? appPreferences({setTheme,forceRender,updateTheme:updatePreferenceTheme}) : appPreferences;
+    const preferences = React.useMemo(()=>({
+        updateTheme:updatePreferenceTheme,
+        theme,
+        ...defaultObj(pref),
+    }),[theme,pref]);
+  const isLoaded = !isLoading;
+  const child = isLoaded ? <NavigationContainer 
+    ref={navigationRef}
+    initialState={initialState}
+    onStateChange={(state) =>{
+        setSession(NAVIGATION_PERSISTENCE_KEY,decycle(state),false);
+    }
+  }
+  >
+    <PortalProvider>
+      <Portal.Host>
+        <PreloaderProvider/>   
+        <DialogProvider responsive/>
+        <AlertProvider SimpleSelect={SimpleSelect}/>
+        <FormDataDialogProvider/>  
+        <BottomSheetProvider/>
+        <DropdownAlert ref={notificationRef}/>
+        <ErrorBoundaryProvider/>  
+        <Navigation
+          initialRouteName = {defaultStr(hasGetStarted ? appInitialRouteName : getStartedRouteName,"Home")}
+          state = {state}
+          hasGetStarted = {hasGetStarted}
+          isInitialized = {!isLoading}
+          onGetStart = {(e)=>{
+            setState({...state,hasGetStarted:true})
+          }}
+        />
+      </Portal.Host>
+    </PortalProvider>
+  </NavigationContainer>  : null;
+  const content = isLoaded ? typeof render == 'function'? render({children:child,appConfig,config:appConfig}) : child : null;
   return (<SplashScreen isLoaded={!isLoading}>
-      <NavigationContainer 
-          ref={navigationRef}
-          initialState={initialState}
-          onStateChange={(state) =>{
-              setSession(NAVIGATION_PERSISTENCE_KEY,decycle(state),false);
-          }
-        }
-      >
-          <PortalProvider>
-            <Portal.Host>
-              <PreloaderProvider/>   
-              <DialogProvider responsive/>
-              <AlertProvider SimpleSelect={SimpleSelect}/>
-              <FormDataDialogProvider/>  
-              <BottomSheetProvider/>
-              <DropdownAlert ref={notificationRef}/>
-              <ErrorBoundaryProvider/>  
-              <Navigation
-                initialRouteName = {defaultStr(hasGetStarted ? appInitialRouteName : getStartedRouteName,"Home")}
-                state = {state}
-                hasGetStarted = {hasGetStarted}
-                onGetStart = {(e)=>{
-                  setState({...state,hasGetStarted:true})
-                }}
-              />
-            </Portal.Host>
-          </PortalProvider>
-      </NavigationContainer> 
+      <AuthProvider>
+        <PaperProvider 
+          theme={theme}
+          settings={{
+            icon: (props) => {
+              return <FontIcon {...props}/>
+            },
+          }}
+        >
+          <ErrorBoundary>
+          <StatusBar/>
+          <PreferencesContext.Provider value={preferences}>
+            {React.isValidElement(content) && content || child}
+          </PreferencesContext.Provider>  
+        </ErrorBoundary>
+      </PaperProvider>
+      </AuthProvider>
   </SplashScreen>);
 }
 

package/src/layouts/DatabaseStatistics/index.js

@@ -54,7 +54,7 @@ export default function DatabaseStatisticScreen ({withScreen,fetchDataProps,tabl
         if(!content.length) {
             return null;
         }
-        content = <Component  {...containerProps} style={[containerProps.style,theme.styles.mr1,theme.styles.ml1]}>
+        content = <Component  {...containerProps} style={[containerProps.style,theme.styles.mr1,theme.styles.pv1,theme.styles.ml1]}>
             {content}
         </Component>;
         return  withScreen !== false ? <Screen containerProps={{style:[{flexGrow:0,flex:0}]}} withScrollView title={defaultVal(customTitle,title)} {...props}>{content}</Screen> : content;

package/src/layouts/Screen/FormData/FormData.js

@@ -53,14 +53,17 @@ export default class FormDataLayout extends FormDataActions {
     close(){
         return goBack(true);
     }
+    isLoading(){
+        return !!(this.props.isLoading)
+    }
     wrapRenderingContent(content,wProps){
         let {
             withHeavyScreen,
             preloader,
             preloaderProps,
             testID,
-            isLoading,
         } = this.props;
+        const isLoading = this.isLoading();
         wProps = defaultObj(wProps);
         const useHeavyScreen = withHeavyScreen !== false || isLoading == true? true : false;
         const Wrapper = useHeavyScreen ? HeavyScreen : React.Fragment;

package/src/layouts/Screen/TableData.js

@@ -20,7 +20,7 @@ import {renderTabsContent,renderActions} from "./utils";
 import theme from "$theme";
 import cActions from "$cactions";
 import APP from "$capp/instance";
-import { generatedColumnsProperties } from "./utils";
+import { generatedColumnsProperties,defaultArchivedPermsFilter } from "./utils";
 import {isDocEditing,checkPrimaryKey} from "$ecomponents/Form";
 import i18n from "$i18n";
 import fetch from "$capi/fetch";
@@ -55,7 +55,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
                         if(r === false || (!args.value && typeof args.value != 'number')) return r;
                         //on applique la validation seulement en cas de non mise à jour
                         if(!this.isCurrentDocEditingUpdate() && context && typeof context.onNoValidate =='function'){
-                            const cb = typeof field.fetchUniqueId =='function'? field.fetchUniqueId : typeof this.fetchUniqueId =='function'? this.fetchUniqueId : undefined;
+                            const cb = typeof field.fetchUniqueId =='function'? field.fetchUniqueId : typeof this.props.fetchUniqueId =='function'? this.props.fetchUniqueId : undefined;
                             if(cb){
                                 const r2 = cb(args);
                                 if(isPromise(r2)){
@@ -93,21 +93,11 @@ export default class TableDataScreenComponent extends FormDataScreen{
             tableName : { value : defaultStr(table.table,table.tableName)},
             fields : {value : fields},
             table : {value : table},
+            archivedPermsFilterFunc : {value : typeof mainProps.archivedPermsFilter =='function'? mainProps.archivedPermsFilter:defaultArchivedPermsFilter},
             isDocEditingRef : {value : {current:false}},
-            validateDataBeforeSave : {value : mainProps.validateData},
-            upsertDataToDB : {value : mainProps.upsertToDB},
-            makePhoneCallProps : {value : mainProps.makePhoneCallProps},
-            onSaveProp : {value : mainProps.onSave},
-            titleProp : {value : mainProps.title},
             closeOnSaveProp : {value : mainProps.closeOnSave || mainProps.closeAfterSave },
-            newActionProp : {value : mainProps.newAction},
-            fetchUniqueId : {value : mainProps.fetchUniqueId},
             //la liste des champ de type clé primaire associés à la table
             primaryKeyFields : {value : primaryKeyFields},
-            cloneProp : {value : typeof mainProps.clone =='function' && mainProps.clone || undefined},
-            printProp : {value : typeof mainProps.print =='function' && mainProps.print || undefined},
-            archiveProp : {value : typeof mainProps.archive =='function' && mainProps.archive || undefined },
-            testIDProp : {value : defaultStr(mainProps.testID)},
             showPreloaderOnUpsert : {value : mainProps.showPreloaderOnUpsert},
         });
         this.hidePreloader = this.hidePreloader.bind(this);
@@ -145,7 +135,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
         return defaultObj(this.state.data);
     }
     /**** retourne les props en cours d'édition */
-    getCurrentEditingProps (){
+    getCurrentRenderingProps (){
         return defaultObj(this.currentRenderingProps);
     }
     /* Attention, cette méthode est appélée dans la méthode getComponentProps de la classe parente. 
@@ -165,15 +155,44 @@ export default class TableDataScreenComponent extends FormDataScreen{
     *      datas: la liste des données passées à la TableData
     *  }
     */
-    getActionsPerms({perm,action,tableName}){
-        return (isNonNullString(perm)? Auth.isAllowed({resource:perm.split(':')[0],action}):Auth.isTableDataAllowed({table:tableName,action}));
+    getActionsPerms(args){
+        const eProps = this.getCurrentRenderingProps();
+        const gPA = typeof eProps.getActionsPerms =='function'? eProps.getActionsPerms : typeof this.props.getActionsPerms =='function'? this.props.getActionsPerms : undefined;
+        const permsR = gPA ? gPA.call(this,args) : null;
+        const {perm,action,tableName} = args;
+        const ePerms = (isNonNullString(perm)? Auth.isAllowed({resource:perm.split(':')[0],action}):Auth.isTableDataAllowed({table:tableName,action}));
+        return isObj(permsR) ? extendObj({},ePerms,permsR) : ePerms;
     }
     getRenderedActionPrefix (){}
     renderActions(){
         return null;
     }
+    isLoading(){
+        return !!(this.getCurrentRenderingProps().isLoading) || !!this.props.isLoading;
+    }
+    /**** permet de preparer les composant props
+        si la fonction retourne un élément react, alors l'élément react est rendu comme résultat du composant
+    */
+    prepareComponentProps(props){
+        const obj = typeof this.props.prepareComponentProps =='function'? this.props.prepareComponentProps(props) : null;
+        if(isObj(obj)){
+            return extendObj({},props,obj);
+        }
+        return props;
+    }
     getComponentProps(props){
         this.resetState();
+        const table = this.table;
+        const {datas,currentIndex,data} = this.state; 
+        const tableName = this.tableName;
+        const isUpdated = this.isDocEditing(data);
+        this.isDocEditingRef.current = !!isUpdated;
+        const isMobOrTab = isMobileOrTabletMedia();
+        let archived = this.isArchived(); 
+        this.INITIAL_STATE.archived = archived;
+        this.INITIAL_STATE.tableName = tableName;
+        const fields = {};
+        const fieldsToPrepare = extendObj({},true,this.fields,customFields);
         const {
             actions,
             fields:customFields,
@@ -202,20 +221,10 @@ export default class TableDataScreenComponent extends FormDataScreen{
             formProps : customFormProps,
             newElementLabel,
             prepareField,
+            prepareComponentProps,
             ...rest
-        } = props;
-        const table = this.table;
-        const {datas,currentIndex,data} = this.state; 
-        const tableName = this.tableName;
+        } = this.prepareComponentProps({...props,tableName,fields:fieldsToPrepare,isUpdated,isUpdate:isUpdated,data,datas,currentIndex});
         const sessionName = this.INITIAL_STATE.sessionName = defaultStr(customSessionName,"table-form-data"+tableName);
-        const isUpdated = this.isDocEditing(data);
-        this.isDocEditingRef.current = !!isUpdated;
-        const isMobOrTab = isMobileOrTabletMedia();
-        let archived = this.isArchived(); 
-        this.INITIAL_STATE.archived = archived;
-        this.INITIAL_STATE.tableName = tableName;
-        const fields = {};
-        const fieldsToPrepare = extendObj({},true,this.fields,customFields);
         const prepareCb = typeof prepareField =='function'? prepareField : x=> x;
         ///on effectue une mutator sur le champ en cours de modification
         Object.map(fieldsToPrepare,(field,i,counterIndex)=>{
@@ -287,11 +296,11 @@ export default class TableDataScreenComponent extends FormDataScreen{
             sessionName,
             table,
             newElementLabel : this.getNewElementLabel(),
-            printable : this.isPrintable(),///si la table data est imprimable,
+            printable : (typeof rest.printable ==='boolean' ? rest.printable : true) && this.isPrintable(),///si la table data est imprimable,
             canMakePhoneCall : this.canMakePhoneCall(),
             makePhoneCallProps:this.getMakePhoneCallProps(),
             onPressToMakePhoneCall : this.makePhoneCall.bind(this),
-            archivable : this.isArchivable(),
+            archivable : (typeof rest.archivable ==='boolean' ? rest.archivable : true) && this.isArchivable(),
             saveButton : isUpdated?'Modifier':'Enregistrer',
             currentData:data,
             hasManyData : this.hasManyData(),
@@ -355,10 +364,10 @@ export default class TableDataScreenComponent extends FormDataScreen{
         return rActionsArg;
     }
     _render ({header,content,context}){
-        const restProps = this.getCurrentEditingProps();
+        const restProps = this.getCurrentRenderingProps();
         delete restProps.tabs;
         let {tabProps,firstTabProps,tabsProps,withScrollView} = restProps;
-        let testID = this.testIDProp;
+        let testID = this.props.testID;
         tabsProps = defaultObj(tabsProps);
         tabsProps.tabContentProps = defaultObj(tabsProps.tabContentProps);
         tabsProps.tabContentProps.stopChildrenEventPropagation = typeof tabsProps.tabContentProps.stopChildrenEventPropagation =="function" ? tabsProps.tabContentProps.stopChildrenEventPropagation : false;
@@ -438,7 +447,9 @@ export default class TableDataScreenComponent extends FormDataScreen{
         return this.state.currentIndex;
     }
     isArchivable(){
-        return false;
+        const editingProps = this.getCurrentRenderingProps();
+        if(typeof editingProps.archivable =='boolean') return editingProps.archivable;
+        return !!this.props.archivable;
     }
     isArchived(data){
         data = defaultObj(data,this.state.data);
@@ -491,7 +502,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
         return true;    
     }
     isPrintable(){
-        return false;
+        return !!(this.props.printable);
     }
     /*** retourne la liste des valeurs de clé primarire associés à la table data pour la données en cours de modification 
      * Elle permet d'afficher dans la barre de titre, les identifiants de la table de données en cours de modification
@@ -519,17 +530,17 @@ export default class TableDataScreenComponent extends FormDataScreen{
         return super.isDocEditing(data);
     }
     print(data){   
-        if(!this.isPrintable() && typeof this.printProp!=='function') return;
+        if(!this.isPrintable() && typeof this.props.print !=='function') return;
         data = this.isDocEditing(data)? data : isObj(data) && this.isDocEditing(data.data)? data.data : {};
-        return this.printProp(data,this);
+        return this.props.print(data,this);
     }
     isClonable(){
-        return true;
+        return !!(this.props.clonable !==false);
     }
     clone (data){
         if(!this._isMounted() || !this.isClonable())return data;
         data = {...this.getCurrentEditingData(data)};
-        if(this.cloneProp && this.cloneProp(data,this) === false) return data;
+        if(typeof this.props.clone ==='function' && this.props.clone(data,this) === false) return data;
         this.showPreloader();
         delete data.approved;
         Object.map(['_rev',...generatedColumnsProperties,...Object.keys(this.primaryKeyFields),'_id','code','updateBy','updatedDate','createBy','updatedHour','createdHour','createdDate'],(idx)=>{
@@ -580,8 +591,8 @@ export default class TableDataScreenComponent extends FormDataScreen{
         return true;
     }
     upsertToDB(args){
-        if(typeof this.upsertDataToDB ==='function'){
-            return this.upsertDataToDB(args);
+        if(typeof this.props.upsertToDB ==='function'){
+            return this.props.upsertToDB(args);
         }
         return Promise.resolve({});
     }
@@ -596,15 +607,19 @@ export default class TableDataScreenComponent extends FormDataScreen{
         return this.doSave(args);
     }
     canCreateNew(){
-        return this.newActionProp !== false ? true : false;
+        const editingProps = this.getCurrentRenderingProps();
+        if("newAction" in editingProps){
+            return !!editingProps.newAction;
+        }
+        return this.props.newAction !== false ? true : false;
     }
     createNew(){
         return this.reset();
     }
     archive(){}
     validateData(args){
-        if(typeof this.validateDataBeforeSave =='function'){
-            return this.validateDataBeforeSave(args);
+        if(typeof this.props.validateData =='function'){
+            return this.props.validateData(args);
         }
         return true;
     }
@@ -659,7 +674,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
                     let savedData = this.isDocEditing(upserted)? upserted : data;
                     const newArgs = {tableName,actionName:action,action,table:this.table,data:savedData,result:upserted,context};
                     APP.trigger(cActions.upsert(tableName),newArgs);
-                    if(this.onSaveTableData(newArgs) === false || (isFunction(this.onSaveProp)&& this.onSaveProp(newArgs) === false)){
+                    if(this.onSaveTableData(newArgs) === false || (isFunction(this.props.onSave)&& this.props.onSave(newArgs) === false)){
                         closePreloader();
                         return;
                     }
@@ -754,20 +769,23 @@ export default class TableDataScreenComponent extends FormDataScreen{
     }
     getMakePhoneCallProps (){
         const table = this.table;
-        const makePhoneCallProps = defaultVal(this.makePhoneCallProps,table.makePhoneCallProps);
-        return defaultObj(typeof makePhoneCallProps === 'function' ? makePhoneCallProps(this.getCurrentData()) : makePhoneCallProps);
+        const makePhoneCallProps = defaultVal(this.props.makePhoneCallProps,table.makePhoneCallProps);
+        const rowData = this.getCurrentData();
+        const mP = typeof makePhoneCallProps === 'function' ? makePhoneCallProps({rowData,data:rowData,isTableData:true,props:this.props,context:this,table,tableName:this.table}) : makePhoneCallProps;
+        return mP !== false ? defaultObj(mP) : null;
     }
     makePhoneCall(data){
-        if(!this.canMakePhoneCall() || !canMakePhoneCall()) return false;
-        makePCall(defaultObj(data || this.getCurrentData()),this.getMakePhoneCallProps());
+        const mP = this.getMakePhoneCallProps();
+        if(!this.canMakePhoneCall() || !canMakePhoneCall() || !isObj(mP)) return false;
+        makePCall(defaultObj(data || this.getCurrentData()),mP);
         return false;
     }
    
     /*** archivedPermsFilter est la fonction permettant de filtres les permissions qui par défaut ne figurent pas parmis les permissions en readOnly
      * si archivedPermFilter retourne true pour une permission données alors cette permission sera ignorée
     */
-    archivedPermsFilter (perm,perms){
-        return true;
+    archivedPermsFilter (...args){
+        return !!this.archivedPermsFilterFunc(...args);
     };
     copyToClipboard(){
         return copyToClipboard({
@@ -791,7 +809,8 @@ export default class TableDataScreenComponent extends FormDataScreen{
          return ret;
     }
     getAppBarTitle (){
-        return defaultStr(this.titleProp,this.table.text,this.table.label);
+        const editingProps = this.getCurrentRenderingProps();
+        return React.isValidElement(editingProps.title,true) && editingProps.title || React.isValidElement(this.props.title,true) && this.props.title || this.table.text || this.table.label || null;
     }
     getAppBarProps(a){
         const r = super.getAppBarProps(a);
@@ -808,6 +827,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
 
 TableDataScreenComponent.propTypes = {
     ...defaultObj(FormData.propTypes),
+    prepareComponentProps : PropTypes.func, //permet d'appreter les components props à utiliser pour le rendu des données
     prepareField : PropTypes.func,//La fonction permettant de faire des mutations sur le champ field à passer au formulaire form. si elle retourne false alors la field ne sera pas pris een compte
     table : PropTypes.shape({
         tableName : PropTypes.string,
@@ -817,7 +837,7 @@ TableDataScreenComponent.propTypes = {
     unique : PropTypes.bool,//si la validation de type unique sur le champ sera effective
     fetchUniqueId : PropTypes.func,//la fonction permettant de fetch un élément unique pour la validation de type uniqueID, liée aux champs de type piece et id
     validateData : PropTypes.func,// la fonction permettant de valider les données à enregistrer
-    archivedPermsFilter : PropTypes.func,///le filtre des permissions archivées
+    archivedPermsFilter : PropTypes.func,///le filtre des permissions archivées, elle permet de laisser uniquement les permissions de faire un filtre sur les permission et ne laisser que celle qui sont considérées comme disposible en cas de document archivé
     newElementLabel : PropTypes.string,//le titre du bouton nouveau pour l'ajout d'un nouvel élément
     customActionKeyPrefix : PropTypes.oneOfType([
         PropTypes.string,

package/src/layouts/Screen/utils.js

@@ -71,11 +71,10 @@ export const renderTabsContent = ({tabs,context,data,sessionName,tabsPropsMutato
     }
     return null;
 }
-
-
-export  function renderActions({context,isUpdate,newElementLabel,makePhoneCallProps,hasManyData,onPressCopyToClipboard,archived,archivedPermsFilter,canMakePhoneCall,onPressToMakePhoneCall,saveAction,save2newAction,save2closeAction,cloneAction,readOnly,printable,archivable,data,table,perm,tableName,saveButton,datas,rows,currentData,currentDataIndex,onPressToSave,onPressToCreateNew,onPressToPrint,onPressToPrevious,onPressToNext,onPressToArchive,...rest}){
+export const readablePerms = ["read","print"];
+export const defaultArchivedPermsFilter = ({perm})=>!readablePerms.includes(perm) && !readablePerms.includes(perm.toLowerCase());
+export  function renderActions({context,isUpdate,newElementLabel,readablePerms:cReadablePerms,makePhoneCallProps,hasManyData,onPressCopyToClipboard,archived,archivedPermsFilter,canMakePhoneCall,onPressToMakePhoneCall,saveAction,save2newAction,save2closeAction,cloneAction,readOnly,printable,archivable,data,table,perm,tableName,saveButton,datas,rows,currentData,currentDataIndex,onPressToSave,onPressToCreateNew,onPressToPrint,onPressToPrevious,onPressToNext,onPressToArchive,...rest}){
     let textSave = defaultStr(saveButton)
-    archivedPermsFilter = defaultFunc(archivedPermsFilter,x=>true);
     table = defaultStr(tableName,table);
     datas = defaultArray(datas,rows);
     const self = context || {}
@@ -83,9 +82,10 @@ export  function renderActions({context,isUpdate,newElementLabel,makePhoneCallPr
     const getActionsPerms = isFunction(self.getActionsPerms) ? self.getActionsPerms.bind(self) : undefined;
     let perms = {};
     readOnly = defaultBool(readOnly,false);
+    const callArgs = {readOnly,perm,archived,isUpdate,currentData,action,data,tableName:table,table,context,datas};
     if(getActionsPerms){
         /**** getAction perms est la fonction appelée parl'objet TableData, pour retourner les permission des actions de la tableData */
-        perms = getActionsPerms.call(self,{readOnly,perm,isUpdate,currentData,action,data,tableName:table,table,context,datas})
+        perms = getActionsPerms.call(self,callArgs)
     } else {
         perms = (isNonNullString(perm)? Auth.isAllowed({resource:perm.split(':')[0],action}):Auth.isTableDataAllowed({table,action}));
     }
@@ -97,14 +97,20 @@ export  function renderActions({context,isUpdate,newElementLabel,makePhoneCallPr
         delete perms.archive;
         delete perms.archivable;
     }
-    if(isUpdate && isObj(data) && (data.wasTransferred || (data.approved && !perms.updateapproved))){
-        archived = true;
+    if(archived){     
+        archivedPermsFilter = defaultFunc(archivedPermsFilter,defaultArchivedPermsFilter);
+        Object.map(perms,(p,perm)=>{
+            if(archivedPermsFilter({perm,perms,data,tableName,readOnly,currentData,context,tableName,isUpdate})) delete perms[i];
+        });
     }
     rest = defaultObj(rest);
     newElementLabel = defaultStr(newElementLabel,"Nouveau");
     let permsObj = checkPermsActions.call(self,{...defaultObj(perms),isUpdate})
-    makePhoneCallProps = defaultObj(makePhoneCallProps);
+    makePhoneCallProps = typeof makePhoneCallProps ==='function'? makePhoneCallProps({data,rowData:data,context:{},isTableDataActions:true,table,tableName:table}): makePhoneCallProps;
     self.permsObj = permsObj;
+    if(makePhoneCallProps !== false){
+        makePhoneCallProps = defaultObj(makePhoneCallProps);
+    }
     let save = (!readOnly && !permsObj.canSave || (saveAction === false))? null: {
         text :hasManyData? 'Modifier': textSave,
         title :hasManyData? 'Modifier': textSave,
@@ -197,7 +203,7 @@ export  function renderActions({context,isUpdate,newElementLabel,makePhoneCallPr
             flat : true,
             onPress : createCallback({context:self,action:'new',callback:onPressToCreateNew})
         } : null,
-        makePhoneCall : (canMakePhoneCall && isUpdate)?{
+        makePhoneCall : (canMakePhoneCall && isUpdate && isObj(makePhoneCallProps))?{
             text : defaultStr(makePhoneCallProps.text,makePhoneCallProps.label,'Appeler'),
             isAction : true,
             icon : defaultStr(makePhoneCallProps.icon,'phone'),

package/src/navigation/Drawer/index.js

@@ -88,4 +88,5 @@ DrawerNavigator.propTypes = {
 
 export default DrawerNavigator;
 
-export * from "./utils";
+export * from "./utils";
+export * from "./items";

package/src/screens/Auth/PermProfile.js

@@ -1,7 +1,7 @@
 import showConfirm from "$components/Dialog/confirm";
-import notify from "$components/Dialog/notify";
+import notify from "$notify";
 import {defaultArray,arrayValueExists,defaultStr,uniqid} from "$cutils";
-import userDbName from "$database/data/tables/users/dbName";
+import userDbName from "$database/tables/users/dbName";
 import Auth from "$auth";
 import getData from "$database/getData";
 import getDB from "$database/getDB";