@fto-consult/expo-ui 5.9.0 → 5.10.1

package/babel.config.alias.js

@@ -39,8 +39,11 @@ module.exports = (opts)=>{
     if(fs.existsSync(configPath)){
         r["$package.json"] = r["$packageJSON"] = configPath;
     }
-    r["$eauth"] = path.resolve(expo,"auth");
+    
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "5.9.0",
+  "version": "5.10.1",
   "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.13.16",
+    "@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.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/Accordion/index.js

@@ -315,8 +315,7 @@ const DatagridFactory = (Factory)=>{
                 isLoading:customIsLoading,
                 cacheHeight,
                 toggleFilters,
-                dbSelector,
-                dbSelectorProps,
+                dataSourceSelector,
                 progressBarProps,
                 accordion,
                 preloaderProps,
@@ -363,26 +362,6 @@ const DatagridFactory = (Factory)=>{
                 color: titleColor,
                 style : [styles.title,rStyles.lineHeight,titleProps.style]
             }
-            
-            let showDBSelector = false;
-            if(dbSelector === true){
-                showDBSelector = true;
-            } 
-            dbSelectorProps = defaultObj(dbSelectorProps);
-            let title = this.props.title;
-            let _dbSelector = undefined;/* showDBSelector ? <div>
-                <DBSelector 
-                    {...dbSelectorProps}
-                    onChange = {this.onChangeDatabases.bind(this)}
-                />
-            </div> : null;*/
-            if(!title){
-                title = _dbSelector;
-                _dbSelector = null;
-            }
-            exportable = defaultBool(exportable,true);
-            let exportTableProps = this.getExportableProps();
-    
             filter = defaultFunc(filter,x=>true);
             const showFooters = this.canShowFooters();
             let restItems = [];
@@ -422,7 +401,7 @@ const DatagridFactory = (Factory)=>{
             const datagridHeader = <View testID={testID+"_HeaderContainer"} pointerEvents={pointerEvents} style={[styles.datagridHeader]}>
                 <ScrollView testID={testID+"_HeaderScrollView"} horizontal  contentContainerStyle={StyleSheet.flatten([styles.contentContainerStyle,styles.minW100])}>
                     <View testID={testID+"_HeaderContentCntainer"} style={[styles.table,styles.pullRight]}>
-                        {dbSelector}
+                        {/*this.renderDataSourceSelector()*/}
                         <View testID={testID+"_HeaderQueryLimit"} style={[styles.paginationItem]}>
                             {this.renderQueryLimit(this.getStateDataSize().formatNumber())}
                         </View>
@@ -528,7 +507,7 @@ const DatagridFactory = (Factory)=>{
                         {this.props.showActions !== false ? <DatagridActions 
                             testID={testID+"_Actions"}
                             pointerEvents = {pointerEvents}
-                            title = {title}
+                            title = {this.renderDataSourceSelector()}
                             context = {this}
                             selectedRows = {Object.assign({},this.selectedRows)}
                             selectedRowsActions = {this.renderSelectedRowsActions.bind(this)}

package/src/components/Datagrid/Actions/Header.js

@@ -13,7 +13,7 @@ const selectedTitle ='#f50057';
 export const getSelectedBackgroundColor = x=> theme.isDark()?theme.colors.surface : selectedBackgroundColor;
 
 export default function DatagridActionsHeaderComponent({title,selected,testID,children,style,pointerEvents,...props}) {
-  title = defaultStr(title);
+  title = React.isValidElement(title,true)? title : "";
   const bStyle = selected && theme.isDark()? {
     borderBottomColor : theme.colors.divider,
     borderTopColor : theme.colors.divider,

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

@@ -9,7 +9,6 @@ import theme from "$theme"
 import Button from "$ecomponents/Button";
 import { StyleSheet } from "react-native";
 import Label from "$ecomponents/Label";
-import APP from "$capp/instance";
 import { useWindowDimensions } from "react-native";
 
 export default function DatagridActions (_props){

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;
 
@@ -339,39 +340,8 @@ export default class CommonDatagridComponent extends AppComponent {
             windowHeight,
         }
         this.selectableColumnRef = React.createRef(null);
-        let isPv = this.isPivotDatagrid();
-        if(isPv){
-            isPv = this.props.dataSourceSelector !== false;
-        } else isPv = this.props.dataSourceSelector === true ? true : false;
-        if(isPv){
-            let dataSourceSelectorProps = defaultObj(this.props.dataSourceSelectorProps);
-            ['table','tableName'].map((tb,idx)=>{
-                dataSourceSelectorProps[tb] = defaultStr(this.props[tb],dataSourceSelectorProps[tb]);
-            });
-            let cDB = []//DBSelector.getDefaultSelected(dataSourceSelectorProps,this.currentDataSources,this.props);
-            let sDB = this.getSessionData().selectedDataSources;
-            cDB = Object.toArray(cDB);
-            if(cDB.length){
-                this.currentDataSources = cDB
-            } else {
-                this.currentDataSources = sDB;
-            }   
-            this.setSessionData({selectedDataSources:this.currentDataSources});
-        } else {
-            this.currentDataSources = Object.toArray(this.currentDataSources);
-        }
-        if(isPv){
-            isPv = this.props.dataSourceSelector !== false;
-        } else isPv = this.props.dataSourceSelector === true ? true : false;
-        if(isPv){
-            let dataSourceSelectorProps = defaultObj(this.props.dataSourceSelectorProps);
-            ['table','tableName'].map((tb)=>{
-                dataSourceSelectorProps[tb] = defaultStr(this.props[tb],this[tb],dataSourceSelectorProps[tb]);
-            });
-            this.setSessionData({selectedDataSources:this.currentDataSources});
-        } else {
-            this.currentDataSources = Object.toArray(this.currentDataSources);
-        }
+        this.currentDataSources = Object.toArray(this.getSessionData().selectedDataSources);
+        this.setSessionData({selectedDataSources:this.currentDataSources});
         this.persistDisplayType(this.state.displayType);
     }
     /*** si l'on peut récuperer à distance, les colonnes seulement visibles */
@@ -621,13 +591,13 @@ export default class CommonDatagridComponent extends AppComponent {
         return this.selectedRowsCount <= 1 ? true : false;
     }
     /**** fonction appelée lorsque l'on clique sur la checkbox permettant de sélectionner la ligne */
-    handleRowToggle ({row,rowIndex,rowData,rowKey,index, selected,cb,callback},cb2){
-        if(!this.canSelectRow(row)) return false;
-        if(typeof rowKey !=='string' && typeof rowKey !=='number') return false;
+    handleRowToggle ({rowIndex,rowKey,index, selected,cb,callback},cb2){
+        if((typeof rowKey !=='string' && typeof rowKey !=='number')) return false;
+        const row = this.getRowByKey(rowKey);
+        if(!isObj(row) || !this.canSelectRow(row)) return false;
         let selectableMultiple = this.isSelectableMultiple();
         rowIndex = defaultNumber(rowIndex,index);
         cb = defaultFunc(cb,callback,cb2)
-        row = rowData = defaultObj(row,rowData);
         const size = this.selectedRowsCount;
         if(selected && !this.canSelectCheckedRow()){
             notify.warning("Vous ne pouvez sélectionner plus d'un élément");
@@ -655,14 +625,13 @@ export default class CommonDatagridComponent extends AppComponent {
             this.selectedRowsCount = Math.max(this.selectedRowsCount-1,0);
             delete selectedRows[rowKey];
         }
-        
         this.toggleSelectableColumnCheckbox();
         if(isObj(this.datagridActionsContext) && isFunction(this.datagridActionsContext.setSelectedRows)){
             this.datagridActionsContext.setSelectedRows(selectedRows,x =>{
                 this.callSRowCallback({selected,row,rowIndex,rowKey,cb})
             });
         } else {
-            this.callSRowCallback({selected,rowData,row,rowIndex,rowKey,cb});
+            this.callSRowCallback({selected,rowData:row,row,rowIndex,rowKey,cb});
         }
         return true;
     }
@@ -1054,6 +1023,25 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         return null;
     }
+    renderDataSourceSelector(){
+        const t = isNonNullString(this.props.title)? <Label testID={"RN_DatagridTitleProp"}>{this.props.title}</Label> : React.isValidElement(this.props.title)? this.props.title : null;
+        const table = defaultStr(this.props.table,this.props.tableName);
+        const dS = dS === false ? null : typeof this.props.dataSourceSelector ==='function'? this.props.dataSourceSelector({
+            defaultValue : this.currentDataSources,
+            onChange : this.onChangeDataSources.bind(this),
+            tableName:table,
+            table,
+            isAccordion : this.isAccordion,
+            context : this,
+        }) : null;
+        if(React.isValidElement(dS)){
+            return <View testID={'RN_Datagrid_DataSourceSelectorContainer'} style={[theme.styles.flex,theme.styles.flexRow,theme.styles.justifyContentFlexStart,theme.styles.alignItemsCenter]}>
+                {dS}
+                {t}
+            </View>
+        }
+        return t;
+    }
     /*** permet de faire le rendu de certaines entête personalisés 
      * utile lorsque l'on veut par exemple afficher d'autres information au niveau de l'entête du tableau
     */
@@ -2716,7 +2704,9 @@ export default class CommonDatagridComponent extends AppComponent {
         const canUpdateFooters = !!(updateFooters !== false && hasFootersFields);
         this.hasFoundSectionData.current = false;
         this.sectionListDataSize.current = 0;
+        this.rowsByKeys = {};
         const isSList = this.isSectionList(sectionListColumns);
+        this.rowsByKeys = {};
         const sortingField = isNonNullString(this.sortRef.current.column) && isObj(this.state.columns) && this.state.columns[this.sortRef.current.column] || {};
         const hasSortField = Object.size(sortingField,true);
         if(this.canAutoSort() && isNonNullString(this.sortRef.current.column) && hasSortField){
@@ -2940,7 +2930,7 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         const isCollapsed = this.isSectionListCollapsed(key);
         return <View testID={testID+"_ContentContainer"}  style={[theme.styles.w100,isA && this.state.displayOnlySectionListHeaders && {borderTopColor:theme.colors.divider,borderTopWidth:1},isA ? [theme.styles.ph2,theme.styles.pt1] : [theme.styles.pt1,theme.styles.noPadding,theme.styles.noMargin],theme.styles.justifyContentCenter,theme.styles.alignItemsCenter,theme.styles.pb1,!cells && theme.styles.ml1,theme.styles.mr1,cStyle]}>
-            {false && <View testID={testID+"_LabelAndCollapsedContainer"} style={[theme.styles.w100,theme.styles.row,theme.styles.alignItemsCenter,theme.styles.justifyContentStart]}>
+            {false && <View testID={testID+"_LabelAndCollapsedContainer"} style={[theme.styles.w100,theme.styles.row,theme.styles.alignItemsCenter,theme.styles.justifyContentFlexStart]}>
                 <Icon
                     name = {isCollapsed?"chevron-up":"chevron-right"}
                     color = {theme.colors.primaryOnSurface}
@@ -2960,9 +2950,9 @@ export default class CommonDatagridComponent extends AppComponent {
         if(isObj(rowKey)){
             rowKey = this.getRowKey(rowKey,rowIndex);
         }
-        if(isObj(this.selectedRows[rowKey])) return true;
-        if(typeof rowKey !=='string' && typeof rowKey !=='number' || !isObj(this.selectedRowsRefs[rowKey])) return false;
-        return !!this.selectedRowsRefs[rowKey].checked;
+        if(typeof rowKey !=='string' && typeof rowKey !=='number') return false;
+        if(!isObj(this.selectedRowsRefs[rowKey])) return false;
+        return !!(isObj(this.selectedRows[rowKey]) && this.selectedRowsRefs[rowKey].checked);
     }
    /*** permet de définir les lignes sélectionnées du datagrid */
    setSelectedRows (rows){
@@ -3152,20 +3142,18 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         return anchor(toggleItem)
     }
+    /**** cette fonction est appeléee lorsque la source de données change
+        le composant dataSourceSelector doit retourner un table dataSelector, qui prendra en paramètre l'objet onChange, qui systématiquement doit être appelé lorsque la source de données change
+    */
     onChangeDataSources(args){
-        let {dataSources,server} = args;
+        let {dataSources} = defaultObj(args);
+        if(!Array.isArray(dataSources)) return;//la fonction onChangeDataSource doit retourner un dataSource de type array
         if(this.props.onChangeDataSources =='function' && this.props.onChangeDataSources({dataSources,prev:this.currentDataSources}) === false) return;
+        if(React.isEquals(this.previousDataSources,dataSources)) return;
         this.currentDataSources = dataSources;
         this.setSessionData({selectedDatabases:dataSources}) 
-        if(JSON.stringify({dataSources:this.previousDataSources}) != JSON.stringify({dataSources})){
-            if(isObj(this.props.dataSourceSelectorProps) && isFunction(this.props.dataSourceSelectorProps.onChange)){
-                args.datagridContext = this;
-                this.props.dataSourceSelectorProps.onChange(args);
-            }
-            this.refresh(true);
-        } 
+        this.refresh(true);
         this.previousDataSources = dataSources;
-        this.previousServer = server;
     }
     prepareFetchData(fetchData){
         this.INITIAL_STATE.fetchData = defaultVal(fetchData,this.props.fetchData);
@@ -3368,17 +3356,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;
@@ -3742,6 +3733,9 @@ export default class CommonDatagridComponent extends AppComponent {
     renderSelectFieldCell(args){
         return this.renderSelectFieldCell(args);
     }
+    getRowByKey(rowKey){
+        return this.rowsByKeys[rowKey] || null;
+    }
     /*** retourne le rendu d'une cellule de la ligne du tableau 
     @parm, rowData, object, la ligne à afficher le rendu du contenu
     @param , rowInidex, l'indice de la ligne dont on affiche le rendu en cours
@@ -3759,10 +3753,11 @@ export default class CommonDatagridComponent extends AppComponent {
         const renderText = isSectionListHeader === true || customRenderRowCell === false ? true : false;
         if(!isObj(rowData)) return renderText ? null : {render:null,extra:{}};
         rowIndex = isDecimal(rowIndex)? rowIndex : isDecimal(index)? index : undefined;
+        rowKey = rowKey || typeof rowKey =='number' ? rowKey : this.getRowKey(rowData,rowIndex);
+        this.rowsByKeys[rowKey] = rowData;
         rowCounterIndex = isDecimal(rowCounterIndex) ? rowCounterIndex : isDecimal(rowIndex)? rowIndex+1 : defaultDecimal(rowCounterIndex);
         if(this.isSelectableColumn(columnDef,columnField)){
             if(renderText) return null;
-            rowKey = rowKey ? rowKey : this.getRowKey(rowData,rowIndex);
             return {render :handleSelectableColumn === false ? null : this.renderSelectableCheckboxCell({
             ...arg,
             rowKey,
@@ -3770,7 +3765,7 @@ export default class CommonDatagridComponent extends AppComponent {
             checked : this.isRowSelected(rowKey,rowIndex),
             rowsRefs : this.selectedRowsRefs,
             onPress : ({checked})=>{
-                return this.handleRowToggle({row:rowData,rowData,rowIndex,rowKey,selected:!checked})
+                return this.handleRowToggle({rowIndex,rowKey,selected:!checked});
             }
             }),style:{},extra:{style:{}}};
         } else if((columnField == this.getIndexColumnName())){
@@ -3812,6 +3807,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/Dashboard/index.js

@@ -80,7 +80,8 @@ export default class DatagridDashboard extends TableData {
             autoSort,
             exportable,
             selectable,pagin,showPagination,
-            sessionName,onMount,onUnmount,onFetchData,dataSourceSelector,dataSourceSelectorProps,queryLimit,
+            sessionName,onMount,onUnmount,onFetchData,dataSourceSelector,
+            queryLimit,
             filters,
             filterOrOperator,
             filterAndOperator,

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

@@ -115,7 +115,8 @@ const DatagridFactory = (Factory)=>{
                 autoSort,
                 exportable,
                 selectable,pagin,showPagination,
-                sessionName,onMount,onUnmount,onFetchData,dataSourceSelector,dataSourceSelectorProps,queryLimit,
+                sessionName,onMount,onUnmount,onFetchData,dataSourceSelector,
+                queryLimit,
                 filters,
                 chartContainerProps,
                 accordion, //pour le rendu du header en accordion
@@ -125,22 +126,6 @@ const DatagridFactory = (Factory)=>{
             chartContainerProps = defaultObj(chartContainerProps);
             testID = this.getTestID();
             rest = defaultObj(rest);
-            if(dataSourceSelector === true){
-                showDataSourceSelector = true;
-            }  else if(dataSourceSelector ===false){
-                showDataSourceSelector = false;
-            }
-            dataSourceSelectorProps = defaultObj(dataSourceSelectorProps);
-            let _dataSourceSelector = undefined;/* showDataSourceSelector ? <div>
-                <DBSelector 
-                    {...dataSourceSelectorProps}
-                    onChange = {this.onChangeDatabases.bind(this)}
-                />
-            </div> : null;*/
-            if(!title){
-                title = _dataSourceSelector;
-                _dataSourceSelector = null;
-            }
             exportable = defaultBool(exportable,true);
             let isMobile = isMobileOrTabletMedia();
             selectable = defaultVal(selectable,true);
@@ -295,7 +280,7 @@ const DatagridFactory = (Factory)=>{
                 <View ref={this.layoutRef} testID={testID+"_LayoutContainer"}>
                     {this.props.showActions !== false ? <DatagridActions 
                         pointerEvents = {pointerEvents}
-                        title = {title}
+                        title = {this.renderDataSourceSelector()}
                         context = {this}
                         selectedRows = {Object.assign({},this.selectedRows)}
                         selectedRowsActions = {this.renderSelectedRowsActions.bind(this)}

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/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,7 +769,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
     }
     getMakePhoneCallProps (){
         const table = this.table;
-        const makePhoneCallProps = defaultVal(this.makePhoneCallProps,table.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;
@@ -769,8 +784,8 @@ export default class TableDataScreenComponent extends FormDataScreen{
     /*** 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({
@@ -794,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);
@@ -811,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,
@@ -820,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,8 +97,11 @@ 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");

package/src/navigation/Drawer/index.js

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