styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
72 lines (71 loc) • 3.03 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomLabel = 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 playersFormFields = [
{
name: "name",
label: "Name",
type: types_1.FormFieldType.Text,
gridArea: "left",
},
{
name: "lang",
label: "Language",
type: types_1.FormFieldType.DropDown,
itemLabelKey: "text",
itemValueKey: "value",
placeholder: "Select a language",
renderItemLabel: ({ text, value }, { setValue }) => {
const handleRemove = (e) => {
e.stopPropagation();
setValue((p) => p.filter((pv) => pv.value !== value));
};
return (jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ background: "brand", pad: "xsmall", round: "xsmall", margin: { horizontal: "xxsmall", vertical: "xxsmall" } }, { children: jsx_runtime_1.jsxs(grommet_1.Box, Object.assign({ direction: "row", onClick: handleRemove }, { children: [jsx_runtime_1.jsx(grommet_1.Text, Object.assign({ margin: { end: "small" } }, { children: text }), void 0),
jsx_runtime_1.jsx(grommet_1.Button, { plain: true, icon: jsx_runtime_1.jsx(grommet_icons_1.Close, { size: "small", style: { width: "12px", height: "12px" } }, void 0) }, void 0)] }), void 0) }), void 0));
},
multiple: true,
options: [
{
text: "English",
value: "english",
},
{
text: "German",
value: "german",
},
{
text: "Spanish",
value: "spanish",
},
{
text: "French",
value: "french",
},
{
text: "Chines",
value: "chines",
},
{
text: "Japanese",
value: "japanese",
},
],
gridArea: "left",
},
];
const CustomLabel = () => {
let model = { name: "John Nash", lang: ["english"] };
let handleSubmit = (values) => {
alert(JSON.stringify(values));
};
return (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({ onSubmit: handleSubmit, fields: playersFormFields, model: model }, { children: jsx_runtime_1.jsx(grommet_1.Button, { gridArea: "actions", icon: jsx_runtime_1.jsx(grommet_icons_1.Add, {}, void 0), label: "Submit", type: "submit", primary: true }, void 0) }), void 0) }), void 0));
};
exports.CustomLabel = CustomLabel;
exports.default = {
title: "Form Builder/Editors/DropDown/Custom Label",
};