@fto-consult/expo-ui 1.0.4

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

@@ -0,0 +1,21 @@
+import PhoneInput from "$ecomponents/PhoneInput";
+import Field from "./Field";
+
+export default class FormPhoneInputField extends Field {
+    canFocus(){
+        return false;
+    }
+    _render(props,setRef){
+        props.onChange = (args)=>{
+            this.validate(args);
+        }
+        return <PhoneInput
+            {...props}
+            setRef = {setRef}
+        />
+    }
+}
+
+FormPhoneInputField.propTypes = {
+    ...PhoneInput.PropTypes
+}

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

@@ -0,0 +1,44 @@
+import TextField from "$ecomponents/TextField";
+import {defaultObj,isNonNullString} from "$utils";
+import PropTypes from "prop-types";
+import Field  from"./Field";
+import React from "react";
+export default class FormTextField extends Field{
+    isTextField (){
+        return true;
+    }
+    _render(props,setRef){
+        props.onChange = (args)=>{
+            this.validate(args);
+        }
+        return <TextField
+            {...props}
+            setRef = {setRef}
+        />
+    }
+}
+
+
+FormTextField.propTypes = {
+    ...defaultObj(TextField.propTypes),
+    ...Field.propTypes,
+    id : PropTypes.string,
+    type : PropTypes.string,    
+    allowSpace : PropTypes.bool, //les tex
+    placeholder:PropTypes.string,//le placeholder du champ
+    errorText : PropTypes.string,
+    error : PropTypes.bool,
+    /*** si la valeur sera toujours en majuscule */
+    upper : PropTypes.bool,
+    upperCase : PropTypes.bool,
+    format : PropTypes.oneOf([
+        'currency',
+        'money',
+        "custom",
+        "number",
+        'hashtag',
+        undefined,
+        null,
+        "",
+    ]),
+}

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

@@ -0,0 +1,28 @@
+import {Time} from "$ecomponents/Date";
+import {defaultObj} from "$utils";
+import Field  from"./Field";
+import React from "react";
+import DateLib from "$lib/date";
+
+export default class FormTimeField extends Field{
+    getValidValue(){
+        const v = super.getValidValue();
+        return DateLib.isDateObj(v)? v.toSQLTime() : isNonNullString(v)? v : undefined;
+    }
+    canFocus(){
+        return false;
+    }
+    _render(props){
+        props.onChange = (args)=>{
+            this.validate(args);
+        }
+        return <Time
+            {...props}
+        />
+    }
+}
+
+
+FormTimeField.propTypes = {
+    ...defaultObj(Date.propTypes),
+}

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

@@ -0,0 +1,52 @@
+import Field from "./Field"
+import TextField from "./TextField";
+import SelectField from "./SelectField";
+import Switch from "./Switch";
+import Checkbox from "./Checkbox";
+//import IdField from "./IdField";
+//import PieceField from "./PieceField";
+import Slider from "./Slider";
+import ColorPicker from "./Color";
+//import Date from "./Date";
+//import Time from "./Time";
+import Image from "./Image";
+import Tel from "./Tel";
+import SelectCountry from "./SelectCountry";
+import Html from "./Html";
+
+export default {
+    Field,
+    TextField, 
+    SelectField,
+    SelectCountry
+    ,Switch
+    ,Checkbox
+    //,IdField
+    //,PieceField
+    ,Slider
+    ,ColorPicker
+    //,Date
+    //,Time
+    ,Image
+    ,Tel
+    ,Html
+}
+
+export {
+    Field,
+    TextField, 
+    SelectField,
+    SelectCountry
+    ,Switch
+    ,Checkbox
+    //,IdField
+    //,PieceField
+    ,Slider
+    ,ColorPicker
+    ,ColorPicker as Color
+    //,Date
+    //,Time
+    ,Image
+    ,Tel
+    ,Html
+}

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

