@fto-consult/expo-ui 2.27.0 → 2.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.27.0",
+  "version": "2.28.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^1.24.16",
+    "@fto-consult/common": "^1.25.1",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

package/src/components/BottomSheet/Sheet.js

@@ -10,7 +10,7 @@ import {isWeb,isNativeMobile} from "$cplatform";
 import Divider from "$ecomponents/Divider";
 import {isMobileOrTabletMedia} from "$cplatform/dimensions";
 import APP from "$capp/instance";
-import KeyboardAvoidingView from "$ecomponents/Form/KeyboardAvoidingView";
+import KeyboardAvoidingView from "$ecomponents/KeyboardAvoidingView";
 import {Elevations} from "$ecomponents/Surface";
 import {defaultStr} from "$utils";
 import View from "$ecomponents/View";
@@ -258,11 +258,6 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
                     activeOpacity={1}
                     onPress={() => (closeOnPressMask && dismissable !== false ? closeModal() : null)}
                 />
-                <KeyboardAvoidingView
-                    behavior="padding"
-                    style={[styles.wrapper]}
-                    testID = {testID+"_KeyboardAvoidingView"}
-                >
                     <Animated.View
                         {...(!dragFromTopOnly && panResponder.panHandlers)}
                         testID = {testID+"_Container"} {...containerProps} 
@@ -289,19 +284,17 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
                                 </View>
                                 <Divider testID = {testID+"_Divider"} style={styles.divider}/>
                             </>  : null}
-                            {withScrollView !== false ? <>
+                            {withScrollView !== false ?
                                 <ScrollView testID = {testID+"_ScrollViewContent"}  contentProps = {{style:styles.scrollViewContent}} {...scrollViewProps} style={[styles.scrollView,scrollViewProps.style]} alwaysBounceVertical={false}
-                                contentContainerStyle={[{ flexGrow: 1,margin:0,paddingBottom:30},scrollViewProps.contentContainerStyle]}
+                                    contentContainerStyle={[{ flexGrow: 1,margin:0,paddingBottom:30},scrollViewProps.contentContainerStyle]}
                                 >
-                                    {children}
-                                    </ScrollView>
-                                </> 
+                                    <KeyboardAvoidingView testID={testID+"_KeyboardAvoidingView"}>{children}</KeyboardAvoidingView>
+                                </ScrollView>
                             : <View testID = {testID+"_Children"} {...childrenContainerProps} style={[styles.childrenNotScroll,childrenContainerProps.style]}>
-                                {children}  
+                                <KeyboardAvoidingView testID={testID+"_KeyboardAvoidingView"}>{children}</KeyboardAvoidingView>  
                             </View>}
                         </View>
                     </Animated.View>
-                </KeyboardAvoidingView>
             </View>
         </Portal>
     );

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

