Skip to content

Commit

Permalink
feat(react-formio): add possibility to give custom choices function t…
Browse files Browse the repository at this point in the history
…o column property
  • Loading branch information
Romakita committed Mar 22, 2024
1 parent 0c0ed88 commit 3bd4c9c
Show file tree
Hide file tree
Showing 17 changed files with 1,254 additions and 1,143 deletions.
20 changes: 10 additions & 10 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
1 change: 1 addition & 0 deletions .yarnrc.yml
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
nodeLinker: node-modules
enableGlobalCache: true
enableImmutableInstalls: false
yarnPath: .yarn/releases/yarn-4.1.1.cjs
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
6 changes: 2 additions & 4 deletions packages/config/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,5 @@
"devDependencies": {
"@tsed/tailwind": "2.2.3",
"@tsed/yarn-workspaces": "1.19.3"
},
"dependencies": {},
"peerDependencies": {}
}
}
}
3 changes: 1 addition & 2 deletions packages/react-formio-container/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,5 @@
"tooltip.js": {
"optional": false
}
},
"dependencies": {}
}
}
Original file line number Diff line number Diff line change
@@ -1,18 +1,27 @@
import React from "react";
import { Row } from "react-table";

import type { ExtendedCell } from "../hooks/useCustomTable.hook";

export function DefaultCells<Data extends object = {}>({ row }: { row: Row<Data> }) {
return (
<>
{row.cells.map((cell, i) => {
const { hidden, colspan } = cell.column as any;
{row.cells.map((cell: ExtendedCell<Data>, i) => {
const { hidden, colspan } = cell.column;

if (hidden) {
return null;
}

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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
);
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
import noop from "lodash/noop";
import React, { PropsWithChildren, useEffect, useState } from "react";
import { CellProps, FilterProps, Renderer, TableOptions, useFilters, useGroupBy, usePagination, useSortBy, useTable } from "react-table";
import {
Cell,
CellProps,
Column,
FilterProps,
Renderer,
TableOptions,
useFilters,
useGroupBy,
usePagination,
useSortBy,
useTable
} from "react-table";

import { OnClickOperation, Operation, QueryOptions } from "../../../interfaces";
import { Pagination as DefaultPagination } from "../../pagination/pagination.component";
Expand All @@ -11,7 +23,25 @@ import { DefaultColumnFilter } from "../filters/defaultColumnFilter.component";
import { swapElements } from "../utils/swapElements";
import { useOperations } from "./useOperations.hook";

export interface ExtraColumnProps {
colspan?: number;
hidden?: boolean;
className?: string;
style?: React.CSSProperties;
}

export type ExtendedColumn<Data extends object = any> = Column<Data> & ExtraColumnProps;

export type ExtendedCell<Data extends object = any> = Cell<Data, any> & {
column: ExtraColumnProps;
};

export interface TableProps<Data extends object = any> extends TableOptions<Data>, Partial<QueryOptions> {
/**
* extended columns interface
*/
columns: ReadonlyArray<ExtendedColumn<Data>>;

className?: string;
/**
* Call the listener when a filter / pagination / sort change.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, { PropsWithChildren } from "react";

import { DrapNDropContainer } from "./components/dragNDropContainer";
import { TableProps, useCustomTable } from "./hooks/useCustomTable.hook";

export function Table<Data extends object = any>(props: PropsWithChildren<TableProps<Data>>) {
const {
className,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
import { Components, ExtendedComponentSchema } from "formiojs";
import FormioUtils from "formiojs/utils";
import React from "react";
import { Column } from "react-table";

import { FormSchema } from "../../../interfaces";
import { DefaultCell } from "../components/defaultCell.component";
import { SelectColumnFilter } from "../filters/selectColumnFilter.component";
import { ExtendedColumn } from "../hooks/useCustomTable.hook";

export function mapFormToColumns(form: FormSchema): Column[] {
const columns: Column[] = [];
export function mapFormToColumns(form: FormSchema): ExtendedColumn[] {
const columns: ExtendedColumn[] = [];

FormioUtils.eachComponent(form.components, (component: ExtendedComponentSchema) => {
if (component.tableView && component.key) {
const cmp: any = Components.create(component, {}, null, true);

const column: Column = {
const column: ExtendedColumn = {
Header: component.label || component.title || component.key,
accessor: `data.${component.key}`,
className: "text-center",
Cell: (props: any) => <DefaultCell {...props} render={(value: any) => cmp.asString(value)} />
};

Expand Down
3 changes: 1 addition & 2 deletions packages/redux-utils/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,5 @@
"peerDependencies": {
"react": "^18.2.0",
"redux": "^4.0.5"
},
"dependencies": {}
}
}
3 changes: 1 addition & 2 deletions packages/storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,5 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"peerDependencies": {}
}
}
6 changes: 2 additions & 4 deletions packages/tailwind-formio/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,5 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {},
"peerDependencies": {}
}
}
}
4 changes: 1 addition & 3 deletions packages/tailwind/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,5 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {},
"peerDependencies": {}
}
}
2 changes: 1 addition & 1 deletion release.config.js → release.config.mjs
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
process.env.SEMANTIC_RELEASE_PACKAGE = "Ts.ED Formio.js";

module.exports = {
export default {
branches: [
"master",
{ name: "alpha", prerelease: true, channel: "alpha" },
Expand Down
Loading

0 comments on commit 3bd4c9c

Please sign in to comment.