From fa5af534132c5bdc30ef99c92b4195ebc48bda2f Mon Sep 17 00:00:00 2001 From: James Herdman Date: Wed, 13 Dec 2023 10:46:46 -0500 Subject: [PATCH 1/5] fix: pass missing argument `index` was undefined --- src/Table/TableHead.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Table/TableHead.tsx b/src/Table/TableHead.tsx index c4ab0a551..d4f7fdd37 100644 --- a/src/Table/TableHead.tsx +++ b/src/Table/TableHead.tsx @@ -20,7 +20,7 @@ const renderHeaderCellContent = ({ headerFormatter = defaultheaderFormatter, ... const TableHead: React.FC = ({ columns, compact, sticky }) => { const renderColumns = (allColumns) => - allColumns.map((column) => ( + allColumns.map((column, index) => ( Date: Wed, 13 Dec 2023 10:48:04 -0500 Subject: [PATCH 2/5] fix: some type tidying This doesn't attempt to solve all type problems here. Removing the TS opt out reveals further problems that will be resolved later. --- src/Table/TableHead.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Table/TableHead.tsx b/src/Table/TableHead.tsx index d4f7fdd37..9a5ff5ff1 100644 --- a/src/Table/TableHead.tsx +++ b/src/Table/TableHead.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled from "styled-components"; import StyledTh from "./StyledTh"; -import { Columns } from "./Table.types"; +import type { Columns } from "./Table.types"; type TableHeadProps = { columns: Columns; @@ -18,8 +18,8 @@ const StyledHeaderRow = styled.tr(({ theme }) => ({ const defaultheaderFormatter = ({ label }) => label; const renderHeaderCellContent = ({ headerFormatter = defaultheaderFormatter, ...column }) => headerFormatter(column); -const TableHead: React.FC = ({ columns, compact, sticky }) => { - const renderColumns = (allColumns) => +const TableHead = ({ columns, compact, sticky }: TableHeadProps) => { + const renderColumns = (allColumns: Columns) => allColumns.map((column, index) => ( Date: Wed, 13 Dec 2023 10:55:54 -0500 Subject: [PATCH 3/5] fix: remove unused import and type --- src/Table/Table.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Table/Table.types.ts b/src/Table/Table.types.ts index a0a5f7180..f0d347175 100644 --- a/src/Table/Table.types.ts +++ b/src/Table/Table.types.ts @@ -1,4 +1,4 @@ -import { Key, CSSProperties } from "react"; +import type { Key } from "react"; import PropTypes from "prop-types"; export type RowType = unknown; From 544f5470d8a42d839743d87f2b43ceabb2e112d3 Mon Sep 17 00:00:00 2001 From: James Herdman Date: Wed, 13 Dec 2023 10:58:06 -0500 Subject: [PATCH 4/5] fix: prefer interfaces --- src/Table/Table.types.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Table/Table.types.ts b/src/Table/Table.types.ts index f0d347175..10397e1c3 100644 --- a/src/Table/Table.types.ts +++ b/src/Table/Table.types.ts @@ -3,18 +3,18 @@ import PropTypes from "prop-types"; export type RowType = unknown; -export type CellInfoType = { +export interface CellInfoType { cellData: unknown; column: ColumnType; row: RowType; -}; +} -type ColumnInfoType = { +interface ColumnInfoType { align?: ColumnAlignment; label: string; dataKey?: Key; width?: string | number; -}; +} type ColumnAlignment = "left" | "right" | "center"; From cafdf31c35148f9a6ca0c73ca38a2d46377e116f Mon Sep 17 00:00:00 2001 From: James Herdman Date: Wed, 13 Dec 2023 11:05:23 -0500 Subject: [PATCH 5/5] fix: remaining TableHead type problems BREAKING CHANGE: only properties conforming to the ColumnType are passed as props to the headerFormatter. --- src/Table/TableHead.tsx | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/Table/TableHead.tsx b/src/Table/TableHead.tsx index 9a5ff5ff1..02e743efc 100644 --- a/src/Table/TableHead.tsx +++ b/src/Table/TableHead.tsx @@ -1,22 +1,28 @@ -// @ts-nocheck import React from "react"; import styled from "styled-components"; import StyledTh from "./StyledTh"; -import type { Columns } from "./Table.types"; +import type { ColumnType, Columns } from "./Table.types"; -type TableHeadProps = { +interface TableHeadProps { columns: Columns; compact?: boolean; sticky?: boolean; -}; +} const StyledHeaderRow = styled.tr(({ theme }) => ({ color: theme.colors.darkGrey, borderBottom: `1px solid ${theme.colors.lightGrey}`, })); -const defaultheaderFormatter = ({ label }) => label; -const renderHeaderCellContent = ({ headerFormatter = defaultheaderFormatter, ...column }) => headerFormatter(column); +const defaultheaderFormatter: ColumnType["headerFormatter"] = ({ label }) => label; + +const renderHeaderCellContent = ({ + headerFormatter = defaultheaderFormatter, + align, + label, + dataKey, + width, +}: ColumnType) => headerFormatter({ align, label, dataKey, width }); const TableHead = ({ columns, compact, sticky }: TableHeadProps) => { const renderColumns = (allColumns: Columns) => @@ -38,7 +44,5 @@ const TableHead = ({ columns, compact, sticky }: TableHeadProps) => { ); }; -TableHead.defaultProps = { - sticky: false, -}; + export default TableHead;