@fto-consult/expo-ui 1.0.4

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

@@ -0,0 +1,21 @@
+import {defaultObj} from "$utils";
+import Field  from"./Field";
+import React from "react";
+export default class FormHtmlField extends Field{
+    isHtml(){
+        return true;
+    }
+    _render(props){
+        const {render} = props;
+        if(typeof render =='function'){
+            const r = render(props);
+            return React.isValidElement(r,true)? r : null;
+        }
+        return null;
+    }
+}
+
+
+FormHtmlField.propTypes = {
+    ...defaultObj(Field.propTypes),
+}

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

@@ -0,0 +1,131 @@
+import TextField from "./TextField";
+import PropTypes from "prop-types";
+import {isNonNullString,defaultStr} from "$utils";
+import { UPPER_CASE } from "$src/lib/validator";
+//import {isDocUpdate} from "$database/utils";
+
+/*** le composant IdField reprend exactement les même propriétés 
+ *  que le composant textField, elle doit cependant avoir obligatoirement un champ 
+ *  name, un champ dbName, le nom de la bd ou vérifier l'unicité du champ 
+ */
+export default class IdField extends TextField {
+    constructor(props){
+        super(props)
+        this.isDocUpdate = false;
+    }
+    getValidValue(data){
+        let _id = super.getValidValue(data);
+		if(this.props._id === false){
+			return defaultStr(_id);
+		}
+        let prefix = defaultStr(this.props.table,this.props.tableName).toUpperCase().trim();
+        if(this.props.prefix_on_id == false){
+            prefix = "";
+        } else  ///les id des champs uniques sont définis de la forme : tableName/code 
+        if(isNonNullString(prefix)){
+            prefix =prefix.rtrim("/")+"/";
+            _id = defaultStr(_id).ltrim("/");
+        }
+        if(!isDocUpdate(data)){
+            data._id = (prefix+_id).trim();
+        }
+        return defaultStr(_id).trim();
+    }
+    isValidRuleDynamic(){
+        return true;
+    }
+    _render(props,setRef){
+        let {dbName,_id,tableName,table,validType,validRule,fieldName,...p}  = props;
+        fieldName = defaultStr(fieldName,this.name,p.name);
+        this.fieldName = fieldName;
+        if(isNonNullString(fieldName) && isObj(props.data)){    
+            this.isDocUpdate = isDocUpdate(p.data) && isNonNullString(props.data[fieldName]);
+        }
+        tableName = defaultStr(tableName,table).toUpperCase();
+        this.maxLength = undefined;
+        validType = defaultStr(validType,validRule);
+        if(this.isDocUpdate){
+            p.disabled = true;         
+            p.validType = validType = UPPER_CASE;
+        } else {
+            //p.disabled = false;
+            let maxLength = 15;
+            if(isNumber(p.maxLength) && maxLength > 0){
+                maxLength = p.maxLength;
+            } 
+            if(!isNonNullString(dbName)) dbName = '';
+            let prefix = tableName;
+            if(this.props.prefix_on_id == false){
+                prefix = "";
+            } 
+            if(isNonNullString(prefix)){
+                prefix = prefix.toUpperCase().trim()+"/";
+                //les champs d'id unique pour la table sont définis de la forme : tableName/id
+                //tableName = '';
+            }
+            if(isNonNullString(fieldName)){
+                prefix = "";
+            } else fieldName = "";
+            let uniqV = 'uniqueid['+dbName+','+tableName+','+(p.label||p.text)+','+fieldName+','+prefix+']';
+            let validType1 = 'maxLength['+maxLength+']';                     
+            
+            if(!validType.contains("maxLength")){
+                validType = validType1.rtrim("|")+"|"+validType.trim().ltrim('|');
+            }  
+            if(!validType.contains("required")){
+                validType = "required|"+validType.ltrim("|");
+            }
+            if(!validType.contains(uniqV)){
+                validType = validType.trim().rtrim('|')+"|"+uniqV;
+            } 
+            if(!validType.contains(UPPER_CASE)){
+                validType += "|"+UPPER_CASE
+            }
+            p.validType = validType;
+            this.INITIAL_STATE.validRule = this.INITIAL_STATE.validType = validType;
+            p.maxLength = maxLength;
+            if(typeof p.minLength !=='number'){
+                p.minLength = 2;
+            }
+            this.maxLength = maxLength;
+        }
+        if(p.disabled || p.readOnly || p.editable === false){
+            p.contentContainerProps = Object.assign({},p.contentContainerProps)
+            p.contentContainerProps.pointerEvents = defaultStr(p.contentContainerProps.pointerEvents,"auto");
+            p.enableCopy = p.defaultValue ? true : false;
+        }
+        this.setValidRule(validType);
+        p.upper = true;
+        return super._render(p,setRef);
+    }
+    isTextField(){
+        return false;
+    }
+}
+
+IdField.propTypes = {
+    /**** si le champ sera habileté de définir la valeur de l'id
+     *  Au fait lorsque dans une même table, il existe au moins deux champ de type pieceId, il est possible que le champ sélectionné pour générer
+     *  la valeur de l'id de la table ne soit pas le bon. pour éviter celà, il suffit de passer la props
+     *  _id à la valeur false dans tous les champs qui seront ignorés pour le calcul de l'id; ainsi, en cas de validation du champ, la valeur de l'_id de la table ne sera pas calculée
+     */
+    _id : PropTypes.bool,
+    /*** le nom du champ qu'on valide 
+     *  si fieldName est définie, alors, il est utilisé pour la validation du champ.
+     *  lorsque la valeur est mise à jour, on recherche en base toutes les objets ayant pour valeur ladite valeur
+     *  Si est trouvé, alors une erreur est retournée.
+     *  Dans le cas où fieldName est définie, alors, l'id n'est pas utilisé pour la validation
+     * 
+    */
+    fieldName : PropTypes.string,
+    ///si les id de la table seront préfixés
+    prefix_on_id : PropTypes.bool,
+    ...TextField.propTypes,
+    /*** le nom de la table dans laquelle l'idField est enreigistré */
+    table : PropTypes.string,
+    tableName : PropTypes.string, //idem à table
+    /*** le nom de la bd où l'id field est enregistré */
+    dbName : PropTypes.string,
+    //la longueur maximale du champ
+    maxLength:PropTypes.number
+}

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

