react-define-form
Version:
React define form offers alternative typescript bindings for [react-final-form](https://github.com/final-form/react-final-form). It requires you to "define" a form type, specifying the type of the form data.
305 lines (301 loc) • 11.8 kB
JavaScript
"use strict";
var _jsxFileName = "/Users/fplindesay/Documents/GitHub/define-form/packages/react-define-form/lib/test.jsx",
_this = this;
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var _1 = require("./");
var _$default = _1.default(function (f) {
var x = {
name: f(),
bio: f(),
phone: f(),
age: f(function (value) {
if (/^[0-9]+$/.test(value)) {
return parseInt(value, 10);
} else {
throw 'Please enter an integer';
}
})
};
return x;
}),
Form = _$default.Form,
Fields = _$default.Fields,
FormSpy = _$default.FormSpy;
var MyForm = function MyForm() {
return React.createElement(Form, { initialValues: { name: '', bio: '', phone: '', age: '' }, onSubmit: function onSubmit(values) {
var name = values.name;
var bio = values.bio;
var phone = values.phone;
var age = values.age;
console.log({ name: name, bio: bio, phone: phone, age: age });
}, validate: function validate(values) {
return {};
}, render: function render(_ref) {
var handleSubmit = _ref.handleSubmit,
pristine = _ref.pristine,
invalid = _ref.invalid;
return React.createElement(
"form",
{ onSubmit: handleSubmit, __source: {
fileName: _jsxFileName,
lineNumber: 29
},
__self: _this
},
React.createElement(
"h2",
{
__source: {
fileName: _jsxFileName,
lineNumber: 30
},
__self: _this
},
"Simple Default Input"
),
React.createElement(
"div",
{
__source: {
fileName: _jsxFileName,
lineNumber: 31
},
__self: _this
},
React.createElement(
"label",
{
__source: {
fileName: _jsxFileName,
lineNumber: 32
},
__self: _this
},
"First Name"
),
React.createElement(Fields.name, { component: "input", __source: {
fileName: _jsxFileName,
lineNumber: 33
},
__self: _this
})
),
React.createElement(
"h2",
{
__source: {
fileName: _jsxFileName,
lineNumber: 36
},
__self: _this
},
"Render Function"
),
React.createElement(Fields.bio, { render: function render(_ref2) {
var input = _ref2.input,
meta = _ref2.meta;
return React.createElement(
"div",
{
__source: {
fileName: _jsxFileName,
lineNumber: 37
},
__self: _this
},
React.createElement(
"label",
{
__source: {
fileName: _jsxFileName,
lineNumber: 38
},
__self: _this
},
"Bio"
),
React.createElement("textarea", Object.assign({}, input, {
__source: {
fileName: _jsxFileName,
lineNumber: 39
},
__self: _this
})),
meta.touched && meta.error && React.createElement(
"span",
{
__source: {
fileName: _jsxFileName,
lineNumber: 40
},
__self: _this
},
meta.error
)
);
}, __source: {
fileName: _jsxFileName,
lineNumber: 37
},
__self: _this
}),
React.createElement(
"h2",
{
__source: {
fileName: _jsxFileName,
lineNumber: 43
},
__self: _this
},
"Render Function as Children"
),
React.createElement(
Fields.phone,
{
__source: {
fileName: _jsxFileName,
lineNumber: 44
},
__self: _this
},
function (_ref3) {
var input = _ref3.input,
meta = _ref3.meta;
return React.createElement(
"div",
{
__source: {
fileName: _jsxFileName,
lineNumber: 45
},
__self: _this
},
React.createElement(
"label",
{
__source: {
fileName: _jsxFileName,
lineNumber: 46
},
__self: _this
},
"Phone"
),
React.createElement("input", Object.assign({ type: "text" }, input, { placeholder: "Phone", __source: {
fileName: _jsxFileName,
lineNumber: 47
},
__self: _this
})),
meta.touched && meta.error && React.createElement(
"span",
{
__source: {
fileName: _jsxFileName,
lineNumber: 48
},
__self: _this
},
meta.error
)
);
}
),
React.createElement(
"h2",
{
__source: {
fileName: _jsxFileName,
lineNumber: 52
},
__self: _this
},
"Render Parsed Value"
),
React.createElement(
Fields.phone,
{
__source: {
fileName: _jsxFileName,
lineNumber: 53
},
__self: _this
},
function (_ref4) {
var input = _ref4.input,
meta = _ref4.meta;
return React.createElement(
"div",
{
__source: {
fileName: _jsxFileName,
lineNumber: 54
},
__self: _this
},
React.createElement(
"label",
{
__source: {
fileName: _jsxFileName,
lineNumber: 55
},
__self: _this
},
"Age"
),
React.createElement("input", Object.assign({ type: "tel" }, input, { placeholder: "Age", __source: {
fileName: _jsxFileName,
lineNumber: 56
},
__self: _this
})),
meta.touched && meta.error && React.createElement(
"span",
{
__source: {
fileName: _jsxFileName,
lineNumber: 57
},
__self: _this
},
meta.error
)
);
}
),
React.createElement(
FormSpy,
{
__source: {
fileName: _jsxFileName,
lineNumber: 61
},
__self: _this
},
function (props) {
return props.values.age;
}
),
React.createElement(
"button",
{ type: "submit", disabled: pristine || invalid, __source: {
fileName: _jsxFileName,
lineNumber: 63
},
__self: _this
},
"Submit"
)
);
}, __source: {
fileName: _jsxFileName,
lineNumber: 21
},
__self: _this
});
};
exports.default = MyForm;
//# sourceMappingURL=test.jsx.map