@fto-consult/expo-ui 5.7.5 → 5.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "5.7.5",
+  "version": "5.7.7",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -58,17 +58,17 @@
   },
   "homepage": "https://github.com/borispipo/expo-ui#readme",
   "dependencies": {
-    "@emotion/native": "^11.10.0",
+    "@emotion/native": "^11.10.6",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.10.48",
+    "@fto-consult/common": "^3.10.69",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-native-community/datetimepicker": "^6.7.3",
     "@react-native-community/netinfo": "^9.3.7",
     "@react-native/assets-registry": "^0.72.0",
-    "@react-navigation/native": "^6.1.1",
-    "@react-navigation/native-stack": "^6.9.7",
+    "@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.10",
@@ -83,12 +83,12 @@
     "expo-web-browser": "~12.1.1",
     "file-saver": "^2.0.5",
     "fs-extra": "^11.1.1",
-    "google-libphonenumber": "^3.2.31",
+    "google-libphonenumber": "^3.2.32",
     "htmlparser2-without-node-native": "^3.9.2",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-content-loader": "^6.2.0",
+    "react-content-loader": "^6.2.1",
     "react-dom": "^18.2.0",
     "react-native": "^0.71.3",
     "react-native-big-list": "^1.6.0",

package/src/components/Countries/SelectCountry.js

@@ -12,8 +12,19 @@ import appConfig from "$capp/config";
 /**** retourne les props du champ de type countrie */
 export const getCountryFieldProps = (props)=>{
     props = defaultObj(props);
-    let {imageProps,...rest} = props;
+    let {imageProps,defaultValue,...rest} = props;
+    const countryStr = defaultStr(appConfig.countryCode).toUpperCase();
     imageProps = defaultObj(imageProps);
+    if(rest.multiple){
+        if(isNonNullString(defaultValue)){
+            defaultValue = defaultValue.split(",");
+        }
+        if(!defaultValue){
+            defaultValue = [countryStr];
+        }
+    } else {
+        defaultValue = defaultStr(defaultValue,countryStr);
+    }
     return {
         label : defaultStr(props.label,props.text,'Pays'),
         type : 'select',
@@ -32,8 +43,8 @@ export const getCountryFieldProps = (props)=>{
                 <Label>{item.label}</Label>
             </View>
         },
-        defaultValue : appConfig.countryCode,
         ...defaultObj(rest),
+        defaultValue,
     }
 }
 

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

@@ -774,12 +774,15 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         const footers = this.getFootersFields(true);
         let isAccordion = this.isAccordion();
+        const rowKeysColumns = {};
         Object.mapToArray(columns,(headerCol1,headerIndex)=>{
             if(!isObj(headerCol1)) return;
-            const headerCol = Object.clone(headerCol1);
-            if(isAccordion && headerCol.accordion === false) return null;
-            let header = {...headerCol};
+            const header = Object.clone(headerCol1);
             header.field = defaultStr(header.field, headerIndex)
+            if(header.primaryKey){
+                rowKeysColumns[header.field] = true;
+            }
+            if(isAccordion && header.accordion === false) return null;
             header.type = defaultStr(header.jsType,header.type,"text").toLowerCase();
             if(header.type.contains("date")){
                 this.dateFields[header.field] = header;
@@ -799,7 +802,8 @@ export default class CommonDatagridComponent extends AppComponent {
             if(!this.hasColumnsHalreadyInitialized){
                 this.initColumnsCallback({...header,colIndex,columnField:header.field});
             }
-        })
+        });
+        this.rowKeysColumns = Object.keys(rowKeysColumns);
         return footers;
     }
     getFootersFields(init){
@@ -3436,16 +3440,30 @@ export default class CommonDatagridComponent extends AppComponent {
     isVirtual(){
         return false;
     }
-
     getRowKey(row,rowIndex){
         let k = rowIndex;
+        if(isFunction(this.props.getRowKey)){
+            k = this.props.getRowKey({row,rowData:row,data:row,rowIndex,item:row,index:rowIndex,context:this});
+            if(typeof k =='string' && k || typeof k =='number'){
+                return k;
+            }
+        } 
         const rowKey = this.props.rowKey;
+        const rKey = Array.isArray(this.rowKeysColumns) && this.rowKeysColumns.length ? this.rowKeysColumns : null;
+        if(rKey){
+            const rr = React.getKeyFromObj(row,rKey);
+            if(rr){
+                return rr;
+            }
+        }
+        const rkey = React.getKeyFromObj(row,rowIndex,rowKey);
+        if(rkey){
+            return rkey;
+        }
         if(isNonNullString(rowKey) && isObj(row) && (isNonNullString(row[rowKey]) || isDecimal(row[rowKey]))){
             return row[rowKey];
         } 
-        if(isFunction(this.props.getRowKey)){
-            k = this.props.getRowKey({row,rowData:row,data:row,rowIndex,item:row,index:rowIndex,context:this});
-        } else if(isObj(row)){
+        if(isObj(row)){
             return React.getKey(row,rowIndex);
         } else k = rowIndex;
         if(isObj(row) && isNonNullString(row.rowKey)){

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

@@ -2,11 +2,8 @@ import SelectField from "./SelectField";
 import {getCountryFieldProps} from "$ecomponents/Countries";
 
 export default class FormFieldSelectCountry extends SelectField{
-    getComponentProps(props){
-        return {...getCountryFieldProps(),...defaultObj(props)}
-    }
     _render(props){
-        return super._render(this.getComponentProps(props))
+        return super._render(getCountryFieldProps(props))
     }
 }
 FormFieldSelectCountry.propTypes = {

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

@@ -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,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,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(isNonNullString(foreignKeyColumn)){
         foreignKeyColumn = foreignKeyColumn.trim();
@@ -49,7 +49,7 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,foreignKeyTable
         }
     }
     const isMounted = React.useIsMounted();
-    const showAdd = isFilter || !foreignKeyTable ? false : React.useRef(Auth.isTableDataAllowed({table:foreignKeyTable,action:'create'}) ? defaultVal(props.showAdd,props.showAddBtn,true) : false).current;
+    
     const [state,setState] = React.useState({
         items : [],
     });
@@ -99,14 +99,19 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,foreignKeyTable
         }
     }
     React.useEffect(()=>{
-        const onUpsertData = ()=>{return isMounted()?context.refresh():undefined};
-        APP.on(actions.upsert(foreignKeyTable),onUpsertData);
-        APP.on(actions.onRemove(foreignKeyTable),onUpsertData);
         context.refresh();
+        if(bindUpsert2RemoveEvents !== false){
+            const onUpsertData = ()=>{return isMounted()?context.refresh():undefined};
+            APP.on(actions.upsert(foreignKeyTable),onUpsertData);
+            APP.on(actions.onRemove(foreignKeyTable),onUpsertData);
+            return ()=>{
+                APP.off(actions.upsert(foreignKeyTable),onUpsertData);
+                APP.off(actions.onRemove(foreignKeyTable),onUpsertData);
+            };
+        }
         return ()=>{
-            APP.off(actions.upsert(foreignKeyTable),onUpsertData);
-            APP.off(actions.onRemove(foreignKeyTable),onUpsertData);
-        };
+            
+        }
     },[]);
     
     let dat = isNonNullString(foreignKeyColumnValue)? {
@@ -227,13 +232,23 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,foreignKeyTable
     if(!ttitle){
         const txt = defaultStr(props.label,props.text);
         const tt = defaultStr(fKeyTable.text,fKeyTable.label);
-        ttitle = txt && tt ? "{0} [1]".sprintf(txt,tt) : tt || txt;
+        ttitle = txt && tt ? "{0} [{1}]".sprintf(txt,tt) : tt || txt;
     }
     dialogProps.title = ttitle;
+    const showAdd = React.useMemo(()=>{
+        if(isFilter || !foreignKeyTable) return false;
+        if(typeof canShowAdd ==='function'){
+            return canShowAdd({...props,table:foreignKeyTable,foreignKeyColumn,foreignKeyLabel,sortDir,foreignKeyTableObj:fKeyTable,foreignKeyTable})
+        }
+        if(Auth.isTableDataAllowed({table:foreignKeyTable,action:'create'})){
+            return !!defaultVal(customShowAdd,true);
+        }
+        return false;
+    },[isFilter,foreignKeyTable,customShowAdd]);
     return <Dropdown
         {...props}
         isFilter = {isFilter}
-        showAdd = {!isFilter && showAdd}
+        showAdd = {showAdd}
         {...state}
         isLoading = {isLoading}
         dialogProps = {dialogProps}
@@ -266,25 +281,28 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,foreignKeyTable
             return rItem(p);
         }}
         hideOnAdd
-        onAdd = {({onGoBack})=>{
+        onAdd = {(args)=>{
             onAddProps = defaultObj(isFunction(onAddProps)? onAddProps.call(context,{context,foreignKeyTable,dbName,props}) : onAddProps);
-            return navigateToTableData({...onAddProps,tableName : foreignKeyTable,onGoBack})
+            if(typeof onAdd =='function'){
+                return onAdd({...args,...onAddProps});
+            }
+            return navigateToTableData({...onAddProps,foreignKeyTable,table:foreignKeyTable,foreignKeyColumn,tableName : foreignKeyTable,...args})
         }}
     />
 });
 
 TableDataSelectField.propTypes = {
     ...Dropdown.propTypes,
+    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
     mutateFetchedItems : PropTypes.func, //la fonction permettant d'effectuer une mutation sur l'ensemble des donnéees récupérées à distance
     fetchItems : PropTypes.func,//la fonction de rappel à utiliser pour faire une requête fetch permettant de selectionner les données à distance
     getForeignKeyTable : PropTypes.func, //la fonction permettant de récupérer la fKeyTable data dont fait référence le champ
     foreignKeyTable : PropTypes.string, //le nom de la fKeyTable data à laquelle se reporte le champ
     fetchItemsPath : PropTypes.string, //le chemin d'api pour récupérer les items des données étrangères en utilisant la fonction fetch
     beforeFetchItems : PropTypes.func, //appelée immédiatement avant l'exécution de la requête fetch
-    foreignKeyColumn : PropTypes.oneOfType([
-        PropTypes.string,
-        //PropTypes.arrayOf(PropTypes.string)
-    ]).isRequired,//le nom de la clé étrangère à laquelle fait référence la colone dans la fKeyTable
+    foreignKeyColumn : PropTypes.string,//le nom de la clé étrangère à laquelle fait référence la colone dans la fKeyTable
     foreignKeyLabel : PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.arrayOf(PropTypes.string), ///si c'est un tableau, il s'agit des colonnes qui seront utilisées pour le rendu du foreignKey

package/src/components/SimpleSelect/index.js

@@ -22,15 +22,11 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         height: 0,
         width: 0,
     });
