@fto-consult/expo-ui 6.17.0 → 6.17.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.17.0",
+  "version": "6.17.2",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

package/src/components/TextField/index.js

@@ -26,6 +26,8 @@ export * from "./utils";
 //const isNative = isNativeMobile();
 const isAndroid = _isAndroid() //|| isAndroidMobileBrowser();
 const isWeb = _isWeb();
+const MAX_HEIGHT = 250;
+const N_LINE_HEIGHT = 16;
 
 const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     let {defaultValue,toCase:toCustomCase,color,validType,validRule,placeholder,outlined,placeholderColor,
@@ -295,7 +297,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     const currentDefaultValue = alwaysUseLabel && displayText == emptyValue ? "" : displayText;
     const withAutoHeight = typeof autoHeight === 'boolean'? autoHeight : false;
     const height = withAutoHeight || multiline ? undefined : tHeight;
-    const inputStyle2 = withAutoHeight || multiline ? {height : heightRef.current} : null;
+    const inputStyle2 = withAutoHeight || multiline ? {height : Math.min(heightRef.current,250)} : null;
     const containerStyle = StyleSheet.flatten(containerProps.style) || {};
     const inputProps= {
         caretHidden : false,
@@ -358,6 +360,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
             inputStyle2,
             isNormalMode && styles.inputNormalMode,
             isShadowMode && styles.inputShadowMode,
+            isShadowMode && multiline && styles.inputMultipleShadowMode,
             //isShadowMode && multiline && {minHeight:heightRef.current},
             multiline && {paddingTop : isFlatMode? 12 : 7},
         ],
@@ -373,7 +376,17 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
         onContentSizeChange : (e,...rest) => {
             if(typeof onContentSizeChange ==='function' && onContentSizeChange(e,...rest) === false)  return;
             if(multiline){
-                heightRef.current = e.nativeEvent.contentSize.height;
+                const mH = e.nativeEvent.contentSize.height;
+                const width = e.nativeEvent.contentSize.width;
+                if(width>10){
+                    const txt = defaultStr(displayText);
+                    const nC = txt.split("\n").length;
+                    const nbCharsByLine = width/4;//le nombre de caractère par line à supposer qu'un caractère vaut 4pixel, length caractère vallent combien ?
+                    const maxHeight = N_LINE_HEIGHT*(nC+ (txt.length/nbCharsByLine))+MULTIPLE_HEIGHT;//la hauteur maximale sur la base de la maxHeight
+                    heightRef.current = Math.min(maxHeight,mH);
+                } else {
+                    heightRef.current = Math.min(mH,MAX_HEIGHT)
+                }
                 setToggle(!toggle);
             }
         },
@@ -387,7 +400,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
             const tVal = toCase(text2);
             if(tVal !== text){
                 if(multiline && tVal.toLowerCase()+"\n" === text.toLowerCase()){
-                    heightRef.current = Math.max(heightRef.current - 16,MULTIPLE_HEIGHT);
+                    heightRef.current = Math.max(heightRef.current - N_LINE_HEIGHT,MULTIPLE_HEIGHT);
                 }
                 setText(text2,true);
                 callOnChange(tVal);
@@ -694,6 +707,10 @@ const styles = StyleSheet.create({
         marginVertical:0,
         paddingVertical:0,
     },
+    inputMultipleShadowMode : {
+        paddingHorizontal : 7,
+        paddingVertical : 7,
+    }
 })
 
 TextFieldComponent.propTypes = {

package/src/components/Tooltip/Popover/index.js

@@ -8,7 +8,6 @@ import View from "$ecomponents/View";
 import {
   Modal,
   Animated,
-  Pressable,
   StyleSheet,
   Pressable,
   Dimensions,

package/src/layouts/Screen/TableData.js

@@ -187,10 +187,9 @@ export default class TableDataScreenComponent extends FormDataScreen{
         const isMobOrTab = isMobileOrTabletMedia();
         let archived = this.isArchived(); 
         const fields = {};
-        const fieldsToPrepare = extendObj({},true,this.fields,customFields);
         const {
             actions,
-            fields:customFields,
+            fields:preparedFields,
             onKeyEvent,
             canMakePhoneCall : customCanMakePhoneCall,
             makePhoneCallProps : customMakePhoneCallProps,
@@ -218,11 +217,11 @@ export default class TableDataScreenComponent extends FormDataScreen{
             prepareField,
             prepareComponentProps,
             ...rest
-        } = this.prepareComponentProps({...props,tableName,fields:fieldsToPrepare,isUpdated,isUpdate:isUpdated,data,datas,currentIndex});
+        } = this.prepareComponentProps({...props,tableName,fields:extendObj({},true,this.fields,props.fields),isUpdated,isUpdate:isUpdated,data,datas,currentIndex});
         const sessionName = this.getSessionName();
         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)=>{
+        Object.map(preparedFields,(field,i,counterIndex)=>{
             const currentField = isObj(field)?Object.clone(field):field;
             if(isObj(field)){
                 const columnField = defaultStr(currentField.field,i);
@@ -237,7 +236,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
                         currentField.readOnly = true;
                     }
                 });
-                const cArgs = {field:currentField,columnField,columnDef:currentField,isUpdate:isUpdated,name:columnField,index:i,counterIndex,isPrimary,fields:fieldsToPrepare,contex:this,data:this.getCurrentData(),datas,currentIndex,isUpdated,tableName,table};
+                const cArgs = {field:currentField,columnField,columnDef:currentField,isUpdate:isUpdated,name:columnField,index:i,counterIndex,isPrimary,fields:preparedFields,contex:this,data:this.getCurrentData(),datas,currentIndex,isUpdated,tableName,table};
                 if(isUpdated){
                     //la props readOnlyOnEditing permet de rendre le champ readOnly en cas de mise à jour de la tableData
                     const readOnlyOnEditing = typeof currentField.readOnlyOnEditing =='function'? currentField.readOnlyOnEditing(cArgs) : currentField.readOnlyOnEditing;