@tsed/react-formio 3.0.0-rc.13 → 3.0.0-rc.15
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/all.js +2 -0
- package/dist/all.js.map +1 -1
- package/dist/chunks/index2.js +19748 -22277
- package/dist/chunks/index2.js.map +1 -1
- package/dist/chunks/moment.js +2535 -0
- package/dist/chunks/moment.js.map +1 -0
- package/dist/molecules/forms/select/Select.interface.d.ts +0 -4
- package/dist/molecules/table/all.js +2 -0
- package/dist/molecules/table/all.js.map +1 -1
- package/dist/molecules/table/components/DefaultBooleanCell.d.ts +2 -0
- package/dist/molecules/table/components/DefaultBooleanCell.js +12 -0
- package/dist/molecules/table/components/DefaultBooleanCell.js.map +1 -0
- package/dist/molecules/table/components/DefaultCell.js +7 -7
- package/dist/molecules/table/components/DefaultCell.js.map +1 -1
- package/dist/molecules/table/components/DefaultDateCell.d.ts +2 -0
- package/dist/molecules/table/components/DefaultDateCell.js +16 -0
- package/dist/molecules/table/components/DefaultDateCell.js.map +1 -0
- package/dist/molecules/table/components/DefaultFilter.d.ts +5 -7
- package/dist/molecules/table/components/DefaultFilter.js +8 -8
- package/dist/molecules/table/components/DefaultFilter.js.map +1 -1
- package/dist/molecules/table/interfaces/extends.d.ts +3 -0
- package/dist/molecules/table/utils/mapFormToColumns.d.ts +5 -1
- package/dist/molecules/table/utils/mapFormToColumns.js +54 -26
- package/dist/molecules/table/utils/mapFormToColumns.js.map +1 -1
- package/dist/organisms/table/forms/components/FormsCell.js +1 -1
- package/dist/organisms/table/submissions/SubmissionsTable.js +1 -1
- package/dist/organisms/table/submissions/SubmissionsTable.js.map +1 -1
- package/package.json +3 -3
- package/src/all.ts +2 -0
- package/src/molecules/forms/select/Select.interface.ts +0 -4
- package/src/molecules/table/Table.stories.tsx +72 -66
- package/src/molecules/table/all.ts +2 -0
- package/src/molecules/table/components/DefaultBooleanCell.spec.tsx +42 -0
- package/src/molecules/table/components/DefaultBooleanCell.tsx +11 -0
- package/src/molecules/table/components/DefaultCell.tsx +1 -1
- package/src/molecules/table/components/DefaultDateCell.spec.tsx +43 -0
- package/src/molecules/table/components/DefaultDateCell.tsx +23 -0
- package/src/molecules/table/components/DefaultFilter.tsx +10 -7
- package/src/molecules/table/filters/Filters.d.ts +1 -0
- package/src/molecules/table/interfaces/extends.ts +3 -0
- package/src/molecules/table/utils/mapFormToColumns.spec.tsx +85 -4
- package/src/molecules/table/utils/mapFormToColumns.tsx +66 -18
- package/src/organisms/table/submissions/SubmissionsTable.tsx +1 -1
|
@@ -24,10 +24,6 @@ export interface SelectProps<Data = string> extends FormControlProps<Data, Selec
|
|
|
24
24
|
searchEnabled?: boolean;
|
|
25
25
|
customProperties?: Record<string, any>;
|
|
26
26
|
options: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
|
|
27
|
-
/**
|
|
28
|
-
* @deprecated
|
|
29
|
-
*/
|
|
30
|
-
choices?: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
|
|
31
27
|
}
|
|
32
28
|
export interface SelectSingle<Data = string> extends SelectProps<Data> {
|
|
33
29
|
multiple?: false | undefined;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import "./components/DefaultFilter.js";
|
|
2
2
|
import "./components/DefaultArrowSort.js";
|
|
3
3
|
import "./components/DefaultCell.js";
|
|
4
|
+
import "./components/DefaultBooleanCell.js";
|
|
5
|
+
import "./components/DefaultDateCell.js";
|
|
4
6
|
import "./components/DefaultCellOperations.js";
|
|
5
7
|
import "./components/DefaultOperationButton.js";
|
|
6
8
|
import "./components/DefaultCellHeader.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"all.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"all.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { registerComponent as o } from "../../../registries/components.js";
|
|
3
|
+
function l({ getValue: t, column: { columnDef: e } }) {
|
|
4
|
+
const n = t();
|
|
5
|
+
return /* @__PURE__ */ r("span", { children: String(n ? e.meta?.labels?.yes || "Yes" : e.meta?.labels?.No || "No") });
|
|
6
|
+
}
|
|
7
|
+
o("Cell.boolean", l);
|
|
8
|
+
o("Cell.checkbox", l);
|
|
9
|
+
export {
|
|
10
|
+
l as DefaultCellBoolean
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=DefaultBooleanCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DefaultBooleanCell.js","sources":["../../../../src/molecules/table/components/DefaultBooleanCell.tsx"],"sourcesContent":["import { CellContext } from \"@tanstack/react-table\";\n\nimport { registerComponent } from \"../../../registries/components\";\n\nexport function DefaultCellBoolean<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, boolean>) {\n const value = getValue();\n return <span>{String(value ? columnDef.meta?.labels?.[\"yes\"] || \"Yes\" : columnDef.meta?.labels?.[\"No\"] || \"No\")}</span>;\n}\n\nregisterComponent(\"Cell.boolean\", DefaultCellBoolean);\nregisterComponent(\"Cell.checkbox\", DefaultCellBoolean);\n"],"names":["DefaultCellBoolean","getValue","columnDef","value","registerComponent"],"mappings":";;AAIO,SAASA,EAAwC,EAAE,UAAAC,GAAU,QAAQ,EAAE,WAAAC,EAAA,KAA2C;AACvH,QAAMC,IAAQF,EAAA;AACd,2BAAQ,QAAA,EAAM,UAAA,OAAOE,IAAQD,EAAU,MAAM,QAAS,OAAU,QAAQA,EAAU,MAAM,QAAS,MAAS,IAAI,GAAE;AAClH;AAEAE,EAAkB,gBAAgBJ,CAAkB;AACpDI,EAAkB,iBAAiBJ,CAAkB;"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { registerComponent as t } from "../../../registries/components.js";
|
|
3
|
-
function l({ getValue:
|
|
4
|
-
const e = o();
|
|
5
|
-
if (e === void 0)
|
|
6
|
-
return /* @__PURE__ */ n("span", {});
|
|
3
|
+
function l({ getValue: i, renderValue: o }) {
|
|
7
4
|
const r = i();
|
|
8
|
-
|
|
5
|
+
if (r === void 0)
|
|
6
|
+
return /* @__PURE__ */ e("span", {});
|
|
7
|
+
const n = o();
|
|
8
|
+
return n != null && r !== n ? /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: String(n) } }) : /* @__PURE__ */ e("span", { children: String(r) });
|
|
9
9
|
}
|
|
10
10
|
t("Cell", l);
|
|
11
|
-
t("Cell.
|
|
11
|
+
t("Cell.string", l);
|
|
12
12
|
export {
|
|
13
13
|
l as DefaultCell
|
|
14
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultCell.js","sources":["../../../../src/molecules/table/components/DefaultCell.tsx"],"sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\n\nimport { registerComponent } from \"../../../registries/components\";\n\nexport function DefaultCell<Data = any>({ getValue, renderValue }: CellContext<Data, any>): JSX.Element {\n const value = getValue();\n if (value === undefined) {\n return <span></span>;\n }\n\n const rendered = renderValue();\n\n if (rendered != null && value !== rendered) {\n return <div dangerouslySetInnerHTML={{ __html: String(rendered) }} />;\n }\n\n return <span>{String(value)}</span>;\n}\n\nregisterComponent(\"Cell\", DefaultCell);\nregisterComponent(\"Cell.
|
|
1
|
+
{"version":3,"file":"DefaultCell.js","sources":["../../../../src/molecules/table/components/DefaultCell.tsx"],"sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\n\nimport { registerComponent } from \"../../../registries/components\";\n\nexport function DefaultCell<Data = any>({ getValue, renderValue }: CellContext<Data, any>): JSX.Element {\n const value = getValue();\n if (value === undefined) {\n return <span></span>;\n }\n\n const rendered = renderValue();\n\n if (rendered != null && value !== rendered) {\n return <div dangerouslySetInnerHTML={{ __html: String(rendered) }} />;\n }\n\n return <span>{String(value)}</span>;\n}\n\nregisterComponent(\"Cell\", DefaultCell);\nregisterComponent(\"Cell.string\", DefaultCell);\n"],"names":["DefaultCell","getValue","renderValue","value","rendered","jsx","registerComponent"],"mappings":";;AAIO,SAASA,EAAwB,EAAE,UAAAC,GAAU,aAAAC,KAAoD;AACtG,QAAMC,IAAQF,EAAA;AACd,MAAIE,MAAU;AACZ,6BAAQ,QAAA,EAAK;AAGf,QAAMC,IAAWF,EAAA;AAEjB,SAAIE,KAAY,QAAQD,MAAUC,IACzB,gBAAAC,EAAC,SAAI,yBAAyB,EAAE,QAAQ,OAAOD,CAAQ,KAAK,IAG9D,gBAAAC,EAAC,QAAA,EAAM,UAAA,OAAOF,CAAK,GAAE;AAC9B;AAEAG,EAAkB,QAAQN,CAAW;AACrCM,EAAkB,eAAeN,CAAW;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { h as o } from "../../../chunks/moment.js";
|
|
3
|
+
import { registerComponent as n } from "../../../registries/components.js";
|
|
4
|
+
function a({ getValue: i, column: { columnDef: l } }) {
|
|
5
|
+
const e = i();
|
|
6
|
+
if (!e)
|
|
7
|
+
return /* @__PURE__ */ t("span", {});
|
|
8
|
+
const r = o.parseZone(e, o.ISO_8601, !0);
|
|
9
|
+
return r.isValid() ? /* @__PURE__ */ t("span", { children: r.format(l.meta?.format || "L") }) : /* @__PURE__ */ t("span", { children: String(e) });
|
|
10
|
+
}
|
|
11
|
+
n("Cell.date", a);
|
|
12
|
+
n("Cell.datetime", a);
|
|
13
|
+
export {
|
|
14
|
+
a as DefaultDateCell
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=DefaultDateCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DefaultDateCell.js","sources":["../../../../src/molecules/table/components/DefaultDateCell.tsx"],"sourcesContent":["import { CellContext } from \"@tanstack/react-table\";\nimport moment from \"moment\";\n\nimport { registerComponent } from \"../../../registries/components\";\n\nexport function DefaultDateCell<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, string>) {\n const value = getValue();\n\n if (!value) {\n return <span />;\n }\n\n const date = moment.parseZone(value, moment.ISO_8601, true);\n\n if (!date.isValid()) {\n return <span>{String(value)}</span>;\n }\n\n return <span>{date.format(columnDef.meta?.format || \"L\")}</span>;\n}\n\nregisterComponent(\"Cell.date\", DefaultDateCell);\nregisterComponent(\"Cell.datetime\", DefaultDateCell);\n"],"names":["DefaultDateCell","getValue","columnDef","value","date","moment","jsx","registerComponent"],"mappings":";;;AAKO,SAASA,EAAqC,EAAE,UAAAC,GAAU,QAAQ,EAAE,WAAAC,EAAA,KAA0C;AACnH,QAAMC,IAAQF,EAAA;AAEd,MAAI,CAACE;AACH,6BAAQ,QAAA,EAAK;AAGf,QAAMC,IAAOC,EAAO,UAAUF,GAAOE,EAAO,UAAU,EAAI;AAE1D,SAAKD,EAAK,YAIH,gBAAAE,EAAC,UAAM,UAAAF,EAAK,OAAOF,EAAU,MAAM,UAAU,GAAG,EAAA,CAAE,IAHhD,gBAAAI,EAAC,QAAA,EAAM,UAAA,OAAOH,CAAK,GAAE;AAIhC;AAEAI,EAAkB,aAAaP,CAAe;AAC9CO,EAAkB,iBAAiBP,CAAe;"}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
import { Header } from '@tanstack/react-table';
|
|
2
|
-
export interface DefaultFilterProps<Data = any> {
|
|
3
|
-
header: Header<Data,
|
|
1
|
+
import { Header, RowData } from '@tanstack/react-table';
|
|
2
|
+
export interface DefaultFilterProps<Data extends RowData = any, TValue = unknown> {
|
|
3
|
+
header: Header<Data, TValue>;
|
|
4
4
|
i18n?: (f: string) => string;
|
|
5
5
|
}
|
|
6
|
-
export interface FilterProps<Data = any, Opts = Record<string, unknown>> {
|
|
7
|
-
header: Header<Data, unknown>;
|
|
6
|
+
export interface FilterProps<Data extends RowData = any, Opts = Record<string, unknown>> extends DefaultFilterProps<Data> {
|
|
8
7
|
options: Opts;
|
|
9
|
-
i18n?: (f: string) => string;
|
|
10
8
|
}
|
|
11
|
-
export declare function DefaultFilter<Data = any
|
|
9
|
+
export declare function DefaultFilter<Data extends RowData = any, TValue = unknown>(props: DefaultFilterProps<Data, TValue>): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
-
import { registerComponent as
|
|
3
|
-
function
|
|
4
|
-
const {
|
|
5
|
-
filter:
|
|
2
|
+
import { registerComponent as a, getComponent as c } from "../../../registries/components.js";
|
|
3
|
+
function s(n) {
|
|
4
|
+
const { header: t, i18n: o } = n, {
|
|
5
|
+
filter: e = {
|
|
6
6
|
variant: "text"
|
|
7
7
|
}
|
|
8
|
-
} = t.column.columnDef.meta || {}, { variant:
|
|
9
|
-
return e ? /* @__PURE__ */ l("div", { className: "table-cell-header__filter", children: /* @__PURE__ */ l(
|
|
8
|
+
} = t.column.columnDef.meta || {}, { variant: r } = e, i = c([`Filter.${t.column.id}`, `Filter.${r}`, "Filter.text"]);
|
|
9
|
+
return i ? e.disabled ? null : /* @__PURE__ */ l("div", { className: "table-cell-header__filter", children: /* @__PURE__ */ l(i, { header: t, options: e, i18n: o }) }) : (console.warn("Missing filter for `Filter." + t.column.id + "` or `Filter." + r + "`"), null);
|
|
10
10
|
}
|
|
11
|
-
|
|
11
|
+
a("Filter", s);
|
|
12
12
|
export {
|
|
13
|
-
|
|
13
|
+
s as DefaultFilter
|
|
14
14
|
};
|
|
15
15
|
//# sourceMappingURL=DefaultFilter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultFilter.js","sources":["../../../../src/molecules/table/components/DefaultFilter.tsx"],"sourcesContent":["import \"../interfaces/extends\";\n\nimport { Header } from \"@tanstack/react-table\";\nimport type { ComponentType } from \"react\";\n\nimport { getComponent, registerComponent } from \"../../../registries/components\";\n\nexport interface DefaultFilterProps<Data = any> {\n header: Header<Data,
|
|
1
|
+
{"version":3,"file":"DefaultFilter.js","sources":["../../../../src/molecules/table/components/DefaultFilter.tsx"],"sourcesContent":["import \"../interfaces/extends\";\n\nimport { Header, RowData } from \"@tanstack/react-table\";\nimport type { ComponentType } from \"react\";\n\nimport { getComponent, registerComponent } from \"../../../registries/components\";\n\nexport interface DefaultFilterProps<Data extends RowData = any, TValue = unknown> {\n header: Header<Data, TValue>;\n i18n?: (f: string) => string;\n}\n\nexport interface FilterProps<Data extends RowData = any, Opts = Record<string, unknown>> extends DefaultFilterProps<Data> {\n options: Opts;\n}\n\nexport function DefaultFilter<Data extends RowData = any, TValue = unknown>(props: DefaultFilterProps<Data, TValue>) {\n const { header, i18n } = props;\n const {\n filter = {\n variant: \"text\"\n }\n } = header.column.columnDef.meta || {};\n\n const { variant: filterVariant } = filter;\n const Filter = getComponent<ComponentType<FilterProps>>([`Filter.${header.column.id}`, `Filter.${filterVariant}`, \"Filter.text\"]);\n\n if (!Filter) {\n console.warn(\"Missing filter for `Filter.\" + header.column.id + \"` or `Filter.\" + filterVariant + \"`\");\n\n return null;\n }\n\n if (filter.disabled) {\n return null;\n }\n\n return (\n <div className='table-cell-header__filter'>\n <Filter header={header} options={filter} i18n={i18n} />\n </div>\n );\n}\n\nregisterComponent(\"Filter\", DefaultFilter);\n"],"names":["DefaultFilter","props","header","i18n","filter","filterVariant","Filter","getComponent","jsx","registerComponent"],"mappings":";;AAgBO,SAASA,EAA4DC,GAAyC;AACnH,QAAM,EAAE,QAAAC,GAAQ,MAAAC,EAAA,IAASF,GACnB;AAAA,IACJ,QAAAG,IAAS;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,EACX,IACEF,EAAO,OAAO,UAAU,QAAQ,CAAA,GAE9B,EAAE,SAASG,EAAA,IAAkBD,GAC7BE,IAASC,EAAyC,CAAC,UAAUL,EAAO,OAAO,EAAE,IAAI,UAAUG,CAAa,IAAI,aAAa,CAAC;AAEhI,SAAKC,IAMDF,EAAO,WACF,OAIP,gBAAAI,EAAC,OAAA,EAAI,WAAU,6BACb,UAAA,gBAAAA,EAACF,KAAO,QAAAJ,GAAgB,SAASE,GAAQ,MAAAD,EAAA,CAAY,EAAA,CACvD,KAZA,QAAQ,KAAK,gCAAgCD,EAAO,OAAO,KAAK,kBAAkBG,IAAgB,GAAG,GAE9F;AAYX;AAEAI,EAAkB,UAAUT,CAAa;"}
|
|
@@ -3,6 +3,9 @@ import { TdHTMLAttributes } from 'react';
|
|
|
3
3
|
import { FilterOptions } from '../filters/Filters';
|
|
4
4
|
declare module "@tanstack/react-table" {
|
|
5
5
|
interface ColumnMeta<TData extends RowData, TValue> {
|
|
6
|
+
type?: "string" | "number" | "boolean" | "date" | string;
|
|
7
|
+
format?: string;
|
|
8
|
+
labels?: Record<string, string>;
|
|
6
9
|
filter?: FilterOptions;
|
|
7
10
|
sort?: string;
|
|
8
11
|
cellProps?: TdHTMLAttributes<HTMLTableCellElement>;
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
import { ColumnDef, ColumnDefResolved } from '@tanstack/react-table';
|
|
2
2
|
import { FormType } from '../../../interfaces';
|
|
3
|
-
export declare function mapFormToColumns<Data = any>(form
|
|
3
|
+
export declare function mapFormToColumns<Data = any>({ form, columns, prefix }: {
|
|
4
|
+
form: FormType;
|
|
5
|
+
columns?: ColumnDefResolved<Data, any>[];
|
|
6
|
+
prefix?: string;
|
|
7
|
+
}): ColumnDef<Data, any>[];
|
|
@@ -1,38 +1,66 @@
|
|
|
1
|
-
import { createColumnHelper as
|
|
2
|
-
import { c as
|
|
3
|
-
import { g as
|
|
4
|
-
import { r as
|
|
5
|
-
import { getComponent as
|
|
6
|
-
var
|
|
7
|
-
const
|
|
1
|
+
import { createColumnHelper as f } from "@tanstack/react-table";
|
|
2
|
+
import { c as y } from "../../../chunks/cloneDeep.js";
|
|
3
|
+
import { g as C } from "../../../chunks/_commonjsHelpers.js";
|
|
4
|
+
import { r as g } from "../../../chunks/get.js";
|
|
5
|
+
import { getComponent as b } from "../../../registries/components.js";
|
|
6
|
+
var x = g();
|
|
7
|
+
const h = /* @__PURE__ */ C(x), K = {
|
|
8
8
|
number: "range",
|
|
9
9
|
currency: "range",
|
|
10
10
|
checkbox: "boolean"
|
|
11
|
+
}, k = {
|
|
12
|
+
date: "date",
|
|
13
|
+
datetime: "date",
|
|
14
|
+
number: "number",
|
|
15
|
+
currency: "currency",
|
|
16
|
+
checkbox: "boolean"
|
|
11
17
|
};
|
|
12
|
-
function
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
function m(r) {
|
|
19
|
+
if ("id" in r && typeof r.id == "string")
|
|
20
|
+
return r.id;
|
|
21
|
+
if ("accessorKey" in r && typeof r.accessorKey == "string")
|
|
22
|
+
return r.accessorKey;
|
|
23
|
+
}
|
|
24
|
+
function S({
|
|
25
|
+
form: r,
|
|
26
|
+
columns: p = [],
|
|
27
|
+
prefix: l = "data."
|
|
28
|
+
}) {
|
|
29
|
+
const d = f(), n = y(p);
|
|
30
|
+
return [...r.components.flatMap((e) => e.type === "tabs" ? e.components?.flatMap((t) => t.components) : [e]).filter((e) => e?.tableView).map((e) => {
|
|
31
|
+
const t = e, o = `${l}${t.key}`, a = /* @__PURE__ */ new Set([t.key, o]), i = n.findIndex((u) => {
|
|
32
|
+
const c = m(u);
|
|
33
|
+
return c ? a.has(c) : !1;
|
|
34
|
+
});
|
|
35
|
+
let s = n[i];
|
|
36
|
+
return s && n.splice(i, 1), d.accessor(o, {
|
|
18
37
|
header: (t.label || t.title || t.key)?.replace(/:/, ""),
|
|
19
|
-
cell: n,
|
|
20
38
|
meta: {
|
|
21
|
-
|
|
22
|
-
|
|
39
|
+
type: k[t.type] || t.type,
|
|
40
|
+
filter: {
|
|
41
|
+
...s?.meta?.filter,
|
|
42
|
+
variant: K[t.type] || "text"
|
|
43
|
+
},
|
|
44
|
+
...s?.meta || {}
|
|
23
45
|
},
|
|
24
|
-
...
|
|
46
|
+
...s || {}
|
|
25
47
|
});
|
|
26
|
-
}).
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
48
|
+
}), ...n].reduce((e, t) => {
|
|
49
|
+
const o = m(t);
|
|
50
|
+
return o && e.some((a) => m(a) === o) || e.push(t), e;
|
|
51
|
+
}, []).map((e, t) => {
|
|
52
|
+
const o = b([`Cell.${e.id}`, `Cell.${e.meta?.type}`, "Cell"]);
|
|
53
|
+
return {
|
|
54
|
+
...e,
|
|
55
|
+
meta: {
|
|
56
|
+
...e?.meta,
|
|
57
|
+
order: h(e, "meta.order", t * 10)
|
|
58
|
+
},
|
|
59
|
+
cell: e.cell || o
|
|
60
|
+
};
|
|
61
|
+
}).sort((e, t) => e.meta.order > t.meta.order ? 1 : -1);
|
|
34
62
|
}
|
|
35
63
|
export {
|
|
36
|
-
|
|
64
|
+
S as mapFormToColumns
|
|
37
65
|
};
|
|
38
66
|
//# sourceMappingURL=mapFormToColumns.js.map
|
|
@@ -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.js\";\n\nconst
|
|
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.js\";\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;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as e, jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import { c as t } from "../../../../chunks/index.js";
|
|
3
|
-
import { h as m } from "../../../../chunks/
|
|
3
|
+
import { h as m } from "../../../../chunks/moment.js";
|
|
4
4
|
import { registerComponent as c } from "../../../../registries/components.js";
|
|
5
5
|
import { iconClass as r } from "../../../../utils/iconClass.js";
|
|
6
6
|
import { stopPropagationWrapper as n } from "../../../../utils/stopPropagationWrapper.js";
|
|
@@ -2,7 +2,7 @@ import { jsx as n } from "react/jsx-runtime";
|
|
|
2
2
|
import { Table as s } from "../../../molecules/table/Table.js";
|
|
3
3
|
import { mapFormToColumns as t } from "../../../molecules/table/utils/mapFormToColumns.js";
|
|
4
4
|
function e({ form: o, ...m }) {
|
|
5
|
-
const r = o && t(o);
|
|
5
|
+
const r = o && t({ form: o });
|
|
6
6
|
return /* @__PURE__ */ n(s, { ...m, columns: r });
|
|
7
7
|
}
|
|
8
8
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SubmissionsTable.js","sources":["../../../../src/organisms/table/submissions/SubmissionsTable.tsx"],"sourcesContent":["import type { FormType, SubmissionType } from \"../../../interfaces\";\nimport type { JSONRecord } from \"../../../interfaces/JSONRecord\";\nimport { Table, type TableProps } from \"../../../molecules/table/Table\";\nimport { mapFormToColumns } from \"../../../molecules/table/utils/mapFormToColumns.js\";\n\nexport type SubmissionsTableProps<Data extends object = JSONRecord> = Omit<TableProps<SubmissionType<Data>>, \"columns\"> & {\n form?: FormType;\n};\n\nexport function SubmissionsTable<Data extends object = JSONRecord>({ form, ...props }: SubmissionsTableProps<Data>) {\n const columns: any[] | undefined = form && mapFormToColumns(form);\n\n return <Table {...(props as any)} columns={columns!} />;\n}\n"],"names":["SubmissionsTable","form","props","columns","mapFormToColumns","jsx","Table"],"mappings":";;;AASO,SAASA,EAAmD,EAAE,MAAAC,GAAM,GAAGC,KAAsC;AAClH,QAAMC,IAA6BF,KAAQG,
|
|
1
|
+
{"version":3,"file":"SubmissionsTable.js","sources":["../../../../src/organisms/table/submissions/SubmissionsTable.tsx"],"sourcesContent":["import type { FormType, SubmissionType } from \"../../../interfaces\";\nimport type { JSONRecord } from \"../../../interfaces/JSONRecord\";\nimport { Table, type TableProps } from \"../../../molecules/table/Table\";\nimport { mapFormToColumns } from \"../../../molecules/table/utils/mapFormToColumns.js\";\n\nexport type SubmissionsTableProps<Data extends object = JSONRecord> = Omit<TableProps<SubmissionType<Data>>, \"columns\"> & {\n form?: FormType;\n};\n\nexport function SubmissionsTable<Data extends object = JSONRecord>({ form, ...props }: SubmissionsTableProps<Data>) {\n const columns: any[] | undefined = form && mapFormToColumns({ form: form });\n\n return <Table {...(props as any)} columns={columns!} />;\n}\n"],"names":["SubmissionsTable","form","props","columns","mapFormToColumns","jsx","Table"],"mappings":";;;AASO,SAASA,EAAmD,EAAE,MAAAC,GAAM,GAAGC,KAAsC;AAClH,QAAMC,IAA6BF,KAAQG,EAAiB,EAAE,MAAAH,GAAY;AAE1E,SAAO,gBAAAI,EAACC,GAAA,EAAO,GAAIJ,GAAe,SAAAC,EAAA,CAAmB;AACvD;"}
|
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.15",
|
|
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.15",
|
|
48
|
+
"@tsed/typescript": "3.0.0-rc.15",
|
|
49
49
|
"microbundle": "0.13.0",
|
|
50
50
|
"vite": "7.1.5",
|
|
51
51
|
"vitest": "3.2.4"
|
package/src/all.ts
CHANGED
|
@@ -25,6 +25,8 @@ import "./molecules/forms/input-tags/InputTags.interface";
|
|
|
25
25
|
import "./molecules/table/components/DefaultFilter";
|
|
26
26
|
import "./molecules/table/components/DefaultArrowSort";
|
|
27
27
|
import "./molecules/table/components/DefaultCell";
|
|
28
|
+
import "./molecules/table/components/DefaultBooleanCell";
|
|
29
|
+
import "./molecules/table/components/DefaultDateCell";
|
|
28
30
|
import "./molecules/table/components/DefaultCellOperations";
|
|
29
31
|
import "./molecules/table/components/DefaultOperationButton";
|
|
30
32
|
import "./molecules/table/components/DefaultCellHeader";
|
|
@@ -28,10 +28,6 @@ export interface SelectProps<Data = string> extends FormControlProps<Data, Selec
|
|
|
28
28
|
searchEnabled?: boolean;
|
|
29
29
|
customProperties?: Record<string, any>;
|
|
30
30
|
options: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
|
|
31
|
-
/**
|
|
32
|
-
* @deprecated
|
|
33
|
-
*/
|
|
34
|
-
choices?: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
|
|
35
31
|
}
|
|
36
32
|
|
|
37
33
|
export interface SelectSingle<Data = string> extends SelectProps<Data> {
|
|
@@ -74,7 +74,7 @@ type Story = StoryObj<typeof Table<ProductSubmission>>;
|
|
|
74
74
|
export const Usage: Story = {
|
|
75
75
|
args: {
|
|
76
76
|
data: formSubmissions as unknown as ProductSubmission[],
|
|
77
|
-
columns: mapFormToColumns(FormType as any),
|
|
77
|
+
columns: mapFormToColumns({ form: FormType as any }),
|
|
78
78
|
operations: [
|
|
79
79
|
{
|
|
80
80
|
title: "Edit",
|
|
@@ -183,17 +183,20 @@ export const Usage: Story = {
|
|
|
183
183
|
export const WithFilters: Story = {
|
|
184
184
|
args: {
|
|
185
185
|
data: formSubmissions as unknown as ProductSubmission[],
|
|
186
|
-
columns: mapFormToColumns(
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
186
|
+
columns: mapFormToColumns({
|
|
187
|
+
form: FormType as any,
|
|
188
|
+
columns: [
|
|
189
|
+
{
|
|
190
|
+
accessorKey: "data.id",
|
|
191
|
+
meta: {
|
|
192
|
+
filter: {
|
|
193
|
+
variant: "select",
|
|
194
|
+
layout: "react"
|
|
195
|
+
}
|
|
193
196
|
}
|
|
194
197
|
}
|
|
195
|
-
|
|
196
|
-
|
|
198
|
+
]
|
|
199
|
+
}),
|
|
197
200
|
operations: [
|
|
198
201
|
{
|
|
199
202
|
title: "Edit",
|
|
@@ -220,7 +223,7 @@ export const WithFilters: Story = {
|
|
|
220
223
|
export const WithPaginationOptions: Story = {
|
|
221
224
|
args: {
|
|
222
225
|
data: formSubmissions as unknown as ProductSubmission[],
|
|
223
|
-
columns: mapFormToColumns(FormType as any),
|
|
226
|
+
columns: mapFormToColumns({ form: FormType as any }),
|
|
224
227
|
operations: [
|
|
225
228
|
{
|
|
226
229
|
title: "Edit",
|
|
@@ -246,67 +249,70 @@ export const WithPaginationOptions: Story = {
|
|
|
246
249
|
export const WithCustomCell: Story = {
|
|
247
250
|
args: {
|
|
248
251
|
data: formSubmissions as unknown as ProductSubmission[],
|
|
249
|
-
columns: mapFormToColumns<ProductSubmission>(
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
252
|
+
columns: mapFormToColumns<ProductSubmission>({
|
|
253
|
+
form: FormType as any,
|
|
254
|
+
columns: [
|
|
255
|
+
{
|
|
256
|
+
accessorKey: "data.id",
|
|
257
|
+
meta: {
|
|
258
|
+
filter: {
|
|
259
|
+
variant: "select",
|
|
260
|
+
layout: "react"
|
|
261
|
+
},
|
|
262
|
+
cellProps: {
|
|
263
|
+
colSpan: 2
|
|
264
|
+
}
|
|
256
265
|
},
|
|
257
|
-
|
|
258
|
-
|
|
266
|
+
cell: (context) => {
|
|
267
|
+
return (
|
|
268
|
+
<div className='flex space-x-4 align-items-center'>
|
|
269
|
+
<div className='max-w-[80px]'>
|
|
270
|
+
<img className='max-w-[80px] rounded-md' src={context.row.original.data.image} alt={context.row.original.data.label} />
|
|
271
|
+
</div>
|
|
272
|
+
<div>
|
|
273
|
+
<div className='text-lg text-primary'>{context.row.original.data.label}</div>
|
|
274
|
+
<div className='text-xs'>{context.getValue()}</div>
|
|
275
|
+
</div>
|
|
276
|
+
</div>
|
|
277
|
+
);
|
|
259
278
|
}
|
|
260
279
|
},
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
<img className='max-w-[80px] rounded-md' src={context.row.original.data.image} alt={context.row.original.data.label} />
|
|
266
|
-
</div>
|
|
267
|
-
<div>
|
|
268
|
-
<div className='text-lg text-primary'>{context.row.original.data.label}</div>
|
|
269
|
-
<div className='text-xs'>{context.getValue()}</div>
|
|
270
|
-
</div>
|
|
271
|
-
</div>
|
|
272
|
-
);
|
|
273
|
-
}
|
|
274
|
-
},
|
|
275
|
-
{
|
|
276
|
-
accessorKey: "data.label",
|
|
277
|
-
meta: {
|
|
278
|
-
hidden: true
|
|
279
|
-
}
|
|
280
|
-
},
|
|
281
|
-
{
|
|
282
|
-
accessorKey: "data.description",
|
|
283
|
-
meta: {
|
|
284
|
-
filter: {
|
|
285
|
-
variant: "text",
|
|
286
|
-
disableDatalist: true
|
|
280
|
+
{
|
|
281
|
+
accessorKey: "data.label",
|
|
282
|
+
meta: {
|
|
283
|
+
hidden: true
|
|
287
284
|
}
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
accessorKey: "data.description",
|
|
288
|
+
meta: {
|
|
289
|
+
filter: {
|
|
290
|
+
variant: "text",
|
|
291
|
+
disableDatalist: true
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
},
|
|
295
|
+
{
|
|
296
|
+
accessorKey: "data.price",
|
|
297
|
+
cell: (context) => {
|
|
298
|
+
const value = context.getValue();
|
|
299
|
+
|
|
300
|
+
if (value === undefined) {
|
|
301
|
+
return "-";
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
return (
|
|
305
|
+
<div className='text-right'>
|
|
306
|
+
{Intl.NumberFormat("fr-FR", {
|
|
307
|
+
style: "currency",
|
|
308
|
+
currency: context.row.original.data.currency
|
|
309
|
+
}).format(context.getValue())}
|
|
310
|
+
</div>
|
|
311
|
+
);
|
|
297
312
|
}
|
|
298
|
-
|
|
299
|
-
return (
|
|
300
|
-
<div className='text-right'>
|
|
301
|
-
{Intl.NumberFormat("fr-FR", {
|
|
302
|
-
style: "currency",
|
|
303
|
-
currency: context.row.original.data.currency
|
|
304
|
-
}).format(context.getValue())}
|
|
305
|
-
</div>
|
|
306
|
-
);
|
|
307
313
|
}
|
|
308
|
-
|
|
309
|
-
|
|
314
|
+
]
|
|
315
|
+
}),
|
|
310
316
|
operations: [
|
|
311
317
|
{
|
|
312
318
|
title: "Edit",
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import "./components/DefaultFilter";
|
|
2
2
|
import "./components/DefaultArrowSort";
|
|
3
3
|
import "./components/DefaultCell";
|
|
4
|
+
import "./components/DefaultBooleanCell";
|
|
5
|
+
import "./components/DefaultDateCell";
|
|
4
6
|
import "./components/DefaultCellOperations";
|
|
5
7
|
import "./components/DefaultOperationButton";
|
|
6
8
|
import "./components/DefaultCellHeader";
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { render, screen } from "@testing-library/react";
|
|
2
|
+
|
|
3
|
+
import { DefaultCellBoolean } from "./DefaultBooleanCell";
|
|
4
|
+
|
|
5
|
+
function createCellContext(value: boolean, labels?: Record<string, string>) {
|
|
6
|
+
return {
|
|
7
|
+
getValue: () => value,
|
|
8
|
+
column: {
|
|
9
|
+
columnDef: {
|
|
10
|
+
meta: {
|
|
11
|
+
labels
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
} as any;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
describe("DefaultCellBoolean", () => {
|
|
19
|
+
it("should render the default yes label for true values", () => {
|
|
20
|
+
render(<DefaultCellBoolean {...createCellContext(true)} />);
|
|
21
|
+
|
|
22
|
+
expect(screen.getByText("Yes", { selector: "span" })).toBeInTheDocument();
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
it("should render the default no label for false values", () => {
|
|
26
|
+
render(<DefaultCellBoolean {...createCellContext(false)} />);
|
|
27
|
+
|
|
28
|
+
expect(screen.getByText("No", { selector: "span" })).toBeInTheDocument();
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
it("should render custom labels from column metadata", () => {
|
|
32
|
+
render(<DefaultCellBoolean {...createCellContext(true, { yes: "Enabled", No: "Disabled" })} />);
|
|
33
|
+
|
|
34
|
+
expect(screen.getByText("Enabled", { selector: "span" })).toBeInTheDocument();
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
it("should render the custom false label from column metadata", () => {
|
|
38
|
+
render(<DefaultCellBoolean {...createCellContext(false, { yes: "Enabled", No: "Disabled" })} />);
|
|
39
|
+
|
|
40
|
+
expect(screen.getByText("Disabled", { selector: "span" })).toBeInTheDocument();
|
|
41
|
+
});
|
|
42
|
+
});
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { CellContext } from "@tanstack/react-table";
|
|
2
|
+
|
|
3
|
+
import { registerComponent } from "../../../registries/components";
|
|
4
|
+
|
|
5
|
+
export function DefaultCellBoolean<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, boolean>) {
|
|
6
|
+
const value = getValue();
|
|
7
|
+
return <span>{String(value ? columnDef.meta?.labels?.["yes"] || "Yes" : columnDef.meta?.labels?.["No"] || "No")}</span>;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
registerComponent("Cell.boolean", DefaultCellBoolean);
|
|
11
|
+
registerComponent("Cell.checkbox", DefaultCellBoolean);
|