@@ -0,0 +1,59 @@
+/*** le prompt selector a pour fonction de retourner 
+ *  une form field de type select qui lorsqu'on clique sur le boutton addIcon, affiche une boîte de dialogogue permettant à l'utilisateur
+ *  d'ajouter un nouvel item
+ */
+export default  (_props)=>{
+    let {items,onAdd,addItemTitle,yes,no,prompTitle,message,promptMessage,onUnselect,...props} = defaultObj(_props)
+    props = defaultObj(props);
+    props.type = 'select';
+    props.text = defaultStr(props.text,props.label);
+    props.showAdd = defaultBool(props.showAdd,true);
+    props.addIcon = defaultStr(props.addIcon,'account-multiple-plus');
+    props.multiple = defaultBool(props.multiple,true);
+    props.display = defaultStr(props.display, props.multiple?"tags":"list");
+    props.items = isObjOrArray(items)? items : [];
+    props.itemValue = defaultFunc(props.itemValue,({item})=>{
+        return item;
+    })
+    props.onUnselect = (arg)=>{
+        let {item,context}= arg;
+        if(context && context.state){
+            let data = []
+            Object.map(context.state.menuItems,(v,i)=>{
+                if(isNonNullString(v) && v !== item){
+                    data.push(v);
+                }
+            })
+            context.setState({menuItems:data,onKey:!context.state.onKey});
+            if(isFunction(onUnselect)){
+                onUnselect(arg);
+            }
+        }
+    }
+    props.renderItem = defaultFunc(props.renderItem,({item,context})=>{
+        return item;
+    });
+    props.onAdd = (arg)=>{
+        let {context}= arg;
+        if(context && context.state){
+            showPrompt({
+            yes : defaultVal(yes,'Enregistrer'),
+            no : defaultVal(no,'Annuler'),
+            title:defaultStr(prompTitle,addItemTitle,'Ajouter un élément'),
+            message:defaultStr(message,promptMessage),
+            onSuccess:({value})=>{
+                let {menuItems} = context.state;
+                let data = defaultArray(menuItems);
+                if(isNonNullString(value) && !arrayValueExists(data,value)){
+                    data.push(value);
+                }
+                context.setState({menuItems:data,onKey:!context.state.onKey},()=>{
+                    if(isFunction(onAdd)){
+                        onAdd(arg);
+                    }
+                });
+            }})
+        }
+    }
+    return props;
+}

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

@@ -0,0 +1,42 @@
+import selectors from "./sprintfSelectors";
+import {isNonNullString,defaultFunc} from "$utils";
+
+export default  ({value,val,cb,success})=>{
+    val = defaultStr(value,val)
+    if(!isNonNullString(val)){
+        return null;
+    } 
+    cb = defaultFunc(cb,success);
+    let keys = [];
+    for(let i in selectors){
+        if(!isObj(selectors[i])) continue;
+        if(val.contains(i)){
+            keys.push(i);
+        } else if(val.contains(i.toUpperCase())){
+            keys.push(i.toUpperCase())
+        }
+    }
+    let results = {};
+    let length = keys.length;
+    let index = length;
+    let key = undefined
+    const next = ()=>{
+        index -=1;
+        if(index < 0){
+            for(let i in results){
+                let t = selectors[i.toLowerCase()];
+                let replace = results[i];
+                let dbName = defaultStr(t.dbName).toLowerCase(), type = defaultStr(t.type).toLowerCase();
+                if( dbName !== 'struct_data' && type !== 'field' && type !== 'form'){
+                    replace = " #"+defaultStr(t.dbName)+"["+i.ltrim("&").rtrim("&")+"-"+replace+"]".toUpperCase();
+                }
+                val = val.replaceAll(i,replace.toUpperCase());
+            }
+            cb(val);
+        } else {
+            key = keys[index];
+            if(!isNonNullString(key)) {return next();}
+        }
+    }
+    next();
+}

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

