styled-hook-form/lib/components/form-builder/editors/drop-down/stories/remote-options.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RemoteOptions = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const form_builder_1 = require("components/form-builder/form-builder");
const types_1 = require("components/form-builder/types");
const grommet_1 = require("grommet");
const faker_1 = require("faker");
const RemoteOptions = () => {
    let fields = [
        {
            name: "job_title",
            label: "Job Title",
            type: types_1.FormFieldType.DropDown,
            itemLabelKey: "name",
            itemValueKey: "id",
            defaultValue: 0,
            options: {
                request: "/api/options",
                mockResponse: (mock) => {
                    mock.onGet("/api/options").reply(() => {
                        return [
                            200,
                            new Array(10)
                                .fill(0)
                                .map((_, idx) => ({ id: idx, name: faker_1.name.jobTitle() })),
                        ];
                    });
                },
            },
        },
    ];
    return (jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ width: "medium" }, { children: jsx_runtime_1.jsx(form_builder_1.FormBuilder, Object.assign({ fields: fields, onSubmit: (values) => {
                alert(JSON.stringify(values));
            } }, { children: jsx_runtime_1.jsx(grommet_1.Button, { label: "Submit", type: "submit", primary: true }, void 0) }), void 0) }), void 0));
};
exports.RemoteOptions = RemoteOptions;
exports.default = {
    title: "Form Builder/Editors/DropDown/Remote Options",
};