fk-react-ui-components/components/FormComponent/FormComponent.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

import React from "react";
import {isSubmitButton,isFormElements} from "./FormElements.js";
import {FormWrapper,ElementWrapper} from "./style.js";
import {ErrorInstanceHandler} from "./handler/ErrorInstance.js";
import {FormInstanceHandler} from "./handler/FormInstance.js";
import {ButtonInstanceHandler} from "./handler/ButtonInstance.js";

const map = React.Children.map;


/*
FormComponent parses all formElements and keeps the validation state
*/
class FormComponent extends React.Component {
    constructor(props) {
        super(props);
        this.errorObj = {};
        this.state = {
            validationError: false,
            error: {}
        }
        this.allNodes = {};
        this.values = {};
    }

    errorStateSet(obj, name, previousErrState){
        let errorState = {},
            errorStateName = `${name}_error`;
        errorState = {...previousErrState};
        errorState["error"] = {...previousErrState.error};
        if(!obj.isValid){
            errorState["error"][errorStateName] = obj.message;
        }
        if(errorState["error"] && errorState["error"][errorStateName] && obj.isValid){
            delete errorState["error"][errorStateName];
        }
        errorState["validationError"] = !!Object.keys(errorState.error).length;
        return errorState;
    }

    validatationOnChange(obj,name){
        this.errorObj = this.errorStateSet(obj, name, this.errorObj);
        this.setState(function(previousErrState){
            return this.errorStateSet(obj, name, previousErrState);
       });
    }

    validate(){
        Object.keys(this.allNodes).forEach((node)=>{
            this.values[node] = this.allNodes[node].state.value;
            this.allNodes[node].validate
                    .call(this.allNodes[node],this.allNodes[node].state.value)
        })
    }
    parseAllNode(node){
        if(node.type != ElementWrapper){
            throw Error("Wrap the node in ElementWrapper Element");
            return;
        }
        return <ElementWrapper {...node.props}>
            {map(node.props.children,(elems)=>{
                    elems = FormInstanceHandler.call(this,elems);
                    elems = ErrorInstanceHandler.call(this,elems);
                    elems = ButtonInstanceHandler.call(this,elems);
                    return elems;
            })}
        </ElementWrapper>
    }
    compute(){
        //  TODO: Memoize some of the results
        return map(this.props.children,this.parseAllNode.bind(this));
    }
    render() {
        return(
            <FormWrapper>
            {this.compute()}
            </FormWrapper>
        )
    }
}

export default FormComponent;