From adf00c5c8222b3ef21ff54e9eb153178d1737744 Mon Sep 17 00:00:00 2001 From: Romain Lenzotti Date: Fri, 22 Mar 2024 13:43:56 +0100 Subject: [PATCH] feat(react-formio): add possibility to give custom choices function to column property --- .github/workflows/build.yml | 20 +- package.json | 4 +- packages/config/package.json | 6 +- packages/react-formio-container/package.json | 3 +- .../components/defaultCells.component.tsx | 15 +- .../selectColumnFilter.component.spec.tsx | 21 + .../filters/selectColumnFilter.component.tsx | 50 +- .../table/hooks/useCustomTable.hook.tsx | 32 +- .../src/components/table/table.component.tsx | 1 + .../table/utils/mapFormToColumns.tsx | 9 +- packages/redux-utils/package.json | 3 +- packages/storybook/package.json | 3 +- packages/tailwind-formio/package.json | 6 +- packages/tailwind/package.json | 4 +- release.config.js => release.config.mjs | 2 +- yarn.lock | 2217 +++++++++-------- 16 files changed, 1253 insertions(+), 1143 deletions(-) rename release.config.js => release.config.mjs (98%) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index cabf0c23..fb39a410 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -14,12 +14,12 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node-version: [18.x] + node-version: [20.x] steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v3 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 + uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} - name: Install dependencies @@ -33,12 +33,12 @@ jobs: strategy: matrix: os: [ubuntu-latest] - node-version: [18.x] + node-version: [20.x] steps: - uses: actions/checkout@v2 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 + uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} - name: Install dependencies @@ -53,12 +53,12 @@ jobs: strategy: matrix: - node-version: [18.x] + node-version: [20.x] steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v3 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 + uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} - name: Install dependencies @@ -84,12 +84,12 @@ jobs: strategy: matrix: - node-version: [18.x] + node-version: [20.x] steps: - uses: actions/checkout@v2 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 + uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} - name: Install dependencies diff --git a/package.json b/package.json index 8b7dc7e7..490c3857 100644 --- a/package.json +++ b/package.json @@ -104,8 +104,8 @@ "prettier": "^2.6.2", "prettier-eslint": "^14.0.3", "rimraf": "^3.0.2", - "semantic-release": "19.0.3", - "semantic-release-slack-bot": "3.5.3", + "semantic-release": "23.0.5", + "semantic-release-slack-bot": "4.0.2", "typescript": "4.9.5", "webpack": "4.44.2" }, diff --git a/packages/config/package.json b/packages/config/package.json index e0e29fe6..f07bfd0f 100644 --- a/packages/config/package.json +++ b/packages/config/package.json @@ -17,7 +17,5 @@ "devDependencies": { "@tsed/tailwind": "2.2.3", "@tsed/yarn-workspaces": "1.19.3" - }, - "dependencies": {}, - "peerDependencies": {} -} \ No newline at end of file + } +} diff --git a/packages/react-formio-container/package.json b/packages/react-formio-container/package.json index f51c6979..08f399aa 100644 --- a/packages/react-formio-container/package.json +++ b/packages/react-formio-container/package.json @@ -89,6 +89,5 @@ "tooltip.js": { "optional": false } - }, - "dependencies": {} + } } 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..5091e2c6 100644 --- a/packages/react-formio/src/components/table/components/defaultCells.component.tsx +++ b/packages/react-formio/src/components/table/components/defaultCells.component.tsx @@ -1,18 +1,27 @@ import React from "react"; import { Row } from "react-table"; +import type { ExtendedCell } from "../hooks/useCustomTable.hook"; + export function DefaultCells({ row }: { row: Row }) { return ( <> - {row.cells.map((cell, i) => { - const { hidden, colspan } = cell.column as any; + {row.cells.map((cell: ExtendedCell, i) => { + const { hidden, colspan } = cell.column; if (hidden) { return null; } return ( - + {cell.render("Cell") as any} ); 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 + + ); + + 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 = {}>({ column }: FilterProps) { - const { id, preFilteredRows, filterValue, setFilter } = column; +export function useSelectColumnFilter = {}>(props: FilterProps) { + 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 = {}>(props: FilterProps) { + const { value, choices, onChange } = useSelectColumnFilter(props); return (