@fto-consult/expo-ui 1.0.4

package/src/components/Filter/utils.js

@@ -0,0 +1,289 @@
+
+import {isNonNullString,defaultStr,isObjOrArray,isObj} from "$utils";
+
+export const filterTextTypes = ['text','number','email','search','tel','url','password',"id","idfield",'piecefield','piece'];
+
+export const regexActions = {
+    $regexequals : 'Egal à',
+    $regexcontains : 'Contient',
+    $regexnotcontains : 'Ne contient pas',
+    $regexnotequals : 'Différent de',
+    $regexstartswith : 'Commence par',
+    $regexendswith : 'Se termine par'
+ }
+export const escapeRegexChars = (value)=>{
+    //if(value === undefined || value ===null || value === '' || value ==='undefined') return '';
+    //value+='';
+    if(!isNonNullString(value)) return '';
+    let escapeChars = ['!', '^', '$', '(', ')', '[', ']', '{', '}', '?', '+', '*', '.', '/', '\\', '|']
+    for(var i in escapeChars){
+        value.replace(escapeChars[i],'\\'+escapeChars[i]);
+    }
+    return value.toString();
+}
+
+export const getFilterStateValues = (state)=>{
+    state = defaultObj(state);
+    const r = {};
+    ['defaultValue','action','actions','operator','operators','ignoreCase','value','manualRun'].map((v)=>{
+      r[v] = state[v];
+    })
+    return r;
+  
+}
+
+/**** si le filtre peut être pris en compte */
+export const canHandleFilter = (f)=>{
+    if(!isObj(f)) return false;
+    if(!isNonNullString(f.operator) || !isNonNullString(f.action)) {
+        return false;
+    }
+    if(f.value === undefined || f.value === 'undefined' || f.value ==='' || f.value ===null) {
+        return false;
+    }
+    if(f.value instanceof RegExp){
+        return true;
+    }
+    if(isObjOrArray(f.value) && Object.size(f.value,true) <=0) return false;
+    return true;                    
+
+}
+
+export const regexParser = {
+    equals : (val)=> {
+        if(!isNonNullString(val)) return '';
+        return "/^"+escapeRegexChars(val)+'$/';
+    },
+    startswith : (val) => {
+        if(!isNonNullString(val)) return "";
+        return "/^"+escapeRegexChars(val)+'/'
+    },
+    endswith : (val) => {
+        if(!isNonNullString(val)) return ""; 
+        return  escapeRegexChars(val)+'$/'
+    },
+    contains : (val) => {
+      if(!isNonNullString(val)) return "";
+      return  "/"+escapeRegexChars(val)+'/'
+    },
+    notequals : (val) => {
+      if(!isNonNullString(val)) return ""
+      return "^(?!"+escapeRegexChars(val)+"$).*$"
+    },
+    notcontains : (val) =>{
+      if(!isNonNullString(val)) return ""; 
+      return "^((?!("+escapeRegexChars(val)+")).)*$"
+    }
+ }
+
+export const matchPouchDBOperator = (operator,value)=>{
+    if(!isNonNullString(operator)) return null;
+    if(!(value) && !isDecimal(value)) return null;
+    switch(operator){
+        case "MATCH":
+            if(isDecimal(value)) value +="";
+            return {operator:"$regex",value:RegExp(defaultStr(regexParser.contains(value)).ltrim("/").rtrim("/"),'i')}
+        case "NOTMATCH": 
+          if(isDecimal(value)) value +="";
+           return {operator:"$regex",value:RegExp(defaultStr(regexParser.notcontains(value)).ltrim("/").rtrim("/"),'i')}
+        case "EQ" : 
+            return {operator:'$eq',value}
+        case "NEQ" : 
+            return {operator:"$ne",value}
+        case "GT":
+          return {operator:"$gt",value}
+        case "GTE":
+            return {operator:"$gte",value}
+        case "LT":
+          return {operator:"$lt",value}
+        case "LTE":
+          return {operator:"$lte",value}
+    }
+  }
+
+let Operators = {
+    NONE: null,
+    MATCH: {
+        name: 'contient',
+        func: function(value, term) {
+            if(value) {
+                return value.toString().search(utils.isRegExp(term) ? term : new RegExp(term, 'i')) >= 0;
+            } else {
+                return !(!!term);
+            }
+        },
+        regexpSupported: true
+    },
+    NOTMATCH: {
+        name: 'ne contient pas',
+        func: function(value, term) {
+            if(value) {
+                return value.toString().search(utils.isRegExp(term) ? term : new RegExp(term, 'i')) < 0;
+            } else {
+                return !!term;
+            }
+        },
+        regexpSupported: true
+    },
+    EQ: {
+        name: '=',
+        func: function(value, term) {
+            return value == term;
+        },
+        regexpSupported: false
+    },
+    NEQ: {
+        name: '<>',
+        func: function(value, term) {
+            return value != term;
+        },
+        regexpSupported: false
+    },
+    GT: {
+        name: '>',
+        func: function(value, term) {
+            return value > term;
+        },
+        regexpSupported: false
+    },
+    GTE: {
+        name: '>=',
+        func: function(value, term) {
+            return value >= term;
+        },
+        regexpSupported: false
+    },
+    LT: {
+        name: '<',
+        func: function(value, term) {
+            return value < term;
+        },
+        regexpSupported: false
+    },
+    LTE: {
+        name: '<=',
+        func: function(value, term) {
+            return value <= term;
+        },
+        regexpSupported: false
+    }
+};
+ let utils = {
+    ALL: '#All#',
+    NONE: '#None#',
+    BLANK: '#Blank#"',
+    expressionFilter : function(operator, term, staticValue, excludeStatic) {
+        var self = this;
+    
+        this.operator = Operators.get(operator);
+        this.regexpMode = false;
+        this.term = term || null;
+        if(this.term && this.operator && this.operator.regexpSupported) {
+            if(utils.isRegExp(this.term)) {
+                this.regexpMode = true;
+                if(!this.term.ignoreCase) {
+                    this.term = new RegExp(this.term.source, 'i');
+                }
+            }
+        }
+    
+        this.staticValue = staticValue;
+        this.excludeStatic = excludeStatic;
+    
+        this.test = function(value) {
+            if(Array.isArray(self.staticValue)) {
+                var found = self.staticValue.indexOf(value) >= 0;
+                return (self.excludeStatic && !found) || (!self.excludeStatic && found);            
+            } else if(self.term) {
+                return self.operator.func(value, self.term);
+            } else if(self.staticValue === true || self.staticValue === utils.ALL) {
+                return true;
+            } else if(self.staticValue === false || self.staticValue === utils.NONE) {
+                return false;
+            } else {
+                return true;
+            }
+        };
+    
+        this.isAlwaysTrue = function() {
+            return !(self.term || Array.isArray(self.staticValue) || self.staticValue === utils.NONE || self.staticValue === false);
+        };
+    },
+    defaultOperator : 'MATCH',
+    Operators,
+    constants : {},
+    items : {
+        EQ: Operators.EQ.name,
+        MATCH : Operators.MATCH.name,
+        NOTMATCH : Operators.NOTMATCH.name,
+        NEQ : Operators.NEQ.name,
+        GT : Operators.GT.name,
+        GTE : Operators.GTE.name,
+        LT : Operators.LT.name,
+        LTE : Operators.LTE.name
+    },
+    isRegExp: function(obj) {
+        return Object.prototype.toString.apply(obj) === '[object RegExp]';
+    },
+    /**
+     * Escapes all RegExp special characters.
+     */
+     escapeRegex: function(re) {
+        return re.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+    },
+    /**** vérifie si la valeur {value}, match la valeur {filterText} 
+     * @param {object : {
+     *      value : la valeur à vérifier
+     *      filterText : le texte à vérifier si value le match
+     *      operateur : chaine de caractère dans la liste des opérateurs :, props Operators, ci-desous
+     *      useRegex : Spécifie si l'expression régulière sera utilisée pour la recherche
+     * }}
+    */
+    match : ({value,filterText,operator,useRegex})=>{
+        if(isNonNullString(operator)){
+            operator = Operators[operator]
+        }
+        filterText = defaultStr(filterText);
+        operator = defaultObj(operator);
+        let isSearchMode = filterText !== '';
+        if(operator && isFunction(operator.func)){
+            let opterm = operator.regexpSupported && isSearchMode ? (useRegex ? filterText : utils.escapeRegex(filterText)) : filterText;
+            return !isSearchMode || operator.func(value, opterm)
+        }
+        return !isSearchMode ? true : defaultStr(value).toLowerCase().contains(filterText.toLowerCase());
+    },
+    /**
+     * Returns the first element in the array that satisfies the given predicate
+     * @param  {Array} array     the array to search
+     * @param  {function} predicate Function to apply to each element until it returns true
+     * @return {Object}           The first object in the array that satisfies the predicate or undefined.
+     */
+    findInArray: function(array, predicate) {
+        if (this.isArray(array) && predicate) {
+            for (var i = 0; i < array.length; i++) {
+                var item = array[i];
+                if (predicate(item)) {
+                    return item;
+                }
+            }
+        }
+        return undefined;
+    },
+    /**
+     * Returns a JSON string represenation of an object
+     * @param {object} obj
+     * @return {string}
+     */
+    jsonStringify: function(obj, censorKeywords) {
+        function censor(key, value) {
+            return censorKeywords && censorKeywords.indexOf(key) > -1 ? undefined : value;
+        }
+        return JSON.stringify(obj, censor, 2);
+    }
+ }
+ 
+for(let i in utils.items){
+    utils.constants[i] = i;
+}
+
+export default utils;

