styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
154 lines (153 loc) • 3.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CascadingSelections = 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 react_1 = require("react");
const countries = [
{
id: 1,
name: "Australia",
},
{
id: 2,
name: "Brazil",
},
{
id: 3,
name: "China",
},
{
id: 4,
name: "France",
},
{
id: 5,
name: "Germany",
},
];
const cities = [
{
id: 1,
cid: 1,
name: "Sydney",
},
{
id: 2,
cid: 1,
name: "Mellbourne",
},
{
id: 3,
cid: 1,
name: "Hobart",
},
{
id: 4,
cid: 2,
name: "São Paulo",
},
{
id: 5,
cid: 2,
name: "Rio De Janeiro",
},
{
id: 6,
cid: 2,
name: "Salvador",
},
{
id: 7,
cid: 3,
name: "Chicago",
},
{
id: 8,
cid: 3,
name: "Wuhan",
},
{
id: 9,
cid: 3,
name: "Hong Kong",
},
{
id: 10,
cid: 4,
name: "Paris",
},
{
id: 11,
cid: 4,
name: "Lyon",
},
{
id: 12,
cid: 4,
name: "Lille",
},
{
id: 13,
cid: 5,
name: "Munich",
},
{
id: 14,
cid: 5,
name: "Berlin",
},
{
id: 15,
cid: 5,
name: "Hamburg",
},
];
const CascadingSelections = () => {
let [citiesSource, setCitiesSource] = react_1.useState([]);
let fields = [
{
name: "country",
label: "Country",
type: types_1.FormFieldType.DropDown,
options: countries,
itemLabelKey: "name",
itemValueKey: "id",
onChange: (cid) => {
setCitiesSource({
request: "/api/cities",
extraParams: {
cid,
},
mockResponse: (mock) => {
mock.onGet("/api/cities").reply(({ params: { cid } }) => {
return new Promise((res) => {
setTimeout(() => {
res([200, cities.filter((c) => c.cid === cid)]);
}, 1000);
});
});
},
});
},
},
{
name: "province",
label: "Province",
type: types_1.FormFieldType.DropDown,
options: citiesSource,
itemLabelKey: "name",
itemValueKey: "id",
},
];
const handleSubmit = (values) => {
alert(JSON.stringify(values));
};
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: handleSubmit }, { children: jsx_runtime_1.jsx(grommet_1.Button, { label: "Submit", type: "submit", primary: true }, void 0) }), void 0) }), void 0));
};
exports.CascadingSelections = CascadingSelections;
exports.default = {
title: "Form Builder/Editors/DropDown/Cascading Selections",
};