@fto-consult/expo-ui 1.0.4

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

@@ -0,0 +1,116 @@
+import Dialog from "$ecomponents/Dialog/Dialog";
+import FormDataActions from "./FormDataActions";
+import {defaultObj} from "$utils";
+import React from "$react";
+import PropTypes from "prop-types";
+
+export default class FormDataDialogComponent extends FormDataActions{
+    constructor(props){
+        super(props);
+        Object.defineProperties(this,{
+            DialogComponent : {
+                value : this.getDialogComponent(),
+            },
+            INITIAL_STATE : {value:{}},
+            dialogRef : {value:React.createRef(null)}
+        });
+    }
+
+    getMainProps(){
+        return defaultObj(this.props.dialogProps,this.props);
+    }
+    
+    isControlled(){
+        const dialogProps = this.getMainProps();
+        return dialogProps.controlled ? dialogProps.controlled : typeof this.props.controlled =='boolean'? this.props.controlled : true;
+    }
+    getDialogComponent(){
+        return this.isControlled() ? Dialog.Controlled : Dialog;
+    }
+    
+    close (args){
+        if(this.isControlled()){
+            if(this.dialogRef.current && this.dialogRef.current.close){
+                return this.dialogRef.current.close(args);
+            }
+        }
+        const dialogProps = defaultObj(this.props.dialogProps);
+        if(dialogProps.onDismiss){
+            return dialogProps.onDismiss({context:this});
+        } else if(dialogProps.onClose){
+            return dialogProps.onClose({context:this});
+        }
+    }
+    onCancel(args){
+        const onCancel = this.props.onCancel;
+        args = {...defaultObj(args),context:this,editingData:this.getData(),data:this.getDataProp(),props:this.props};
+        if(onCancel && onCancel(args) === false){
+            return;
+        }
+        this.close(args);
+    }
+    doSave2Close(){}
+    doSave2New(){}
+    doSave(){}
+    getComponentProps (props){
+        this.INITIAL_STATE.props = this.getAppBarActionsProps(props);
+        let {fields,data,formProps}  = this.INITIAL_STATE.props;
+        formProps = Object.assign({},formProps);
+        formProps.data = data;
+        formProps.fields = defaultObj(formProps.fields,fields);
+        this.INITIAL_STATE.props.formProps = formProps;
+        return this.INITIAL_STATE.props;
+    }
+    getDialogRef(){
+        return this.dialogRef;
+    }
+    getDialogContext(){
+        return this.dialogRef.current;
+    }
+    _render(content){
+        content = super._render(content);
+        const Component = this.DialogComponent;
+        const aA = this.INITIAL_STATE.props;
+        delete aA.fullScreen;delete aA.fullPage;
+        return <Component 
+            isFormData
+            testID = {'RN_FormDataDialogComponent'}
+            responsive
+            visible = {this.props.visible}
+            title = {this.props.title}
+            subtitle = {this.props.subtitle}
+            {...defaultObj(this.props.dialogProps)}
+            {...aA}
+            ref = {this.dialogRef}
+            onBackActionPress = {this.onBackActionPress.bind(this)}
+        >
+            {content}
+        </Component>
+    }
+}
+
+FormDataDialogComponent.Controlled = React.forwardRef((props,ref)=>{
+    return <FormDataDialogComponent testID={'RN_FormDataDialogComponentControlled'} {...props} ref={ref} controlled/>
+});
+
+FormDataDialogComponent.Controlled.displayName = "FormDataDialogComponent.Controlled";
+
+FormDataDialogComponent.propTypes = {
+    ...FormDataActions.propTypes,
+    confirmOnCancel : PropTypes.bool,///si l'on doit confirmer vouloir annuler la modification
+    dialogProps : PropTypes.shape({
+        ...Dialog.propTypes,
+    }),
+    open : PropTypes.func, //la fonction appelée pour ouvrir la boîte de dialogue
+    close : PropTypes.func, //la fonction appelée pour fermer la boîte de dialogue
+    containerProps : PropTypes.object,
+    withHeavyScreen : PropTypes.bool,
+    contentProps : PropTypes.object,
+    preloader : PropTypes.any,
+    preloaderProps : PropTypes.object,
+    headerContent : PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.node
+    ]),
+    dialogProps : PropTypes.object,//les props du dialog
+}

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

