@tsed/react-formio 3.0.0-rc.20 → 3.0.0-rc.22
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.
- package/dist/molecules/table/Table.js +33 -24
- package/dist/molecules/table/Table.js.map +1 -1
- package/dist/molecules/table/filters/Filters.d.ts +27 -0
- package/dist/molecules/table/filters/Filters.js +2 -0
- package/dist/molecules/table/filters/Filters.js.map +1 -0
- package/dist/molecules/table/hooks/useUniqValues.d.ts +1 -5
- package/dist/molecules/table/hooks/useUniqValues.js.map +1 -1
- package/dist/molecules/table/utils/mapFormToColumns.js.map +1 -1
- package/package.json +3 -3
- package/src/molecules/table/Table.tsx +6 -1
- package/src/molecules/table/filters/{Filters.d.ts → Filters.ts} +6 -4
- package/src/molecules/table/hooks/useUniqValues.tsx +1 -5
- package/src/molecules/table/utils/mapFormToColumns.tsx +1 -1
- package/dist/molecules/table/filters/Filters.d.js +0 -2
- package/dist/molecules/table/filters/Filters.d.js.map +0 -1
|
@@ -1,58 +1,67 @@
|
|
|
1
|
-
import { jsxs as l, jsx as
|
|
2
|
-
import { createElement as
|
|
1
|
+
import { jsxs as l, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { createElement as p } from "react";
|
|
3
3
|
import { flexRender as b } from "@tanstack/react-table";
|
|
4
4
|
import { c as x } from "../../chunks/index.js";
|
|
5
5
|
import { getComponent as r } from "../../registries/components.js";
|
|
6
6
|
import { useTable as f } from "./hooks/useTable.js";
|
|
7
|
-
function
|
|
8
|
-
className:
|
|
7
|
+
function w({
|
|
8
|
+
className: s,
|
|
9
9
|
enableFooter: g,
|
|
10
10
|
enablePagination: m = !0,
|
|
11
11
|
children: u,
|
|
12
12
|
...o
|
|
13
13
|
}) {
|
|
14
|
-
const { tableInstance:
|
|
15
|
-
return /* @__PURE__ */ l("div", { className: x("table-group",
|
|
16
|
-
/* @__PURE__ */
|
|
17
|
-
/* @__PURE__ */
|
|
18
|
-
const
|
|
19
|
-
return /* @__PURE__ */
|
|
14
|
+
const { tableInstance: a, i18n: d } = f(o), P = r("CellHeader"), C = r("CellFooter"), h = r("Pagination"), { pagination: i } = a.getState();
|
|
15
|
+
return /* @__PURE__ */ l("div", { className: x("table-group", s), children: [
|
|
16
|
+
/* @__PURE__ */ n("div", { className: "table-group-body", children: /* @__PURE__ */ l("table", { className: "table table-striped table-hover", children: [
|
|
17
|
+
/* @__PURE__ */ n("thead", { children: a.getHeaderGroups().map((t) => /* @__PURE__ */ n("tr", { children: t.headers.map((e) => {
|
|
18
|
+
const c = e.column.getIsSorted();
|
|
19
|
+
return /* @__PURE__ */ n(
|
|
20
20
|
"th",
|
|
21
21
|
{
|
|
22
22
|
"data-testid": `head-cell-${e.id}`,
|
|
23
|
-
"aria-sort":
|
|
24
|
-
children: e.isPlaceholder ? null : /* @__PURE__ */
|
|
23
|
+
"aria-sort": c ? c === "asc" ? "ascending" : "descending" : "none",
|
|
24
|
+
children: e.isPlaceholder ? null : /* @__PURE__ */ n(P, { header: e, i18n: d })
|
|
25
25
|
},
|
|
26
26
|
e.id
|
|
27
27
|
);
|
|
28
28
|
}) }, t.id)) }),
|
|
29
|
-
/* @__PURE__ */
|
|
30
|
-
|
|
29
|
+
/* @__PURE__ */ n("tbody", { children: a.getRowModel().rows.map((t) => /* @__PURE__ */ n("tr", { "data-testid": `body-row-${t.id}`, children: t.getVisibleCells().filter((e) => !e.column.columnDef.meta?.hidden).map((e) => /* @__PURE__ */ p(
|
|
30
|
+
"td",
|
|
31
|
+
{
|
|
32
|
+
onClick: () => o.onClick?.(e.row.original, { action: "row" }),
|
|
33
|
+
...e.column.columnDef?.meta?.cellProps,
|
|
34
|
+
key: e.id,
|
|
35
|
+
"data-testid": `body-cell-${e.id}`
|
|
36
|
+
},
|
|
37
|
+
b(e.column.columnDef.cell, e.getContext())
|
|
38
|
+
)) }, t.id)) }),
|
|
39
|
+
g && /* @__PURE__ */ n("tfoot", { children: a.getFooterGroups().map((t) => /* @__PURE__ */ n("tr", { children: t.headers.map((e) => /* @__PURE__ */ n("th", { children: e.isPlaceholder ? null : /* @__PURE__ */ n(C, { header: e, i18n: d }) }, e.id)) }, t.id)) })
|
|
31
40
|
] }) }),
|
|
32
41
|
/* @__PURE__ */ l("div", { className: "table-group-footer", children: [
|
|
33
|
-
o.data.length && i && m ? /* @__PURE__ */
|
|
42
|
+
o.data.length && i && m ? /* @__PURE__ */ n(
|
|
34
43
|
h,
|
|
35
44
|
{
|
|
36
45
|
className: "flex-1",
|
|
37
|
-
canNextPage:
|
|
38
|
-
canPreviousPage:
|
|
46
|
+
canNextPage: a.getCanNextPage(),
|
|
47
|
+
canPreviousPage: a.getCanPreviousPage(),
|
|
39
48
|
pageIndex: i.pageIndex,
|
|
40
49
|
pageSize: i.pageSize,
|
|
41
50
|
pageSizes: o.pageSizes,
|
|
42
51
|
i18n: o.i18n,
|
|
43
|
-
pageCount:
|
|
52
|
+
pageCount: a.getPageCount(),
|
|
44
53
|
rowCount: o.rowCount,
|
|
45
|
-
onPageIndexChange: (t) =>
|
|
46
|
-
onClickPreviousPage: () =>
|
|
47
|
-
onClickNextPage: () =>
|
|
48
|
-
onPageSizeChange: (t) =>
|
|
54
|
+
onPageIndexChange: (t) => a.setPageIndex(t),
|
|
55
|
+
onClickPreviousPage: () => a.previousPage(),
|
|
56
|
+
onClickNextPage: () => a.nextPage(),
|
|
57
|
+
onPageSizeChange: (t) => a.setPageSize(t)
|
|
49
58
|
}
|
|
50
59
|
) : null,
|
|
51
|
-
/* @__PURE__ */
|
|
60
|
+
/* @__PURE__ */ n("div", { children: u })
|
|
52
61
|
] })
|
|
53
62
|
] });
|
|
54
63
|
}
|
|
55
64
|
export {
|
|
56
|
-
|
|
65
|
+
w as Table
|
|
57
66
|
};
|
|
58
67
|
//# 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 enableFooter?: boolean;\n enablePagination?: boolean;\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}
|
|
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 enableFooter?: boolean;\n enablePagination?: boolean;\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\n onClick={() => props.onClick?.(cell.row.original, { action: \"row\" })}\n {...cell.column.columnDef?.meta?.cellProps}\n key={cell.id}\n data-testid={`body-cell-${cell.id}`}\n >\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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"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { RowData } from '@tanstack/react-table';
|
|
2
|
+
import { SelectOptionProps, SelectProps } from '../../forms/select/Select.interface';
|
|
3
|
+
import { FilterProps } from '../components/DefaultFilter';
|
|
4
|
+
export type FilterVariants = "text" | "range" | "select" | "boolean";
|
|
5
|
+
export interface FilterBaseOptions extends Record<string, unknown> {
|
|
6
|
+
variant: string;
|
|
7
|
+
}
|
|
8
|
+
export interface FilterTextOptions extends FilterBaseOptions {
|
|
9
|
+
variant: "text";
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
disableDatalist?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export interface FilterRangeOptions extends FilterBaseOptions {
|
|
14
|
+
variant: "range";
|
|
15
|
+
min?: number;
|
|
16
|
+
max?: number;
|
|
17
|
+
step?: number;
|
|
18
|
+
}
|
|
19
|
+
export interface FilterSelectOptions<Data extends RowData = any> extends FilterBaseOptions, Omit<SelectProps<string>, "options"> {
|
|
20
|
+
variant: "select";
|
|
21
|
+
options?: SelectOptionProps<string>[] | ((props: FilterProps<Data, FilterSelectOptions>) => SelectOptionProps<string>)[];
|
|
22
|
+
}
|
|
23
|
+
export interface FilterBooleanOptions extends FilterBaseOptions {
|
|
24
|
+
variant: "boolean";
|
|
25
|
+
options?: SelectOptionProps<string>[];
|
|
26
|
+
}
|
|
27
|
+
export type FilterOptions = FilterTextOptions | FilterRangeOptions | FilterSelectOptions | FilterBooleanOptions;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Filters.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
import { SelectOptionProps } from '../../../molecules/forms/select/Select.interface';
|
|
2
2
|
import { FilterProps } from '../components/DefaultFilter';
|
|
3
3
|
import { FilterSelectOptions } from '../filters/Filters';
|
|
4
|
-
|
|
5
|
-
options?: FilterSelectOptions;
|
|
6
|
-
};
|
|
7
|
-
export declare function useUniqValues<Data = any>({ header, options }: UseUniqValuesProps<Data>): SelectOptionProps[];
|
|
8
|
-
export {};
|
|
4
|
+
export declare function useUniqValues<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>): SelectOptionProps[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUniqValues.js","sources":["../../../../src/molecules/table/hooks/useUniqValues.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { SelectOptionProps } from \"../../../molecules/forms/select/Select.interface\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { FilterSelectOptions } from \"../filters/Filters\";\n\
|
|
1
|
+
{"version":3,"file":"useUniqValues.js","sources":["../../../../src/molecules/table/hooks/useUniqValues.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { SelectOptionProps } from \"../../../molecules/forms/select/Select.interface\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { FilterSelectOptions } from \"../filters/Filters\";\n\nexport function useUniqValues<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>): SelectOptionProps[] {\n return useMemo(() => {\n const providedOptions = options?.options;\n\n if (providedOptions) {\n if (typeof providedOptions === \"function\") {\n return providedOptions({ header, options: options as FilterSelectOptions });\n }\n\n return providedOptions;\n }\n\n switch (header.column.columnDef.meta?.filter?.variant) {\n case \"boolean\":\n return [\n { label: header.column.columnDef.meta?.labels?.[\"yes\"] || \"Yes\", value: \"true\" },\n {\n label: header.column.columnDef.meta?.labels?.[\"no\"] || header.column.columnDef.meta?.labels?.[\"No\"] || \"No\",\n value: \"false\"\n }\n ];\n\n default:\n return Array.from(header.column.getFacetedUniqueValues().keys())\n .flat()\n .filter((value) => value !== undefined && value !== null)\n .map((value) => String(value))\n .sort()\n .slice(0, 5000)\n .map((value) => ({\n label: value,\n value\n }));\n }\n }, [header, options]);\n}\n"],"names":["useUniqValues","header","options","useMemo","providedOptions","value"],"mappings":";AAMO,SAASA,EAA0B,EAAE,QAAAC,GAAQ,SAAAC,KAAwE;AAC1H,SAAOC,EAAQ,MAAM;AACnB,UAAMC,IAAkBF,GAAS;AAEjC,QAAIE;AACF,aAAI,OAAOA,KAAoB,aACtBA,EAAgB,EAAE,QAAAH,GAAQ,SAAAC,GAAyC,IAGrEE;AAGT,YAAQH,EAAO,OAAO,UAAU,MAAM,QAAQ,SAAA;AAAA,MAC5C,KAAK;AACH,eAAO;AAAA,UACL,EAAE,OAAOA,EAAO,OAAO,UAAU,MAAM,QAAS,OAAU,OAAO,OAAO,OAAA;AAAA,UACxE;AAAA,YACE,OAAOA,EAAO,OAAO,UAAU,MAAM,QAAS,MAASA,EAAO,OAAO,UAAU,MAAM,QAAS,MAAS;AAAA,YACvG,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,MAGJ;AACE,eAAO,MAAM,KAAKA,EAAO,OAAO,yBAAyB,KAAA,CAAM,EAC5D,OACA,OAAO,CAACI,MAAiCA,KAAU,IAAI,EACvD,IAAI,CAACA,MAAU,OAAOA,CAAK,CAAC,EAC5B,KAAA,EACA,MAAM,GAAG,GAAI,EACb,IAAI,CAACA,OAAW;AAAA,UACf,OAAOA;AAAA,UACP,OAAAA;AAAA,QAAA,EACA;AAAA,IAAA;AAAA,EAEV,GAAG,CAACJ,GAAQC,CAAO,CAAC;AACtB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mapFormToColumns.js","sources":["../../../../src/molecules/table/utils/mapFormToColumns.tsx"],"sourcesContent":["import \"../interfaces/extends\";\n\nimport { ColumnDef, ColumnDefResolved, createColumnHelper } from \"@tanstack/react-table\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport get from \"lodash/get\";\n\nimport type { ComponentType, FormType } from \"../../../interfaces\";\nimport { getComponent } from \"../../../registries/components\";\nimport type { DefaultCell } from \"../components/DefaultCell\";\nimport type { FilterVariants } from \"../filters/Filters
|
|
1
|
+
{"version":3,"file":"mapFormToColumns.js","sources":["../../../../src/molecules/table/utils/mapFormToColumns.tsx"],"sourcesContent":["import \"../interfaces/extends\";\n\nimport { ColumnDef, ColumnDefResolved, createColumnHelper } from \"@tanstack/react-table\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport get from \"lodash/get\";\n\nimport type { ComponentType, FormType } from \"../../../interfaces\";\nimport { getComponent } from \"../../../registries/components\";\nimport type { DefaultCell } from \"../components/DefaultCell\";\nimport type { FilterVariants } from \"../filters/Filters\";\n\nconst MAP_FILTER_TYPES: Record<string, FilterVariants> = {\n number: \"range\",\n currency: \"range\",\n checkbox: \"boolean\"\n} as const;\n\nconst MAP_TYPES = {\n date: \"date\",\n datetime: \"date\",\n number: \"number\",\n currency: \"currency\",\n checkbox: \"boolean\"\n} as const;\n\nfunction getColumnIdentity<Data>(column: ColumnDef<Data, any> | ColumnDefResolved<Data, any>) {\n if (\"id\" in column && typeof column.id === \"string\") {\n return column.id;\n }\n\n if (\"accessorKey\" in column && typeof column.accessorKey === \"string\") {\n return column.accessorKey;\n }\n\n return undefined;\n}\n\nexport function mapFormToColumns<Data = any>({\n form,\n columns = [],\n prefix = \"data.\"\n}: {\n form: FormType;\n columns?: ColumnDefResolved<Data, any>[];\n prefix?: string;\n}): ColumnDef<Data, any>[] {\n const columnHelper = createColumnHelper<Data>();\n const columnsToKeep = cloneDeep(columns);\n\n const columnsFromComponents = form.components\n .flatMap((component) => {\n if (component.type === \"tabs\") {\n return component.components?.flatMap((subComponent: ComponentType) => subComponent.components);\n }\n\n return [component];\n })\n .filter((component) => component?.tableView)\n .map((c) => {\n const component = c as ComponentType;\n const componentColumnKey = `${prefix}${component.key}`;\n const matchingKeys = new Set([component.key, componentColumnKey]);\n\n const columnIndex = columnsToKeep.findIndex((column) => {\n const identity = getColumnIdentity(column);\n\n return identity ? matchingKeys.has(identity) : false;\n });\n\n let column = columnsToKeep[columnIndex];\n\n if (column) {\n columnsToKeep.splice(columnIndex, 1);\n }\n\n return columnHelper.accessor(componentColumnKey as any, {\n header: (component.label || component.title || component.key)?.replace(/:/, \"\"),\n meta: {\n type: (MAP_TYPES[component.type as keyof typeof MAP_TYPES] || component.type) as any,\n filter: {\n ...column?.meta?.filter,\n variant: MAP_FILTER_TYPES[component.type as keyof typeof MAP_FILTER_TYPES] || \"text\"\n },\n ...(column?.meta || {})\n },\n ...(column || {})\n });\n });\n\n const dedupedColumns = [...columnsFromComponents, ...(columnsToKeep as any[])].reduce<ColumnDef<Data, any>[]>((acc, column) => {\n const identity = getColumnIdentity(column);\n\n if (identity && acc.some((existingColumn) => getColumnIdentity(existingColumn) === identity)) {\n return acc;\n }\n\n acc.push(column);\n return acc;\n }, []);\n\n const mergedColumns = dedupedColumns.map((column, index) => {\n const Cell = getComponent<typeof DefaultCell>([`Cell.${column.id}`, `Cell.${column.meta?.type}`, \"Cell\"]);\n\n return {\n ...column,\n meta: {\n ...column?.meta,\n order: get(column, \"meta.order\", index * 10)\n },\n cell: column.cell || Cell\n };\n });\n\n return mergedColumns.sort((a, b) => (a.meta.order > b.meta.order ? 1 : -1)) as ColumnDef<Data, any>[];\n}\n"],"names":["MAP_FILTER_TYPES","MAP_TYPES","getColumnIdentity","column","mapFormToColumns","form","columns","prefix","columnHelper","createColumnHelper","columnsToKeep","cloneDeep","component","subComponent","c","componentColumnKey","matchingKeys","columnIndex","identity","acc","existingColumn","index","Cell","getComponent","get","a","b"],"mappings":";;;;;;gCAWMA,IAAmD;AAAA,EACvD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ,GAEMC,IAAY;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,SAASC,EAAwBC,GAA6D;AAC5F,MAAI,QAAQA,KAAU,OAAOA,EAAO,MAAO;AACzC,WAAOA,EAAO;AAGhB,MAAI,iBAAiBA,KAAU,OAAOA,EAAO,eAAgB;AAC3D,WAAOA,EAAO;AAIlB;AAEO,SAASC,EAA6B;AAAA,EAC3C,MAAAC;AAAA,EACA,SAAAC,IAAU,CAAA;AAAA,EACV,QAAAC,IAAS;AACX,GAI2B;AACzB,QAAMC,IAAeC,EAAA,GACfC,IAAgBC,EAAUL,CAAO;AAkEvC,SAxBuB,CAAC,GAxCMD,EAAK,WAChC,QAAQ,CAACO,MACJA,EAAU,SAAS,SACdA,EAAU,YAAY,QAAQ,CAACC,MAAgCA,EAAa,UAAU,IAGxF,CAACD,CAAS,CAClB,EACA,OAAO,CAACA,MAAcA,GAAW,SAAS,EAC1C,IAAI,CAACE,MAAM;AACV,UAAMF,IAAYE,GACZC,IAAqB,GAAGR,CAAM,GAAGK,EAAU,GAAG,IAC9CI,IAAe,oBAAI,IAAI,CAACJ,EAAU,KAAKG,CAAkB,CAAC,GAE1DE,IAAcP,EAAc,UAAU,CAACP,MAAW;AACtD,YAAMe,IAAWhB,EAAkBC,CAAM;AAEzC,aAAOe,IAAWF,EAAa,IAAIE,CAAQ,IAAI;AAAA,IACjD,CAAC;AAED,QAAIf,IAASO,EAAcO,CAAW;AAEtC,WAAId,KACFO,EAAc,OAAOO,GAAa,CAAC,GAG9BT,EAAa,SAASO,GAA2B;AAAA,MACtD,SAASH,EAAU,SAASA,EAAU,SAASA,EAAU,MAAM,QAAQ,KAAK,EAAE;AAAA,MAC9E,MAAM;AAAA,QACJ,MAAOX,EAAUW,EAAU,IAA8B,KAAKA,EAAU;AAAA,QACxE,QAAQ;AAAA,UACN,GAAGT,GAAQ,MAAM;AAAA,UACjB,SAASH,EAAiBY,EAAU,IAAqC,KAAK;AAAA,QAAA;AAAA,QAEhF,GAAIT,GAAQ,QAAQ,CAAA;AAAA,MAAC;AAAA,MAEvB,GAAIA,KAAU,CAAA;AAAA,IAAC,CAChB;AAAA,EACH,CAAC,GAE+C,GAAIO,CAAuB,EAAE,OAA+B,CAACS,GAAKhB,MAAW;AAC7H,UAAMe,IAAWhB,EAAkBC,CAAM;AAEzC,WAAIe,KAAYC,EAAI,KAAK,CAACC,MAAmBlB,EAAkBkB,CAAc,MAAMF,CAAQ,KAI3FC,EAAI,KAAKhB,CAAM,GACRgB;AAAA,EACT,GAAG,CAAA,CAAE,EAEgC,IAAI,CAAChB,GAAQkB,MAAU;AAC1D,UAAMC,IAAOC,EAAiC,CAAC,QAAQpB,EAAO,EAAE,IAAI,QAAQA,EAAO,MAAM,IAAI,IAAI,MAAM,CAAC;AAExG,WAAO;AAAA,MACL,GAAGA;AAAA,MACH,MAAM;AAAA,QACJ,GAAGA,GAAQ;AAAA,QACX,OAAOqB,EAAIrB,GAAQ,cAAckB,IAAQ,EAAE;AAAA,MAAA;AAAA,MAE7C,MAAMlB,EAAO,QAAQmB;AAAA,IAAA;AAAA,EAEzB,CAAC,EAEoB,KAAK,CAACG,GAAGC,MAAOD,EAAE,KAAK,QAAQC,EAAE,KAAK,QAAQ,IAAI,EAAG;AAC5E;"}
|
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.22",
|
|
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.22",
|
|
48
|
+
"@tsed/typescript": "3.0.0-rc.22",
|
|
49
49
|
"microbundle": "0.13.0",
|
|
50
50
|
"vite": "7.1.5",
|
|
51
51
|
"vitest": "3.2.4"
|
|
@@ -60,7 +60,12 @@ export function Table<Data extends object = JSONRecord>({
|
|
|
60
60
|
.filter((cell) => !cell.column.columnDef.meta?.hidden)
|
|
61
61
|
.map((cell) => {
|
|
62
62
|
return (
|
|
63
|
-
<td
|
|
63
|
+
<td
|
|
64
|
+
onClick={() => props.onClick?.(cell.row.original, { action: "row" })}
|
|
65
|
+
{...cell.column.columnDef?.meta?.cellProps}
|
|
66
|
+
key={cell.id}
|
|
67
|
+
data-testid={`body-cell-${cell.id}`}
|
|
68
|
+
>
|
|
64
69
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
65
70
|
</td>
|
|
66
71
|
);
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type { RowData } from "@tanstack/react-table";
|
|
2
|
+
|
|
3
|
+
import type { SelectOptionProps, SelectProps } from "../../forms/select/Select.interface";
|
|
4
|
+
import type { FilterProps } from "../components/DefaultFilter";
|
|
3
5
|
|
|
4
6
|
export type FilterVariants = "text" | "range" | "select" | "boolean";
|
|
5
7
|
|
|
@@ -20,9 +22,9 @@ export interface FilterRangeOptions extends FilterBaseOptions {
|
|
|
20
22
|
step?: number;
|
|
21
23
|
}
|
|
22
24
|
|
|
23
|
-
export interface FilterSelectOptions extends FilterBaseOptions, SelectProps<string> {
|
|
25
|
+
export interface FilterSelectOptions<Data extends RowData = any> extends FilterBaseOptions, Omit<SelectProps<string>, "options"> {
|
|
24
26
|
variant: "select";
|
|
25
|
-
options?: SelectOptionProps<string>[] | ((props: FilterProps<
|
|
27
|
+
options?: SelectOptionProps<string>[] | ((props: FilterProps<Data, FilterSelectOptions>) => SelectOptionProps<string>)[];
|
|
26
28
|
}
|
|
27
29
|
|
|
28
30
|
export interface FilterBooleanOptions extends FilterBaseOptions {
|
|
@@ -4,11 +4,7 @@ import { SelectOptionProps } from "../../../molecules/forms/select/Select.interf
|
|
|
4
4
|
import type { FilterProps } from "../components/DefaultFilter";
|
|
5
5
|
import { FilterSelectOptions } from "../filters/Filters";
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
options?: FilterSelectOptions;
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export function useUniqValues<Data = any>({ header, options }: UseUniqValuesProps<Data>): SelectOptionProps[] {
|
|
7
|
+
export function useUniqValues<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>): SelectOptionProps[] {
|
|
12
8
|
return useMemo(() => {
|
|
13
9
|
const providedOptions = options?.options;
|
|
14
10
|
|
|
@@ -7,7 +7,7 @@ import get from "lodash/get";
|
|
|
7
7
|
import type { ComponentType, FormType } from "../../../interfaces";
|
|
8
8
|
import { getComponent } from "../../../registries/components";
|
|
9
9
|
import type { DefaultCell } from "../components/DefaultCell";
|
|
10
|
-
import type { FilterVariants } from "../filters/Filters
|
|
10
|
+
import type { FilterVariants } from "../filters/Filters";
|
|
11
11
|
|
|
12
12
|
const MAP_FILTER_TYPES: Record<string, FilterVariants> = {
|
|
13
13
|
number: "range",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Filters.d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|