@tsed/react-formio 3.0.0-rc.7 → 3.0.0-rc.8
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.
|
@@ -1,57 +1,57 @@
|
|
|
1
|
-
import { jsxs as l, jsx as
|
|
1
|
+
import { jsxs as l, jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import { createElement as h } from "react";
|
|
3
|
-
import { flexRender as
|
|
4
|
-
import { c as
|
|
3
|
+
import { flexRender as C } from "@tanstack/react-table";
|
|
4
|
+
import { c as b } from "../../chunks/index.js";
|
|
5
5
|
import { getComponent as r } from "../../registries/components.js";
|
|
6
|
-
import { useTable as
|
|
7
|
-
function
|
|
6
|
+
import { useTable as x } from "./hooks/useTable.js";
|
|
7
|
+
function y({
|
|
8
8
|
className: c,
|
|
9
9
|
enableFooter: g,
|
|
10
10
|
children: m,
|
|
11
|
-
...
|
|
11
|
+
...o
|
|
12
12
|
}) {
|
|
13
|
-
const { tableInstance:
|
|
14
|
-
return /* @__PURE__ */ l("div", { className:
|
|
15
|
-
/* @__PURE__ */ l("table", { className: "table table-striped table-hover", children: [
|
|
16
|
-
/* @__PURE__ */
|
|
13
|
+
const { tableInstance: n, i18n: d } = x(o), u = r("CellHeader"), P = r("CellFooter"), p = r("Pagination"), { pagination: i } = n.getState();
|
|
14
|
+
return /* @__PURE__ */ l("div", { className: b("table-group", c), children: [
|
|
15
|
+
/* @__PURE__ */ a("div", { className: "table-group-body", children: /* @__PURE__ */ l("table", { className: "table table-striped table-hover", children: [
|
|
16
|
+
/* @__PURE__ */ a("thead", { children: n.getHeaderGroups().map((t) => /* @__PURE__ */ a("tr", { children: t.headers.map((e) => {
|
|
17
17
|
const s = e.column.getIsSorted();
|
|
18
|
-
return /* @__PURE__ */
|
|
18
|
+
return /* @__PURE__ */ a(
|
|
19
19
|
"th",
|
|
20
20
|
{
|
|
21
21
|
"data-testid": `head-cell-${e.id}`,
|
|
22
22
|
"aria-sort": s ? s === "asc" ? "ascending" : "descending" : "none",
|
|
23
|
-
children: e.isPlaceholder ? null : /* @__PURE__ */
|
|
23
|
+
children: e.isPlaceholder ? null : /* @__PURE__ */ a(u, { header: e, i18n: d })
|
|
24
24
|
},
|
|
25
25
|
e.id
|
|
26
26
|
);
|
|
27
27
|
}) }, t.id)) }),
|
|
28
|
-
/* @__PURE__ */
|
|
29
|
-
g && /* @__PURE__ */
|
|
30
|
-
] }),
|
|
31
|
-
/* @__PURE__ */ l("div", { className: "
|
|
32
|
-
|
|
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__ */ h("td", { ...e.column.columnDef?.meta?.cellProps, key: e.id, "data-testid": `body-cell-${e.id}` }, C(e.column.columnDef.cell, e.getContext()))) }, t.id)) }),
|
|
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(P, { header: e, i18n: d }) }, e.id)) }, t.id)) })
|
|
30
|
+
] }) }),
|
|
31
|
+
/* @__PURE__ */ l("div", { className: "table-group-footer", children: [
|
|
32
|
+
o.data.length && i ? /* @__PURE__ */ a(
|
|
33
33
|
p,
|
|
34
34
|
{
|
|
35
35
|
className: "flex-1",
|
|
36
|
-
canNextPage:
|
|
37
|
-
canPreviousPage:
|
|
38
|
-
pageIndex:
|
|
39
|
-
pageSize:
|
|
40
|
-
pageSizes:
|
|
41
|
-
i18n:
|
|
42
|
-
pageCount:
|
|
43
|
-
rowCount:
|
|
44
|
-
onPageIndexChange: (t) =>
|
|
45
|
-
onClickPreviousPage: () =>
|
|
46
|
-
onClickNextPage: () =>
|
|
47
|
-
onPageSizeChange: (t) =>
|
|
36
|
+
canNextPage: n.getCanNextPage(),
|
|
37
|
+
canPreviousPage: n.getCanPreviousPage(),
|
|
38
|
+
pageIndex: i.pageIndex,
|
|
39
|
+
pageSize: i.pageSize,
|
|
40
|
+
pageSizes: o.pageSizes,
|
|
41
|
+
i18n: o.i18n,
|
|
42
|
+
pageCount: n.getPageCount(),
|
|
43
|
+
rowCount: o.rowCount,
|
|
44
|
+
onPageIndexChange: (t) => n.setPageIndex(t),
|
|
45
|
+
onClickPreviousPage: () => n.previousPage(),
|
|
46
|
+
onClickNextPage: () => n.nextPage(),
|
|
47
|
+
onPageSizeChange: (t) => n.setPageSize(t)
|
|
48
48
|
}
|
|
49
49
|
) : null,
|
|
50
|
-
/* @__PURE__ */
|
|
50
|
+
/* @__PURE__ */ a("div", { children: m })
|
|
51
51
|
] })
|
|
52
52
|
] });
|
|
53
53
|
}
|
|
54
54
|
export {
|
|
55
|
-
|
|
55
|
+
y as Table
|
|
56
56
|
};
|
|
57
57
|
//# 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
|
|
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":"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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.8",
|
|
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.8",
|
|
48
|
+
"@tsed/typescript": "3.0.0-rc.8",
|
|
49
49
|
"microbundle": "0.13.0",
|
|
50
50
|
"vite": "7.1.5",
|
|
51
51
|
"vitest": "3.2.4"
|
|
@@ -31,57 +31,59 @@ export function Table<Data extends object = JSONRecord>({
|
|
|
31
31
|
const { pagination } = tableInstance.getState();
|
|
32
32
|
|
|
33
33
|
return (
|
|
34
|
-
<div className={cx("table-group
|
|
35
|
-
<
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
{headerGroup.
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
))}
|
|
53
|
-
</thead>
|
|
54
|
-
<tbody>
|
|
55
|
-
{tableInstance.getRowModel().rows.map((row) => {
|
|
56
|
-
return (
|
|
57
|
-
<tr key={row.id} data-testid={`body-row-${row.id}`}>
|
|
58
|
-
{row
|
|
59
|
-
.getVisibleCells()
|
|
60
|
-
.filter((cell) => !cell.column.columnDef.meta?.hidden)
|
|
61
|
-
.map((cell) => {
|
|
62
|
-
return (
|
|
63
|
-
<td {...cell.column.columnDef?.meta?.cellProps} key={cell.id} data-testid={`body-cell-${cell.id}`}>
|
|
64
|
-
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
65
|
-
</td>
|
|
66
|
-
);
|
|
67
|
-
})}
|
|
68
|
-
</tr>
|
|
69
|
-
);
|
|
70
|
-
})}
|
|
71
|
-
</tbody>
|
|
72
|
-
{enableFooter && (
|
|
73
|
-
<tfoot>
|
|
74
|
-
{tableInstance.getFooterGroups().map((footerGroup) => (
|
|
75
|
-
<tr key={footerGroup.id}>
|
|
76
|
-
{footerGroup.headers.map((header) => (
|
|
77
|
-
<th key={header.id}>{header.isPlaceholder ? null : <CellFooter header={header} i18n={i18n} />}</th>
|
|
78
|
-
))}
|
|
34
|
+
<div className={cx("table-group", className)}>
|
|
35
|
+
<div className='table-group-body'>
|
|
36
|
+
<table className='table table-striped table-hover'>
|
|
37
|
+
<thead>
|
|
38
|
+
{tableInstance.getHeaderGroups().map((headerGroup) => (
|
|
39
|
+
<tr key={headerGroup.id}>
|
|
40
|
+
{headerGroup.headers.map((header) => {
|
|
41
|
+
const sort = header.column.getIsSorted();
|
|
42
|
+
return (
|
|
43
|
+
<th
|
|
44
|
+
data-testid={`head-cell-${header.id}`}
|
|
45
|
+
key={header.id}
|
|
46
|
+
aria-sort={sort ? (sort === "asc" ? "ascending" : "descending") : "none"}
|
|
47
|
+
>
|
|
48
|
+
{header.isPlaceholder ? null : <CellHeader header={header} i18n={i18n} />}
|
|
49
|
+
</th>
|
|
50
|
+
);
|
|
51
|
+
})}
|
|
79
52
|
</tr>
|
|
80
53
|
))}
|
|
81
|
-
</
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
54
|
+
</thead>
|
|
55
|
+
<tbody>
|
|
56
|
+
{tableInstance.getRowModel().rows.map((row) => {
|
|
57
|
+
return (
|
|
58
|
+
<tr key={row.id} data-testid={`body-row-${row.id}`}>
|
|
59
|
+
{row
|
|
60
|
+
.getVisibleCells()
|
|
61
|
+
.filter((cell) => !cell.column.columnDef.meta?.hidden)
|
|
62
|
+
.map((cell) => {
|
|
63
|
+
return (
|
|
64
|
+
<td {...cell.column.columnDef?.meta?.cellProps} key={cell.id} data-testid={`body-cell-${cell.id}`}>
|
|
65
|
+
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
66
|
+
</td>
|
|
67
|
+
);
|
|
68
|
+
})}
|
|
69
|
+
</tr>
|
|
70
|
+
);
|
|
71
|
+
})}
|
|
72
|
+
</tbody>
|
|
73
|
+
{enableFooter && (
|
|
74
|
+
<tfoot>
|
|
75
|
+
{tableInstance.getFooterGroups().map((footerGroup) => (
|
|
76
|
+
<tr key={footerGroup.id}>
|
|
77
|
+
{footerGroup.headers.map((header) => (
|
|
78
|
+
<th key={header.id}>{header.isPlaceholder ? null : <CellFooter header={header} i18n={i18n} />}</th>
|
|
79
|
+
))}
|
|
80
|
+
</tr>
|
|
81
|
+
))}
|
|
82
|
+
</tfoot>
|
|
83
|
+
)}
|
|
84
|
+
</table>
|
|
85
|
+
</div>
|
|
86
|
+
<div className='table-group-footer'>
|
|
85
87
|
{props.data.length && pagination ? (
|
|
86
88
|
<Pagination
|
|
87
89
|
className={"flex-1"}
|