@tsed/react-formio 3.0.0-rc.8 → 3.0.0-rc.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,6 +4,7 @@ import { UseTableProps } from './hooks/useTable';
|
|
|
4
4
|
export interface TableProps<Data extends object = JSONRecord> extends UseTableProps<Data> {
|
|
5
5
|
className?: string;
|
|
6
6
|
enableFooter?: boolean;
|
|
7
|
+
enablePagination?: boolean;
|
|
7
8
|
pageSizes?: number[];
|
|
8
9
|
}
|
|
9
|
-
export declare function Table<Data extends object = JSONRecord>({ className, enableFooter, children, ...props }: PropsWithChildren<TableProps<Data>>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function Table<Data extends object = JSONRecord>({ className, enableFooter, enablePagination, children, ...props }: PropsWithChildren<TableProps<Data>>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import { jsxs as l, jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import { createElement as
|
|
3
|
-
import { flexRender as
|
|
4
|
-
import { c as
|
|
2
|
+
import { createElement as C } from "react";
|
|
3
|
+
import { flexRender as b } from "@tanstack/react-table";
|
|
4
|
+
import { c as x } from "../../chunks/index.js";
|
|
5
5
|
import { getComponent as r } from "../../registries/components.js";
|
|
6
|
-
import { useTable as
|
|
7
|
-
function
|
|
6
|
+
import { useTable as f } from "./hooks/useTable.js";
|
|
7
|
+
function k({
|
|
8
8
|
className: c,
|
|
9
9
|
enableFooter: g,
|
|
10
|
-
|
|
10
|
+
enablePagination: m = !0,
|
|
11
|
+
children: u,
|
|
11
12
|
...o
|
|
12
13
|
}) {
|
|
13
|
-
const { tableInstance: n, i18n: d } =
|
|
14
|
-
return /* @__PURE__ */ l("div", { className:
|
|
14
|
+
const { tableInstance: n, i18n: d } = f(o), P = r("CellHeader"), p = r("CellFooter"), h = r("Pagination"), { pagination: i } = n.getState();
|
|
15
|
+
return /* @__PURE__ */ l("div", { className: x("table-group", c), children: [
|
|
15
16
|
/* @__PURE__ */ a("div", { className: "table-group-body", children: /* @__PURE__ */ l("table", { className: "table table-striped table-hover", children: [
|
|
16
17
|
/* @__PURE__ */ a("thead", { children: n.getHeaderGroups().map((t) => /* @__PURE__ */ a("tr", { children: t.headers.map((e) => {
|
|
17
18
|
const s = e.column.getIsSorted();
|
|
@@ -20,17 +21,17 @@ function y({
|
|
|
20
21
|
{
|
|
21
22
|
"data-testid": `head-cell-${e.id}`,
|
|
22
23
|
"aria-sort": s ? s === "asc" ? "ascending" : "descending" : "none",
|
|
23
|
-
children: e.isPlaceholder ? null : /* @__PURE__ */ a(
|
|
24
|
+
children: e.isPlaceholder ? null : /* @__PURE__ */ a(P, { header: e, i18n: d })
|
|
24
25
|
},
|
|
25
26
|
e.id
|
|
26
27
|
);
|
|
27
28
|
}) }, t.id)) }),
|
|
28
|
-
/* @__PURE__ */ a("tbody", { children: n.getRowModel().rows.map((t) => /* @__PURE__ */ a("tr", { "data-testid": `body-row-${t.id}`, children: t.getVisibleCells().filter((e) => !e.column.columnDef.meta?.hidden).map((e) => /* @__PURE__ */
|
|
29
|
-
g && /* @__PURE__ */ a("tfoot", { children: n.getFooterGroups().map((t) => /* @__PURE__ */ a("tr", { children: t.headers.map((e) => /* @__PURE__ */ a("th", { children: e.isPlaceholder ? null : /* @__PURE__ */ a(
|
|
29
|
+
/* @__PURE__ */ a("tbody", { children: n.getRowModel().rows.map((t) => /* @__PURE__ */ a("tr", { "data-testid": `body-row-${t.id}`, children: t.getVisibleCells().filter((e) => !e.column.columnDef.meta?.hidden).map((e) => /* @__PURE__ */ C("td", { ...e.column.columnDef?.meta?.cellProps, key: e.id, "data-testid": `body-cell-${e.id}` }, b(e.column.columnDef.cell, e.getContext()))) }, t.id)) }),
|
|
30
|
+
g && /* @__PURE__ */ a("tfoot", { children: n.getFooterGroups().map((t) => /* @__PURE__ */ a("tr", { children: t.headers.map((e) => /* @__PURE__ */ a("th", { children: e.isPlaceholder ? null : /* @__PURE__ */ a(p, { header: e, i18n: d }) }, e.id)) }, t.id)) })
|
|
30
31
|
] }) }),
|
|
31
32
|
/* @__PURE__ */ l("div", { className: "table-group-footer", children: [
|
|
32
|
-
o.data.length && i ? /* @__PURE__ */ a(
|
|
33
|
-
|
|
33
|
+
o.data.length && i && m ? /* @__PURE__ */ a(
|
|
34
|
+
h,
|
|
34
35
|
{
|
|
35
36
|
className: "flex-1",
|
|
36
37
|
canNextPage: n.getCanNextPage(),
|
|
@@ -47,11 +48,11 @@ function y({
|
|
|
47
48
|
onPageSizeChange: (t) => n.setPageSize(t)
|
|
48
49
|
}
|
|
49
50
|
) : null,
|
|
50
|
-
/* @__PURE__ */ a("div", { children:
|
|
51
|
+
/* @__PURE__ */ a("div", { children: u })
|
|
51
52
|
] })
|
|
52
53
|
] });
|
|
53
54
|
}
|
|
54
55
|
export {
|
|
55
|
-
|
|
56
|
+
k as Table
|
|
56
57
|
};
|
|
57
58
|
//# sourceMappingURL=Table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../../src/molecules/table/Table.tsx"],"sourcesContent":["import { flexRender } from \"@tanstack/react-table\";\nimport cx from \"classnames\";\nimport { PropsWithChildren } from \"react\";\n\nimport type { JSONRecord } from \"../../interfaces/JSONRecord.js\";\nimport { getComponent } from \"../../registries/components\";\nimport type { Pagination as DefaultPagination } from \"../pagination/Pagination\";\nimport type { DefaultCellFooter } from \"./components/DefaultCellFooter\";\nimport type { DefaultCellHeader } from \"./components/DefaultCellHeader\";\nimport { useTable, UseTableProps } from \"./hooks/useTable\";\n\nexport interface TableProps<Data extends object = JSONRecord> extends UseTableProps<Data> {\n className?: string;\n\n enableFooter?: boolean;\n\n pageSizes?: number[];\n}\n\nexport function Table<Data extends object = JSONRecord>({\n className,\n enableFooter,\n children,\n ...props\n}: PropsWithChildren<TableProps<Data>>) {\n const { tableInstance, i18n } = useTable<Data>(props);\n const CellHeader = getComponent<typeof DefaultCellHeader>(\"CellHeader\");\n const CellFooter = getComponent<typeof DefaultCellFooter>(\"CellFooter\");\n const Pagination = getComponent<typeof DefaultPagination>(\"Pagination\");\n\n const { pagination } = tableInstance.getState();\n\n return (\n <div className={cx(\"table-group\", className)}>\n <div className='table-group-body'>\n <table className='table table-striped table-hover'>\n <thead>\n {tableInstance.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n const sort = header.column.getIsSorted();\n return (\n <th\n data-testid={`head-cell-${header.id}`}\n key={header.id}\n aria-sort={sort ? (sort === \"asc\" ? \"ascending\" : \"descending\") : \"none\"}\n >\n {header.isPlaceholder ? null : <CellHeader header={header} i18n={i18n} />}\n </th>\n );\n })}\n </tr>\n ))}\n </thead>\n <tbody>\n {tableInstance.getRowModel().rows.map((row) => {\n return (\n <tr key={row.id} data-testid={`body-row-${row.id}`}>\n {row\n .getVisibleCells()\n .filter((cell) => !cell.column.columnDef.meta?.hidden)\n .map((cell) => {\n return (\n <td {...cell.column.columnDef?.meta?.cellProps} key={cell.id} data-testid={`body-cell-${cell.id}`}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </td>\n );\n })}\n </tr>\n );\n })}\n </tbody>\n {enableFooter && (\n <tfoot>\n {tableInstance.getFooterGroups().map((footerGroup) => (\n <tr key={footerGroup.id}>\n {footerGroup.headers.map((header) => (\n <th key={header.id}>{header.isPlaceholder ? null : <CellFooter header={header} i18n={i18n} />}</th>\n ))}\n </tr>\n ))}\n </tfoot>\n )}\n </table>\n </div>\n <div className='table-group-footer'>\n {props.data.length && pagination ? (\n <Pagination\n className={\"flex-1\"}\n canNextPage={tableInstance.getCanNextPage()}\n canPreviousPage={tableInstance.getCanPreviousPage()}\n pageIndex={pagination.pageIndex}\n pageSize={pagination.pageSize}\n pageSizes={props.pageSizes}\n i18n={props.i18n}\n pageCount={tableInstance.getPageCount()}\n rowCount={props.rowCount}\n onPageIndexChange={(page) => tableInstance.setPageIndex(page)}\n onClickPreviousPage={() => tableInstance.previousPage()}\n onClickNextPage={() => tableInstance.nextPage()}\n onPageSizeChange={(pageSize) => tableInstance.setPageSize(pageSize)}\n />\n ) : null}\n <div>{children}</div>\n </div>\n </div>\n );\n}\n"],"names":["Table","className","enableFooter","children","props","tableInstance","i18n","useTable","CellHeader","getComponent","CellFooter","Pagination","pagination","cx","jsx","jsxs","headerGroup","header","sort","row","cell","createElement","flexRender","footerGroup","page","pageSize"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../../src/molecules/table/Table.tsx"],"sourcesContent":["import { flexRender } from \"@tanstack/react-table\";\nimport cx from \"classnames\";\nimport { PropsWithChildren } from \"react\";\n\nimport type { JSONRecord } from \"../../interfaces/JSONRecord.js\";\nimport { getComponent } from \"../../registries/components\";\nimport type { Pagination as DefaultPagination } from \"../pagination/Pagination\";\nimport type { DefaultCellFooter } from \"./components/DefaultCellFooter\";\nimport type { DefaultCellHeader } from \"./components/DefaultCellHeader\";\nimport { useTable, UseTableProps } from \"./hooks/useTable\";\n\nexport interface TableProps<Data extends object = JSONRecord> extends UseTableProps<Data> {\n className?: string;\n\n enableFooter?: boolean;\n enablePagination?: boolean;\n\n pageSizes?: number[];\n}\n\nexport function Table<Data extends object = JSONRecord>({\n className,\n enableFooter,\n enablePagination = true,\n children,\n ...props\n}: PropsWithChildren<TableProps<Data>>) {\n const { tableInstance, i18n } = useTable<Data>(props);\n const CellHeader = getComponent<typeof DefaultCellHeader>(\"CellHeader\");\n const CellFooter = getComponent<typeof DefaultCellFooter>(\"CellFooter\");\n const Pagination = getComponent<typeof DefaultPagination>(\"Pagination\");\n\n const { pagination } = tableInstance.getState();\n\n return (\n <div className={cx(\"table-group\", className)}>\n <div className='table-group-body'>\n <table className='table table-striped table-hover'>\n <thead>\n {tableInstance.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n const sort = header.column.getIsSorted();\n return (\n <th\n data-testid={`head-cell-${header.id}`}\n key={header.id}\n aria-sort={sort ? (sort === \"asc\" ? \"ascending\" : \"descending\") : \"none\"}\n >\n {header.isPlaceholder ? null : <CellHeader header={header} i18n={i18n} />}\n </th>\n );\n })}\n </tr>\n ))}\n </thead>\n <tbody>\n {tableInstance.getRowModel().rows.map((row) => {\n return (\n <tr key={row.id} data-testid={`body-row-${row.id}`}>\n {row\n .getVisibleCells()\n .filter((cell) => !cell.column.columnDef.meta?.hidden)\n .map((cell) => {\n return (\n <td {...cell.column.columnDef?.meta?.cellProps} key={cell.id} data-testid={`body-cell-${cell.id}`}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </td>\n );\n })}\n </tr>\n );\n })}\n </tbody>\n {enableFooter && (\n <tfoot>\n {tableInstance.getFooterGroups().map((footerGroup) => (\n <tr key={footerGroup.id}>\n {footerGroup.headers.map((header) => (\n <th key={header.id}>{header.isPlaceholder ? null : <CellFooter header={header} i18n={i18n} />}</th>\n ))}\n </tr>\n ))}\n </tfoot>\n )}\n </table>\n </div>\n <div className='table-group-footer'>\n {props.data.length && pagination && enablePagination ? (\n <Pagination\n className={\"flex-1\"}\n canNextPage={tableInstance.getCanNextPage()}\n canPreviousPage={tableInstance.getCanPreviousPage()}\n pageIndex={pagination.pageIndex}\n pageSize={pagination.pageSize}\n pageSizes={props.pageSizes}\n i18n={props.i18n}\n pageCount={tableInstance.getPageCount()}\n rowCount={props.rowCount}\n onPageIndexChange={(page) => tableInstance.setPageIndex(page)}\n onClickPreviousPage={() => tableInstance.previousPage()}\n onClickNextPage={() => tableInstance.nextPage()}\n onPageSizeChange={(pageSize) => tableInstance.setPageSize(pageSize)}\n />\n ) : null}\n <div>{children}</div>\n </div>\n </div>\n );\n}\n"],"names":["Table","className","enableFooter","enablePagination","children","props","tableInstance","i18n","useTable","CellHeader","getComponent","CellFooter","Pagination","pagination","cx","jsx","jsxs","headerGroup","header","sort","row","cell","createElement","flexRender","footerGroup","page","pageSize"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsed/react-formio",
|
|
3
|
-
"version": "3.0.0-rc.
|
|
3
|
+
"version": "3.0.0-rc.9",
|
|
4
4
|
"description": "Provide a react formio wrapper. Written in TypeScript.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@tanstack/react-table": ">=8.20.6",
|
|
47
|
-
"@tsed/tailwind-formio": "3.0.0-rc.
|
|
48
|
-
"@tsed/typescript": "3.0.0-rc.
|
|
47
|
+
"@tsed/tailwind-formio": "3.0.0-rc.9",
|
|
48
|
+
"@tsed/typescript": "3.0.0-rc.9",
|
|
49
49
|
"microbundle": "0.13.0",
|
|
50
50
|
"vite": "7.1.5",
|
|
51
51
|
"vitest": "3.2.4"
|
|
@@ -217,6 +217,32 @@ export const WithFilters: Story = {
|
|
|
217
217
|
}
|
|
218
218
|
};
|
|
219
219
|
|
|
220
|
+
export const WithPaginationOptions: Story = {
|
|
221
|
+
args: {
|
|
222
|
+
data: formSubmissions as unknown as ProductSubmission[],
|
|
223
|
+
columns: mapFormToColumns(FormType as any),
|
|
224
|
+
operations: [
|
|
225
|
+
{
|
|
226
|
+
title: "Edit",
|
|
227
|
+
action: "edit",
|
|
228
|
+
alias: "row",
|
|
229
|
+
path: "/resources/:resourceId/submissions/:submissionId",
|
|
230
|
+
icon: "edit"
|
|
231
|
+
}
|
|
232
|
+
],
|
|
233
|
+
i18n: {},
|
|
234
|
+
enablePagination: true,
|
|
235
|
+
pageSizes: [5, 10, 25],
|
|
236
|
+
rowCount: formSubmissions.length,
|
|
237
|
+
initialState: {
|
|
238
|
+
pagination: {
|
|
239
|
+
pageIndex: 0,
|
|
240
|
+
pageSize: 5
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
};
|
|
245
|
+
|
|
220
246
|
export const WithCustomCell: Story = {
|
|
221
247
|
args: {
|
|
222
248
|
data: formSubmissions as unknown as ProductSubmission[],
|
|
@@ -13,6 +13,7 @@ export interface TableProps<Data extends object = JSONRecord> extends UseTablePr
|
|
|
13
13
|
className?: string;
|
|
14
14
|
|
|
15
15
|
enableFooter?: boolean;
|
|
16
|
+
enablePagination?: boolean;
|
|
16
17
|
|
|
17
18
|
pageSizes?: number[];
|
|
18
19
|
}
|
|
@@ -20,6 +21,7 @@ export interface TableProps<Data extends object = JSONRecord> extends UseTablePr
|
|
|
20
21
|
export function Table<Data extends object = JSONRecord>({
|
|
21
22
|
className,
|
|
22
23
|
enableFooter,
|
|
24
|
+
enablePagination = true,
|
|
23
25
|
children,
|
|
24
26
|
...props
|
|
25
27
|
}: PropsWithChildren<TableProps<Data>>) {
|
|
@@ -84,7 +86,7 @@ export function Table<Data extends object = JSONRecord>({
|
|
|
84
86
|
</table>
|
|
85
87
|
</div>
|
|
86
88
|
<div className='table-group-footer'>
|
|
87
|
-
{props.data.length && pagination ? (
|
|
89
|
+
{props.data.length && pagination && enablePagination ? (
|
|
88
90
|
<Pagination
|
|
89
91
|
className={"flex-1"}
|
|
90
92
|
canNextPage={tableInstance.getCanNextPage()}
|