configro-form-builder/src/container/FormGenerator.js

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
    for (var r = Array(s), k = 0, i = 0; i < il; i++)
        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
            r[k] = a[j];
    return r;
};
exports.__esModule = true;
var react_1 = require("react");
var react_bootstrap_1 = require("react-bootstrap");
var FormBuilder_1 = require("./FormBuilder");
var InputGeneratorModal = function (props) {
    var _a = react_1.useState({
        typeOf: "ConfigroInput",
        label: "",
        type: "",
        placeholder: ""
    }), formData = _a[0], setFormData = _a[1];
    var handleChange = function (e) {
        var _a;
        setFormData(__assign(__assign({}, formData), (_a = {}, _a[e.currentTarget.name] = e.currentTarget.value, _a)));
    };
    var handleSave = function () {
        props.handleSave(__assign(__assign({}, formData), { type: props.inputType }));
        setFormData({
            typeOf: "ConfigroInput",
            label: "",
            type: "",
            placeholder: ""
        });
    };
    return <react_bootstrap_1.Modal show={props.show} onHide={props.handleClose}>
        <react_bootstrap_1.Modal.Header closeButton>
            <react_bootstrap_1.Modal.Title>{props.title}</react_bootstrap_1.Modal.Title>
        </react_bootstrap_1.Modal.Header>
        <react_bootstrap_1.Modal.Body>
            <react_bootstrap_1.Form>
                <react_bootstrap_1.Form.Group>
                    <react_bootstrap_1.Form.Label>Input Label</react_bootstrap_1.Form.Label>
                    <react_bootstrap_1.Form.Control name={"label"} value={formData.label} onChange={function (e) { return handleChange(e); }}/>
                </react_bootstrap_1.Form.Group>
                <react_bootstrap_1.Form.Group>
                    <react_bootstrap_1.Form.Label>Input Placeholder</react_bootstrap_1.Form.Label>
                    <react_bootstrap_1.Form.Control name={"placeholder"} value={formData.placeholder} onChange={function (e) { return handleChange(e); }}/>
                </react_bootstrap_1.Form.Group>
            </react_bootstrap_1.Form>
        </react_bootstrap_1.Modal.Body>
        <react_bootstrap_1.Modal.Footer>
            <react_bootstrap_1.Button variant="secondary" onClick={props.handleClose}>
                Close
            </react_bootstrap_1.Button>
            <react_bootstrap_1.Button variant="primary" onClick={handleSave}>
                Save
            </react_bootstrap_1.Button>
        </react_bootstrap_1.Modal.Footer>
    </react_bootstrap_1.Modal>;
};
var FormGenerator = /** @class */ (function (_super) {
    __extends(FormGenerator, _super);
    function FormGenerator() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            show: false,
            data: [],
            modalTitle: "",
            inputType: ""
            // input: {label: "", placeholder: "", type: "", typeOf: "ConfigroInput"}
        };
        _this.handleClose = function () { return _this.setState({ show: false }); };
        _this.openInputModal = function (modalTitle, inputType) { return _this.setState({
            show: true,
            modalTitle: modalTitle,
            inputType: inputType
        }); };
        _this.handleSave = function (inputData) { return _this.setState({ data: __spreadArrays(_this.state.data, [inputData]), show: false }); };
        return _this;
    }
    FormGenerator.prototype.render = function () {
        var _this = this;
        return <react_bootstrap_1.Container>
            <InputGeneratorModal title={this.state.modalTitle} show={this.state.show} inputType={this.state.inputType} handleSave={this.handleSave} handleClose={this.handleClose}/>
            <react_bootstrap_1.Row>
                <react_bootstrap_1.Col>
                    <react_bootstrap_1.ListGroup>
                        <react_bootstrap_1.ListGroupItem>
                            <react_bootstrap_1.Button variant={"link"} onClick={function () { return _this.openInputModal("Add Text Input", "text"); }} style={{ border: "1px solid dashed" }}>Text</react_bootstrap_1.Button>
                        </react_bootstrap_1.ListGroupItem>
                        <react_bootstrap_1.ListGroupItem>
                            <react_bootstrap_1.Button variant={"link"} onClick={function () { return _this.openInputModal("Add Email Input", "email"); }} style={{ border: "1px solid dashed" }}>Email</react_bootstrap_1.Button>
                        </react_bootstrap_1.ListGroupItem>
                    </react_bootstrap_1.ListGroup>
                </react_bootstrap_1.Col>
                <react_bootstrap_1.Col>
                    <FormBuilder_1["default"] data={this.state.data} onFormSubmit={function (formData) { return console.log(formData); }}/>
                </react_bootstrap_1.Col>
            </react_bootstrap_1.Row>

        </react_bootstrap_1.Container>;
    };
    return FormGenerator;
}(react_1["default"].Component));
exports["default"] = FormGenerator;