@fto-consult/expo-ui 8.53.1 → 8.54.0

package/bin/create-app/App.js

@@ -12,6 +12,8 @@ import Notifications from "$components/Notifications";
 import auth from "$src/auth";
 import tablesData, { getTable as getTableData } from "$database/tables";
 import {defaultStr} from "$cutils";
+import customFormFields from "$components/Form/customFields";
+
 
 export default function AppMainEntry(){
     return <ExpoUIProvider    
@@ -88,7 +90,7 @@ export default function AppMainEntry(){
                     test : Test, //ou test est le fom field associé au type test, ie le composant qui sera rendu pour ce type de Champ,
                 }
             */
-            customFormFields : {},
+            customFormFields,
             /*** 
                 la fonction permettant de muter les props du composant TableLink, permetant de lier les tables entre elles
                 Le composant TableLink permet de lier les données d'une tableData, L'usage dudit composant est définit dans la documentation de l'application

package/bin/create-app/src/components/Form/customFields/IdField.js

@@ -0,0 +1,28 @@
+import IdField from "$ecomponents/Form/Fields/IdField";
+
+export default class IdFieldComponent extends IdField {
+  constructor(props) {
+    super(props);
+  }
+  isValidRuleDynamic() {
+    return true;
+  }
+  
+  /*****
+    Le composant de type id, permet de générer un id pour chaque champ de ce type qui est en mode disabled en cas de modification de la donnée. 
+    L'id générée peut être le résultat d'un appel d'api distante et doit être soit un nombre soit une chaine de caractère non null. 
+    normalement les champs de type id sont unique dans une table data, la fonction suivante a pour but une fois, en cas d'ajout d'un novuel élémnent de la table data 
+    et lorsque l'évènement onBlur est appelé sur le champ de type id, d'appeler une fonction distante afin de générer une valeur de l'id pour la valeur à enregistrer en bd; 
+    @param {function} callback, la fonction de rappel à appeler une fois l'id récupérer. doit passer en paramètre de la dite fonction, l'id récupérée en bd. L'id récupérée en bd doit être unique et ne dois jamais été assigné à un autre élément de la table data
+  */
+  fetchNewIdRemotely(callback){
+    return super.fetchNewIdRemotely(callback);
+  }
+  isTextField() {
+    return true;
+  }
+}
+
+IdFieldComponent.propTypes = {
+  ...Object.assign({},IdField.propTypes)
+};

package/bin/create-app/src/components/Form/customFields/SelectTableData.js

@@ -0,0 +1,27 @@
+import SelectTableData from "$ecomponents/Form/Fields/SelectTableData";
+import React from "$react";
+import fetch from "$capi/fetch";
+
+const SelectTableDataComponentLayout = React.forwardRef(({fetchItems,...props},ref)=>{
+    return <SelectTableData
+        {...props}
+        ref = {ref}
+        parseMangoQueries = {true}
+        prepareFilters = {false}
+        /****
+            implémenter votre logique de récupération des données des en base de donées, des champs de type SelectTableData, permettant la sélection d'une table de donénes de la bd
+        */
+        fetchItems={(path,opts)=>{
+            if(typeof fetchItems =='function'){
+                return fetchItems(path,opts);
+            }
+            return fetch(path,opts);
+        }}
+    />
+});
+
+SelectTableDataComponentLayout.propTypes = SelectTableData.propTypes;
+
+SelectTableDataComponentLayout.displayName = "SelectTableDataComponentLayout";
+
+export default SelectTableDataComponentLayout;

package/bin/create-app/src/components/Form/customFields/index.js

@@ -0,0 +1,9 @@
+import IdField from "./IdField";
+import SelectTableData from "./SelectTableData";
+
+export default {
+    id : IdField,
+    idfield : IdField,
+    SelectTableData,
+    selecttabledata : SelectTableData,
+};

package/bin/create-app/src/screens/TableData/TableDataScreen.js

@@ -8,16 +8,42 @@
 
 import TableData from "$eScreen/TableData";
 import notify from "$cnotify";
