@fto-consult/expo-ui 2.2.4 → 2.3.0

package/index.js

@@ -1,5 +1,11 @@
-import { registerRootComponent } from 'expo';
+import { registerRootComponent } from "expo";
+import {Platform } from 'react-native';
+import { createRoot } from 'react-dom/client';
 import appConfig from "$capp/config";
+import { activateKeepAwake } from 'expo-keep-awake';
+if (__DEV__) {
+    activateKeepAwake();
+}
 
 /**** initialise l'application expoUI avec les paramètres de configuration
  * les options sont de la forme : 
@@ -10,5 +16,11 @@ import appConfig from "$capp/config";
 export default function ExpoUIApp (options){
     options = options && typeof options =='object' && !Array.isArray(options)? options : {};
     appConfig.current = options.config;
-    registerRootComponent(require('./src/App').default(options));
-}
+    const App = require('./src/App').default(options);
+    if (Platform.OS === "web") {
+        const root = createRoot(document.getElementById("root") ?? document.getElementById("main"));
+        root.render(<App />);
+    } else {
+        registerRootComponent(App);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -62,7 +62,7 @@
     "@expo/html-elements": "^0.2.0",
     "@expo/metro-config": "^0.4.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.11.5",
+    "@fto-consult/common": "^1.11.13",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

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

@@ -12,6 +12,7 @@ import Icon from "$ecomponents/Icon";
 import {StyleSheet,View} from "react-native";
 import DatePickerModal from '../DatePickerModal'
 import "../i18n";
+import PeriodActionComponent from "../PeriodAction";
 
 const validMinDate = (date,minDate)=>{
    if(!minDate || !date) return true;
@@ -44,9 +45,23 @@ const DatePickerInput = React.forwardRef(({
     style,
     anchorProps,
     render_filter,
+    isPeriodAction,
+    isFilter,
     calendarIconBefore = false, //si l'icone calendar sera en position left où non
     ...rest
   },ref)=>{
+    let right = customRight,left = customLeft, isIconLeft = calendarIconBefore;
+    if(!isPeriodAction){
+        isPeriodAction = isNonNullString(defaultValue) && defaultValue.contains("=>");
+    }
+    if(isPeriodAction){
+      return <PeriodActionComponent
+          {...rest}
+          left = {left}
+          defaultValue = {defaultValue}
+          right = {right}
+      />
+  }
   inputMode = defaultStr(inputMode,"start");
   locale = defaultStr(locale,defaultLocale);
   const theme = useTheme()
@@ -108,7 +123,6 @@ const DatePickerInput = React.forwardRef(({
   anchorProps = defaultObj(anchorProps);
   label = defaultStr(label,text);
   customRight = React.isValidElement(customRight) || typeof customRight =='function'? customRight : null;
-  let right = customRight,left = customLeft, isIconLeft = calendarIconBefore;
   if(withModal){
       const customLOrR = isIconLeft ? customLeft : customRight;
       const leftOrRight = (props)=>{
@@ -160,7 +174,7 @@ const DatePickerInput = React.forwardRef(({
           affix = {false}
           {...rest}
           style = {[styles.input,style]}
-          editable = {editable}
+          editable = {isEditable}
           disabled = {disabled}
           left = {left}
           right = {right}

package/src/components/Date/DateTime.js

@@ -10,8 +10,22 @@ import {defaultObj,isNumber,defaultNumber,defaultStr,defaultBool,isNonNullString
 import theme,{flattenStyle} from "$theme";
 import DateLib from "$date";
 import { toDateObj } from "./utils";
+import TextField from "$components/TextField";
+import PeriodActionComponent from "./PeriodAction";
 
-export default function DateTimePickerComponent({left,withSeconds,right,format,dateFormat,timeFormat,defaultValue,onChange,testID,dateProps,disabled,readOnly,timeProps,...rest}){
+export default function DateTimePickerComponent({left,isPeriodAction,withSeconds,right,format,dateFormat,timeFormat,defaultValue,onChange,testID,dateProps,disabled,readOnly,timeProps,...rest}){
+    if(!isPeriodAction){
+        isPeriodAction = isNonNullString(defaultValue) && defaultValue.contains("=>");
+    }
+    if(isPeriodAction){
+        return <PeriodActionComponent
+            {...rest}
+            isDateTime
+            left = {left}
+            defaultValue = {defaultValue}
+            right = {right}
+        />
+    }
     dateProps = defaultObj(dateProps);
     timeProps = defaultObj(timeProps);
     testID = defaultStr(testID,"RN_DateTimeComponent")

package/src/components/Date/PeriodAction.js

@@ -0,0 +1,31 @@
+// 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 "$components/TextField";
+import {isNonNullString} from "$utils";
+import DateLib from "$date";
+
+const PeriodActionComponent = React.forwardRef(({defaultValue,label,isDateTime,...props},ref)=>{
+    if(isNonNullString(label)){
+        label+=" [Période1]";
+    }
+    const datePeriod= DateLib.formatPeriod(defaultValue,isDateTime);
+    if(datePeriod){
+        defaultValue = datePeriod;
+    }
+    return <TextField
+        {...props}
+        label = {label}
+        onChange = {undefined}
+        ref = {ref}
+        defaultValue = {defaultValue}
+    />
+});
+
+PeriodActionComponent.displayName = "PeriodActionComponent";
+PeriodActionComponent.propTypes = {
+    ...TextField.propTypes
+}
+
+export default PeriodActionComponent;

package/src/components/Filter/index.js

@@ -4,7 +4,7 @@ import DateLib from "$lib/date";
 import {isNonNullString,defaultStr,isNullOrEmpty,debounce,uniqid} from "$utils";
 import {regexParser,regexActions,getFilterStateValues} from "./utils";
 import {parseDecimal} from "$ecomponents/TextField";
-import FormDialog from "$ecomponents/Form/FormData/Dialog";
+import notify from "$notify";
 import PropTypes from "prop-types";
 import {extendObj} from "$utils";
 import {getFilterComponentProps} from "$ecomponents/Form/FormData/componentsTypes"
@@ -40,6 +40,14 @@ const _operators = {
    '$and' : 'Et', //Array	Matches if all the selectors in the array match.
    '$or' : 'Ou', //Array	Matches if any of the selectors in the array match. All selectors must use the same index.
 }
+
+const periodActions = {
+  $today:"Aujourd'hui",
+  $prevWeek:"Semaine passée",
+  $week:'Cette semaine',
+  $month:'Ce mois',
+  $period:"Période"
+}
   
 /***** Coposant Filter, pour les filtres de données */
 export default class Filter extends AppComponent {
@@ -155,7 +163,7 @@ export default class Filter extends AppComponent {
         actions = _inActions;
         defaultAct = "$in";
     } else if(type == 'date' || type =='datetime') {
-      actions = {$today:"Aujourd'hui",$prevWeek:"Semaine passée",$week:'Cette semaine',$month:'Ce mois',$period:"Période", ...actions}  
+      actions = {...periodActions, ...actions}  
     } else if(type !== 'date2time' && type !== 'time' && type !== 'number' && type !== 'decimal'){
         actions = regexActions;
         defaultAct = '$regexcontains';
@@ -241,38 +249,41 @@ export default class Filter extends AppComponent {
         }    
       })
   }
