@fto-consult/expo-ui 2.10.3 → 2.10.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.10.3",
+  "version": "2.10.5",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -65,7 +65,7 @@
     "@expo/metro-config": "^0.4.0",
     "@expo/vector-icons": "^13.0.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.19.2",
+    "@fto-consult/common": "^1.19.5",
     "@fto-consult/expo-ui": "^2.9.2",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",

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

@@ -952,6 +952,8 @@ export default class CommonDatagridComponent extends AppComponent {
                 width = Math.max(width,mWidth);
             } else if((type.contains("number") || type.contains("decimal") && this.props.format)){
                 width = Math.max(width,DATE_COLUMN_WIDTH-30);
+            } else if(type == "tel"){
+                width = Math.max(width,DATE_COLUMN_WIDTH)
             }
             totalWidths +=width;
             widths[header.field] = width;
@@ -1098,7 +1100,6 @@ export default class CommonDatagridComponent extends AppComponent {
             });
             data = newData;
         }      
-        const beforeS = data;
         if(this.isDatagrid() && isNonNullString(this._sort.column)){
             if(isObj(this.state.columns) && this.state.columns[this._sort.column]){
                 let field = this.state.columns[this._sort.column];
@@ -1505,7 +1506,7 @@ export default class CommonDatagridComponent extends AppComponent {
     }
     UNSAFE_componentWillReceiveProps(nextProps){
         if(!isObjOrArray(nextProps.data) || nextProps.data == this.props.data || stableHash(nextProps.data) == stableHash(this.props.data)) return;
-        this.prepareData({data:nextProps.data,force:true},(state)=>{
+        this.prepareData({...nextProps,force:true},(state)=>{
             this.setState(state)
         });
     }

package/src/components/Filter/index.js

@@ -177,6 +177,7 @@ export default class Filter extends AppComponent {
       }
       const prev = JSON.stringify(defaultObj(this.previousRef.current)), current = {value,operator,action,ignoreCase};
           let tV = isArray(value) && value.length <= 0 ? undefined : value;
+      
       this.isInitializedRef.current = this.props.dynamicRendered || this.isInitializedRef.current;
       if(prev == "{}" && (isNullOrEmpty(tV) || value === 0) && (!this.isInitializedRef.current) && (force !== true))  {
         return this;
@@ -203,7 +204,10 @@ export default class Filter extends AppComponent {
                    value = f(value);
                 }
                 if(isNonNullString(value) && this.state.ignoreCase){
-                    value = RegExp(value.ltrim("/").rtrim("/"),'i');
+                    try {
+                      const v = RegExp(value.ltrim("/").rtrim("/"),'i');
+                      value = v;
+                    } catch{}
                 }
                 action = "$regex";
              } 

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

@@ -771,6 +771,7 @@ export default class Field extends AppComponent {
             usePlaceholderWhenEmpty,
             width,
             height,
+            jsType,
             ...rest
         } = this.props;
         if(this.state.caughtAnError){
@@ -863,7 +864,7 @@ export default class Field extends AppComponent {
         delete rest.archivable;
 
         this.___formattedField = undefined;
-        let _type = this.type = defaultStr(this.props.jsType,this.props.type,this.type,"text").trim().toLowerCase();
+        let _type = this.type = defaultStr(jsType,this.props.type,this.type,"text").trim().toLowerCase();
         format = defaultStr(format).toLowerCase().trim();
         tooltip = defaultVal(tooltip,title);
 

package/src/components/Form/FormData/componentsTypes.js

@@ -2,6 +2,7 @@ import {defaultStr,defaultObj,defaultVal,isObj} from "$utils";
 import Fields from "../Fields";
 //import dataFileManager from "$dataFileManager";
 import i18n from "$i18n";
+import React from "$react";
 
 const componentTypes =  {
     ...Fields,
@@ -58,11 +59,12 @@ export const getFilterComponentProps = (_props)=>{
         check,
         width,
         type,
+        jsType,
         ...props
     } = _props;
     props = defaultObj(props);
     let component = Fields.TextField;
-    type = defaultStr(type,'text').toLowerCase().replaceAll("_","").replaceAll("-","").trim();
+    type = defaultStr(jsType,type,'text').toLowerCase().replaceAll("_","").replaceAll("-","").trim();
     props = defaultObj(props);
     /*if(type =='datafile'){
         type = 'select';
@@ -88,8 +90,8 @@ export const getFilterComponentProps = (_props)=>{
     } else if(type == 'switch' || type =='radio' || type ==='checkbox') {
         type = 'select';
         let {checkedLabel,checkedTooltip,uncheckedTooltip,checkedValue,uncheckedLabel,uncheckedValue,label,text,...pR} = props;
-        checkedLabel = defaultVal(checkedLabel,checkedTooltip,'Désactivé/Désélectionné')
-        uncheckedLabel = defaultVal(uncheckedLabel,uncheckedTooltip,'Activé/Sélectionné')
+        checkedLabel = defaultVal(checkedLabel,checkedTooltip,'Inactif/Désélectionné')
+        uncheckedLabel = defaultVal(uncheckedLabel,uncheckedTooltip,'Actif/Sélectionné')
         checkedValue = defaultVal(checkedValue,1); uncheckedValue = defaultVal(uncheckedValue,0)
         props = pR;
         props.items = [{code:checkedValue,label:checkedLabel},{code:uncheckedValue,label:uncheckedLabel}];
@@ -98,7 +100,9 @@ export const getFilterComponentProps = (_props)=>{
         component = type == 'datetime' ? Fields.DateTime : type === 'date'? Fields.Date : Fields.Time;
     }  else if(type == 'color' || type =='colorpicker') {
         component = Fields.ColorPicker;
-    } else {
+    } else if(React.isComponent(componentTypes[type])) {
+        component = componentTypes[type];
+    }else {
         delete props.dbName;
         delete props.tableName;
         props.label = label; 

package/src/components/PhoneInput/index.js

@@ -9,7 +9,6 @@ import Icon from "$ecomponents/Icon";
 import PhoneNumber from "./PhoneNumber";
 import SelectCountry from "$ecomponents/Countries/SelectCountry";
 import {getFlag} from "$ecomponents/Countries";
-import View from "$ecomponents/View";
 
 import libPhoneNumber from 'google-libphonenumber';
 const asYouTypeFormatter = libPhoneNumber.AsYouTypeFormatter;

package/src/components/SimpleSelect/index.js

@@ -19,20 +19,18 @@ import stableHash from "stable-hash";
 const  SimpleSelect = React.forwardRef((props,ref)=>{
     let {style : customStyle,onMount,mode,showSearch,anchorContainerProps,renderText,contentContainerProps,withCheckedIcon,testID,selectionColor,dialogProps,onShow,anchor,onUnmont,controlled,onDismiss,visible:controlledVisible,selectedColor,inputProps,itemProps,itemContainerProps,label,listProps,editable,readOnly,text,filter,renderItem,itemValue,getItemValue,defaultValue,items:menuItems,onPress,onChange,disabled,...rest} = props;
     const flattenStyle = StyleSheet.flatten(customStyle) || {};
+    const [layout,setLayout] = React.useState({
+        height: 0,
+        width: 0,
+    });
     const [state,setState] = React.useState({
         value : defaultValue !== undefined? defaultValue:undefined,
         visible : controlled?undefined:false,
         items : [],
-        layout : {
-            height: 0,
-            width: 0,
-        },
     });
     contentContainerProps = defaultObj(contentContainerProps);
-    const inputLayout = state.layout;
-    const prevLayout = React.usePrevious(inputLayout);
+    const prevLayout = React.usePrevious(layout);
     filter = defaultFunc(filter,x=>true);
-    const {items} = state;
     const value = state.value,
     visible = controlled? controlledVisible : state.visible;
     compare = defaultFunc(compare,(a,b)=> a === b);
@@ -68,7 +66,8 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         return React.getTextContent(content);
     }
     const prevMenuItems = React.usePrevious(menuItems,stableHash);
-    const areItemsEquals = prevMenuItems == menuItems;//JSON.stringify(prevMenuItems) == JSON.stringify(menuItems);
+    const hasInitializedRef = React.useRef(false);
+    const areItemsEquals = hasInitializedRef.current && prevMenuItems == menuItems;//JSON.stringify(prevMenuItems) == JSON.stringify(menuItems);
     const prepareItems = React.useCallback(()=>{
         const items = [];
         selectedRef.current = null;
@@ -96,7 +95,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
             if(isDecimal(content)) content+="";
             if(!React.isValidElement(content,true)) return null;
             mItem.content = content;
-            mItem.textContent = rText;
+            mItem.textContent = React.getTextContent(rText) || React.getTextContent(content);
             if(isValueDifferent && itValue !== undefined && compare(defaultValue,itValue)){
                 selectedRef.current = mItem;
                 currentSelectedValue = defaultValue;
@@ -106,8 +105,10 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
             }
             items.push(mItem);
         });
+        hasInitializedRef.current = true;
         setState({...state,value:currentSelectedValue,items});
     },[stableHash(menuItems)])
+    const {items} = state;
     React.useEffect(()=>{
         if(compare(defaultValue == value) && areItemsEquals) return;
         if(!areItemsEquals){
@@ -199,22 +200,17 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
     itemContainerProps = defaultObj(itemContainerProps);
     const onLayout = (event) => {
         const layout = event.nativeEvent.layout;
-        if(prevIsMob === isMob && layout.height == prevLayout.height && layout.width == prevLayout.width) return;
+        if(prevIsMob === isMob && Math.abs(layout.height - prevLayout.height) <=50 && Math.abs(layout.width == prevLayout.width)<=50) return;
         const isDiff = prevIsMob !== isMob;
-        const nState = {
-            ...state,
-            layout,
-            //visible : controlled ? undefined : isDiff ? false : visible
-        };
-        setState(nState);
+        setLayout(layout);
         if(controlled && onDismiss){
             if(isDiff){
-                onDismiss(nState,true);
+                onDismiss(state,true);
             }
         } 
     };
     const dimensions = Dimensions.get("window");// useWindowDimensions();
-    let contentContainerHeight = dimensions.height - defaultDecimal(inputLayout?.top) - defaultDecimal(inputLayout?.height)-20;
+    let contentContainerHeight = dimensions.height - defaultDecimal(layout?.top) - defaultDecimal(layout?.height)-20;
     contentContainerHeight = Math.max(contentContainerHeight,200);
     let marginTop = 0;
     const Component = isMob ? Dialog : Menu;
@@ -341,7 +337,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
                         paddingHorizontal : 10,
                         paddingVertical:0,
                         height : !isMob?contentContainerHeight:'90%',
-                        width : !isMob ? inputLayout.width : undefined,
+                        width : !isMob ? layout.width : undefined,
                     },
                     isMob && {flex:1},
                     !isMob && {paddingRight : 0},