@fto-consult/expo-ui 2.19.8 → 2.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.19.8",
+  "version": "2.20.1",
   "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.22.19",
+    "@fto-consult/common": "^1.23.4",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

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

@@ -37,6 +37,7 @@ import {Flag} from "$ecomponents/Countries"
 import View from "$ecomponents/View";
 import {Menu} from "$ecomponents/BottomSheet";
 import {styles as tableStyles} from "$ecomponents/Table";
+import {DialogProvider} from "$ecomponents/Form/FormData";
 
 export const arrayValueSeparator = ", ";
 
@@ -117,6 +118,7 @@ export default class CommonDatagridComponent extends AppComponent {
             sectionListHeaderFooters : {value : {}},
             sectionListDataSize : {value : {current : 0}},
             enablePointerEventsRef : {value : {current:false}},
+            configureSectionListSelectedValues : {value : {}},
             sectionListColumnsSize : {value : {current:0}}, //la taille du nombre d'éléments de section dans les colonnes
         }) 
         this.isLoading = this.isLoading.bind(this);
@@ -993,6 +995,46 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         return null;
    }
+   /*** configure la  */
+   configureSectionListColumn(column){
+        if(!isObj(column) || !isNonNullString(column.field) || !isObj(this.state.columns[column.field])){
+            return Promise.reject({message : 'type de colonne invalide, impossible de configurer la colonne, pour permettre qu\elle soit ajoutée dans les colonnes de groupe du tableau'})
+        }
+        const col = this.state.columns[column.field];
+        const type = defaultStr(col.jsType,col.type).toLowerCase();
+        if(type.contains("date") || type =='time'){
+            return new Promise((resolve,reject)=>{
+                DialogProvider.open({
+                    title : 'Format de date',
+                    fields : {
+                        dateFormat : {
+                            type : 'select_dateformat',
+                            required : true,
+                            text : 'Sélectionnez un format de date',
+                            defaultValue : defaultStr(this.configureSectionListSelectedValues[column.field],"dd/mm/yyyy"),
+                        }
+                    },
+                    onCancelButtonPress : ()=>{
+                        DialogProvider.close();
+                        reject({msg:'aucun format sélectionné'})
+                    },
+                    actions : [{
+                        text : "Sélectionnez",
+                        icon : "check",
+                        onPress : ({data})=>{
+                            column.format = data.dateFormat;
+                            this.configureSectionListSelectedValues[column.field] = data.dateFormat;
+                            DialogProvider.close();
+                            setTimeout(()=>{
+                                resolve(column);
+                            },100)
+                        },
+                    }]
+                })
+            })
+        }
+        return Promise.resolve(column);
+   }
    toggleColumnInSectionList(columnName){
         if(!isNonNullString(columnName) || !isObj(this.state.columns[columnName])) return;
         if(!isObj(this.state.sectionListColumns) || !Array.isArray(this.preparedColumns?.sectionListColumnsMenuItems))return;
@@ -1002,16 +1044,24 @@ export default class CommonDatagridComponent extends AppComponent {
         if(isObj(sectionListColumns[columnName])){
             delete sectionListColumns[columnName];
         } else {
-            sectionListColumns[columnName] = {};
-        }
-        const {sectionListColumns:pSListColumns} = this.prepareColumns({sectionListColumns});
-        this.setIsLoading(true,()=>{
-            this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns:pSListColumns},(state)=>{
-                this.setState({...state,sectionListColumns:pSListColumns},()=>{
-                    this.setIsLoading(false,false);
+            sectionListColumns[columnName] = {field:columnName};
+        }
+        const cb =()=>{
+            const {sectionListColumns:pSListColumns} = this.prepareColumns({sectionListColumns});
+            this.setIsLoading(true,()=>{
+                this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns:pSListColumns},(state)=>{
+                    this.setState({...state,sectionListColumns:pSListColumns},()=>{
+                        this.setIsLoading(false,false);
+                    });
                 });
-            });
-        },true);
+            },true);
+        }
+        setTimeout(() => {
+            if(!isObj(sectionListColumns[columnName])){
+                return cb();
+            }
+            return this.configureSectionListColumn(sectionListColumns[columnName]).then(cb).catch(notify.error)
+        }, 100);
    }
    removeAllColumnsInSectionList(){
         const {sectionListColumns} = this.prepareColumns({sectionListColumns:{}});
@@ -1050,7 +1100,7 @@ export default class CommonDatagridComponent extends AppComponent {
                     onPress : ()=>{
                         setTimeout(()=>{
                             this.removeAllColumnsInSectionList();
-                        },300)
+                        },100)
                     }
                 },
                 ...m,
