From 45dd62d0e148d03fe70f7a8a54f1378fa2833666 Mon Sep 17 00:00:00 2001 From: edleeks87 Date: Thu, 9 Jun 2022 12:43:26 +0100 Subject: [PATCH 1/5] chore(flat-table-header): add displayName to component --- .../flat-table/flat-table-header/flat-table-header.component.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/flat-table/flat-table-header/flat-table-header.component.js b/src/components/flat-table/flat-table-header/flat-table-header.component.js index fe9ff69a19..9829f85521 100644 --- a/src/components/flat-table/flat-table-header/flat-table-header.component.js +++ b/src/components/flat-table/flat-table-header/flat-table-header.component.js @@ -89,4 +89,6 @@ FlatTableHeader.defaultProps = { align: "left", }; +FlatTableHeader.displayName = "FlatTableHeader"; + export default FlatTableHeader; From 07695a229203096eead33492ecb884b14121b98e Mon Sep 17 00:00:00 2001 From: edleeks87 Date: Thu, 9 Jun 2022 12:47:43 +0100 Subject: [PATCH 2/5] chore(flat-table-cell): add displayName to component --- .../flat-table/flat-table-cell/flat-table-cell.component.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/flat-table/flat-table-cell/flat-table-cell.component.js b/src/components/flat-table/flat-table-cell/flat-table-cell.component.js index 656b022a42..db50ac98c1 100644 --- a/src/components/flat-table/flat-table-cell/flat-table-cell.component.js +++ b/src/components/flat-table/flat-table-cell/flat-table-cell.component.js @@ -126,4 +126,6 @@ FlatTableCell.propTypes = { verticalBorderColor: PropTypes.string, }; +FlatTableCell.displayName = "FlatTableCell"; + export default FlatTableCell; From 7641d40c9b0fc2d81abf6d82cd4bf73b7099f598 Mon Sep 17 00:00:00 2001 From: edleeks87 Date: Thu, 9 Jun 2022 12:56:39 +0100 Subject: [PATCH 3/5] chore(flat-table-row-header): add displayName to component --- .../flat-table-row-header/flat-table-row-header.component.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/flat-table/flat-table-row-header/flat-table-row-header.component.js b/src/components/flat-table/flat-table-row-header/flat-table-row-header.component.js index 071a48af65..dddf87a305 100644 --- a/src/components/flat-table/flat-table-row-header/flat-table-row-header.component.js +++ b/src/components/flat-table/flat-table-row-header/flat-table-row-header.component.js @@ -90,4 +90,6 @@ FlatTableRowHeader.propTypes = { verticalBorderColor: PropTypes.string, }; +FlatTableRowHeader.displayName = "FlatTableRowHeader"; + export default FlatTableRowHeader; From 80526acdfcde871ca46107442477499e221d5aa8 Mon Sep 17 00:00:00 2001 From: edleeks87 Date: Thu, 9 Jun 2022 13:15:36 +0100 Subject: [PATCH 4/5] chore(flat-table-checkbox): add displayName to component --- .../flat-table-checkbox/flat-table-checkbox.component.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js b/src/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js index d30f5be5dd..4cd302c83f 100644 --- a/src/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js +++ b/src/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js @@ -91,4 +91,6 @@ FlatTableCheckbox.propTypes = { reportCellWidth: PropTypes.func, }; +FlatTableCheckbox.displayName = "FlatTableCheckbox"; + export default FlatTableCheckbox; From d15cb0da02f4428bd550ad8a7709325f33113390 Mon Sep 17 00:00:00 2001 From: edleeks87 Date: Thu, 9 Jun 2022 14:16:25 +0100 Subject: [PATCH 5/5] fix(flat-table-row): update sticky column functionality to support wrapping row headers Updates functionality to use `child.type.displayName` instead of `child.type`. This will allow wrapping of the `FlatTableRowHeader` component as the wrapper component can set its `displayName` to `FlatTableRowHeader.displayName` to ensure the required columns are sticky. fix #5208 --- .../flat-table-row.component.js | 13 ++- .../flat-table-row/flat-table-row.spec.js | 28 +++++++ .../flat-table/flat-table.stories.mdx | 81 +++++++++++++++++++ 3 files changed, 119 insertions(+), 3 deletions(-) diff --git a/src/components/flat-table/flat-table-row/flat-table-row.component.js b/src/components/flat-table/flat-table-row/flat-table-row.component.js index 8526bc5c10..7566575a41 100644 --- a/src/components/flat-table/flat-table-row/flat-table-row.component.js +++ b/src/components/flat-table/flat-table-row/flat-table-row.component.js @@ -3,6 +3,7 @@ import React, { useContext, useEffect, useLayoutEffect, + useMemo, useRef, useState, } from "react"; @@ -48,9 +49,15 @@ const FlatTableRow = React.forwardRef( const firstColumnExpandable = expandableArea === "firstColumn"; const [stickyCellWidths, setStickyCellWidths] = useState([]); const [leftPositions, setLeftPositions] = useState([]); - const childrenArray = React.Children.toArray(children); - const rowHeaderIndex = childrenArray.findIndex( - (child) => child.type === FlatTableRowHeader + const childrenArray = useMemo(() => React.Children.toArray(children), [ + children, + ]); + const rowHeaderIndex = useMemo( + () => + childrenArray.findIndex( + (child) => child.type.displayName === FlatTableRowHeader.displayName + ), + [childrenArray] ); const themeContext = useContext(FlatTableThemeContext); diff --git a/src/components/flat-table/flat-table-row/flat-table-row.spec.js b/src/components/flat-table/flat-table-row/flat-table-row.spec.js index 9aa213124c..58a3174e85 100644 --- a/src/components/flat-table/flat-table-row/flat-table-row.spec.js +++ b/src/components/flat-table/flat-table-row/flat-table-row.spec.js @@ -1469,6 +1469,34 @@ describe("FlatTableRow", () => { ); }); }); + + describe("wrapping FlatTableRowHeader", () => { + it("calculates the rowHeaderIndex as expected", () => { + // eslint-disable-next-line react/prop-types + const FlatTableRowHeaderWrapper = ({ children }) => ( + {children} + ); + FlatTableRowHeaderWrapper.displayName = FlatTableRowHeader.displayName; + const rowHeaderIndex = mount( + + + + Foo + Foo + Foo + Foo + Foo + Foo + + +
+ ) + .find(StyledFlatTableRow) + .prop("rowHeaderIndex"); + + expect(rowHeaderIndex).toEqual(3); + }); + }); }); function renderFlatTableRow(props = {}, renderer = mount) { diff --git a/src/components/flat-table/flat-table.stories.mdx b/src/components/flat-table/flat-table.stories.mdx index b63008fd03..c3ce39605a 100644 --- a/src/components/flat-table/flat-table.stories.mdx +++ b/src/components/flat-table/flat-table.stories.mdx @@ -2159,6 +2159,87 @@ of the button control. +## Wrapping FlatTableRowHeaders + +The `FlatTableRow` relies on specific child composition to identify sticky columns. If you need to wrap the `FlatTableRowHeader` you will need to set the `displayName` of the wrapper to `FlatTableRowHeader.displayName`. + + + + {() => { + const FlatTableRowHeaderWrapper = ({ children, ...rest }) => ( + + {children} + + ); + FlatTableRowHeaderWrapper.displayName = FlatTableRowHeader.displayName + return ( + + + + Name + Location + Relationship Status + Dependents + + + + + John Doe + London + Single + + + {}} icon="edit"> + Edit + + + + + + Jane Doe + York + Married + + + {}} icon="edit"> + Edit + + + + + + John Smith + Edinburgh + Single + + + {}} icon="edit"> + Edit + + + + + + Jane Smith + Newcastle + Married + + + {}} icon="edit"> + Edit + + + + + + +)}} + + + ## Props ### FlatTable