@@ -0,0 +1,117 @@
+import React from "$react";
+import Dialog from "./Dialog";
+import { createProviderRef } from "$ecomponents/Dialog/Provider";
+import {isMobileOrTabletMedia} from "$cplatform/dimensions";
+import {MAX_WIDTH} from "$ecomponents/Dialog/utils";
+import {extendObj,defaultObj,isObj,defaultBool,defaultStr} from "$utils";
+import grid from "$theme/grid";
+
+let dialogProviderRef = null;
+
+
+const FormDataDialogProvider = React.forwardRef((props,innerRef)=>{
+    innerRef = innerRef || createProviderRef((eRef)=>{
+        dialogProviderRef = eRef;
+    });
+    const [state,setState] = React.useState({
+        visible : false,
+    });
+    const isMobile = isMobileOrTabletMedia();
+    const formRef = React.useRef(null);
+    const {closeAction,onDismiss} = props;
+    const context = {
+        open : (props)=>{
+            let sData = {};
+            if(formRef.current && formRef.current.formDataContext && formRef.current.formDataContext.getData){
+                sData.data = formRef.current.formDataContext.getData();
+            }
+            return setState({...state,...sData,onDismiss:undefined,...defaultObj(props),visible:true})
+        },
+        close : (props)=>{
+            setState({...state,...defaultObj(props),visible:false});
+        },
+    };
+    React.setRef(innerRef,context);       
+    const dialogProps = extendObj({},props.dialogProps,state.dialogProps,{hiddenControlled:true});
+    const formProps = defaultObj(state.formProps);
+    if(state.visible){
+        formProps.fieldProps = defaultObj(formProps.fieldProps);
+        formProps.fieldProps.windowWidth = !isMobile ? MAX_WIDTH : undefined;
+        formProps.fieldProps.updateNativePropsOnUpdate = ({target})=>{
+            if(!target || !target.current || target.setNativeProps || !formRef.current || !formRef.current.dialogRef || !formRef.current.dialogRef.current || !formRef.current.dialogRef.current.isFullScreen) return;
+            const f = formRef.current.dialogRef.current.isFullScreen();
+            target.current.setNativeProps({ style : f? grid.col() : {width:'100%'}});
+        }
+    }
+    return <Dialog 
+        responsive
+        withScrollView
+        {...props} 
+        {...state} 
+        formProps = {formProps}
+        isProvider
+        ref={formRef}  
+        windowWidth = {MAX_WIDTH}
+        propsMutator = {(rest)=>{
+            const isMob = isMobileOrTabletMedia();
+            if(closeAction === true || state.closeAction === true) return rest;
+            rest.windowWidth = !isMob ? MAX_WIDTH : undefined;
+            rest.actions = Array.isArray(rest.actions)? [...rest.actions] : isObj(rest.actions)? {...rest.actions} : null;
+            if(rest.actions && (!isMob || rest.fullScreen === false)){
+                if(isDesktopMedia() && typeof rest.maxActions !=='number'){
+                    rest.maxActions = 2;
+                }
+                const closeBtn ={
+                    text : 'Annuler',
+                    icon : 'close',
+                    secondary : true,
+                    ...defaultObj(closeAction),
+                    onPress : context.close,
+                    isAction : false,
+                } 
+
+                Array.isArray(rest.actions)? rest.actions.push(closeBtn) : isObj(rest.actions)? rest.actions ["close-bn-dddsdd"] = closeBtn : undefined;
+            }
+            return rest;
+        }}
+        dialogProps = {dialogProps}
+        controlled={false} 
+        onDismiss = {(e)=>{
+            setState({...state,visible:false});
+            if(typeof state.onDismiss =='function'){
+                state.onDismiss({context,state});
+            } else if(onDismiss){
+                onDismiss({context,state});
+            }
+        }}
+        open = {context.open}
+        close = {context.close}
+    />
+});
+
+FormDataDialogProvider.open = (props,innerProviderRef)=>{
+    innerProviderRef = innerProviderRef || dialogProviderRef;
+    if(!innerProviderRef) return;
+    if(innerProviderRef.current && innerProviderRef.current.open){
+        innerProviderRef = innerProviderRef.current;
+    }
+    if(innerProviderRef && typeof innerProviderRef.open =='function') {
+        return innerProviderRef.open(props);
+    }
+    return false;
+}
+
+FormDataDialogProvider.close = (props,innerProviderRef)=>{
+    innerProviderRef = innerProviderRef || dialogProviderRef;
+    if(!innerProviderRef) return;
+    if(innerProviderRef.current && innerProviderRef.current.open){
+        innerProviderRef = innerProviderRef.current;
+    }
+    if(innerProviderRef && typeof innerProviderRef.close =='function') return innerProviderRef.close(props);
+    return false;
+}
+
+FormDataDialogProvider.displayName = "FormDataFormDataDialogProviderComponent";
+
+
+export default FormDataDialogProvider;

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

