fk-react-ui-components/lib/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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 = _extends({}, previousErrState);
        errorState["error"] = _extends({}, 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 React.createElement(
            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;
            })
        );
    }
    compute() {
        //  TODO: Memoize some of the results
        return map(this.props.children, this.parseAllNode.bind(this));
    }
    render() {
        return React.createElement(
            FormWrapper,
            null,
            this.compute()
        );
    }
}

export default FormComponent;
//# sourceMappingURL=FormComponent.js.map