@@ -0,0 +1,117 @@
+import Date from "$lib/date";
+const selectLabel = {
+    title : 'Sélectionner un libelé',
+    table : 'labels',
+    dbName : 'struct_data',
+    itemValue : ({item})=>defaultStr(item.label,item.code)
+}
+export default  {
+    "&libele&" : selectLabel,
+    "&vente&" : {
+        title : 'Sélectionner une vente',
+        table : 'sales',
+    },
+    "&achat&" : {
+        title : 'Sélectionner un achat',
+        table : 'purchases',
+    },
+    "&stock&" : {
+        title : 'Sélectionner stock',
+        table : 'stocks',
+    },
+    "&transfert&" : {
+        title : 'Sélectionner mouvement de transfert',
+        table : 'stocks_transfers',
+    },
+    "&reglement&" : {
+        title : 'Sélectionner un règlement',
+        table : 'payments',
+    },
+    "&tiers&" : {
+        title : 'Sélectionner un tier',
+        table : 'third_parties',
+        dbName : 'third_parties',
+    },
+    "&projet&" : {
+        title : 'Sélectionner un projet',
+        table : 'projects',
+        dbName : 'projects',
+    },
+    "&tache&" : {
+        title : 'Sélectionner une tâche',
+        table : 'tasks',
+        dbName : 'projects',
+    },
+    "&commercial&" : {
+        title : 'Sélectionner commercial',
+        table : 'users',
+        dbName : 'users',
+        fetchDataOpts:{
+            selector : {$and:[{isSeller:1}]}
+        }
+    },
+    "&client&" : {
+        title : 'Sélectionner client',
+        table : 'third_parties',
+        dbName : 'third_parties',
+        fetchDataOpts:{
+            selector : {$and:[{type:{$in:["customer"]}}]}
+        }
+    },
+    "&fournisseur&" : {
+        title : 'Sélectionner Fournisseur',
+        table : 'third_parties',
+        dbName : 'third_parties',
+        fetchDataOpts:{
+            selector : {$and:[{type:{$in:["provider"]}}]}
+        }
+    },
+    "&utilisateur&" : {
+        title : 'Sélectionner un utilisateur',
+        table : 'users',
+        dbName : 'users',
+    },
+    "&caisse&" : {
+        title : 'Sélectionner une caisse',
+        table : 'checkouts',
+        dbName : 'common',
+    },
+    "&produit&" : {
+        title : 'Sélectionner un produit/article',
+        table : 'products',
+        dbName : 'products',
+    },
+    "&categorie&" : {
+        title : 'Sélectionner une catégorie de produit',
+        table : 'products_categories',
+        dbName : 'products',
+    },
+    "&taxe&" : {
+        title : 'Sélectionner une taxe',
+        table : 'taxes',
+        dbName : 'common',
+    },
+    "&depot&" : {
+        title : 'Sélectionner un dépôt',
+        table : 'warehouses',
+        dbName : 'common',
+    },
+    "&contact&" : {
+        title : 'Sélectionner un contact',
+        table : 'contacts',
+        dbName : 'common',
+    },
+    "&sdate&" : {
+        title : 'Sélectionner une date',
+        type : 'field',
+        field : {
+            type : 'date',
+            text : 'Sélectionner une date',
+            format : Date.defaultDateFormat
+        },
+        desc : "remplace le motif par la date qui sera sélectionnée par l'utilisateur au format jj/mm/aaaa",
+    },
+    "&date&" : "remplace le motif par la date actuelle au format : jj/mm/aaaa",
+    "&heure&" : "remplace le motif par l'heure actuelle au format hh:mm:ss",
+    "&dateheure&" : "remplace le motif par la date et l'heure actuelle au format : jj/mm/aaaa hh:mm:ss",
+}

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

