From 787bd3de75498d6acf2958997ba17b17bc6566ae Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Wed, 24 May 2023 17:21:14 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F(react)=20allow=20autocomp?= =?UTF-8?q?letion=20for=20DataGrid's=20renderCell?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously the type of the row parameter of renderCell was hardcoded as Row. This wasn't ideal because the best case scenario we want it to enable Typescript to use the type of rows props. Now that's the case. Resolve #62 --- .changeset/neat-sheep-collect.md | 5 ++++ .../src/components/DataGrid/DataList.tsx | 4 +-- .../components/DataGrid/SimpleDataGrid.tsx | 6 ++--- .../src/components/DataGrid/index.stories.tsx | 26 +++++++++++++------ .../react/src/components/DataGrid/index.tsx | 8 +++--- .../react/src/components/DataGrid/utils.tsx | 23 +++++++--------- 6 files changed, 42 insertions(+), 30 deletions(-) create mode 100644 .changeset/neat-sheep-collect.md diff --git a/.changeset/neat-sheep-collect.md b/.changeset/neat-sheep-collect.md new file mode 100644 index 0000000..c19d16f --- /dev/null +++ b/.changeset/neat-sheep-collect.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": minor +--- + +allow autocompletion for DataGrid's renderCell diff --git a/packages/react/src/components/DataGrid/DataList.tsx b/packages/react/src/components/DataGrid/DataList.tsx index bf11551..b7b6a43 100644 --- a/packages/react/src/components/DataGrid/DataList.tsx +++ b/packages/react/src/components/DataGrid/DataList.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { BaseProps, DataGrid } from ":/components/DataGrid/index"; +import { BaseProps, DataGrid, Row } from ":/components/DataGrid/index"; -export const DataList = ({ rows, ...props }: BaseProps) => { +export const DataList = ({ rows, ...props }: BaseProps) => { return ; }; diff --git a/packages/react/src/components/DataGrid/SimpleDataGrid.tsx b/packages/react/src/components/DataGrid/SimpleDataGrid.tsx index 5a22fa1..abdca80 100644 --- a/packages/react/src/components/DataGrid/SimpleDataGrid.tsx +++ b/packages/react/src/components/DataGrid/SimpleDataGrid.tsx @@ -10,18 +10,18 @@ import { /** * Handles sorting, pagination. */ -export const SimpleDataGrid = ({ +export const SimpleDataGrid = ({ rows, defaultPaginationParams, defaultSortModel = [], ...props -}: BaseProps & { +}: BaseProps & { /** Pagination default props, should never change. */ defaultPaginationParams?: Parameters[0] | boolean; /** Pagination default props, should never change. */ defaultSortModel?: SortModel; }) => { - const [realRows, setRealRows] = useState([]); + const [realRows, setRealRows] = useState([]); const [sortModel, setSortModel] = useState(defaultSortModel); const realPaginationParams = useMemo(() => { if (typeof defaultPaginationParams === "boolean") { diff --git a/packages/react/src/components/DataGrid/index.stories.tsx b/packages/react/src/components/DataGrid/index.stories.tsx index 2264771..caf4e16 100644 --- a/packages/react/src/components/DataGrid/index.stories.tsx +++ b/packages/react/src/components/DataGrid/index.stories.tsx @@ -173,7 +173,7 @@ export const FullServerSide = () => { sort: "desc", }, ]); - const [rows, setRows] = useState([]); + const [rows, setRows] = useState([]); useEffect(() => { // Simulate server-side fetching. @@ -258,19 +258,29 @@ export const DataListOnly = () => { id: `list key for element ${index}`, title: faker.random.word(), date: faker.date.past(1).toISOString(), - action: ( - - ), })), [] ); - const columns = [{ field: "title" }, { field: "date" }, { field: "action" }]; return ( - + { + return ( + + ); + }, + }, + ]} + /> ); }; diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx index bc2467e..a2bbd57 100644 --- a/packages/react/src/components/DataGrid/index.tsx +++ b/packages/react/src/components/DataGrid/index.tsx @@ -37,7 +37,7 @@ export interface BaseProps { columns: Column[]; rows: T[]; isLoading?: boolean; - enableRowSelection?: boolean | ((row: T) => boolean); + enableRowSelection?: TableOptions["enableRowSelection"]; onRowSelectionChange?: (newSelection: RowSelectionState) => void; rowSelection?: RowSelectionState; } @@ -47,11 +47,11 @@ interface Props extends BaseProps { sortModel?: SortModel; onSortModelChange?: (newSortModel: SortModel) => void; /** Options for the underlying tanstack table. */ - tableOptions?: TableOptions; + tableOptions?: TableOptions; displayHeader?: boolean; } -export const DataGrid = ({ +export const DataGrid = ({ columns, rows, pagination, @@ -63,7 +63,7 @@ export const DataGrid = ({ rowSelection, tableOptions, displayHeader = true, -}: Props) => { +}: Props) => { const { t } = useCunningham(); const headlessColumns = useHeadlessColumns({ columns, enableRowSelection }); diff --git a/packages/react/src/components/DataGrid/utils.tsx b/packages/react/src/components/DataGrid/utils.tsx index 0445519..6cf051e 100644 --- a/packages/react/src/components/DataGrid/utils.tsx +++ b/packages/react/src/components/DataGrid/utils.tsx @@ -1,32 +1,27 @@ import { - CellContext, ColumnDef, createColumnHelper, PaginationState, SortingState, } from "@tanstack/react-table"; -import React, { ReactNode } from "react"; -import { - ColumnDefBase, - DisplayColumnDef, -} from "@tanstack/table-core/src/types"; +import React from "react"; import { Checkbox } from ":/components/Forms/Checkbox"; import { PaginationProps } from ":/components/Pagination"; -import { Column, Row, SortModel } from ":/components/DataGrid/index"; +import { BaseProps, Column, Row, SortModel } from ":/components/DataGrid/index"; import { useCunningham } from ":/components/Provider"; /** * Converts Cunningham's columns to the underlying tanstack table. */ -export const useHeadlessColumns = ({ +export const useHeadlessColumns = ({ columns, enableRowSelection, }: { - columns: Column[]; - enableRowSelection?: boolean | ((row: Row) => boolean); -}): ColumnDef[] => { + columns: Column[]; + enableRowSelection?: BaseProps["enableRowSelection"]; +}): ColumnDef[] => { const { t } = useCunningham(); - const columnHelper = createColumnHelper(); + const columnHelper = createColumnHelper(); let headlessColumns = columns.map((column) => { const opts = { id: column.field ?? "actions", @@ -34,7 +29,9 @@ export const useHeadlessColumns = ({ header: column.headerName, }; if (column.field) { - return columnHelper.accessor(column.field, opts); + // The any cast is needed because the type of the accessor is hard-defined on react-table. + // On our side we only use string as type for simplicity purpose. + return columnHelper.accessor(column.field as any, opts); } return columnHelper.display({ ...opts,