@fto-consult/expo-ui 2.19.7 → 2.20.0

package/src/components/Date/FormatSelector.js

@@ -0,0 +1,98 @@
+// 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,
+    }
+}
+export const getDateFormatSelectorItems = x=> Object.map(DateLib.formats,(format)=>{
+    return {code : format,label:new Date().toFormat(format)}
+});
+
+export const dateFormatSelectorRenderItem = ({item})=>{
+    return "{0}, EX : {1}".sprintf(item.code,item.label);
+}
+
+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>
   );
@@ -215,6 +216,7 @@ const styles = StyleSheet.create({
   },
   container: {
     flexDirection: 'row',
+    flexWrap : "wrap",
     justifyContent: 'space-between',
     margin: 8,
     borderRadius: 4,