-    const [state,setState] = React.useState({
-        value : defaultValue !== undefined? defaultValue:undefined,
-        visible : controlled?controlledVisible:false,
-        items : [],
-    });
+    const [visible,setVisible] = React.useState(controlled?controlledVisible:false)
+    const [value,setValue] = React.useState(defaultValue !== undefined? defaultValue:undefined);
     contentContainerProps = defaultObj(contentContainerProps);
     const prevLayout = React.usePrevious(layout);
     filter = defaultFunc(filter,x=>true);
-    const {value,visible} = state;
     compare = defaultFunc(compare,(a,b)=> a === b);
     const prevValue = React.usePrevious(value,compare);
     const selectedRef = React.useRef(undefined);
@@ -89,7 +85,6 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
             items.push(mItem);
         });
         return items;
-        //return ({...state,value:currentSelectedValue,items});
     },[menuItems])
     React.useEffect(()=>{
         if(compare(defaultValue == value)) return;
@@ -99,11 +94,14 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         if(update !== true && compare(value,node.value)) return;
         selectedRef.current = node;
         if(update === true){
-            const nState = {...state,value:node.value,visible:controlled?undefined:false};
             if(controlled && onDismiss){
-                if(onDismiss(nState,defaultObj(selectedRef.current)) === false) return;
+                if(onDismiss({visible,value,items,defaultValue},defaultObj(selectedRef.current)) === false) return;
+            }
+            setValue(node.value);
+            const vv = controlled?undefined:false;
+            if(typeof vv =='boolean' && vv !==visible){
+                setVisible(vv);
             }
-            setState(nState);
         }
     }
     const context = {};
@@ -117,7 +115,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
             }
         }
         if(selectedRef.current !== undefined){
-            setState({...state,value:defaultValue});
+            setValue(defaultValue);
         }
     }
     context.getValue = ()=> value;
