@tsed/react-formio 3.0.0-rc.19 → 3.0.0-rc.20
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/filters/SelectFilter.js +4 -4
- package/dist/molecules/table/filters/SelectFilter.js.map +1 -1
- package/dist/molecules/table/hooks/useUniqValues.d.ts +7 -4
- package/dist/molecules/table/hooks/useUniqValues.js +14 -8
- package/dist/molecules/table/hooks/useUniqValues.js.map +1 -1
- package/package.json +3 -3
- package/src/molecules/table/filters/Filters.d.ts +2 -1
- package/src/molecules/table/filters/SelectFilter.tsx +2 -2
- package/src/molecules/table/hooks/useUniqValues.spec.tsx +33 -2
- package/src/molecules/table/hooks/useUniqValues.tsx +28 -8
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as t, Fragment as a } from "react/jsx-runtime";
|
|
2
|
-
import { registerComponent as o, getComponent as
|
|
3
|
-
import { useUniqValues as
|
|
2
|
+
import { registerComponent as o, getComponent as f } from "../../../registries/components.js";
|
|
3
|
+
import { useUniqValues as p } from "../hooks/useUniqValues.js";
|
|
4
4
|
function n({ header: e, options: l }) {
|
|
5
|
-
const c =
|
|
5
|
+
const c = f("Select"), i = e.column.getFilterValue(), u = p({ header: e, options: l }), m = l.layout === "choicesjs" ? {
|
|
6
6
|
placeholder: void 0
|
|
7
7
|
} : {
|
|
8
8
|
placeholder: `Filter by ${e.column.columnDef.header}`
|
|
@@ -11,7 +11,7 @@ function n({ header: e, options: l }) {
|
|
|
11
11
|
label: `Filter by ${e.column.columnDef.header}`,
|
|
12
12
|
value: ""
|
|
13
13
|
}
|
|
14
|
-
].concat(
|
|
14
|
+
].concat(u);
|
|
15
15
|
return /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(
|
|
16
16
|
c,
|
|
17
17
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectFilter.js","sources":["../../../../src/molecules/table/filters/SelectFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { Select as DefaultSelect } from \"../../forms/select/Select\";\nimport { SelectOptionProps } from \"../../forms/select/Select.interface\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { useUniqValues } from \"../hooks/useUniqValues\";\nimport { FilterSelectOptions } from \"./Filters\";\n\nexport function SelectFilter<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>) {\n const Select = getComponent<typeof DefaultSelect>(\"Select\");\n const columnFilterValue = header.column.getFilterValue();\n const uniqValues = useUniqValues<Data>({ header });\n\n const opts =\n options.layout === \"choicesjs\"\n ? {\n placeholder: undefined\n }\n : {\n placeholder: `Filter by ${header.column.columnDef.header}`\n };\n\n const listOptions = (\n [\n {\n label: `Filter by ${header.column.columnDef.header}`,\n value: \"\"\n }\n ] as SelectOptionProps[]\n ).concat(
|
|
1
|
+
{"version":3,"file":"SelectFilter.js","sources":["../../../../src/molecules/table/filters/SelectFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { Select as DefaultSelect } from \"../../forms/select/Select\";\nimport { SelectOptionProps } from \"../../forms/select/Select.interface\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { useUniqValues } from \"../hooks/useUniqValues\";\nimport { FilterSelectOptions } from \"./Filters\";\n\nexport function SelectFilter<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>) {\n const Select = getComponent<typeof DefaultSelect>(\"Select\");\n const columnFilterValue = header.column.getFilterValue();\n const uniqValues = useUniqValues<Data>({ header, options });\n\n const opts =\n options.layout === \"choicesjs\"\n ? {\n placeholder: undefined\n }\n : {\n placeholder: `Filter by ${header.column.columnDef.header}`\n };\n\n const listOptions = (\n [\n {\n label: `Filter by ${header.column.columnDef.header}`,\n value: \"\"\n }\n ] as SelectOptionProps[]\n ).concat(uniqValues);\n\n return (\n <>\n <Select<string>\n size='small'\n {...(options as any)}\n {...opts}\n autoComplete='off'\n options={listOptions}\n name={`filter_${header.column.id}`}\n data-testid={`filter_${header.column.id}`}\n value={(columnFilterValue ?? \"\") as string}\n onChange={(_, value) => header.column.setFilterValue(value)}\n />\n </>\n );\n}\n\nregisterComponent(\"Filter.select\", SelectFilter);\nregisterComponent(\"Filter.boolean\", SelectFilter);\n"],"names":["SelectFilter","header","options","Select","getComponent","columnFilterValue","uniqValues","useUniqValues","opts","listOptions","jsx","Fragment","_","value","registerComponent"],"mappings":";;;AAOO,SAASA,EAAyB,EAAE,QAAAC,GAAQ,SAAAC,KAAmD;AACpG,QAAMC,IAASC,EAAmC,QAAQ,GACpDC,IAAoBJ,EAAO,OAAO,eAAA,GAClCK,IAAaC,EAAoB,EAAE,QAAAN,GAAQ,SAAAC,GAAS,GAEpDM,IACJN,EAAQ,WAAW,cACf;AAAA,IACE,aAAa;AAAA,EAAA,IAEf;AAAA,IACE,aAAa,aAAaD,EAAO,OAAO,UAAU,MAAM;AAAA,EAAA,GAG1DQ,IACJ;AAAA,IACE;AAAA,MACE,OAAO,aAAaR,EAAO,OAAO,UAAU,MAAM;AAAA,MAClD,OAAO;AAAA,IAAA;AAAA,EACT,EAEF,OAAOK,CAAU;AAEnB,SACE,gBAAAI,EAAAC,GAAA,EACE,UAAA,gBAAAD;AAAA,IAACP;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAID;AAAA,MACJ,GAAGM;AAAA,MACJ,cAAa;AAAA,MACb,SAASC;AAAA,MACT,MAAM,UAAUR,EAAO,OAAO,EAAE;AAAA,MAChC,eAAa,UAAUA,EAAO,OAAO,EAAE;AAAA,MACvC,OAAQI,KAAqB;AAAA,MAC7B,UAAU,CAACO,GAAGC,MAAUZ,EAAO,OAAO,eAAeY,CAAK;AAAA,IAAA;AAAA,EAAA,GAE9D;AAEJ;AAEAC,EAAkB,iBAAiBd,CAAY;AAC/Cc,EAAkB,kBAAkBd,CAAY;"}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
import { Header } from '@tanstack/react-table';
|
|
2
1
|
import { SelectOptionProps } from '../../../molecules/forms/select/Select.interface';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
import { FilterProps } from '../components/DefaultFilter';
|
|
3
|
+
import { FilterSelectOptions } from '../filters/Filters';
|
|
4
|
+
type UseUniqValuesProps<Data = any> = Omit<FilterProps<Data, FilterSelectOptions>, "options"> & {
|
|
5
|
+
options?: FilterSelectOptions;
|
|
6
|
+
};
|
|
7
|
+
export declare function useUniqValues<Data = any>({ header, options }: UseUniqValuesProps<Data>): SelectOptionProps[];
|
|
8
|
+
export {};
|
|
@@ -1,21 +1,27 @@
|
|
|
1
|
-
import { useMemo as
|
|
2
|
-
function
|
|
3
|
-
return
|
|
1
|
+
import { useMemo as o } from "react";
|
|
2
|
+
function m({ header: l, options: t }) {
|
|
3
|
+
return o(() => {
|
|
4
|
+
const n = t?.options;
|
|
5
|
+
if (n)
|
|
6
|
+
return typeof n == "function" ? n({ header: l, options: t }) : n;
|
|
4
7
|
switch (l.column.columnDef.meta?.filter?.variant) {
|
|
5
8
|
case "boolean":
|
|
6
9
|
return [
|
|
7
|
-
{ label: l.column.columnDef.meta?.labels?.yes || "Yes", value:
|
|
8
|
-
{
|
|
10
|
+
{ label: l.column.columnDef.meta?.labels?.yes || "Yes", value: "true" },
|
|
11
|
+
{
|
|
12
|
+
label: l.column.columnDef.meta?.labels?.no || l.column.columnDef.meta?.labels?.No || "No",
|
|
13
|
+
value: "false"
|
|
14
|
+
}
|
|
9
15
|
];
|
|
10
16
|
default:
|
|
11
|
-
return Array.from(l.column.getFacetedUniqueValues().keys()).flat().sort().slice(0, 5e3).map((e) => ({
|
|
17
|
+
return Array.from(l.column.getFacetedUniqueValues().keys()).flat().filter((e) => e != null).map((e) => String(e)).sort().slice(0, 5e3).map((e) => ({
|
|
12
18
|
label: e,
|
|
13
19
|
value: e
|
|
14
20
|
}));
|
|
15
21
|
}
|
|
16
|
-
}, [l
|
|
22
|
+
}, [l, t]);
|
|
17
23
|
}
|
|
18
24
|
export {
|
|
19
|
-
|
|
25
|
+
m as useUniqValues
|
|
20
26
|
};
|
|
21
27
|
//# sourceMappingURL=useUniqValues.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUniqValues.js","sources":["../../../../src/molecules/table/hooks/useUniqValues.tsx"],"sourcesContent":["import
|
|
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\ntype UseUniqValuesProps<Data = any> = Omit<FilterProps<Data, FilterSelectOptions>, \"options\"> & {\n options?: FilterSelectOptions;\n};\n\nexport function useUniqValues<Data = any>({ header, options }: UseUniqValuesProps<Data>): 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":";AAUO,SAASA,EAA0B,EAAE,QAAAC,GAAQ,SAAAC,KAA0D;AAC5G,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;"}
|
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.20",
|
|
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.20",
|
|
48
|
+
"@tsed/typescript": "3.0.0-rc.20",
|
|
49
49
|
"microbundle": "0.13.0",
|
|
50
50
|
"vite": "7.1.5",
|
|
51
51
|
"vitest": "3.2.4"
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { FilterProps } from "../../../../molecules/table/components/DefaultFilter";
|
|
1
2
|
import { SelectOptionProps, SelectProps } from "../../forms/select/Select.interface";
|
|
2
3
|
|
|
3
4
|
export type FilterVariants = "text" | "range" | "select" | "boolean";
|
|
@@ -21,7 +22,7 @@ export interface FilterRangeOptions extends FilterBaseOptions {
|
|
|
21
22
|
|
|
22
23
|
export interface FilterSelectOptions extends FilterBaseOptions, SelectProps<string> {
|
|
23
24
|
variant: "select";
|
|
24
|
-
options?: SelectOptionProps<string>[];
|
|
25
|
+
options?: SelectOptionProps<string>[] | ((props: FilterProps<any, FilterSelectOptions>) => SelectOptionProps<string>[]);
|
|
25
26
|
}
|
|
26
27
|
|
|
27
28
|
export interface FilterBooleanOptions extends FilterBaseOptions {
|
|
@@ -8,7 +8,7 @@ import { FilterSelectOptions } from "./Filters";
|
|
|
8
8
|
export function SelectFilter<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>) {
|
|
9
9
|
const Select = getComponent<typeof DefaultSelect>("Select");
|
|
10
10
|
const columnFilterValue = header.column.getFilterValue();
|
|
11
|
-
const uniqValues = useUniqValues<Data>({ header });
|
|
11
|
+
const uniqValues = useUniqValues<Data>({ header, options });
|
|
12
12
|
|
|
13
13
|
const opts =
|
|
14
14
|
options.layout === "choicesjs"
|
|
@@ -26,7 +26,7 @@ export function SelectFilter<Data = any>({ header, options }: FilterProps<Data,
|
|
|
26
26
|
value: ""
|
|
27
27
|
}
|
|
28
28
|
] as SelectOptionProps[]
|
|
29
|
-
).concat(
|
|
29
|
+
).concat(uniqValues);
|
|
30
30
|
|
|
31
31
|
return (
|
|
32
32
|
<>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { renderHook } from "@testing-library/react";
|
|
2
|
+
import { vi } from "vitest";
|
|
2
3
|
|
|
3
4
|
import { useUniqValues } from "./useUniqValues";
|
|
4
5
|
|
|
@@ -31,8 +32,8 @@ describe("useUniqValues", () => {
|
|
|
31
32
|
const { result } = renderHook(() => useUniqValues({ header }));
|
|
32
33
|
|
|
33
34
|
expect(result.current).toEqual([
|
|
34
|
-
{ label: "Enabled", value: true },
|
|
35
|
-
{ label: "Disabled", value: false }
|
|
35
|
+
{ label: "Enabled", value: "true" },
|
|
36
|
+
{ label: "Disabled", value: "false" }
|
|
36
37
|
]);
|
|
37
38
|
});
|
|
38
39
|
|
|
@@ -48,4 +49,34 @@ describe("useUniqValues", () => {
|
|
|
48
49
|
{ label: "beta", value: "beta" }
|
|
49
50
|
]);
|
|
50
51
|
});
|
|
52
|
+
|
|
53
|
+
it("should return provided select options", () => {
|
|
54
|
+
const header = createHeader({});
|
|
55
|
+
const options = [
|
|
56
|
+
{ label: "First", value: "first" },
|
|
57
|
+
{ label: "Second", value: "second" }
|
|
58
|
+
];
|
|
59
|
+
|
|
60
|
+
const { result } = renderHook(() => useUniqValues({ header, options: { variant: "select", options } as any }));
|
|
61
|
+
|
|
62
|
+
expect(result.current).toEqual(options);
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
it("should resolve select options from callback", () => {
|
|
66
|
+
const header = createHeader({});
|
|
67
|
+
const optionsFn = vi.fn().mockReturnValue([{ label: "From callback", value: "callback" }]);
|
|
68
|
+
|
|
69
|
+
const { result } = renderHook(() =>
|
|
70
|
+
useUniqValues({
|
|
71
|
+
header,
|
|
72
|
+
options: { variant: "select", options: optionsFn } as any
|
|
73
|
+
})
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
expect(optionsFn).toHaveBeenCalledWith({
|
|
77
|
+
header,
|
|
78
|
+
options: { variant: "select", options: optionsFn }
|
|
79
|
+
});
|
|
80
|
+
expect(result.current).toEqual([{ label: "From callback", value: "callback" }]);
|
|
81
|
+
});
|
|
51
82
|
});
|
|
@@ -1,26 +1,46 @@
|
|
|
1
|
-
import type { Header } from "@tanstack/react-table";
|
|
2
1
|
import { useMemo } from "react";
|
|
3
2
|
|
|
4
3
|
import { SelectOptionProps } from "../../../molecules/forms/select/Select.interface";
|
|
4
|
+
import type { FilterProps } from "../components/DefaultFilter";
|
|
5
|
+
import { FilterSelectOptions } from "../filters/Filters";
|
|
5
6
|
|
|
6
|
-
|
|
7
|
+
type UseUniqValuesProps<Data = any> = Omit<FilterProps<Data, FilterSelectOptions>, "options"> & {
|
|
8
|
+
options?: FilterSelectOptions;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export function useUniqValues<Data = any>({ header, options }: UseUniqValuesProps<Data>): SelectOptionProps[] {
|
|
7
12
|
return useMemo(() => {
|
|
13
|
+
const providedOptions = options?.options;
|
|
14
|
+
|
|
15
|
+
if (providedOptions) {
|
|
16
|
+
if (typeof providedOptions === "function") {
|
|
17
|
+
return providedOptions({ header, options: options as FilterSelectOptions });
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return providedOptions;
|
|
21
|
+
}
|
|
22
|
+
|
|
8
23
|
switch (header.column.columnDef.meta?.filter?.variant) {
|
|
9
24
|
case "boolean":
|
|
10
25
|
return [
|
|
11
|
-
{ label: header.column.columnDef.meta?.labels?.["yes"] || "Yes", value: true },
|
|
12
|
-
{
|
|
26
|
+
{ label: header.column.columnDef.meta?.labels?.["yes"] || "Yes", value: "true" },
|
|
27
|
+
{
|
|
28
|
+
label: header.column.columnDef.meta?.labels?.["no"] || header.column.columnDef.meta?.labels?.["No"] || "No",
|
|
29
|
+
value: "false"
|
|
30
|
+
}
|
|
13
31
|
];
|
|
14
32
|
|
|
15
33
|
default:
|
|
16
34
|
return Array.from(header.column.getFacetedUniqueValues().keys())
|
|
17
35
|
.flat()
|
|
36
|
+
.filter((value) => value !== undefined && value !== null)
|
|
37
|
+
.map((value) => String(value))
|
|
18
38
|
.sort()
|
|
19
39
|
.slice(0, 5000)
|
|
20
|
-
.map((
|
|
21
|
-
label:
|
|
22
|
-
value
|
|
40
|
+
.map((value) => ({
|
|
41
|
+
label: value,
|
|
42
|
+
value
|
|
23
43
|
}));
|
|
24
44
|
}
|
|
25
|
-
}, [header
|
|
45
|
+
}, [header, options]);
|
|
26
46
|
}
|