styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
36 lines (35 loc) • 1.59 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Default = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const form_builder_1 = require("../../../../form-builder/form-builder");
const grommet_1 = require("grommet");
const types_1 = require("components/form-builder/types");
const grommet_icons_1 = require("grommet-icons");
const context_1 = require("context");
const Default = () => {
const handleSubmit = (values) => {
alert(JSON.stringify(values));
};
const playersFormFields = [
{
name: "numeric_value",
label: "Numeric Value",
type: types_1.FormFieldType.Number,
required: true,
},
{
name: "with_range",
label: "With Range (between 10-50)",
type: types_1.FormFieldType.Number,
min: 10,
max: 50,
defaultValue: 9,
},
];
return (jsx_runtime_1.jsx(context_1.FormBuilderContextProvider, { children: jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ width: "medium", pad: "small", background: "light-2" }, { children: jsx_runtime_1.jsx(form_builder_1.FormBuilder, Object.assign({ fields: playersFormFields, onSubmit: handleSubmit }, { children: jsx_runtime_1.jsx(grommet_1.Button, { gridArea: "actions", icon: jsx_runtime_1.jsx(grommet_icons_1.Save, {}, void 0), label: "Submit", type: "submit", primary: true }, void 0) }), void 0) }), void 0) }, void 0));
};
exports.Default = Default;
exports.default = {
title: "Form Builder/Editors/NumericInput/Default",
};