styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
81 lines (80 loc) • 3.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Default = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const __1 = require("..");
const faker_1 = require("faker");
const grommet_1 = require("grommet");
const styled_hook_form_1 = require("styled-hook-form");
const data_context_1 = require("../data-context");
const columns = [
{
property: "avatar",
header: "Avatar",
render: ({ avatar }) => jsx_runtime_1.jsx(grommet_1.Avatar, { src: avatar }, void 0),
},
{
property: "name",
header: "Name",
},
{
property: "phone",
header: "Phone",
},
{
property: "address",
header: "Address",
},
{
property: "rem",
header: "Task Remaining",
render: ({ rem }) => (jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ align: "center" }, { children: jsx_runtime_1.jsxs(grommet_1.Stack, Object.assign({ anchor: "center" }, { children: [jsx_runtime_1.jsx(grommet_1.Meter, { max: 100, value: rem, type: "circle", size: "xsmall", thickness: "small" }, void 0),
jsx_runtime_1.jsxs(grommet_1.Box, Object.assign({ direction: "row", align: "center", pad: { bottom: "xsmall" } }, { children: [jsx_runtime_1.jsx(grommet_1.Text, Object.assign({ size: "xlarge", weight: "bold" }, { children: rem }), void 0),
jsx_runtime_1.jsx(grommet_1.Text, Object.assign({ size: "small" }, { children: "%" }), void 0)] }), void 0)] }), void 0) }), void 0)),
},
];
const getId = () => {
let id = 0;
return () => {
return ++id;
};
};
const ID = getId();
const pageSize = 20;
const Default = () => {
return (jsx_runtime_1.jsx(styled_hook_form_1.FormBuilderContextProvider, { children: jsx_runtime_1.jsx(data_context_1.DataTableContextProvider, { children: jsx_runtime_1.jsx(__1.DataTable, { primaryKey: "id", pin: true, request: {
url: "/api/employee/list",
}, mockResponse: (m) => {
m.onGet("/api/employee/list").reply((req) => {
return new Promise((resolve) => {
let data = new Array(req.params.page === 5 ? 5 : parseInt(req.params.pageSize))
.fill(0)
.map((_) => ({
id: ID() + 1,
name: `${faker_1.name.firstName()} ${faker_1.name.lastName()}`,
rem: faker_1.datatype.number(100),
avatar: faker_1.image.avatar(),
phone: faker_1.phone.phoneNumber(),
address: faker_1.address.streetAddress(),
}));
//setTimeout(() => {
resolve([
200,
{
total: 95,
list: data,
},
]);
//}, 1000);
});
});
}, paginate: {
enabled: true,
pageSize: pageSize,
type: "infinite-scroll",
}, onRequestError: () => { }, columns: columns }, void 0) }, void 0) }, void 0));
};
exports.Default = Default;
exports.default = {
title: "Extensions/DataTable/Default",
};