@@ -137,22 +135,22 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         if(!isEditable) return;
         if(controlled){
             if(onShow){
-                onShow(state);
+                onShow({visible,value,items,defaultValue});
             }
             return;
         }
         if(!visible){
-            setState({...state,visible:true});
+            setVisible(true);
         }
     }
     const close = context.close = (args)=>{
         if(controlled){
             if(onDismiss){
-                onDismiss(state,defaultObj(selectedRef.current));
+                onDismiss({visible,value,items,defaultValue},defaultObj(selectedRef.current));
             }
             return false;
         }
-        setState({...state,visible:false,sk:!!!state.sk});
+       setVisible(false);
         return false;
     }
     context.disable = ()=>{
@@ -191,7 +189,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         setLayout(layout);
         if(controlled && onDismiss){
             if(isDiff){
-                onDismiss(state,true);
+                onDismiss({visible,value,items,defaultValue},true);
             }
         } 
     };

package/src/components/TextField/index.js

@@ -324,7 +324,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
             const txt = defaultStr(text).trim();
             if((txt.length <=1 && !error)){
                 if(validType.contains("unique") || validType.contains("required")){
-                    callOnChange(txt);
+                    callOnChange(toCase(txt));
                 }
             }
             if(props.onBlur){
@@ -388,9 +388,10 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
                     }
                 }
             }
-            if(toCase(text2) !== text){
+            const tVal = toCase(text2);
+            if(tVal !== text){
                 setText(text2,true);
-                callOnChange(text2);
+                callOnChange(tVal);
             }
         },
         selection,