@@ -0,0 +1,65 @@
+import Field from "./Field";
+import Image from "$ecomponents/Image";
+import PropTypes from "prop-types";
+import {defaultVal} from "$utils";
+export default class FormFieldImage extends Field {
+    constructor(props){
+        super(props)
+        this.autobind();
+    }
+    canHandleWidthOrHeightProps(){
+        return true;
+    }
+    canFocus(){
+        return false;
+    }
+    isValid(){
+        return true;
+    }
+    onChange(args){
+        let {dataUrl}= args;
+        const previousValue = this.getPreviousValue();
+        if(previousValue === dataUrl && previousValue){
+            return ;
+        }
+        this.validate({...args,value:dataUrl,context:this});
+        /*if(isFunction(this.props.onChange)){
+            this.props.onChange({dataUrl,src:dataUrl,dataURL:dataUrl,previousSrc:previousValue});
+        }*/
+    }
+    getComponent(){
+        return Image;
+    }
+    _render(props){
+        let {dbName,onChange,...p}  = props;
+        p.onChange = this.onChange.bind(this);
+        return <Image
+           {...p}
+           src={defaultVal(p.src,p.defaultValue)}
+        />
+    }
+    isTextField(){
+        return false;
+    }
+}
+
+FormFieldImage.propTypes = {
+    width : PropTypes.number,
+    height : PropTypes.number,
+    /*** le nom du champ qu'on valide 
+     *  si fieldName est définie, alors, il est utilisé pour la validation du champ.
+     *  lorsque la valeur est mise à jour, on recherche en base toutes les objets ayant pour valeur ladite valeur
+     *  Si est trouvé, alors une erreur est retournée.
+     *  Dans le cas où fieldName est définie, alors, l'id n'est pas utilisé pour la validation
+     * 
+    */
+    fieldName : PropTypes.string,
+    ...Field.propTypes,
+    /*** le nom de la table dans laquelle l'idField est enreigistré */
+    table : PropTypes.string,
+    tableName : PropTypes.string, //idem à table
+    /*** le nom de la bd où l'id field est enregistré */
+    dbName : PropTypes.string,
+    //la longueur maximale du champ
+    maxLength:PropTypes.number
+}

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