@@ -1129,7 +1179,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 onPress : ()=>{
                     setTimeout(() => {
                         this.toggleColumnVisibility(header.field);
-                    },300);
+                    },100);
                     return false;
                 },
                 title : title,
@@ -1230,9 +1280,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 sectionListColumnsMenuItems.push({
                     field,
                     onPress : ()=>{
-                        setTimeout(()=>{
-                            this.toggleColumnInSectionList(field);
-                        },300)
+                        this.toggleColumnInSectionList(field);
                         return false;
                     },
                     title : title,
@@ -1851,7 +1899,7 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         cb && setTimeout(() => {
             cb();
-        }, 500);
+        }, 200);
     }
     isAllRowsSelected(update){
         return this.selectedRowsCount && this.selectedRowsCount === this.getMaxSelectableRows()? true : false;

package/src/components/Date/FormatSelector.js

@@ -0,0 +1,99 @@
+// 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 DateLib from "$date";
+import React from "$react";
+import {defaultObj,isNonNullString} from "$utils";
+import SimpleSelect from "$ecomponents/SimpleSelect";
+import Provider from "$ecomponents/Dialog/Provider";
+import TextField from "$components/TextField";
+import Label from "$components/Label";
+import theme from "$theme";
+import notify from "$notify";
+import { View } from "react-native";
+import Icon from "$components/Icon";
+import PropTypes from "prop-types";
+
+const DateFormatSelector = React.forwardRef((props,ref)=>{
+    return <SimpleSelect ref={ref} {...selectDateFormatFieldProps(props)}/>
+});
+
+DateFormatSelector.displayName = "DateFormatSelector";
+
+export default DateFormatSelector;
+
+/*** onAdd est appelé lorsqu'on ajoute un format personalisé */
+export const selectDateFormatFieldProps = ({onAdd:customOnAdd,onAddCustomFormat,...props})=>{
+    const onAdd = ()=>{
+        const labelRef = React.createRef(null);
+        const valueRef = React.createRef(null);
+        Provider.open(({
+            title : "Ajouter un format de date personalisé",
+            children : <View style={[theme.styles.w100,theme.styles.ph1]}>
+                <TextField
+                    type = "text"
+                    label = "Format personalisé"
+                    right ={(p)=><Icon {...p} name ="material-help" title="Utilisez les champ d : pour date, m pour mois, y pour année, H pour heure, M pour minute, s pour seconde. les jour sur 3 lettres (Lun) sont : ddd, les jours écris complètement sont ddddd (Lundi); les mois en court sont définis par mmm (Juil), les mois en complet : mmmm (Juillet)."/>} 
+                    onChange = {(args)=>{
+                        const {value} = args;
+                        if(!labelRef.current || !labelRef.current.update) return;
+                        if((value)){
+                            try {
+                                var d = new Date().toFormat(value);
+                                if(d){ 
+                                    labelRef.current.update(d);
+                                    valueRef.current = {...args,code:value,label:d};
+                                } else {
+                                    labelRef.current.update("");
+                                    valueRef.current = null;
+                                }
+                            } catch{
+                                labelRef.current.update("");
+                                valueRef.current = null;
+                            }
+                        }
+                    }}
+                />
+                <View style={[theme.styles.w100,theme.styles.row,theme.styles.flexWrap]}>
+                    <Label>EX : </Label>
+                    <Label.withRef primary textBold ref={labelRef}></Label.withRef>
+                </View>
+            </View>,
+            actions : [{
+                text : "Valider",
+                icon : "check",
+                onPress : ()=>{
+                    if(!isObj(valueRef.current) || !isNonNullString(valueRef.current.value)){
+                        return notify.error("Vous devez spécifier un format valide");
+                    }
+                    if(typeof customOnAdd =='function'){
+                        customOnAdd(valueRef.current);
+                    }
+                    Provider.close();
+                }
+            }],
+        }))
+    };
+    return {
+        items : getDateFormatSelectorItems(),
+        getItemValue : ({item})=>item.code,
+        renderItem : dateFormatSelectorRenderItem,
+        showAdd : true,
+        ...defaultObj(props),
+        onAdd,
+        onAdd : undefined,
+        showAdd : false,
+    }
+}
+export const getDateFormatSelectorItems = x=> Object.map(DateLib.formats,(format)=>{
+    return {code : format,label:new Date().toFormat(format)}
+});
+
+export const dateFormatSelectorRenderItem = ({item})=>{
+    return "{0} [{1}]".sprintf(item.label,item.code);
+}
+
+DateFormatSelector.propTypes = {
+    ...SimpleSelect.propTypes,
+    //appelée lorsqu'on ajoute un format personalisé
+}

package/src/components/Date/index.js

@@ -11,3 +11,6 @@ export default DateComponent;
 export {default as Time} from "./Time";
 
 export {default as DateTime} from "./DateTime";
+
+export * from "./FormatSelector";
+export {default as FormatSelector} from "./FormatSelector";

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

@@ -1,6 +1,5 @@
 import SelectField from "./SelectField";
 import {getCountryFieldProps} from "$ecomponents/Countries";
-import {defaultVal} from "$utils";
 
 export default class FormFieldSelectCountry extends SelectField{
     getComponentProps(props){
@@ -9,4 +8,7 @@ export default class FormFieldSelectCountry extends SelectField{
     _render(props){
         return super._render(this.getComponentProps(props))
     }
+}
+FormFieldSelectCountry.propTypes = {
+    ...SelectField.propTypes,
 }

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

@@ -0,0 +1,46 @@
+import SelectField from "./SelectField";
+import {selectDateFormatFieldProps,getDateFormatSelectorItems} from "$ecomponents/Date/FormatSelector";
+import DateLib from "$date";
+
+export default class FormFieldSelectDateFormat extends SelectField{
+    constructor(props){
+        super(props);
+        Object.defineProperties(this,{
+            itemsRef : {value : {current : getDateFormatSelectorItems()}},
+            valueRef : {value : {current : undefined}},
+        });
+    }
+    getComponentProps(props){
+        const {onAdd} = props;
+        const rest = selectDateFormatFieldProps({
+            ...props,onAdd : (args)=>{
+                if(onAdd &&  onAdd(args) === false){
+                    return false;
+                }
+                const {value,label} = args;
+                const code = value+"-"+value;
+                const it = {[code]:{code : value, label : label || new Date().toFormat(value)}}
+                Object.map(this.itemsRef.current,(v,k)=>{
+                    it[k] = v;
+                });
+                this.valueRef.current = value;
+                if(this._field && this._field.refresh && this._field.prepareItems){
+                    this._field.setState(this._field.prepareItems({items:it,defaultValue:value}))
+                }
+            }
+        });
+        rest.items = this.itemsRef.current;
+        if(this.valueRef.current){
+            rest.defaultValue = this.valueRef.current;
+        }
+        this.valueRef.current = undefined;
+        return rest;
+    }
+    _render(props){
+        return super._render(this.getComponentProps(props))
+    }
+}
+
+FormFieldSelectDateFormat.propTypes = {
+    ...SelectField.propTypes,
+}

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

@@ -18,6 +18,7 @@ import Html from "./Html";
 import * as eFormFields from "$extendFormFields";
 import "$utils";
 import React from "$react";
+import SelectDateFormat from "./SelectDateFormat";
 
 export * from "$extendFormFields";
 
@@ -38,6 +39,7 @@ const defFormFields = {
     ,Time
     ,Image
     ,Tel
+    ,SelectDateFormat
     ,Html
 }
 
@@ -67,5 +69,6 @@ export {
     ,Time
     ,Image
     ,Tel
+    ,SelectDateFormat
     ,Html
 }

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

@@ -10,7 +10,7 @@ import PropTypes from "prop-types";
 import {renderActions} from "$ecomponents/Dialog/utils";
 //import {isDocUpdate} from "$database/utils";
 import {handleBeforeSaveCallback} from "./utils";
-import componentTypes from "./componentsTypes";
+import componentsTypes from "./componentsTypes";
 import { keyboardShortcuts } from "../utils";
 
 export default class FormDataComponent extends AppComponent{
@@ -191,7 +191,7 @@ export default class FormDataComponent extends AppComponent{
             } else if(isObj(field) && field.form !== false) {
                 const name = defaultStr(field.name,field.field,index);
                 const type = defaultStr(field.jsType,field.type,"text").trim().toLowerCase().replaceAll("_","");
-                const Component = componentTypes[type] || componentTypes.default;
+                const Component = componentsTypes[type] || componentsTypes.default;
                 let {defaultValue,useDefaultValueFromData,hidden,renderFormDataField,getMediaQueryStyle,printLabels,queryLimit,selected,value,visible,dataFilesInterest,perm,ignore,form,responsiveProps:customResponsiveProps,...rest} = field;
                 rest = Object.assign({},rest);
                 delete rest.import;

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

@@ -14,8 +14,9 @@ const componentTypes =  {
     piece : Fields.PieceField,
     select : Fields.SelectField,
     switch : Fields.Switch,
-    select_country : Fields.SelectCountry,
     selectcountry : Fields.SelectCountry,
+    selectdateformat : Fields.SelectDateFormat,
+    dateformat : Fields.SelectDateFormat,
     date : Fields.Date,
     time : Fields.Time,
     datetime  : Fields.DateTime,
@@ -97,9 +98,15 @@ 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 if(React.isComponent(componentTypes[type])) {
+    } else if(type == 'dateformat' || type =='select_dateformat' || type =='select_date_format') {
+        component = Fields.SelectDateFormat;
+    } else if(React.isComponent()) {
         component = componentTypes[type];
     }else {
+        const tt = type.replaceAll("_","").toLowerCase();
+        if(React.isComponent(componentTypes[tt])){
+            component = componentTypes[tt];
+        } 
         delete props.dbName;
         delete props.tableName;
         props.label = label; 

package/src/components/Snackbar/index.js

@@ -118,6 +118,7 @@ const Snackbar = ({
     paddingBottom: bottom,
     paddingHorizontal: Math.max(left, right),
   };
+  action = React.isValidElement(action)? action : null;
   return (
     <View
       testID={testID+"_Container"}
@@ -150,13 +151,13 @@ const Snackbar = ({
             style
         ]}
       >
-        {<View testID={testID+"_Content"} {...contentProps} style={[styles.content,contentProps.style]}>
+        {<View testID={testID+"_Content"} {...contentProps} style={[styles.content,contentProps.style,action && theme.styles.pr1]}>
             {typeof children =='string' || typeof children ==='string' ?
              <Label {...labelProps} style={[{color:flattenStyle.color,backgroundColor:flattenStyle.backgroundColor},labelProps.style]}>
                 {children}
             </Label> : React.isValidElement(children)? children : null}
         </View>}
-        {React.isValidElement(action)? action : null}
+        {action}
       </Surface>
     </View>
   );