package/src/layouts/Screen/ScreenWithOrWithoutAuthContainer.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import {defaultObj,defaultStr,defaultNumber,defaultBool} from "$cutils";
 import View from "$ecomponents/View";
 import { useNavigation} from '$cnavigation';
-import Fab from "$elayouts/Fab";
+import Fab from "$layouts/Fab";
 import APP from "$capp";
 import AppBar,{createAppBarRef} from "$elayouts/AppBar";
 import ErrorBoundary from "$ecomponents/ErrorBoundary";

package/src/layouts/Screen/utils.js

@@ -205,7 +205,7 @@ export  function renderActions({context,isUpdate,newElementLabel,makePhoneCallPr
             flat : true,
             onPress : createCallback({context:self,action:'makePhoneCall',force:true,callback:onPressToMakePhoneCall})
         }:null,
-        copyToClipboard : (isUpdate)?{
+        copyToClipboard : (false && isUpdate)?{
             text : 'Copier',
             icon : COPY_ICON,
             title : 'Copier',

package/src/navigation/utils.js

@@ -7,7 +7,9 @@ import {isNonNullString,defaultStr,defaultObj,isObj} from "$cutils";
 
 export const tableDataRouteName = 'TableData';
 
-export const navigateToTableData = function(tableName,params,actionType){
+export const structDataRouteName = 'StructData';
+
+const navigateToTableOrStructData = function(tableName,params,actionType){
     if(isNonNullString(tableName)){
         tableName = {tableName};
     }
@@ -19,11 +21,11 @@ export const navigateToTableData = function(tableName,params,actionType){
     if(!tableName) return;
     const {perm} = params;
     let isAllowed = true;
-    actionType = defaultStr(actionType,"tabledata").replaceAll(" ","").toLowerCase();
+    actionType = defaultStr(actionType,"tabledata").replaceAll("_","").replaceAll("-","").replaceAll(" ","").toLowerCase();
     const isTableData = actionType =='tabledata';
     if(isNonNullString(perm)){
         isAllowed = Auth.isAllowedFromStr(perm)
-    } else if(actionType =='struct_data') {
+    } else if(actionType =='structdata') {
         isAllowed = Auth.isStructDataAllowed({table:tableName})
     } else if(isTableData){
         isAllowed = Auth.isTableDataAllowed({table:tableName});
@@ -31,10 +33,18 @@ export const navigateToTableData = function(tableName,params,actionType){
     if(!isAllowed){
         return Auth.showError();
     }
-    params.routeName = buildScreenRoute(tableName,tableDataRouteName);
+    params.routeName = buildScreenRoute(tableName,actionType =='structdata'? structDataRouteName : tableDataRouteName);
     return navigate(params)
 }
 
+export const navigateToTableData = (tableName,params)=>{
+    return navigateToTableOrStructData(tableName,params,"tabledata");
+}
+
+export const navigateToStructData = (tableName,params)=>{
+    return navigateToTableOrStructData(tableName,params,"structdata");
+}
+
 export const buildScreenRoute = function(tableName,parent){
     if(isObj(tableName)){
         tableName = defaultStr(tableName.tableName,tableName.table);
@@ -51,6 +61,11 @@ export const getTableDataRouteName = function(tableName){
     return buildScreenRoute(tableName,tableDataRouteName);
 }
 
+export const getStructDataRouteName = function(tableName){
+    return buildScreenRoute(tableName,structDataRouteName);
+}
+
+export const getStructDataScreenName = getStructDataRouteName;
 export const getTableDataScreenName = getTableDataRouteName;
 
 /*** permet d'obtenir le lien vers l'écran table data permettant de lister les données de la table data */
@@ -58,6 +73,10 @@ export const getTableDataListRouteName = function(tableName){
     return buildScreenRoute(tableName,tableDataRouteName+"/LIST/");
 }
 
+export const getStructDataListRouteName = function(tableName){
+    return buildScreenRoute(tableName,structDataRouteName+"/LIST/");
+}
+
 export const getTableDataListScreenName = getTableDataListRouteName;
 
 export const navigateToTableDataList = function (tableName,params){

package/src/screens/ScreenWrapper.js

@@ -63,7 +63,9 @@ export default function ScreenWrapperNavComponent(_props){
     },[]);
     setScreenOptions(options);
     const allowDrawer = typeof options.allowDrawer ==='boolean'? options.allowDrawer : typeof options.withDrawer =='boolean'? options.withDrawer : typeof Screen.allowDrawer =='boolean'? Screen.allowDrawer : typeof Screen.withDrawer =='boolean' ? Screen.withDrawer : Screen.isModalScreen == true ? false : true;
+    const withFab = typeof options.withFab ==='boolean' ? options.withFab : typeof Screen.withFab =='boolean'? Screen.withFab : allowDrawer;
     return <Screen 
+        withFab = {withFab}
         {...rest}
         key = {sanitizedName}
         authRequired={authRequired||allowDrawer}