@@ -0,0 +1,143 @@
+import TextField from "./TextField";
+import PropTypes from "prop-types";
+import { UPPER_CASE } from "$src/lib/validator";
+import {isNonNullString,defaultStr} from "$utils";
+//mport {isDocUpdate} from "$database/utils";
+import React from "$react";
+import {copyTextToClipboard} from "$capp/clipboard/utils";
+import Icon,{COPY_ICON} from "$ecomponents/Icon";
+import { ActivityIndicator } from "react-native-paper";
+import dbUniqid from "$database/plugins/uniqid";
+
+export default class FormPieceField extends TextField {
+    constructor(props){
+        super(props)
+        this.autobind();
+    }
+    UNSAFE_componentWillReceiveProps(nextProps){
+        this.newFieldPieceId = undefined;
+        return super.UNSAFE_componentWillReceiveProps(nextProps);
+    }
+    componentDidMount(){
+        super.componentDidMount();
+        if(isNonNullString(this.piece) && isNonNullString(this.props.tableName)){  
+            this.fetchNewId(false);
+        }
+    }
+    handleCheckIdError(msg,errorCb){
+        this.canCheckAgain = false;
+        this.hasError = true;
+        if(isNonNullString(msg)) this.onNoValidate(msg,undefined,this,null,null);
+        if(isFunction(errorCb)){
+            errorCb(e);
+        }
+    }
+
+    /*** met à jour la données du numéro de piece */
+    fetchNewId(focus){
+        let data = defaultObj(this.props.data);
+        if(!isNonNullString(this.piece)) return undefined;
+        if(isDocUpdate(data) && isNonNullString(data[this.name])){
+            this.newFieldPieceId = data[this.name];
+            return this.newFieldPieceId;
+        }
+        setTimeout(()=>{
+            let {id,pieceId} = dbUniqid({...this.getUniqidArgs()})
+            this.newFieldId = id;
+            this.newFieldPieceId = isNonNullString(pieceId)?pieceId:id;
+            const value = this.newFieldPieceId;
+            this.validate({value}); 
+            if(focus) this.focus();
+        },0);
+    }
+    /*** retourne la valeur validée */
+    getValidValue(data){
+        let validValue = super.getValidValue(data);
+        data.piece = this.piece;
+        data._id = defaultStr(data._id,validValue,this.newFieldPieceId);
+        return validValue;
+    }
+    setPiece(piece,tableName){
+        this.tableName = defaultStr(tableName,this.tableName).toUpperCase();
+        this.piece = piece;
+        this.fetchNewId();
+    }
+    getUniqidArgs (){
+        return {context:this,table:this.tableName,dbName:this.dbName,piece:this.piece}
+    }
+    isValidRuleDynamic(){
+        return true;
+    }
+    isTextField(){
+        return false;
+    }
+    componentDidUpdate(){
+        if(!isNonNullString(this.newFieldPieceId) && this.piece){
+            this.fetchNewId();
+        }
+    }
+    _render(props,setRef){
+        let {check,checkFields,dbName,tableName,table,piece,...p}  = (props);
+        check = defaultVal(check,checkFields);
+        this.check = check;
+        this.tableName = defaultStr(tableName,table).toUpperCase();
+        this.dbName = defaultVal(dbName,'');
+        this.piece = defaultVal(this.piece,piece);
+        if(isFunction(piece)){
+            this.piece = defaultStr(piece(this.getUniqidArgs()),this.piece);
+        }
+        p.readOnly = true;
+        delete p.validType;
+        if(isNonNullString(p.name) && isObj(p.data) && isNonNullString(p.data[p.name])){
+            p.disabled = true;         
+            p.validType = UPPER_CASE;
+            p.defaultValue = p.data[p.name];
+        } else {
+            p.validType = 'required|'+UPPER_CASE;
+        }
+        if(typeof p.minLength !=='number'){
+            p.minLength = 2;
+        }
+        p.validRule = p.validType;
+        if(p.disabled || p.readOnly || p.editable === false){
+            const {right} = p;
+            p.contentContainerProps = Object.assign({},p.contentContainerProps)
+            p.contentContainerProps.pointerEvents = defaultStr(p.contentContainerProps.pointerEvents,"auto");
+            ///p.enableCopy = p.defaultValue || this.newFieldPieceId ? true : false;
+            p.right = (props)=>{
+                const r = typeof right =='function'? right (props) : React.isValidElement(right)? right : null;
+                if(!p.defaultValue){
+                    return <>{r}<ActivityIndicator
+                        {...props}
+                        style = {[props.style,{marginRight:10}]}
+                    /></>
+                }
+                return r;
+            }
+        }   
+        this.setValidRule(p.validType);
+        return  super._render(p,setRef);
+    }
+}
+
+/*** le principe est de générer une id et vérifier l'existance deans la bd, jusqu'à retourner un
+ *  qui n'existe pas en bd
+ */
+FormPieceField.propTypes = {
+    ...TextField.propTypes,
+    tableName : PropTypes.string.isRequired, //le nom de la table dans la bd où dans la liste des tables de pieces : CONSTANTS.PIECES
+    //le type de données dont on veut déterminer le numéro de piece doit être obligatoire
+    //ce type doit exister dans la table des piece : PIECE[table][type] doit retourner le prochain index
+    ///si c'est une fonction elle doit être utilisée pour générer le préfix de la piece
+    piece : PropTypes.oneOfType([
+        PropTypes.string.isRequired,
+        PropTypes.func.isRequired
+    ]), 
+    /*** le nom de la table dans laquelle l'idField est enreigistré */
+    /*** le nom de la bd où l'id field est enregistré */
+    dbName : PropTypes.string,
+}
+
+FormPieceField.defaultProps = {
+    name : '_id'
+}

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

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

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