+import {defaultStr} from "$cutils";
+import getTable from "$database/tables/getTable"
 
 
 export default class TableDataScreenItem extends TableData{
     /**** cette méthode est très utile pour la vérification des id de type unique en base de données
+        Elle est valable pour les champs de type id, de type piece, ou dont la propriété primaryKey est à true ou la proprité unique est à true,
+        Elle est appelée pour les champs de type id en cas d'ajout d'un élément de la table data; Lorsque l'évènement onBlur est appelé sur le champ de type id, 
+        La fonction suivante est appelée dans le but de vérifier s'il existe déjà en base de données une valeur idenetique à celle renseignée par l'utilisateur. 
         par exemple, vous avez une table en base de données dont l'id est le code et en création de la nouvelle données, vous vérifiez si celle entrée par l'utilisateur existe déjà en base ou non
         Cette fonction doit retourner une promise, qui lorsque la donnée existe, elle doit retourner l'objet correspondant à l'id recherché en bd ou généer une exception si elle n'existe pas
-           
+        @return {Promise<object>}
     */
-    fetchUniqueId ({value,field,fieldName,foreignKeyColumn,table:customT,foreignKeyTable}){
-        return Promise.resolve({});
+    fetchUniqueId ({value,field,fieldName,foreignKeyColumn,table:customTable,tableName:customTableName,foreignKeyTable}){
+        const tableObj = this.getTableObj(); //tableObj représente la table data, enreigstré dans $src/database/tables dont le nom est passé à l'item en cours
+        let tableName = defaultStr(foreignKeyTable,this.tableName,customTable,customTableName).trim().toUpperCase();
+        const foreignTableObj = tableName !== this.tableName ? getTable(tableName) : tableObj
+        foreignKeyColumn = defaultStr(foreignKeyColumn,field,fieldName);
+        if(!foreignKeyColumn){
+            return Promise.reject({message:"Impossible de faire un fetch de l'id unique  pour la  table"+foreignKeyTable+", de valuer :  "+value})
+        }
+        if(!foreignTableObj){
+            return Promise.reject({message:`Impossible de récupérer la données d'id unique lié à la table ${foreignKeyTable}, colonne ${foreignKeyColumn} car la table data est invalide`})
+        }
+        tableName = defaultStr(foreignTableObj.tableName,this.tableName,foreignTableObj.table,tableName).toUpperCase();
+        //il s'agit là de récupérer une données en base de données, ayant dont la colonne [foreignKeyColumn.trim()] = value;
+        const where = {
+            [foreignKeyColumn.trim()] : value //la condition d'appel de la données à récupérer en base de données
+        };
+        /***
+            implémenter votre propre logique afin de récupérer la données, au backend; il est à noter que l'objet à retourner, si existant en bd doit être avoir au moins un champ définit de la forme : {[foreignKeyColmn]:[valuerEnBD]}
+            Si une exception est généré, alors cette exception doit avoir un champ status = 404, pour signifier que l'objet n'existe pas en bd
+        */
+        return Promise.reject({
+            message : `Veuillez implémenter votre logique de récupération en bd du champ ${foreignKeyColumn} pour la valeur ${value} de la table data ${tableName}. Consultez le fichier $src/screens/TableDataScreen afin d'implémenetr la fonction fetchUniqueId`
+        });
     }
     /*** implémenter la routine beforeSave, avant l'enregistrement de la données liée à la table encours
         -si cette fonction retourne une chaine de caractère, alors cette chaine est considérée comme une erreur et elle est affichée via une notification à l'utilisateur

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.53.1",
+  "version": "8.54.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "react-native-paper-doc": "https://github.com/callstack/react-native-paper/tree/main/docs/docs/guides",
   "scripts": {

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

@@ -45,6 +45,11 @@ export default function TestDatagridComponent({count,...props}){
         avatar : {
            type : "image",
            label: 'Avatar',
+           withLabel : false,
+           size : 120,
+           datagrid : {
+            size : 50,
+           }
         },
         birthdate : {
             type : "date",

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

@@ -14,6 +14,12 @@ export default class FormIDField extends TextField {
         this.newFieldIdValue = undefined;
         return super.UNSAFE_componentWillReceiveProps(nextProps);
     }
+    /***
+        détermnine si la valeur est valide
+    */
+    isValidIdValue(value){
+        return isNonNullString(value) || typeof value =="number";
+    }
     componentDidMount(){
         super.componentDidMount();
         this.fetchNewId(false);
@@ -26,40 +32,51 @@ export default class FormIDField extends TextField {
             errorCb(e);
         }
     }
-
+    
+    /****
+        récupère la valeur de l'id distante
+        @param {function} cb, la fonction de rappel à appeler pour le rendu du résultata
+    */
+    fetchNewIdRemotely(cb){
+        const data = defaultObj(this.props.data);
+        const fId = typeof this.props.fetchNewId =='function'? this.props.fetchNewId({...this.props,data,columnField:this.name}) : null;
+        if(isPromise(fId)){
+            return fId.then(cb).catch(e=>{
+                console.log(e," fetching new piece id ",this.name);
+            });
+        }
+        return cb(fId);
+    }
+    
+ 
     /*** met à jour la données du numéro de piece */
     fetchNewId(focus){
         if(this.isFilter()){
             return Promise.resolve("");
         }
         const data = defaultObj(this.props.data);
-        if(!isNonNullString(this.name)) return undefined;
+        const name = defaultStr(this.name, this.props.name);
+        if(!name) return Promise.resolve("");
         const cb = (value)=>{
-            if(isNonNullString(value)){
+            if(this.isValidIdValue(value)){
                 this.newFieldIdValue = value;
                 this.validate({value}); 
                 if(focus) this.focus();
             }
         }
-        if(isNonNullString(data[this.name])){
-            cb(data[this.name]);
-            return data[this.name]
+        if(this.isValidIdValue(data[name])){
+            cb(data[name]);
+            return data[name]
         }
         setTimeout(()=>{
-            const fId = typeof this.props.fetchNewId =='function'? this.props.fetchNewId({...this.props,data,columnField:this.name}) : null;
-            if(isPromise(fId)){
-                return fId.then(cb).catch(e=>{
-                    console.log(e," fetching new piece id ",this.name);
-                });
-            }
-            return cb(fId);
+            this.fetchNewIdRemotely(cb);
         },10);
     }
     /*** retourne la valeur validée */
     getValidValue(data){
         const validValue = super.getValidValue(data);
         if(!isNonNullString(this.name)) return validValue;
-        data[this.name] = defaultStr(data[this.name],validValue,this.newFieldIdValue);
+        data[this.name] = this.isValidIdValue(data[this.name])? data[this.name] : this.isValidIdValue(validValue)? validValue : this.newFieldIdValue;
         return validValue;
     }
     isValidRuleDynamic(){
@@ -69,30 +86,34 @@ export default class FormIDField extends TextField {
         return false;
     }
     componentDidUpdate(){
-        if(!this.isFilter() && !isNonNullString(this.newFieldIdValue)){
+        if(!this.isFilter() && !this.isValidIdValue(this.newFieldIdValue)){
             this.fetchNewId();
         }
     }
     _render(props,setRef){
         delete props.validType;
+        const data = defaultObj(props.data);
+        const name = defaultStr(this.name, this.props.name);
+        const hasV = this.isValidIdValue(data[name]);
+        props.upper = typeof props.upper =="boolean"? props.upper : true;
         if(!this.isFilter()){
-            const upper = props.upper !== false ? UPPER_CASE : "";
-            if(isNonNullString(this.name) && isObj(props.data) && isNonNullString(props.data[this.name])){
+            const upper = props.upper ? UPPER_CASE : "";
+            if(name && hasV){
                 props.disabled = true;         
                 props.validType = upper;
-                props.defaultValue = props.data[this.name];
+                props.defaultValue = data[name];
             } else {
                 props.validType = 'required|'+upper;
             }
             if(typeof props.minLength !=='number'){
-                props.minLength = 2;
+                props.minLength = 2; //la longueur minimale d'un champ de type id est de 2
             }
-            const defValue = props.defaultValue = isNonNullString(props.defaultValue)? props.defaultValue : isNonNullString(this.newFieldIdValue)? this.newFieldIdValue : undefined;
+            const defValue = props.defaultValue = this.isValidIdValue(props.defaultValue)? props.defaultValue : this.isValidIdValue(this.newFieldIdValue)? this.newFieldIdValue : undefined;
             props.validRule = props.validType;
             props.contentContainerProps = Object.assign({},props.contentContainerProps)
             props.contentContainerProps.pointerEvents = defaultStr(props.contentContainerProps.pointerEvents,"auto");
             props.enableCopy = typeof props.enableCopy ==='boolean'? props.enableCopy : (props.defaultValue || this.newFieldIdValue ? true : false);
-            props.readOnly = typeof props.disabled ==='boolean' ? !!!props.disabled : typeof props.readOnly =="boolean"? !!!props.disabled : false;
+            props.readOnly = typeof props.readOnly =="boolean"? props.readOnly : typeof props.disabled ==='boolean' ? props.disabled : false;
             
             const {right} = props;
             props.right = (props)=>{
@@ -105,7 +126,6 @@ export default class FormIDField extends TextField {
                 }
                 return r;
             }
-                
             this.setValidRule(props.validType);
         } else {
             props.enableCopy = false;

package/src/components/Form/List/List.js

@@ -463,8 +463,9 @@ export default class FormListComponent extends AppComponent {
         primaryText = defaultFunc(primaryText,x=>null);
         renderAvatar = defaultFunc(renderAvatar,x=>null);
         /*** les props de chaque items de la liste */
-        itemProps= {...defaultObj(itemProps)}
+        itemProps= Object.clone(defaultObj(itemProps))
         const descriptionNumberOfLines = typeof itemProps.rows ==='number' && itemProps.rows ? itemProps.rows : 3;
+        const {left:itemLeft,right:itemRight} = itemProps;
         let counter = -1;
         let is_o = this.isHandlingObject;
         let addIconObj = null;
@@ -563,8 +564,9 @@ export default class FormListComponent extends AppComponent {
                 </View>
                 <View testID={testID+"_FormListWrapper"} style={[theme.styles.ph1]}>
                     <FlashList
-                        items = {allData}
                         responsive
+                        {...defaultObj(this.props.listProps)}
+                        items = {allData}
                         prepareItems = {(items)=>{
                             const itx = [];
                             Object.map(items,(data,index,ct)=>{
@@ -572,7 +574,7 @@ export default class FormListComponent extends AppComponent {
                                 const _index = this.getIndex({data,index,allData:items});
                                 if(is_o &&  (!isNumber(_index) && !isNonNullString(_index))) return null;
                                 counter++;
-                                const pArgs = {avatarProps,context,itemProps,data:data,index,allData:allData};
+                                const pArgs = {avatarProps,context,itemProps,data,item:data,index,allData:allData};
                                 const deletable = deletableFunc(pArgs),
                                       readOnly = readOnlyFunc(pArgs);
                                 let avatar = renderAvatar.call(context,pArgs);
@@ -590,6 +592,12 @@ export default class FormListComponent extends AppComponent {
                                         avatar = undefined;
                                     }
                                     itemProps.left = (lProps)=>{
+                                        const l = typeof itemLeft =="function"? itemLeft({...lProps,...pArgs}) : itemLeft;
+                                        if(l && React.isValidElement(l)){
+                                            return <>
+                                                {l}<Avatar suffix={ct} {...avatarProps} src={src}>{avatar}</Avatar>
+                                            </>
+                                        }
                                         return <Avatar suffix={ct} {...avatarProps} src={src}>{avatar}</Avatar>
                                     };
                                 }
@@ -616,6 +624,7 @@ export default class FormListComponent extends AppComponent {
                         renderItem = {({item})=>{
                             const {data,title,description,key,_index,props,index,readOnly,deletable} = item;
                             const titleText = React.getTextContent(title);
+                            const r = typeof itemRight =="function"? itemRight(item) : itemRight;
                             return <View key={key} testID={testID+".Cell"+key} style={[theme.styles.w100]}>
                                 <Surface key={key} elevation={5} {...itemContainerProps} style={[styles.itemContainer,itemContainerProps.style]}>
                                     <List.Item
@@ -637,6 +646,7 @@ export default class FormListComponent extends AppComponent {
                                                     React.stopEventPropagation(e);
                                                     this.delete({...data},index,title);
                                                 }}></Icon>}
+                                                {React.isValidElement(r)? r : null}
                                             </View>
                                         }}
                                     />
@@ -767,6 +777,7 @@ FormListComponent.propTypes = {
     //sa peut être un contenu noeu où alors un élément où une chaine de caractère
     onRemove : PropTypes.func,
     onDelete : PropTypes.func,
+    listProps : PropTypes.object, //les props à passer au composant FlashList
 }
 
 const styles = StyleSheet.create({

package/src/screens/Help/openLibraries.js

@@ -1,6 +1,6 @@
 module.exports = {
 	"@fto-consult/expo-ui": {
-		"version": "8.52.6",
+		"version": "8.53.1",
 		"url": "https://github.com/borispipo/expo-ui#readme",
 		"license": "ISC"
 	},
@@ -44,6 +44,11 @@ module.exports = {
 		"url": "https://github.com/react-native-async-storage/async-storage#readme",
 		"license": "MIT"
 	},
+	"@react-native-community/datetimepicker": {
+		"version": "7.6.1",
+		"url": "https://github.com/react-native-community/datetimepicker#readme",
+		"license": "MIT"
+	},
 	"@react-native-community/netinfo": {
 		"version": "11.1.0",
 		"url": "https://github.com/react-native-netinfo/react-native-netinfo#readme",
@@ -149,25 +154,26 @@ module.exports = {
 		"url": "https://docs.expo.dev/versions/latest/sdk/webbrowser/",
 		"license": "MIT"
 	},
-	"react": {
-		"version": "18.2.0",
-		"url": "https://reactjs.org/",
-		"license": "MIT"
-	},
 	"react-native": {
 		"version": "0.73.5",
 		"url": "https://reactnative.dev/",
 		"license": "MIT"
 	},
+	"react-native-big-list": {
+		"version": "1.6.1",
+		"url": "https://marcocesarato.github.io/react-native-big-list-docs/",
+		"license": "GPL-3.0-or-later"
+	},
+	"react-native-blob-util": {
+		"version": "0.18.6",
+		"url": "https://github.com/RonRadtke/react-native-blob-util",
+		"license": "MIT"
+	},
 	"react-native-gesture-handler": {
 		"version": "2.14.1",
 		"url": "https://github.com/software-mansion/react-native-gesture-handler#readme",
 		"license": "MIT"
 	},
-	"react-native-get-random-values": {
-		"version": "1.8.0",
-		"license": "MIT"
-	},
 	"react-native-reanimated": {
 		"version": "3.6.2",
 		"url": "https://github.com/software-mansion/react-native-reanimated#readme",
@@ -188,21 +194,11 @@ module.exports = {
 		"url": "https://github.com/react-native-community/react-native-svg",
 		"license": "MIT"
 	},
-	"react-native-view-shot": {
-		"version": "3.8.0",
-		"url": "https://github.com/gre/react-native-view-shot",
-		"license": "MIT"
-	},
 	"react-native-webview": {
 		"version": "13.6.4",
 		"url": "https://github.com/react-native-webview/react-native-webview#readme",
 		"license": "MIT"
 	},
-	"socket.io-client": {
-		"version": "4.7.4",
-		"url": "https://github.com/socketio/socket.io-client.git",
-		"license": "MIT"
-	},
 	"stream-browserify": {
 		"version": "3.0.0",
 		"url": "https://github.com/browserify/stream-browserify",

package/src/components/Barcode/Scanner/index.web.js

@@ -1,5 +0,0 @@
-export default function BarCodeScanner(){
-    return null;
-}
-
-BarCodeScanner.propTypes = {}