@tsed/react-formio 3.0.0-rc.21 → 3.0.0-rc.23
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/chunks/_baseClone.js +1 -0
- package/dist/chunks/choices.js +2984 -0
- package/dist/chunks/choices.js.map +1 -0
- package/dist/chunks/index2.js +21101 -18657
- package/dist/chunks/index2.js.map +1 -1
- package/dist/hooks/useI18n.d.ts +1 -1
- package/dist/molecules/forms/input-tags/components/ChoicesTags.d.ts +1 -1
- package/dist/molecules/forms/input-tags/components/ChoicesTags.js +1 -1
- package/dist/molecules/forms/input-tags/components/ChoicesTags.js.map +1 -1
- package/dist/molecules/forms/select/components/ChoicesSelect.d.ts +1 -1
- package/dist/molecules/forms/select/components/ChoicesSelect.js +7 -7
- package/dist/molecules/forms/select/components/ChoicesSelect.js.map +1 -1
- package/dist/molecules/table/Table.js +33 -24
- package/dist/molecules/table/Table.js.map +1 -1
- package/dist/molecules/table/hooks/useTable.d.ts +1 -1
- package/package.json +3 -3
- package/src/molecules/forms/input-tags/components/ChoicesTags.tsx +1 -1
- package/src/molecules/forms/select/components/ChoicesSelect.tsx +1 -1
- package/src/molecules/table/Table.tsx +6 -1
package/dist/hooks/useI18n.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as h } from "react/jsx-runtime";
|
|
2
|
-
import g from "
|
|
2
|
+
import { C as g } from "../../../../chunks/choices.js";
|
|
3
3
|
import { useRef as i, useEffect as C } from "react";
|
|
4
4
|
import { c as a } from "../../../../chunks/index.module.js";
|
|
5
5
|
import { registerComponent as I } from "../../../../registries/components.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChoicesTags.js","sources":["../../../../../src/molecules/forms/input-tags/components/ChoicesTags.tsx"],"sourcesContent":["import Choices from \"
|
|
1
|
+
{"version":3,"file":"ChoicesTags.js","sources":["../../../../../src/molecules/forms/input-tags/components/ChoicesTags.tsx"],"sourcesContent":["import Choices from \"choices.js\";\nimport { useEffect, useRef } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\n\nimport { registerComponent } from \"../../../../registries/components\";\nimport { cleanFormControlProps } from \"../../form-control/FormControl\";\nimport type { InputTagsProps } from \"../InputTags.interface\";\n\nexport function useChoiceTags<Data = string>(props: InputTagsProps<Data>) {\n const { value, onChange, name = \"\", delimiter, customProperties, ...otherProps } = props;\n const ref = useRef<HTMLInputElement | null>(null);\n const instanceRef = useRef<Choices | null>(null);\n\n const onAdd = useDebouncedCallback((add: Data) => {\n const values = ((value || []) as Data[]).concat(add);\n\n onChange?.(name, [...values]);\n }, 100);\n\n const onDelete = useDebouncedCallback((remove: Data) => {\n const values = (value || []).filter((v) => v !== remove);\n\n onChange?.(name, [...values]);\n });\n\n useEffect(() => {\n if (ref.current) {\n const instance = new Choices(ref.current!, {\n duplicateItemsAllowed: false,\n ...customProperties,\n delimiter,\n editItems: true,\n removeItemButton: true\n });\n\n instance.setValue((value || []) as string[]);\n\n instanceRef.current = instance;\n\n instance.passedElement.element.addEventListener(\"addItem\", (event) => {\n onAdd((event.target as any).value as Data);\n });\n\n instance.passedElement.element.addEventListener(\"removeItem\", (event) => {\n onDelete((event.target as any).value as Data);\n });\n }\n\n return () => {\n if (instanceRef.current) {\n instanceRef.current.destroy();\n }\n };\n }, [delimiter]);\n\n return {\n otherProps: {\n ...otherProps,\n name\n },\n ref,\n instanceRef\n };\n}\n\nexport function ChoicesTags<Data = string>(props: InputTagsProps<Data>) {\n const { ref, otherProps } = useChoiceTags<Data>(props);\n\n return <input type='text' {...cleanFormControlProps(otherProps)} ref={ref} />;\n}\n\nregisterComponent(\"InputTags.choicesjs\", ChoicesTags);\n"],"names":["useChoiceTags","props","value","onChange","name","delimiter","customProperties","otherProps","ref","useRef","instanceRef","onAdd","useDebouncedCallback","add","values","onDelete","remove","useEffect","instance","Choices","event","ChoicesTags","jsx","cleanFormControlProps","registerComponent"],"mappings":";;;;;;AAQO,SAASA,EAA6BC,GAA6B;AACxE,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,MAAAC,IAAO,IAAI,WAAAC,GAAW,kBAAAC,GAAkB,GAAGC,EAAA,IAAeN,GAC7EO,IAAMC,EAAgC,IAAI,GAC1CC,IAAcD,EAAuB,IAAI,GAEzCE,IAAQC,EAAqB,CAACC,MAAc;AAChD,UAAMC,KAAWZ,KAAS,CAAA,GAAe,OAAOW,CAAG;AAEnD,IAAAV,IAAWC,GAAM,CAAC,GAAGU,CAAM,CAAC;AAAA,EAC9B,GAAG,GAAG,GAEAC,IAAWH,EAAqB,CAACI,MAAiB;AACtD,UAAMF,KAAUZ,KAAS,CAAA,GAAI,OAAO,CAAC,MAAM,MAAMc,CAAM;AAEvD,IAAAb,IAAWC,GAAM,CAAC,GAAGU,CAAM,CAAC;AAAA,EAC9B,CAAC;AAED,SAAAG,EAAU,MAAM;AACd,QAAIT,EAAI,SAAS;AACf,YAAMU,IAAW,IAAIC,EAAQX,EAAI,SAAU;AAAA,QACzC,uBAAuB;AAAA,QACvB,GAAGF;AAAA,QACH,WAAAD;AAAA,QACA,WAAW;AAAA,QACX,kBAAkB;AAAA,MAAA,CACnB;AAED,MAAAa,EAAS,SAAUhB,KAAS,EAAe,GAE3CQ,EAAY,UAAUQ,GAEtBA,EAAS,cAAc,QAAQ,iBAAiB,WAAW,CAACE,MAAU;AACpE,QAAAT,EAAOS,EAAM,OAAe,KAAa;AAAA,MAC3C,CAAC,GAEDF,EAAS,cAAc,QAAQ,iBAAiB,cAAc,CAACE,MAAU;AACvE,QAAAL,EAAUK,EAAM,OAAe,KAAa;AAAA,MAC9C,CAAC;AAAA,IACH;AAEA,WAAO,MAAM;AACX,MAAIV,EAAY,WACdA,EAAY,QAAQ,QAAA;AAAA,IAExB;AAAA,EACF,GAAG,CAACL,CAAS,CAAC,GAEP;AAAA,IACL,YAAY;AAAA,MACV,GAAGE;AAAA,MACH,MAAAH;AAAA,IAAA;AAAA,IAEF,KAAAI;AAAA,IACA,aAAAE;AAAA,EAAA;AAEJ;AAEO,SAASW,EAA2BpB,GAA6B;AACtE,QAAM,EAAE,KAAAO,GAAK,YAAAD,MAAeP,EAAoBC,CAAK;AAErD,SAAO,gBAAAqB,EAAC,WAAM,MAAK,QAAQ,GAAGC,EAAsBhB,CAAU,GAAG,KAAAC,GAAU;AAC7E;AAEAgB,EAAkB,uBAAuBH,CAAW;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { default as Choices } from '
|
|
1
|
+
import { default as Choices } from 'choices.js';
|
|
2
2
|
import { AllSelectProps } from '../Select.interface';
|
|
3
3
|
export declare function useChoices({ name, disabled, multiple, options, placeholder, searchEnabled, customProperties, size, value, required, onChange }: AllSelectProps): {
|
|
4
4
|
ref: import('react').MutableRefObject<any>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as T } from "react/jsx-runtime";
|
|
2
|
-
import w from "
|
|
2
|
+
import { C as w } from "../../../../chunks/choices.js";
|
|
3
3
|
import { c as z } from "../../../../chunks/index.js";
|
|
4
4
|
import { useRef as E, useMemo as M, useEffect as b } from "react";
|
|
5
5
|
import { c as g } from "../../../../chunks/index.module.js";
|
|
@@ -17,9 +17,9 @@ function H({
|
|
|
17
17
|
size: I,
|
|
18
18
|
value: a,
|
|
19
19
|
required: h,
|
|
20
|
-
onChange:
|
|
20
|
+
onChange: C
|
|
21
21
|
}) {
|
|
22
|
-
const
|
|
22
|
+
const S = E(), t = E(), m = M(() => {
|
|
23
23
|
const o = (e) => [].concat(a).includes(e), n = f.map((e) => (e.options && (e = {
|
|
24
24
|
...e,
|
|
25
25
|
choices: e.options.map((s) => ({
|
|
@@ -39,14 +39,14 @@ function H({
|
|
|
39
39
|
...n
|
|
40
40
|
] : n;
|
|
41
41
|
}, [f, a, h, c, l]), u = g((o, n) => {
|
|
42
|
-
|
|
42
|
+
C?.(o, n);
|
|
43
43
|
}, 50);
|
|
44
44
|
return b(() => {
|
|
45
45
|
t.current && (c && t.current.clearStore(), t.current.setChoices(m, "value", "label", !0));
|
|
46
46
|
}, [m]), b(() => {
|
|
47
47
|
if (!t.current) {
|
|
48
48
|
const { allowHTML: e = !0, silent: s = !0, removeItemButton: p = !0, shouldSort: L = !1, itemSelectText: x = "" } = v;
|
|
49
|
-
t.current = new w(
|
|
49
|
+
t.current = new w(S.current, {
|
|
50
50
|
...v,
|
|
51
51
|
allowHTML: e,
|
|
52
52
|
silent: s,
|
|
@@ -72,8 +72,8 @@ function H({
|
|
|
72
72
|
return t.current?.passedElement.element.addEventListener("addItem", o), t.current?.passedElement.element.addEventListener("removeItem", n), () => {
|
|
73
73
|
t.current?.passedElement.element.removeEventListener("addItem", o), t.current?.passedElement.element.removeEventListener("removeItem", n);
|
|
74
74
|
};
|
|
75
|
-
}, [i,
|
|
76
|
-
ref:
|
|
75
|
+
}, [i, C, m, l, d, I, a]), {
|
|
76
|
+
ref: S,
|
|
77
77
|
choicesRef: t
|
|
78
78
|
};
|
|
79
79
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChoicesSelect.js","sources":["../../../../../src/molecules/forms/select/components/ChoicesSelect.tsx"],"sourcesContent":["import Choices from \"
|
|
1
|
+
{"version":3,"file":"ChoicesSelect.js","sources":["../../../../../src/molecules/forms/select/components/ChoicesSelect.tsx"],"sourcesContent":["import Choices from \"choices.js\";\nimport cx from \"classnames\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\n\nimport { registerComponent } from \"../../../../registries/components\";\nimport { cleanFormControlProps } from \"../../form-control/FormControl\";\nimport type { AllSelectProps } from \"../Select.interface\";\nimport { callbackOnCreateTemplates } from \"./choices.template\";\n\nexport function useChoices({\n name,\n disabled,\n multiple,\n options,\n placeholder,\n searchEnabled = true,\n customProperties = {},\n size,\n value,\n required,\n onChange\n}: AllSelectProps) {\n const ref = useRef<any>();\n const choicesRef = useRef<Choices>();\n\n const opts = useMemo(() => {\n const isSelected = (itemValue: any) => [].concat(value as any).includes(itemValue as never);\n\n const opts = options.map((item) => {\n if (item.options) {\n item = {\n ...item,\n choices: item.options.map((item: any) => ({\n ...item,\n selected: isSelected(item.value)\n }))\n };\n }\n\n return {\n ...item,\n selected: isSelected(item.value)\n };\n });\n\n if (!multiple && placeholder) {\n return [\n {\n disabled: required,\n label: placeholder,\n value: \"\"\n },\n ...opts\n ];\n }\n\n return opts;\n }, [options, value, required, multiple, placeholder]);\n\n const onChangeCallback = useDebouncedCallback((name: string | undefined, value: any) => {\n onChange?.(name, value);\n }, 50);\n\n useEffect(() => {\n if (choicesRef.current) {\n if (multiple) {\n choicesRef.current.clearStore();\n choicesRef.current.setChoices(opts as any, \"value\", \"label\", true);\n } else {\n choicesRef.current.setChoices(opts as any, \"value\", \"label\", true);\n }\n }\n }, [opts]);\n\n useEffect(() => {\n if (!choicesRef.current) {\n const { allowHTML = true, silent = true, removeItemButton = true, shouldSort = false, itemSelectText = \"\" } = customProperties;\n choicesRef.current = new Choices(ref.current, {\n ...customProperties,\n allowHTML,\n silent,\n searchEnabled,\n removeItemButton,\n choices: opts,\n placeholder: placeholder as string,\n placeholderValue: \"\" as string,\n itemSelectText,\n shouldSort,\n callbackOnCreateTemplates\n } as any);\n }\n\n if (disabled) {\n choicesRef.current?.disable();\n } else {\n choicesRef.current?.enable();\n }\n\n const addItem = ({ detail: { value: newValue } }: any) => {\n onChangeCallback(name, multiple ? [...new Set([...new Set(value as string[]), newValue])] : newValue);\n };\n\n const removeItem = ({ detail: { value: newValue } }: any) => {\n if (multiple) {\n onChangeCallback(\n name,\n (value as string[]).filter((v) => v !== newValue)\n );\n } else {\n onChangeCallback(name, undefined as any);\n }\n };\n\n choicesRef.current?.passedElement.element.addEventListener(\"addItem\", addItem);\n choicesRef.current?.passedElement.element.addEventListener(\"removeItem\", removeItem);\n\n return () => {\n choicesRef.current?.passedElement.element.removeEventListener(\"addItem\", addItem);\n choicesRef.current?.passedElement.element.removeEventListener(\"removeItem\", removeItem);\n };\n }, [disabled, onChange, opts, placeholder, searchEnabled, size, value]);\n\n return {\n ref,\n choicesRef\n };\n}\n\nexport function ChoiceSelect(props: AllSelectProps) {\n const { ref } = useChoices({\n ...props,\n searchEnabled: !props.disableSearch\n });\n\n return (\n <select\n ref={ref}\n data-testid={`select_${props.name}`}\n {...cleanFormControlProps(props as any, [\n \"className\",\n \"size\",\n \"value\",\n \"options\",\n \"placeholder\",\n \"onChange\",\n \"allowHTML\",\n \"silent\",\n \"removeItemButton\",\n \"shouldSort\",\n \"itemSelectText\",\n \"customProperties\"\n ])}\n className={cx(\"form-control\", props.size && `form-control-${props.size}`)}\n />\n );\n}\n\nregisterComponent(\"Select.choicesjs\", ChoiceSelect);\n"],"names":["useChoices","name","disabled","multiple","options","placeholder","searchEnabled","customProperties","size","value","required","onChange","ref","useRef","choicesRef","opts","useMemo","isSelected","itemValue","item","onChangeCallback","useDebouncedCallback","useEffect","allowHTML","silent","removeItemButton","shouldSort","itemSelectText","Choices","callbackOnCreateTemplates","addItem","newValue","removeItem","v","ChoiceSelect","props","jsx","cleanFormControlProps","cx","registerComponent"],"mappings":"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"}
|
|
@@ -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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"}
|
|
@@ -11,6 +11,6 @@ export interface UseTableProps<Data extends object = JSONRecord> extends Omit<Ta
|
|
|
11
11
|
pageSizes?: number[];
|
|
12
12
|
}
|
|
13
13
|
export declare function useTable<Data extends object = JSONRecord>(props: UseTableProps<Data>): {
|
|
14
|
-
i18n: (key: string, defaultValue?: string) =>
|
|
14
|
+
i18n: (key: string, defaultValue?: string) => any;
|
|
15
15
|
tableInstance: import('@tanstack/table-core').Table<Data>;
|
|
16
16
|
};
|
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.23",
|
|
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.23",
|
|
48
|
+
"@tsed/typescript": "3.0.0-rc.23",
|
|
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
|
);
|