@@ -0,0 +1,12 @@
+import SelectField from "./SelectField";
+import {getCountryFieldProps} from "$ecomponents/Countries";
+import {defaultVal} from "$utils";
+
+export default class FormFieldSelectCountry extends SelectField{
+    getComponentProps(props){
+        return {...getCountryFieldProps(),...defaultObj(props)}
+    }
+    _render(props){
+        return super._render(this.getComponentProps(props))
+    }
+}

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

@@ -0,0 +1,147 @@
+import Field from "./Field";
+import Dropdown from "$ecomponents/Dropdown";
+import PropTypes from "prop-types";
+import {isObj} from "$utils";
+
+export default class FormSelectField extends Field{
+    constructor(props) {
+        super(props);
+        this.autobind();
+    }
+    isTextField(){
+        return false;
+    }
+    componentDidMount(){
+        super.componentDidMount(false); 
+        if(!this.isFilter()){
+            let value = this.getDefaultValue();
+            if(this._field){
+                if(typeof this._field.prepareSelected ==='function'){
+                    value = this._field.prepareSelected({defaultValue:value});   
+                } else if(typeof this._field.getSelectedValue =='function'){
+                    value = this._field.getSelectedValue();
+                } 
+            }
+            this.validate({context:this,value});
+        }
+        return;
+     
+    }
+    getDefaultValue(){
+        if(this._field){
+            if(typeof this._field.getDefaultValue =='function'){
+                return this._field.getDefaultValue();
+            } 
+        }
+        return super.getDefaultValue();
+    }
+    refresh (force,cb){
+        if(this._field && isFunction(this._field.refresh)){
+            this._field.refresh(force,cb);
+        }
+    }
+    selectValue(val,reset,cb){
+        if(this._field && isFunction(this._field.selectValue)){
+            this._field.selectValue(val,reset,cb);
+        }
+    }
+    isSelectField(){
+        return !this.isFilter();
+    }
+    getValue () {
+        if(this._field && isFunction(this._field.getSelected)){
+            let selectedItems = this._field.getSelectedItems(true);
+            if(Object.size(selectedItems,true)<=0) {
+                return this.props.multiple ? []  : undefined;
+            }
+            return this._field.getSelected();
+        }
+        return super.getValue();
+    }
+    getSelectedItems (force){
+        if(this._field && isFunction(this._field.getSelected)){
+            return this._field.getSelectedItems(force);
+        }
+        return null;
+    }
+    getSelectedItem(index){
+        let items = this.getSelectedItems(true);
+        if(typeof index !== 'undefined' && isObjOrArray(items)){
+            if(items[index] !== undefined) return items[index];
+        }
+        if(this._field){
+            if(this.props.multiple !== false){
+                return items;
+            } else if(this._field) {
+                return this._field.currentSelectedItem;
+            }
+        }
+        return null;
+    }
+    setValue (value,reset,cb){
+        if(this._field && isFunction(this._field.selectValue)){
+           this._field.selectValue(value,reset,cb);
+        }
+    }
+    removeNotAllowedProps(props,{formName}){
+        return;
+    }
+    validateWithCallOnChange(args){
+        const {value,selectedItems,selectedItem,items}= args;
+        const multiple = typeof this.props.multiple =='boolean'? this.props.multiple : false;
+        this.validate({value,item:selectedItem,multiple,selectedItem,selectedItems,items});
+    }
+    validate(args){
+        if(this._field && isObj(this._field.state) && typeof this._field.getValueKey =='function' && typeof this._field.getSelectedItems =='function'){
+            if(!args.selectedItems){
+                args.selectedItems = this._field.getSelectedItems();
+            }
+            args.value = this._field.prepareSelected({defaultValue:args.value})
+            if(!this._field.canHandleMultiple && !args.selectedItem){
+                const valueKey = this._field.getValueKey(args.value);
+                if(valueKey && isObj(this._field.state.valuesKeys) && this._field.state.valuesKeys[valueKey]){
+                    args.selectedItem = args.item = this._field.state.valuesKeys[valueKey].item;
+                }
+            }
+        }
+        return super.validate(args);
+    }
+    _render (componentProps){
+        let {
+            getInstance,
+            _defaultValue,
+            ...props
+        } = componentProps;
+        delete props.format;
+        delete props.import;
+        delete props.exports;
+        if( defaultStr(props.name,this.name) === 'country' && props.multiple !== true){
+            props.defaultValue = defaultStr(props.defaultValue);
+        }
+        return <Dropdown
+            {...props}
+            ref = {(el)=>{
+                this._field = el;
+            }}
+            onMount = {({context})=>{
+                this._field = context;
+            }}
+            onChange = {(args)=>{
+                this.validateWithCallOnChange(args);
+                if(typeof this.props.onChange =='function'){
+                    this.props.onChange(args);
+                }
+            }}
+        />
+    }
+}
+
+FormSelectField.propTypes = {
+    ...Dropdown.propTypes,
+    ...Field.propTypes,
+    format : PropTypes.string,
+    /*** en cas de mise à jour la dropdown se transforme en une zone de texte ayant pour valeur la valeur sélectionnée 
+     *  et le champ désactivé
+    */
+    isUpdate : PropTypes.bool,
+}

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