@@ -0,0 +1,8 @@
+import {uniqid} from "$utils";
+
+export const RENDERED_ID = uniqid("RENDERED-NAME");
+
+export const getRenderedId = (props)=>{
+    if(!isObj(props)) return "";
+    return props[RENDERED_ID];
+}

package/src/components/Form/Form.js

@@ -0,0 +1,221 @@
+import Field from "./Fields/Field";
+import React from "$react";
+import {classExtends,isFunction,isNonNullString,defaultStr,defaultObj,defaultVal,extendObj} from "$utils";
+import {warning,Forms} from "./utils";
+import Action from "./Action";
+import View from "$ecomponents/View";
+import KeyboardAvoidingView from "./KeyboardAvoidingView";
+import { StyleSheet } from "react-native";
+import APP from "$capp/instance";
+import PropTypes from "prop-types";
+
+const defaultComponentNode = View
+
+/**** règles d'utilisation : 
+    1. les forms doivent toujours avoir un nom : chaine de caractère unique pour l'application et non null
+    2. tous les champs (Fields) doivent avoir un name et un formName
+    3. le nom de la form est unique pour l'application
+    4. Les actions de forms sont les buttons qui lorsqu'ils sont cliqués, envoient les données de la form : ils prennent en 
+        paramètre la data, le contenu de la form
+    5. Les Fields doivent obligatoirement avoir un unique nom
+    7. Idems pour les fields, les actions de la form doivent avoir un formName, pour le nom de la form à qui ils font référence
+ */
+export default class FormComponent extends React.AppComponent {
+    constructor(props) {
+        super(props);
+        this.isValid = this.isValid.bind(this);
+        this.getFields = this.getFields.bind(this);
+        this.getField = this.getField.bind(this);
+        this.resetFields = this.resetFields.bind(this);
+        this.getData = this.getData.bind(this);
+        Forms.trigger("mount",props.name,this);
+        
+    }
+    getErrorText(){
+        return defaultStr(this.___errorText);
+    }
+    /*** vérifie si la form est valide */
+    isValid () {
+        let fields = this.getFields();
+        this.___errorText = "";
+        if(isObj(fields)){
+            for(var j in fields){
+                const f = fields[j];
+                if(f && !f.isValid() && f.getErrorText){
+                    this.___errorText = f.getErrorText(true);
+                    return false;
+                }
+            }
+            return true;
+        }
+        return false;
+    }
+    /*** retourne les données du formulaire 
+     *  on retourne en plus des données initialement passées en paramètre, la liste des données 
+     *  qui ont été modifiées
+    */
+    getData(options){
+        if(isObj(options) && options.handleChange === false){
+            return defaultObj(this.props.data);
+        }
+        const r = Object.assign({},this.props.data);
+        let fields = this.getFields();
+        if(!isObj(fields)) return r;
+        for(var i in fields){
+            let field = fields[i];
+            if(!isField(field)) continue;
+            const fName = field.getName(),fValue = field.isValid() ? field.getValidValue(r) : field.getInvalidValue();
+            r[fName] = fValue;
+            if(fValue === undefined && field.isHtml()){
+                delete r[fName];
+            }
+        }
+        return r;
+    }
+    componentWillUnmount(){
+        super.componentWillUnmount();
+        Forms.trigger("unmount",this.props.name);
+    }
+    componentDidMount(){
+        super.componentDidMount();
+        Forms.trigger("mount",this.props.name,this,false);
+    }
+    resetFields(){
+        this._fields = {}
+    }
+    getFields (){
+        return this._fields;
+    }
+    getField (fieldName){
+        if(!isNonNullString(fieldName)) return null;
+        let fields = defaultObj(this.getFields());
+        return fields[fieldName] || null;
+    }
+    render (){
+        let {
+            Component,
+            onValidate,
+            onNoValidate,
+            onValidateField,
+            onSubmit,
+            perm,
+            onNoValidateField,
+            onKeyEvent,
+            keyboardEvents,
+            testID,
+            ...rest
+        } = this.props;
+        rest = defaultObj(rest);
+        const ComponentNode = defaultVal(Component,defaultComponentNode);
+        testID = defaultStr(testID,"RN_FormComponent");
+        return (<KeyboardAvoidingView testID={testID+"_KeyboardAvoidingView"}>
+            <ComponentNode  {...rest} testID={testID} style={[styles.container,rest.style]}>
+                {this.props.children}
+            </ComponentNode>
+        </KeyboardAvoidingView>);
+    }
+}
+const isField  = (Component)=>{
+    return classExtends(Component,Field);
+}
+
+const isForm  = (Component)=>{
+    return classExtends(Component,FormComponent);
+}
+
+const getForm = (formName)=>{
+    if(!isNonNullString(formName)) return null;
+    if(!isObj(Forms) || !isObj(Forms.forms)) return null;
+    if(!isForm(Forms.forms[formName])) return null;
+    return APP.FormsManager.forms[formName];
+}
+
+if(!isFunction(Forms.get)){
+    Object.defineProperties(Forms,{
+        get : {
+            value : getForm,override:false,writable:false
+        },
+        getForm : {
+            value : getForm,override:false,writable:false
+        },
+        isForm : {
+            value : isForm,override:false,writable:false
+        }
+    });
+}
+
+Object.defineProperties(FormComponent,
+    {
+        Action : {
+            value :  Action,
+            override : false,
+            writable : false,
+        },
+        isField : {
+            value : isField,
+            override : false,
+            writable : false
+        },
+        'warning' : {
+            value : warning,
+            override : false,
+            writable : false
+        },
+        isForm : {
+            value : isForm,writable:false,override:false
+        },
+        getForm : {
+            value : getForm,writable:false,override:false
+        },
+    }
+)
+
+
+FormComponent.propTypes = {
+    /*** la permission qu'à l'utilisateur sur le champ
+     *  chaine de caractère de la forme : 
+     *  resource : action où resource représente la resource en question et action : l'action sur la resource
+     */
+    perm : PropTypes.string,
+    /**** cette fonction est appelée lorsque les données du formulaire sont appelées
+     *  elle est appelée à partir du composant Field, lorsque le formulaire est valide et que le bouton Entrée à été cliqué
+     *  onSubmit ({data,context,currentField})
+     *  la props currentField : représente le champ qui est à l'origine de l'envoie du formulaire
+     */
+    onSubmit : PropTypes.func,
+    Component : PropTypes.any,//le composant react qui est utilisée pour monter la form, par défaut, le Fragment React
+    name : PropTypes.string, //le nom de la form
+    onValidate : PropTypes.func, //lorsque tous les champs de la form sont validés
+    /*** Cette fonction est appelée lorsque au moins un champ de la form n'est pas valide : 
+     * elle prend en paramètre : 
+     *      -name : le nom du champ,
+     *      -value : la valeur qui n'a pas été validée pour le champ,
+     *      -msg : Le message d'erreur correspondant
+     *      -validRule : La règle de validation,
+     *      -validParams : Les paramètres de validation,
+     *      -event : L'évènement utilisée qui a déclanché la validation du formulaire
+     */
+    onNovalidate : PropTypes.func, //lorsque au moins un champ de la form n'est pas validée,
+    onValidateField : PropTypes.func,
+    /*** objet de la forme : 
+     *  {
+
+     *      eventName : handler 
+            avec eventName   le nom de l'évènement et hanbler la fonction de rappel à appeler
+     *  }
+     */
+    keyboardEvents : PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
+    onKeyEvent : PropTypes.func/*** l'évènement global appelé lorsqu'on clique sur une champ de la form */,
+}
+
+const styles = StyleSheet.create({
+    container : {
+        width : '100%',
+        flexDirection : 'row',
+        padding : 10,
+        flexWrap : 'wrap',
+    }
+})