styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
50 lines (49 loc) • 2.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.InfiniteScroll = 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 utils_1 = require("./utils");
const InfiniteScroll = () => {
let fields = [
{
name: "productId",
label: "Product",
type: types_1.FormFieldType.DropDown,
itemLabelKey: "name",
itemValueKey: "id",
defaultValue: 0,
options: {
request: "/api/categories",
searchKey: "queryText",
extraParams: { blaa: "Blaa" },
mockResponse: (mock) => {
mock.onGet("/api/categories").reply(({ params }) => {
let data = new Array(20)
.fill(0)
.map(() => ({ id: utils_1.ID(), name: faker_1.commerce.productName() }));
if (params.queryText) {
data = data.filter((e) => e.name
.toLowerCase()
.indexOf(params.queryText.toLowerCase()) >= 0);
}
return [200, data];
});
},
},
},
];
return (jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ width: "medium" }, { children: jsx_runtime_1.jsxs(form_builder_1.FormBuilder, Object.assign({ fields: fields, onSubmit: (values) => {
alert(JSON.stringify(values));
} }, { children: [jsx_runtime_1.jsx(grommet_1.Text, Object.assign({ margin: {
vertical: "medium",
} }, { children: "* Start typing in search box to filter result , but bear in mind that as data is fake the search result may differ on each search." }), void 0),
jsx_runtime_1.jsx(grommet_1.Button, { label: "Submit", type: "submit", primary: true }, void 0)] }), void 0) }), void 0));
};
exports.InfiniteScroll = InfiniteScroll;
exports.default = {
title: "Form Builder/Editors/DropDown/Infinite Scroll",
};