From 553a4e639b2aeca268a93a42bb5ed7029f329863 Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Fri, 22 Mar 2024 13:43:56 +0100
Subject: [PATCH] feat(react-formio): add possibility to give custom choices
 function to column property

---
 .../components/defaultCells.component.tsx     | 13 +++--
 .../selectColumnFilter.component.spec.tsx     | 21 ++++++++
 .../filters/selectColumnFilter.component.tsx  | 50 ++++++++++++++-----
 3 files changed, 69 insertions(+), 15 deletions(-)

diff --git a/packages/react-formio/src/components/table/components/defaultCells.component.tsx b/packages/react-formio/src/components/table/components/defaultCells.component.tsx
index a505e1e7..23ed521c 100644
--- a/packages/react-formio/src/components/table/components/defaultCells.component.tsx
+++ b/packages/react-formio/src/components/table/components/defaultCells.component.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { Row } from "react-table";
+import { Cell, Row } from "react-table";
 
 export function DefaultCells<Data extends object = {}>({ row }: { row: Row<Data> }) {
   return (
     <>
-      {row.cells.map((cell, i) => {
+      {row.cells.map((cell: Cell<Data, any> & { column: { className?: string; style?: React.CSSProperties } }, i) => {
         const { hidden, colspan } = cell.column as any;
 
         if (hidden) {
@@ -12,7 +12,14 @@ export function DefaultCells<Data extends object = {}>({ row }: { row: Row<Data>
         }
 
         return (
-          <td colSpan={colspan} {...cell.getCellProps()} key={`tableInstance.page.cells.${cell.value || "value"}.${i}`}>
+          <td
+            colSpan={colspan}
+            {...cell.getCellProps({
+              className: cell.column.className,
+              style: cell.column.style
+            })}
+            key={`tableInstance.page.cells.${cell.value || "value"}.${i}`}
+          >
             {cell.render("Cell") as any}
           </td>
         );
diff --git a/packages/react-formio/src/components/table/filters/selectColumnFilter.component.spec.tsx b/packages/react-formio/src/components/table/filters/selectColumnFilter.component.spec.tsx
index a82999fb..ef98be12 100644
--- a/packages/react-formio/src/components/table/filters/selectColumnFilter.component.spec.tsx
+++ b/packages/react-formio/src/components/table/filters/selectColumnFilter.component.spec.tsx
@@ -45,4 +45,25 @@ describe("SelectColumnFilter", () => {
     expect(screen.queryByText("select-choice-1")).toBeNull();
     expect(screen.getByText("fake-choice")).toBeDefined();
   });
+
+  it("should display select with custom choices (function)", 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" }]
+      }
+    };
+
+    render(
+      // @ts-ignore
+      <SelectColumnFilter {...props} />
+    );
+
+    expect(screen.queryByText("select-choice-1")).toBeNull();
+    expect(screen.getByText("fake-choice")).toBeDefined();
+  });
 });
diff --git a/packages/react-formio/src/components/table/filters/selectColumnFilter.component.tsx b/packages/react-formio/src/components/table/filters/selectColumnFilter.component.tsx
index 948196cd..ee7c4afe 100644
--- a/packages/react-formio/src/components/table/filters/selectColumnFilter.component.tsx
+++ b/packages/react-formio/src/components/table/filters/selectColumnFilter.component.tsx
@@ -3,24 +3,50 @@ import { FilterProps } from "react-table";
 
 import { Select } from "../../select/select.component";
 
-export function SelectColumnFilter<D extends Record<string, unknown> = {}>({ column }: FilterProps<D>) {
-  const { id, preFilteredRows, filterValue, setFilter } = column;
+export function useSelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>) {
+  const { column } = props;
+  const { id, preFilteredRows } = column;
   const { choices: customChoices } = column as any;
+  const { filterValue, setFilter } = column;
 
-  const choices =
-    customChoices ||
-    [...new Set(preFilteredRows.map((row) => row.values[id]))].filter((value) => value).map((value) => ({ label: value, value }));
+  const choices = (() => {
+    if (customChoices) {
+      if (typeof customChoices === "function") {
+        return customChoices(props);
+      }
+      return customChoices;
+    }
+
+    return [...new Set(preFilteredRows.map((row) => row.values[id]))]
+      .filter((value) => value)
+      .map((value) => ({
+        label: value,
+        value
+      }));
+  })();
+
+  const onChange = (_: string, value: any) => {
+    setFilter(value || undefined);
+  };
+
+  return {
+    value: filterValue,
+    onChange,
+    choices: [{ value: "", label: "All" }].concat(choices)
+  };
+}
+
+export function SelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>) {
+  const { value, choices, onChange } = useSelectColumnFilter(props);
 
   return (
     <Select
-      key={`filter-${column.id}`}
-      name={`filter-${column.id}`}
+      key={`filter-${props.column.id}`}
+      name={`filter-${props.column.id}`}
       size={"sm"}
-      value={filterValue}
-      choices={[{ value: "", label: "All" }].concat(choices)}
-      onChange={(name, value) => {
-        setFilter(value || undefined);
-      }}
+      value={value}
+      choices={choices}
+      onChange={onChange}
     />
   );
 }