@@ -28,7 +28,7 @@ import { evalSingleValue,Footer,getFooterColumnValue,isValidAggregator,extendAgg
 import i18n from "$i18n";
 import { makePhoneCall,canMakePhoneCall as canMakeCall} from "$makePhoneCall";
 import copyToClipboard from "$capp/clipboard";
-import { Pressable,PanResponder } from "react-native";
+import { Pressable } from "react-native";
 import TableLink from "$TableLink";
 import appConfig from "$capp/config";
 import stableHash from "stable-hash";

package/src/components/Date/DatePickerInput/index.js

@@ -56,6 +56,7 @@ const DatePickerInput = React.forwardRef(({
     if(isPeriodAction){
       return <PeriodActionComponent
           {...rest}
+          style = {style}
           left = {left}
           defaultValue = {defaultValue}
           right = {right}

package/src/components/Filter/BetweenComponent.js

@@ -0,0 +1,24 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+import React from "$react";
+import TextField from "$ecomponents/Form/Fields/TextField";
+import {defaultObj} from "$utils";
+
+const FilterBetweenComponent = React.forwardRef(({inputProps,contentContainerProps,...props},ref)=>{
+    contentContainerProps = defaultObj(contentContainerProps);
+    contentContainerProps.pointerEvents = "auto";
+    return <TextField
+        ref = {ref}
+        {...props}
+        contentContainerProps={contentContainerProps}
+        inputProps = {{...defaultObj(inputProps),pointerEvents:"none",editable:false}}
+        type ="text"
+        format = {undefined}
+        onChange = {(e)=>false}
+        onValidate = {(e)=>false}
+    />
+});
+
+FilterBetweenComponent.displayName = "FilterBetweenComponent";
+export default FilterBetweenComponent;

package/src/components/Filter/index.js

@@ -1,8 +1,8 @@
 
 
 import DateLib from "$lib/date";
-import {isNonNullString,defaultStr,isNullOrEmpty,debounce,uniqid} from "$utils";
-import {regexParser,regexActions,operators as _operators,actions as _actions,periodActions, inActions as _inActions,getFilterStateValues,getSessionData,setSessionData} from "$cfilters";
+import {isNonNullString,defaultStr,isNullOrEmpty,debounce,isFunction,uniqid} from "$utils";
+import {regexParser,regexActions,operators as _operators,actions as _actions,periodActions,betweenActions, inActions as _inActions,getFilterStateValues,getSessionData,setSessionData} from "$cfilters";
 import {parseDecimal} from "$ecomponents/TextField";
 import notify from "$notify";
 import PropTypes from "prop-types";
@@ -16,6 +16,7 @@ import theme from "$theme";
 import {isMobileMedia} from "$cplatform/dimensions";
 import { ActivityIndicator } from "react-native-paper";
 import DialogProvider from "$components/Form/FormData/DialogProvider";
+import FilterBetweenComponent from "./BetweenComponent";
 
 const manualRunKey = "manual-run";
 
@@ -129,10 +130,19 @@ export default class Filter extends AppComponent {
        this.fireFilterSearch(false);
      });
   }
+  getDefaultAction(type){
+      type = defaultStr(type,this.type,this.props.type).toLowerCase();
+      if(type.contains('select')){
+          return "$in";
+      } if(type !== 'date2time' && type !== 'time' && type !== 'number' && type !== 'decimal'){
+          return '$regexcontains';
+      }
+      return '$eq';
+  }
   initFiltersOp(type){
     type = defaultStr(type,this.type).toLowerCase();
     let operators = {..._operators};
-    let actions = {..._actions};
+    let actions = {...betweenActions,..._actions};
     if(this.props.orOperator === false){
        delete operators.$or;
     }
@@ -144,21 +154,18 @@ export default class Filter extends AppComponent {
     let ignoreCase = this.props.ignoreCase;
     ignoreCase = defaultVal(ignoreCase,true);
     let isTextFilter = false;
-    let defaultAct = '$eq';
     if(type =="checkbox" || type == 'switch'){
         action = '$eq';
-    } else if(type == 'select'){
+    } else if(type.contains('select')){
         actions = _inActions;
-        defaultAct = "$in";
     } else if(type == 'date' || type =='datetime') {
       actions = {...periodActions, ...actions}  
     } else if(type !== 'date2time' && type !== 'time' && type !== 'number' && type !== 'decimal'){
-        actions = regexActions;
-        defaultAct = '$regexcontains';
+        actions = {...betweenActions,...regexActions};
         isTextFilter = true;
     }
     if(!action){
-        action = defaultAct;
+        action = this.getDefaultAction(type);
     } 
     operator = defaultVal(operator,"$and");
     return {actions,action,ignoreCase,operator,operators,manualRun:defaultBool(this.props.manualRun,false),defaultValue:defaultVal(this.props.defaultValue),isTextFilter};
@@ -248,26 +255,44 @@ export default class Filter extends AppComponent {
     const t =  defaultStr(this.type,this.props.type);
     return t.contains("date") && t.contains("time");
   }
-  showPeriodSelector (success){
+  showBetweenSelector(args){
+      return this.showBetweenActionSelector(args);
+  }
+  showPeriodSelector(args){
+     return this.showBetweenActionSelector(args);
+  }
+  showBetweenActionSelector(args){
+    if(typeof args =='function'){
+      args = {success:args};
+    }
+    let {success,callback} = defaultObj(args);
+    const _type = defaultStr(this.type,this.props.type).toLowerCase().trim();
+    success = typeof success =='function'? success : typeof callback =='function'? callback : undefined;
     const defaultValue = defaultStr(this.state.defaultValue).trim();
     let split = defaultValue.split("=>");
-    let isDateTime = this.isDateTime();
-    let start = isDateTime ? new Date().toSQLDateTimeFormat() : new Date().toSQLDateFormat(), end = start;
-    
-     if(DateLib.isValidSQLDateTime(split[0]) || DateLib.isValidSQLDate(split[0])){
-        start = split[0];
-     }
-     if(DateLib.isValidSQLDateTime(split[1]) || DateLib.isValidSQLDate(split[1])){
-        end = split[1];
-     }
-    const type = isDateTime? "datetime" : "date";
-    DialogProvider.open({
+    const isDateTime = this.isDateTime();
+    let start = split[0] && split[0] || undefined, end = split[1] && split[1] || undefined;
+    const willHandleDate = _type.contains('date');
+     if(willHandleDate){
+        start = isDateTime ? new Date().toSQLDateTimeFormat() : new Date().toSQLDateFormat();
+        end = start;    
+        if(DateLib.isValidSQLDateTime(split[0]) || DateLib.isValidSQLDate(split[0])){
+            start = split[0];
+        }
+        if(DateLib.isValidSQLDateTime(split[1]) || DateLib.isValidSQLDate(split[1])){
+            end = split[1];
+        }
+    }
+    const type = willHandleDate ? (isDateTime? "datetime" : "date"):_type;
+    const format = this.props.format;
+    return new Promise((resolve,reject)=>{
+      DialogProvider.open({
         subtitle : false,
         fields : {
-           start : {type,text:'Du',defaultValue:start},
-           end : {type,text:'Au',defaultValue:end}
+           start : {format,type,text:(willHandleDate?'Du':"Valeur inférieure"),defaultValue:start},
+           end : {format,type,text:willHandleDate?'Au':"Valeur supérieure",defaultValue:end}
         },
-        title :"Définir une période ["+defaultStr(this.props.label,this.props.text)+"]",
+        title :"Définir {0} [{1}]".sprintf(willHandleDate?"une période":"Un intervalle",defaultStr(this.props.label,this.props.text)),
         cancelButton  : true,
         actions : {
          yes : {
@@ -276,19 +301,22 @@ export default class Filter extends AppComponent {
           },
         },
         onSuccess : ({data})=>{
-            if(data.start && data.end && data.start> data.end){
-                return notify.error("La date de fin doit être supérieure à la date de début");
+            if(data.start !== undefined && data.start !== null && data.end !== undefined && data.end !== null && data.start> data.end){
+                return notify.error("La {0} doit être supérieure à la {1}".sprintf(willHandleDate?"date de fin":"valeur supérieure",willHandleDate?"date de début":"valeur inférieure"));
             }
-            if(isFunction(success)){
+            if(typeof(success) =="function"){
               success(data.start+"=>"+data.end);
            }
+           resolve(data.start+"=>"+data.end);
            DialogProvider.close();
            return true;
-        }})
+        }
+      })
+    })
   }
   setAction(action,text){
     if(!(this.searchFilter.current)) return;
-    if(action === this.state.action && action !="$period" && action !== "$today" && action !='$yesterday') return;
+    if(action === this.state.action && !periodActions[action] && !betweenActions[action]) return;
     let value = this.state.defaultValue;
     let act = defaultStr(action).toLowerCase();
     const isDateTime = this.type?.contains("time");
@@ -297,6 +325,10 @@ export default class Filter extends AppComponent {
       this.showPeriodSelector((d)=>{
           this.runAction({value:d,action});
       })
+    } else if(action == '$between'){
+      this.showBetweenSelector((d)=>{
+          this.runAction({value:d,action});
+      })
     } else if(action =="$today"){
         return this.runAction({value:new Date().resetHours().resetMinutes().resetSeconds().toFormat(dateFormat),action})
     } else if(action =="$yesterday"){
@@ -346,7 +378,7 @@ export default class Filter extends AppComponent {
       })
   }
   clearFilter(event){
-    this.setState({defaultValue:undefined},()=>{
+    this.setState({defaultValue:undefined,action:this.getDefaultAction()},()=>{
       this.callOnValidate();
       this.fireValueChanged(true);
       let {onClearFilter,onResetFilter} = this.props;
@@ -356,6 +388,33 @@ export default class Filter extends AppComponent {
       }
     })
   } 
+  isBetweenAction(action){
+    action = defaultStr(action,this.state.action).toLowerCase();
+    return !!(this.state.actions && betweenActions[action]);
+  }
+  isPeriodAction(action){
+    action = defaultStr(action,this.state.action).toLowerCase();
+    return !!(this.state.actions && periodActions[action]);
+  }
+  formatValue(value){
+      const type = defaultStr(this.type,this.props.type).toLowerCase();
+      if(this.isBetweenAction() && isNonNullString(value) && (type ==="number" || type =="decimal")){
+        const sp = value.split("=>");
+        if(sp.length ==2 && type){
+          const format = defaultStr(this.props.format).toLowerCase();
+          const v1 = defaultDecimal(parseDecimal(sp[0],type));
+          const v2 = defaultDecimal(parseDecimal(sp[1],type));
+          return format =="money"? (v1.formatMoney()+"=>"+v2.formatMoney()) : (v1.formatNumber()+"=>"+v2.formatNumber());
+        }
+      }
+      if(typeof value =='number'){
+          if(this.props.format =='money'){
+             return value.formatMoney();
+          }
+          return value.formatNumber();
+      }
+      return value;
+  }
   render (){
     let {
       filter,
@@ -442,8 +501,9 @@ export default class Filter extends AppComponent {
      if(isFunction(filter)){
          rest.filter = filter;
      }
-     const isPeriodAction = this.state.actions && periodActions[this.state.action]
-     const ignoreDefaultValue = isPeriodAction && isNonNullString(defaultValue) && defaultValue.contains("=>");
+     const isPeriodAction = this.isPeriodAction();
+     const isBetweenAction = this.isBetweenAction();
+     const ignoreDefaultValue = (isPeriodAction||isBetweenAction) && isNonNullString(defaultValue) && defaultValue.contains("=>");
      rest.defaultValue = defaultValue;
      rest.disabled = rest.readOnly = rest.affix = false;
      rest.editable = true;
@@ -500,7 +560,7 @@ export default class Filter extends AppComponent {
                       style : [styles.bold,styles.noVerticalPadding],
                     }:null],
                      ...Object.mapToArray(actions,(x,j)=>{
-                      if(ignoreDefaultValue && !periodActions[j]){
+                      if(ignoreDefaultValue && !periodActions[j] && !betweenActions[j]){
                         return null;
                       } 
                       let checked = j === action?true : false;
@@ -523,7 +583,7 @@ export default class Filter extends AppComponent {
                           }
 
                           if(!hasS){
-                             x = x+" <"+defaultValue+">"
+                             x = x+" <"+this.formatValue(defaultValue)+">"
                           }
                        }                       
                        return {
@@ -539,10 +599,10 @@ export default class Filter extends AppComponent {
      const containerProps = defaultObj(this.props.containerProps,rest.containerProps);
      delete rest.containerProps;
      rest.onValidate = this.onFilterValidate.bind(this);
-     const Component = this.Component;
+     const Component = isBetweenAction ? FilterBetweenComponent : this.Component;
      const responsiveProps = Object.assign({},responsiveProps);
      responsiveProps.style = [theme.styles.w100,responsiveProps.style]
-     if(ignoreDefaultValue) {
+     if(ignoreDefaultValue && isPeriodAction) {
         rest.isPeriodAction = true;
      }
      return <View testID={testID+"_FilterContainer"} {...containerProps} style={StyleSheet.flatten([theme.styles.w100,containerProps.style])}>

package/src/components/Form/Form.js

@@ -4,7 +4,7 @@ import {classExtends,isFunction,isNonNullString,defaultStr,defaultObj,defaultVal
 import {warning,Forms} from "./utils";
 import Action from "./Action";
 import View from "$ecomponents/View";
-import KeyboardAvoidingView from "./KeyboardAvoidingView";
+import KeyboardAvoidingView from "$ecomponents/KeyboardAvoidingView";
 import { StyleSheet } from "react-native";
 import APP from "$capp/instance";
 import PropTypes from "prop-types";

package/src/components/Form/index.js

@@ -8,7 +8,4 @@ export {default as Form} from "./Form";
 
 export {default as Action} from "./Action";
 
-export {default as KeyboardAvoidingView} from "./KeyboardAvoidingView";
-
-
 export * from "./utils";

package/src/components/ScrollView/index.js

@@ -3,15 +3,28 @@ import { FlatList } from 'react-native';
 import { ScrollView,Dimensions,useWindowDimensions } from 'react-native';
 import PropTypes from "prop-types";
 import View from "$ecomponents/View";
-import {isMobileNative} from "$cplatform";
+import {isMobileNative,isTouchDevice} from "$cplatform";
 import {defaultStr,defaultObj} from "$utils";
 const isNative = isMobileNative();
-
+import APP from "$capp/instance";
 const ScrollViewComponent = React.forwardRef((props,ref) => {
   const {virtualized,contentProps,mediaQueryUpdateNativeProps,testID:customTestID,children,screenIndent:sIndent,...rest} = props;
   const testID = defaultStr(customTestID,'RN_ScrollViewComponent');
   const cProps = defaultObj(contentProps);
-  const {height} = useWindowDimensions()//:Dimensions.get("window");
+  const [layout,setLayout] = React.useState(Dimensions.get("window"));
+  const {height} = layout;
+  React.useEffect(()=>{
+    const onResizePage = ()=>{
+      if(isTouchDevice()) return;
+      setTimeout(()=>{
+         setLayout(Dimensions.get("window"))
+      },200);
+    }
+    APP.on(APP.EVENTS.RESIZE_PAGE,onResizePage);
+    return ()=>{
+      APP.off(APP.EVENTS.RESIZE_PAGE,onResizePage);
+    }
+  },[])
   return  virtualized ? <FlatList
     {...rest}
     ref = {ref}