@@ -0,0 +1,403 @@
+import {getAppBarActionsProps} from "./utils";
+import React, {Component as AppComponent} from "$react";
+import {isNonNullString,defaultStr,defaultObj,extendObj,isObj,isFunction,defaultFunc,uniqid} from "$utils";
+import {getForm,getFormField,Forms} from "../utils";
+import Divider from "$ecomponents/Divider";
+import Surface from "$ecomponents/Surface";
+import Form from "../Form";
+import theme,{flattenStyle} from "$theme";
+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 { keyboardShortcuts } from "../utils";
+
+export default class FormDataComponent extends AppComponent{
+    constructor(props){
+        super(props);
+        const formName = defaultStr(this.props.formName,uniqid("form-id")) 
+        Object.defineProperties(this,{
+            formName : {
+                value : formName,
+            },
+            getFormName : {
+                value : x=> formName,
+            },
+            isAllowed : {
+                value : true
+            },
+        });
+    }
+    getForm (){
+        return getForm(this.getFormName());
+    }
+    getFormField (fieldName){
+        return getFormField(formName,fieldName);
+    }
+    getField(fieldName){
+        return getFormField(this.getFormName(),fieldName)
+    }
+    getData(){
+        const form = this.getForm();
+        if(form){
+            return form.getData();
+        }
+        return {};
+    }
+    actionMutator(args){
+        const a2 = typeof this.props.actionMutator =='function'? this.props.actionMutator(args) :args.action;
+        if(!isObj(a2)) return null;
+        return a2;
+    }
+    getAppBarProps(){
+        return defaultObj(this.props.appBarProps);
+    }
+    beforeSave(){
+        return true;
+    }
+    canCallOnSuccess(){
+        return true;
+    }
+    onSave(args){
+        return true;
+    }
+    getAppBarActionsProps(props){
+        let {data,onCancel,perm,beforeSaveArgumentsMutator,beforeSave,actions,saveDataMutator,...rest} = defaultObj(props,this.props);
+        const onSave = typeof this.props.onSave =='function'? this.props.onSave : props.onSave;
+        beforeSave = defaultFunc(beforeSave);
+        return getAppBarActionsProps({
+            ...defaultObj(rest),
+            ...this.getAppBarProps(),
+            actions,
+            actionMutator : this.actionMutator.bind(this),
+            formName : this.getFormName(),
+            data:Object.assign({},data),
+            save :(args)=>{
+                setTimeout(()=>{
+                    const form = this.getForm();
+                    if(!form) return false;
+                    if(!form.isValid()){
+                        const errorText = form.getErrorText();
+                        if(errorText){
+                            return "Impossible d'enregister les données à cause l'erreur suivante : "+errorText;
+                        }
+                    }
+                    const isDocEditing = this.isDocEditing(args.data);
+                    const isUpdated = this.isDocEditing(args.data);
+                    const currentIndex = this.getCurrentIndex();
+                    const action = typeof this.clickedAction =='string' ? this.clickedAction.toLowerCase() : '';
+                    const savedArgs = {...args,isDocEditing,context:this,action,currentIndex,index:currentIndex,isUpdate:isUpdated,isUpdated,props:this.props,context:this};
+                    if(beforeSaveArgumentsMutator){
+                        savedArgs = beforeSaveArgumentsMutator(savedArgs);
+                        if(!isObj(savedArgs)){
+                            savedArgs = {...savedArgs,data}
+                        }
+                    }
+                    return handleBeforeSaveCallback(this.beforeSave.bind(this),()=>{
+                        return handleBeforeSaveCallback(beforeSave,()=>{
+                            return handleBeforeSaveCallback(this.onSave.bind(this),()=>{
+                                return handleBeforeSaveCallback(onSave,()=>{
+                                    if(action == 'save2close'){
+                                        ///on appelle la fonction qui enregistre et ferme
+                                        this.doSave2Close(savedArgs)
+                                    } else if(action == 'save2new' || action ==='new'){
+                                        ///on appelle la fonction qui enregistre et crèe un nouveau
+                                        this.doSave2New({...savedArgs,index:undefined,data:{}});
+                                    } else {
+                                        ///on appelle la fonction qui enregistre et reste sur la page
+                                        this.doSave(savedArgs);
+                                    }
+                                    if(this.canCallOnSuccess()){
+                                        if(typeof this.props.onSuccess =="function"){
+                                            this.props.onSuccess(savedArgs);
+                                        } else if(onSave !== this.props.onSave && typeof this.props.onSave =="function"){
+                                            this.props.onSave(savedArgs);
+                                        }
+                                    }
+                                },savedArgs);
+                            },savedArgs);
+                        },savedArgs);
+                    },savedArgs);
+                },0);
+            },
+            cancel:(args)=>{
+                this.onCancel(args);
+            }
+        });
+    }
+    onCancel(args){
+        if(isFunction(this.props.onCancel)){
+            onCancel({...defaultObj(args),context:this,editingData:this.getData(),data:this.getDataProp(),props:this.props});
+        }
+    }
+    /*** cette fonction est appelée pour enregistrer les données */
+    doSave(args){}
+    ///cette fonction est appelée pour enregistrer et fermer la page
+    doSave2Close(args){}
+    ////cette fonction est appelée pour enregister et créer un noveau
+    doSave2New(args){}
+    createNew(args){}
+    getCurrentIndex(){
+        return undefined;
+    }
+    isDocEditing (data){
+        data = defaultObj(data);
+        if(typeof this.props.isDocEditing =='function'){
+            return this.props.isDocEditing({data,context:this}) ? true : false;
+        } else if(typeof this.props.isDocUpdate =='function'){
+            return this.props.isDocUpdate({data,context:this}) ? true : false;
+        }
+        return false;
+        //return isDocUpdate(data) ? true : false;
+    }
+    canBindResizeEvents(){
+        return false;
+    }
+    componentDidMount(){
+        super.componentDidMount();
+    }
+    componentWillUnmount(){
+        super.componentWillUnmount();
+        this.clearEvents();
+    }
+    close(){
+
+    }
+    onBackActionPress(){
+        return true;
+    }
+    getDataProp (){
+        return Object.assign({},this.props.data);
+    }
+    getFormName (){
+        return this.formName;
+    }
+    isArchivable (){
+        return false;
+    }
+    getFieldsContent = (formProps)=>{
+        formProps = defaultObj(formProps);
+        const fieldProps = defaultObj(formProps.fieldProps,this.props.fieldProps);
+        formProps.style = flattenStyle(formProps.style);
+        const content = [];
+        const fields = defaultObj(formProps.fields,this.props.fields);
+        const data = isObj(formProps.data) ? formProps.data : typeof this.props.data =='object' && this.props.data ? this.props.data : {};
+        const archived = data.archived ? true : false;
+        const responsive = typeof formProps.responsive =='boolean' ? formProps.responsive : this.props.responsive !== false ? true : false;
+        const responsiveProps = extendObj({},this.props.responsiveProps,formProps.responsiveProps);
+        Object.map(fields,(field,index,i)=>{//on ignore tous les champs supposés être à ignorer
+            if(field === 'divider'){
+                content.push(<Divider key = {index} style={theme.styles.w100}/>)
+            } else if(isObj(field) && field.form !== false) {
+                const name = defaultStr(field.name,field.field,index);
+                const type = defaultStr(field.type,"text").trim().toLowerCase().replaceAll("_","");
+                const Component = componentTypes[type] || componentTypes.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;
+                delete rest.export;
+                if(form === false || ignore || (isNonNullString(perm) && !Auth.isAllowedFromStr(perm))){
+                    return null;
+                }
+                hidden = visible === false ? true : hidden;
+                if(typeof rest.filter !=='function'){
+                    delete rest.filter;
+                }
+                if(name){
+                    rest.defaultValue = useDefaultValueFromData === false ? defaultValue : (name in data && data[name] !== undefined? data[name]: defaultValue);
+                    if((type == 'selecttabledata' || type == 'datafile')){
+                        rest._defaultValue = data[rest.name];
+                    }
+                } else {
+                    rest.defaultValue  = defaultValue;
+                }
+                if(hidden){
+                    rest.style = flattenStyle([rest.style,theme.styles.hidden]);
+                }
+                customResponsiveProps = defaultObj(customResponsiveProps);
+                content.push(<Component 
+                        data = {data} 
+                        //withBottomSheet = {this.props.withBottomSheet}
+                        index = {index} 
+                        disabled = {this.props.disabled || archived} 
+                        archived = {this.props.archived || archived}
+                        //ignoreFields = {ignoreFields} 
+                        //getFieldProps = {this.props.getFieldProps}
+                        {...fieldProps}
+                        {...rest}
+                        style = {[fieldProps.style,formProps.style.backgroundColor&& {backgroundColor:formProps.style.backgroundColor},rest.style]}
+                        formName = {this.getFormName()}
+                        key={index} 
+                        archivable = {this.props.archivable || this.isArchivable()}  
+                        name = {name}
+                        responsive = {responsive}
+                        responsiveProps = {{...responsiveProps,...customResponsiveProps,style:[responsiveProps.style,customResponsiveProps.style,hidden?theme.styles.hidden:null]}}
+                />);
+            }
+        });
+        return content;
+    }
+    getActions (){
+        return renderActions(this.getAppBarActionsProps());
+    }
+    _render (content){
+        return React.isValidElement(content)? content : null;
+    }
+    /*** les props à utiliser pour le rendu du composant, dans la méthode render */
+    getComponentProps (props){
+        return props;
+    }
+    /*** les props qui seront passé au composant Wrapper au moment du rendu du composant FormData 
+     * appélé dans la méthode _render
+    */
+    getRenderingProps (){
+        return this.props;
+    }
+    handleCustomRender(){
+        return false;
+    }
+    onKeyEvent(event){
+        event = defaultObj(event);
+        event.targetContext = this;
+        const {onKeyEvent} = this.props;
+        if(isFunction(onKeyEvent) && onKeyEvent({...event,context:this,data:this.getDataProp()}) === false){
+            return false;
+        } 
+        let key = defaultStr(event.key).toLowerCase();
+        if(key === 'esc'){
+            this.onBackActionPress({close:this.close.bind(this)});
+            return false;
+        } 
+        if(keyboardShortcuts[key]){
+            event.formKeyEventAction = keyboardShortcuts[key];
+            return event;
+        }
+        return false;
+    }
+    render (){
+        const props = defaultObj(this.getComponentProps(this.props));
+        this.componentWillRender(props);
+        let {
+            data,
+            actions,
+            fields,
+            saveButton,
+            saveButtonIcon,
+            formProps,
+            closeAfterSave,
+            editable,
+            component,
+            disabled,
+            onValidate,
+            onNoValidate,
+            onValidateField,
+            responsive,
+            responsiveProps,
+            header,
+            children,
+            ignoreFields, //la liste des champs à ignorer lors du parcours des champs
+            toolbarProps,
+            text,
+            showActionsOnTop,
+            getFieldProps, ///pour ajouter des champs supplémentaires aux props de la field
+            title,
+            onMount,
+            windowWidth,
+            onUnmount,
+            isRenderedByFormPage,
+            archivable,
+            onKeyEvent,
+            isFormDataDialog,
+            onAddPressOnDropdownFieldCallback,
+            onAddPressOnDropdownField,
+            archived,
+            withBottomSheet,
+            isAllowed,
+            isDocEditing,
+            beforeSave,
+            onSave,
+            saveDataMutator,
+            beforeSaveArgumentsMutator,
+            ...containerProps
+        } = props;
+        if(typeof isAllowed ==='function'){
+            isAllowed = isAllowed({...props,data:defaultObj(data),context:this})
+        } else isAllowed = true;
+        if(isAllowed === false || !this.isAllowed){
+            Auth.showError();
+            return null;
+        }
+        formProps = Object.assign({},formProps);
+        formProps.onNoValidate = onNoValidate;
+        formProps.onValidate = onValidate;
+        formProps.onNoValidate = onNoValidate;
+        formProps.onValidateField = function(){
+            if(isFunction(onValidateField)){
+                onValidateField.apply(this,Array.prototype.slice.call(arguments,0))
+            }
+        };
+        containerProps = Object.assign({},containerProps);
+        const cStyle = flattenStyle([styles.container,{backgroundColor:theme.surfaceBackgroundColor},containerProps.style]);
+        formProps.style = flattenStyle([{backgroundColor:cStyle.backgroundColor},formProps.style]);
+        formProps.fields = defaultObj(formProps.fields,fields);
+        const content = <Form 
+            {...formProps} 
+            name={this.getFormName()}
+            onKeyEvent = {this.onKeyEvent.bind(this)}
+        >
+            {this.getFieldsContent(formProps)}
+        </Form>
+        if(this.handleCustomRender()){
+            return this._render({
+                header,
+                context : this,
+                content,
+            });
+        }
+        if(typeof children ==='function'){
+            this._render(children({
+                header,
+                context : this,
+                content,
+            }));
+        }
+        return this._render(<Surface primary testID={'RN_FormDataComponent'} {...containerProps} style={cStyle}>
+            {React.isValidElement(header,true)?header : null}
+            {content}
+            {React.isValidElement(children)? children : null}
+        </Surface>);
+    }
+}
+
+FormDataComponent.propTypes = {
+    fieldProps : PropTypes.object,//les props à passer à chacun des fields
+    onKeyEvent : PropTypes.func,
+    isDocEditing : PropTypes.func,///permet de spécifier si le document en cours est en modification
+    windowWidth : PropTypes.number,///la taille de la fenêtre à considérer pour le responsive
+    isFormDataDialog : PropTypes.bool, //si la form data est rendu dans une boîte de dialogue
+    onMount : PropTypes.func,
+    onUnmount : PropTypes.func,
+    withBottomSheet : PropTypes.bool,//si les éléments de formFields sera rendu en utilisant le bottomSheet, surtout les éléments de type select
+    children : PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.node,
+        PropTypes.element
+    ]),
+    beforeSaveArgumentsMutator : PropTypes.func,
+    header : PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.node,
+    ])
+}
+
+const styles = {
+    container : {
+        height : '100%',
+        flexDirection : 'column',
+        justifyContent : 'flex-start',
+        alignItems : 'flex-start',
+        paddingBottom : 30,
+    },
+}