styled-hook-form/lib/components/form-builder/stories/with-existing-methods.js

React form library for styled-components based on grommet and react-hook-form

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WithExistingMethods = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const devtools_1 = require("@hookform/devtools");
const context_1 = require("context");
const grommet_1 = require("grommet");
const react_hook_form_1 = require("react-hook-form");
const field_view_1 = require("../field-view");
const form_builder_1 = require("../form-builder");
const types_1 = require("../types");
exports.default = {
    title: "Form Builder/WithExistingMethods",
};
const WithExistingMethods = () => {
    const methods = react_hook_form_1.useForm({
        defaultValues: {
            field1: "Value1",
            field2: "Value2",
        },
    });
    const { control } = methods;
    const handleSubmit = () => {
        alert(JSON.stringify(methods.getValues()));
    };
    return (jsx_runtime_1.jsx(context_1.FormBuilderContextProvider, { children: jsx_runtime_1.jsxs(grommet_1.Box, { children: [control && jsx_runtime_1.jsx(devtools_1.DevTool, { control: control }, void 0),
                jsx_runtime_1.jsxs(form_builder_1.FormBuilder, Object.assign({ formMethods: methods, onSubmit: handleSubmit }, { children: [jsx_runtime_1.jsx(field_view_1.FieldView, { name: "field1", label: "Field1", type: types_1.FormFieldType.Text }, void 0),
                        jsx_runtime_1.jsx(field_view_1.FieldView, { name: "field2", label: "Field2", type: types_1.FormFieldType.Text }, void 0),
                        jsx_runtime_1.jsx(grommet_1.Button, { label: "Submit", type: "submit" }, void 0)] }), void 0)] }, void 0) }, void 0));
};
exports.WithExistingMethods = WithExistingMethods;