+  isDateTime(){
+    const t =  defaultStr(this.type,this.props.type);
+    return t.contains("date") && t.contains("time");
+  }
   showPeriodSelector (success){
-    let split = defaultStr(this.props.defaultValue).split("=>");
-    let start = new Date().toFormat("yyyy-mm-dd"),
-       end = start;
-     if(DateLib.isValidSQLDate(split[0])){
+    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.isValidSQLDate(split[1])){
+     if(DateLib.isValidSQLDateTime(split[1]) || DateLib.isValidSQLDate(split[1])){
         end = split[1];
      }
-    const type = this.type.contains("date")? this.type : "date";
+    const type = isDateTime? "datetime" : "date";
     DialogProvider.open({
+        subtitle : false,
         fields : {
            start : {type,text:'Du',defaultValue:start},
            end : {type,text:'Au',defaultValue:end}
         },
         title :"Définir une période ["+defaultStr(this.props.label,this.props.text)+"]",
+        cancelButton  : true,
         actions : {
-          no : {
-            text : 'Annuler',
-            icon : 'cancel',
-            isFormAction : false,
-            onPress : ()=>{
-              DialogProvider.close();
-            }
-         },
          yes : {
               text : 'Définir',
               icon : "check"
           },
         },
         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");
+            }
             console.log(data," is dataa")
            if(isFunction(success)){
               success(data.start+"=>"+data.end);
@@ -293,7 +304,7 @@ export default class Filter extends AppComponent {
           this.runAction({value:d,action});
       })
     } else if(action =="$today"){
-        return this.runAction({value:new Date().toDateFormat(dateFormat),action})
+        return this.runAction({value:new Date().resetHours().resetMinutes().resetSeconds().toFormat(dateFormat),action})
     } else if(act.startsWith("$") && (act.contains("week") || act.contains("month"))){
       let diff = undefined;
       const currentDate = new Date();
@@ -435,6 +446,8 @@ 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("=>");
      rest.defaultValue = defaultValue;
      rest.disabled = rest.readOnly = rest.affix = false;
      rest.editable = true;
@@ -498,9 +511,14 @@ export default class Filter extends AppComponent {
                             
                          } else if((action =="$period" || (act.startsWith("$") && (act.contains("week") || act.contains("month"))))){
                            let sp = defaultValue.split("=>");
-                           if(DateLib.isValidSQLDate(sp[0]) && DateLib.isValidSQLDate(sp[1])){
-                               x = "Du "+defaultStr(DateLib.format(sp[0],DateLib.defaultDateFormat),sp[0])+" au "+defaultStr(DateLib.format(sp[1],DateLib.defaultDateFormat),sp[1]);
-                               hasS = true;      
+                           x = DateLib.formatDatePeriod(defaultValue,this.isDateTime());
+                           if(!x){
+                            if((DateLib.isValidSQLDate(sp[0])|| DateLib.isValidSQLDateTime(sp[0])) && (DateLib.isValidSQLDate(sp[1]) || DateLib.isValidSQLDateTime(sp[1]))){
+                                x = "Du "+defaultStr(DateLib.format(sp[0],DateLib.defaultDateFormat),sp[0])+" au "+defaultStr(DateLib.format(sp[1],DateLib.defaultDateFormat),sp[1]);
+                                hasS = true;      
+                            }
+                           } else {
+                            hasS = true; 
                            }
                           }
 
@@ -524,10 +542,15 @@ export default class Filter extends AppComponent {
      const Component = this.Component;
      const responsiveProps = Object.assign({},responsiveProps);
      responsiveProps.style = [theme.styles.w100,responsiveProps.style]
+     if(ignoreDefaultValue) {
+        rest.isPeriodAction = true;
+     }
      return <View testID={testID+"_FilterContainer"} {...containerProps} style={[theme.styles.w100,containerProps.style]}>
         <Component
           {...rest}
+          readOnly = {ignoreDefaultValue}
           responsiveProps = {responsiveProps}
+          isFilter
           name = {this.name}
           testID = {testID}
           ref = {React.mergeRefs(this.searchFilter,ref)}