@@ -0,0 +1,24 @@
+import SelectField from "./SelectField";
+import SelectStructData from "$containers/StructData/SelectField";
+
+export default class FormSelectStructDataField extends SelectField{
+    _render(props){
+        return <SelectStructData 
+            {...props}
+            onChange = {(args)=>{
+                this.validateWithCallOnChange(args);
+                if(typeof this.props.onChange =='function'){
+                    this.props.onChange(args);
+                }
+            }}
+            ref = {(el)=>{
+                this._field = el;
+            }}
+        />
+    }
+}
+
+FormSelectStructDataField.propTypes = {
+    ...SelectStructData.propTypes,
+}
+

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

@@ -0,0 +1,24 @@
+import SelectField from "./SelectField";
+import SelectTableData from "$containers/TableData/SelectField";
+
+export default class FormSelectTableDataField extends SelectField{
+    _render(props){
+        return <SelectTableData 
+            {...props}
+            onChange = {(args)=>{
+                this.validateWithCallOnChange(args);
+                if(typeof this.props.onChange =='function'){
+                    this.props.onChange(args);
+                }
+            }}
+            ref = {(el)=>{
+                this._field = el;
+            }}
+        />
+    }
+}
+
+FormSelectTableDataField.propTypes = {
+    ...SelectTableData.propTypes
+}
+

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

@@ -0,0 +1,11 @@
+import SelectField from "./SelectField";
+import {getThemeFieldProps} from "$theme/components/SelectTheme";
+
+export default class FormFieldSelectTheme extends SelectField{
+    getComponentProps(props){
+        return {...getThemeFieldProps(),...defaultObj(props)}
+    }
+    _render(props){
+        return super._render(this.getComponentProps(props))
+    }
+}

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

@@ -0,0 +1,32 @@
+import Slider from "$ecomponents/Slider";
+import {defaultObj} from "$utils";
+import Field  from"./Field";
+import React from "react";
+export default class FormSliderField extends Field{
+    canFocus(){
+        return false;
+    }
+    isTextField(){
+        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 <Slider
+            {...props}
+            ref = {setRef}
+        />
+    }
+}
+
+
+FormSliderField.propTypes = {
+    ...defaultObj(Slider.propTypes),
+}

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

@@ -0,0 +1,34 @@
+import Switch from "$ecomponents/Switch";
+import {defaultObj} from "$utils";
+import Field  from"./Field";
+import React from "react";
+export default class FormSwitchField extends Field{
+    canFocus(){
+        return false;
+    }
+    isTextField(){
+        return false;
+    }
+    setValue (value){
+        if(this._fieldRef && this._fieldRef.setValue){
+            return this._fieldRef.setValue(value);
+        }
+    }
+    _render(props,setRef){
+        props.onChange = (args)=>{
+            this.validate(args);
+        }
+        return <Switch
+            {...props}
+            ref = {setRef}
+            onPress = {typeof this.props.onPress =='function' ? (e)=>{
+                return this.props.onPress({event:e,context:this})
+            } : undefined}
+        />
+    }
+}
+
+
+FormSwitchField.propTypes = {
+    ...defaultObj(Switch.propTypes),
+}