@tsed/react-formio 1.10.14 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "1.10.14",
+  "version": "1.11.0",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -14,7 +14,7 @@
     "prettier": "prettier '{src,test}/**/*.{ts,tsx}' --write"
   },
   "dependencies": {
-    "@tsed/redux-utils": "1.10.14",
+    "@tsed/redux-utils": "1.11.0",
     "eventemitter2": "^6.4.3",
     "prop-types": "^15.7.2"
   },
@@ -29,8 +29,8 @@
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "1.10.14",
-    "@tsed/tailwind-formio": "1.10.14",
+    "@tsed/tailwind": "1.11.0",
+    "@tsed/tailwind-formio": "1.11.0",
     "eslint-plugin-jsx-a11y": "^6.5.1"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",

package/src/components/table/filters/selectColumnFilter.component.spec.tsx

@@ -0,0 +1,54 @@
+import "@testing-library/jest-dom/extend-expect";
+import { render } from "@testing-library/react";
+import React from "react";
+import { SelectColumnFilter } from "./selectColumnFilter.component";
+
+describe("SelectColumnFilter", () => {
+  it("should display select with choices", async () => {
+    const mockSetFilter = jest.fn();
+    const props = {
+      name: "data.id",
+      setFilter: mockSetFilter,
+      column: {
+        id: "id",
+        preFilteredRows: [
+          { values: { id: "select-choice-1" } },
+          { values: { id: "select-choice-2" } }
+        ]
+      }
+    };
+
+    const { getByText } = render(
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
+      <SelectColumnFilter {...props} />
+    );
+
+    expect(getByText("select-choice-1")).toBeDefined();
+    expect(getByText("select-choice-2")).toBeDefined();
+  });
+  it("should display select with custom choices", async () => {
+    const mockSetFilter = jest.fn();
+    const props = {
+      name: "data.id",
+      setFilter: mockSetFilter,
+      column: {
+        id: "id",
+        preFilteredRows: [
+          { values: { id: "select-choice-1" } },
+          { values: { id: "select-choice-2" } }
+        ],
+        choices: [{ label: "fake-choice", value: "fake-choice" }]
+      }
+    };
+
+    const { queryByText, getByText } = render(
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
+      <SelectColumnFilter {...props} />
+    );
+
+    expect(queryByText("select-choice-1")).toBeNull();
+    expect(getByText("fake-choice")).toBeDefined();
+  });
+});

package/src/components/table/filters/selectColumnFilter.component.tsx

@@ -5,8 +5,14 @@ import { Select } from "../../select/select.component";
 export function SelectColumnFilter<D extends Record<string, unknown> = {}>({
   column
 }: FilterProps<D>) {
-  const { filterValue, setFilter } = column;
-  const { choices = [] } = column as any;
+  const { id, preFilteredRows, filterValue, setFilter } = column;
+  const { choices: customChoices } = column as any;
+
+  const choices =
+    customChoices ||
+    [...new Set(preFilteredRows.map((row) => row.values[id]))]
+      .filter((value) => value)
+      .map((value) => ({ label: value, value }));
 
   return (
     <Select