cosmo-ui/dist/example/form-example.js

Common React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable:jsx-no-lambda */
var React = require("react");
var react_redux_1 = require("react-redux");
var actions_1 = require("../actions");
var example_actions_1 = require("./example-actions");
var web_1 = require("../web");
var validators_1 = require("../validators");
var mockLocation = {
    address: {
        streets: [
            '2 Upland Crescent',
            'Leeds',
        ],
        locality: 'Leeds',
        town: 'Leeds',
        country: 'GBR',
        postcode: 'LS8 2TB',
    },
    position: {
        coordinates: [
            -1.509331,
            53.820307,
        ],
        type: 'Point',
    },
};
var mockDate = '2017-06-14T15:11:55.170Z';
var mockPhoneNumber = '07790054721';
var _FormExample = (function (_super) {
    tslib_1.__extends(_FormExample, _super);
    function _FormExample() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.onSubmit = function (formData) { return console.log('FORM DATA IS VALID', formData); };
        return _this;
    }
    _FormExample.prototype.render = function () {
        console.log('render form example', this.props);
        var _a = this.props, vehicles = _a.vehicles, job = _a.job, selectedVehicle = _a.selectedVehicle, resetForm = _a.resetForm, destroyForm = _a.destroyForm;
        return (React.createElement(web_1.Column, { fullWidth: true, style: {
                backgroundColor: 'white',
                boxSizing: 'border-box',
                padding: '20px',
            } },
            React.createElement(web_1.Form, { name: example_actions_1.EXAMPLE_FORM_KEY, onSubmit: this.onSubmit },
                React.createElement(web_1.Header, { primary: true }, "A demo form"),
                React.createElement(web_1.FormGroup, { label: "Enter some new text (with autofocus)" },
                    React.createElement(web_1.TextInput, { autofocus: true, name: "textInput", placeholder: "placeholder text" })),
                React.createElement(web_1.FormGroup, { label: "Change an existing job number" },
                    React.createElement(web_1.TextInput, { name: "jobNumber", onChange: this.props.updateJobField, value: job.jobNumber })),
                React.createElement(web_1.FormGroup, { label: "This text field is disabled" },
                    React.createElement(web_1.TextInput, { name: "disabledTextInput", value: "initial value", disabled: true })),
                React.createElement(web_1.FormGroup, { label: "Enter a number (required)" },
                    React.createElement(web_1.NumberInput, { name: "numberInputRequired" })),
                React.createElement(web_1.FormGroup, { label: "Enter a number (not required)" },
                    React.createElement(web_1.NumberInput, { name: "numberInputOptional", required: false })),
                React.createElement(web_1.FormGroup, { label: "Enter a date" },
                    React.createElement(web_1.DateTimeInput, { name: "datetTimeInput", placeholder: "placeholder text" })),
                React.createElement(web_1.FormGroup, { label: "Display an existing date" },
                    React.createElement(web_1.DateTimeInput, { name: "datetTimeDisplay", value: validators_1.formatDateForInput(mockDate) })),
                React.createElement(web_1.FormGroup, { label: "Select (with preselected)" },
                    React.createElement(web_1.Select, { name: "selectedVehicle", value: this.props.selectedVehicle, onChange: this.props.updateVehicleField, options: vehicles })),
                React.createElement("p", null,
                    "The document type associated with this vehicle is:\u00A0",
                    selectedVehicle.documentLabel),
                React.createElement(web_1.FormGroup, { label: "Select (pristine)" },
                    React.createElement(web_1.Select, { name: "selectedVehicle2", options: vehicles })),
                React.createElement(web_1.FormGroup, { label: "Display an existing address" },
                    React.createElement(web_1.AddressInput, { disabled: true, name: "disabledAddress", asyncValue: mockLocation })),
                React.createElement(web_1.FormGroup, { label: "Enter a phone number" },
                    React.createElement(web_1.PhoneInput, { name: "phone" })),
                React.createElement(web_1.FormGroup, { label: "Display an existing phone number" },
                    React.createElement(web_1.PhoneInput, { name: "disabledPhone", value: mockPhoneNumber })),
                React.createElement(web_1.Button, { type: "submit" }, "Submit the form"),
                React.createElement(web_1.Button, { onClick: function () { return resetForm(example_actions_1.EXAMPLE_FORM_KEY); } }, "Reset the form"),
                React.createElement(web_1.Button, { onClick: function () { return destroyForm(example_actions_1.EXAMPLE_FORM_KEY); } }, "Destroy the form"))));
    };
    return _FormExample;
}(React.Component));
exports._FormExample = _FormExample;
var mapDispatchToProps = {
    resetForm: actions_1.resetForm,
    destroyForm: actions_1.destroyForm,
    updateJobField: example_actions_1.updateJobField,
    updateVehicleField: example_actions_1.updateVehicleField,
};
var mapStateToProps = function (state) { return ({
    job: state.example.job,
    vehicles: state.example.vehicles,
    selectedVehicle: state.example.selectedVehicle,
}); };
exports.FormExample = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(_FormExample);
/* tslint:enable:jsx-no-lambda */ 
//# sourceMappingURL=form-example.js.map