package/src/components/Form/Action.js

@@ -0,0 +1,112 @@
+import React from "$react";
+import PropTypes from "prop-types";
+import Button from "$ecomponents/Button";
+import notify from "$notify";
+import FormsManager from "./utils/FormsManager";
+import {uniqid} from "$utils";
+import { getFormInstance } from "./utils/FormsManager";
+import {flattenStyle} from "$theme";
+
+const FormActionComponent = React.forwardRef(({
+    formName,disabled:customDisabled,
+    id:customId,Component,handleChange,isFormAction,children,style,isMenuItem,onPress,
+    componentProps,innerRef,...rest},ref)=>{
+    const isMounted = React.useIsMounted();
+    componentProps = isObj(componentProps)? componentProps : {};
+    rest = isObj(rest)? rest : {};
+    const id = React.useRef(defaultStr(customId,uniqid("form-action-id"))).current;
+    const [state,setState] = React.useState({
+        disabled : typeof customDisabled =='boolean'? customDisabled : false,
+    });
+    const {disabled} = state;
+    const [context] = React.useState({});
+    context.getId = ()=> id;
+    context.getFormName = x => formName;
+    context.enable = ()=>{
+        if(!isMounted()) return;
+        setState({...state,disabled:false})
+    }
+    context.disable = ()=>{
+        if(!isMounted()) return;
+        setState({...state,disabled:true})
+    }
+    context.isDisabled = x=> disabled ? true : false;
+    context.isEnabled = x=> !context.isDisabled();
+    context.toggleStatus = () =>{
+        const f = getFormInstance(formName);
+        if(f && f.isValid){
+            const isValid = f.isValid();
+            if(isValid){
+                if(!context.isEnabled()){
+                    context.enable();
+                }
+            } else if(!context.isDisabled()){
+                context.disable();
+            }
+            return isValid;
+        }
+        return false;
+    }
+    React.setRef(ref,context);
+    React.useEffect(()=>{
+        FormsManager.trigger("mountAction",formName,context);
+        context.toggleStatus();
+        return ()=>{
+            React.setRef(ref,null);
+            FormsManager.trigger("unmountAction",formName,id);
+        }
+    },[]);
+    let _disabled = disabled;
+    if(!disabled && formName){
+        const f = getFormInstance(formName);
+        if(!f || (!f.isValid || !f.isValid())){
+            _disabled = true;
+        }
+    }
+    const props = {
+        ...rest,
+        ...componentProps,
+        style:flattenStyle([style,componentProps.style,_disabled?{pointerEvents:'none',cursor:'not-allowed'}:null]),
+        disabled:_disabled,
+        formName,
+        id,
+        isMenuItem,
+        onPress : (event) =>{
+            if(context.isDisabled()) {
+                notify.error("Vous devez vous rassurer que les champs du formulaire sont tous valides");
+                return;
+            }
+            const args = React.getOnPressArgs(event);
+            if(!onPress) return;
+            const formInstance = getFormInstance(formName);
+            if(!formInstance || typeof formInstance.isValid != 'function' && isObj(formInstance.props)) return;
+            if(formInstance.isValid()){
+                onPress({...args,data:formInstance.getData({handleChange})})
+            }
+        }
+    };
+    if(typeof children ==='function'){
+        return children(props);
+    }
+    Component = defaultVal(props.Component,Component,Button);
+    delete props.Component;
+    delete props.formName;
+    delete props.isAction;
+    delete props.formName;
+    return <Component ref={innerRef}  {...props}>{children}</Component>
+});
+
+
+FormActionComponent.propTypes = {
+    /*** les forms doivent avoir un nom et ce nom doit être unique pour l'application */
+    formName : PropTypes.string.isRequired,
+    onPress : PropTypes.func,
+    Component : PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.elementType,
+        PropTypes.node,
+    ]),
+}
+FormActionComponent.displayName = "Form.Action";
+
+export default FormActionComponent;

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

@@ -0,0 +1,29 @@
+import Checkbox from "$ecomponents/Checkbox";
+import {defaultObj,isNonNullString} from "$utils";
+import Field  from"./Field";
+import React from "react";
+export default class FormCheckboxField extends Field{
+    canFocus(){
+        return false;
+    }
+    setValue (value){
+        if(this._fieldRef && this._fieldRef.setValue){
+            return this._fieldRef.setValue(value);
+        }
+    }
+    _render(props,setRef){
+        props.onChange = (args)=>{
+            args.value = this.parseDecimal(args.value);
+            this.validate(args);
+        }
+        return <Checkbox
+            {...props}
+            ref = {setRef}
+        />
+    }
+}
+
+
+FormCheckboxField.propTypes = {
+    ...defaultObj(Checkbox.propTypes),
+}

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

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

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

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