@fto-consult/expo-ui 2.2.3 → 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.3",
+  "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.3",
+    "@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

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import Date from "./DatePickerInput";
+import DateComponent from "./DatePickerInput";
 import Time,{parseTime} from "./Time";
 import React from "$react";
 import PropTypes from "prop-types";
@@ -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")
@@ -57,7 +71,7 @@ export default function DateTimePickerComponent({left,withSeconds,right,format,d
             onChange(args);
         }
     }
-    return <Date
+    return <DateComponent
         defaultValue = {dateObj}
         disabled = {disabled}
         readOnly = {readOnly}
@@ -107,7 +121,7 @@ export default function DateTimePickerComponent({left,withSeconds,right,format,d
 }
 
 DateTimePickerComponent.propTypes = {
-    ...Date.propTypes,
+    ...DateComponent.propTypes,
     dateProps : PropTypes.object,
     timeProps : PropTypes.object,
     dateFormat : PropTypes.string, //Le format de date

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"
@@ -16,6 +16,7 @@ import theme from "$theme";
 import {isMobileMedia} from "$cplatform/dimensions";
 import { ActivityIndicator } from "react-native-paper";
 import { getSessionData,setSessionData } from "./session";
+import DialogProvider from "$components/Form/FormData/DialogProvider";
 
 const manualRunKey = "manual-run";
 
@@ -39,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 {
@@ -154,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';
@@ -169,7 +178,7 @@ export default class Filter extends AppComponent {
   fireValueChanged (forceRun){
       if(this.willRunManually() && !forceRun) return;
       let {defaultValue:value,prevDefaultValue,action,ignoreCase,operator} = this.state;
-      const force = forceRun ===true ? true : false;
+      let force = forceRun ===true ? true : false;
       if(!isObjOrArray(value) && (isNullOrEmpty(value,true) || value ==='undefined') ){
           value = undefined;
       }
@@ -240,67 +249,81 @@ 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];
      }
-    let fContext = undefined;
-    mountDialog(<FormDialog
-        visible
-        key = {_uniqid("period-filter-date")}
-        fields = {{
-           start : {type:'date',text:'Du',defaultValue:start},
-           end : {type:'date',text:'Au',defaultValue:end}
-        }}
-        title = {"Définir une période ["+defaultStr(this.props.label,this.props.text)+"]"}
-        no = {{
-           text : 'Annuler',
-           icon : 'cancel'
-        }}
-        yes = {{
-           text : 'Définir',
-           icon : "check"
-        }}
-        onSuccess = {({data})=>{
+    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 : {
+         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);
            }
+           DialogProvider.close();
            return true;
-        }}
-    />)
+        }})
   }
   setAction(action,text){
     if(!(this.searchFilter.current)) return;
     if(action === this.state.action && action !="$period" && action !== "$today") return;
     let value = this.state.defaultValue;
     let act = defaultStr(action).toLowerCase();
+    const isDateTime = this.type?.contains("time");
+    const dateFormat = isDateTime?DateLib.SQLDateTimeFormat:DateLib.SQLDateFormat;
     if(action == '$period'){
       this.showPeriodSelector((d)=>{
           this.runAction({value:d,action});
       })
     } else if(action =="$today"){
-        return this.runAction({value:new Date().toSQL(),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();
+      currentDate.setHours(0);
+      currentDate.setMinutes(0);
+      currentDate.setSeconds(0);
       switch (action){
         case "$month":
-            diff = DateLib.currentMonthDaysLimits();
+            diff = DateLib.currentMonthDaysLimits(currentDate);
           break;
         case "$week":      
-            diff = DateLib.currentWeekDaysLimits()
+            diff = DateLib.currentWeekDaysLimits(currentDate)
           break;
         case "$prevWeek":      
-          diff = DateLib.previousWeekDaysLimits()
+          diff = DateLib.previousWeekDaysLimits(currentDate)
         break;
       }
       if(diff){
-        let value = diff.first.toFormat(DateLib.SQLDateFormat) +"=>"+diff.last.toFormat(DateLib.SQLDateFormat);
+        let value = diff.first.toFormat(dateFormat) +"=>"+diff.last.toFormat(dateFormat);
         this.runAction({value,action})
       }
     } else {
@@ -423,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;
@@ -486,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; 
                            }
                           }
 
@@ -512,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)}