Merge pull request #5214 from Sage/FE-5208-wrapping-sticky-col

chore(flat-table-header): add displayName to component FE-5208
Sage · Jun 17, 2022 · a805622 · a805622
2 parents aa59e32 + d15cb0d
commit a805622
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 3 deletions.
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
@@ -126,4 +126,6 @@ FlatTableCell.propTypes = {
   verticalBorderColor: PropTypes.string,
 };
 
+FlatTableCell.displayName = "FlatTableCell";
+
 export default FlatTableCell;
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
@@ -91,4 +91,6 @@ FlatTableCheckbox.propTypes = {
   reportCellWidth: PropTypes.func,
 };
 
+FlatTableCheckbox.displayName = "FlatTableCheckbox";
+
 export default FlatTableCheckbox;
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
@@ -89,4 +89,6 @@ FlatTableHeader.defaultProps = {
   align: "left",
 };
 
+FlatTableHeader.displayName = "FlatTableHeader";
+
 export default FlatTableHeader;
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
@@ -90,4 +90,6 @@ FlatTableRowHeader.propTypes = {
   verticalBorderColor: PropTypes.string,
 };
 
+FlatTableRowHeader.displayName = "FlatTableRowHeader";
+
 export default FlatTableRowHeader;
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
@@ -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
@@ -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 }) => (
+        <FlatTableRowHeader>{children}</FlatTableRowHeader>
+      );
+      FlatTableRowHeaderWrapper.displayName = FlatTableRowHeader.displayName;
+      const rowHeaderIndex = mount(
+        <table>
+          <thead>
+            <FlatTableRow>
+              <FlatTableCell>Foo</FlatTableCell>
+              <FlatTableCell>Foo</FlatTableCell>
+              <FlatTableCell>Foo</FlatTableCell>
+              <FlatTableRowHeaderWrapper>Foo</FlatTableRowHeaderWrapper>
+              <FlatTableCell>Foo</FlatTableCell>
+              <FlatTableCell>Foo</FlatTableCell>
+            </FlatTableRow>
+          </thead>
+        </table>
+      )
+        .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
@@ -2159,6 +2159,87 @@ of the button control.
   </Story>
 </Canvas>
 
+## 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`.
+
+<Canvas>
+  <Story
+    name="wrapping row headers"
+    parameters={{ chromatic: { disable: true } }}
+  >
+    {() => {
+      const FlatTableRowHeaderWrapper = ({ children, ...rest }) => (
+        <FlatTableRowHeader {...rest}>
+          {children}
+        </FlatTableRowHeader>
+      );
+      FlatTableRowHeaderWrapper.displayName = FlatTableRowHeader.displayName
+      return (
+        <FlatTable width="310px" overflowX="auto">
+          <FlatTableHead>
+            <FlatTableRow>
+              <FlatTableHeader>Name</FlatTableHeader>
+              <FlatTableRowHeaderWrapper>Location</FlatTableRowHeaderWrapper>
+              <FlatTableHeader>Relationship Status</FlatTableHeader>
+              <FlatTableHeader>Dependents</FlatTableHeader>
+            </FlatTableRow>
+          </FlatTableHead>
+          <FlatTableBody>
+            <FlatTableRow>
+              <FlatTableCell>John Doe</FlatTableCell>
+              <FlatTableRowHeaderWrapper>London</FlatTableRowHeaderWrapper>
+              <FlatTableCell>Single</FlatTableCell>
+              <FlatTableCell>
+                <ActionPopover>
+                  <ActionPopoverItem onClick={() => {}} icon="edit">
+                    Edit
+                  </ActionPopoverItem>
+                </ActionPopover>
+              </FlatTableCell>
+            </FlatTableRow>
+            <FlatTableRow>
+              <FlatTableCell>Jane Doe</FlatTableCell>
+              <FlatTableRowHeaderWrapper>York</FlatTableRowHeaderWrapper>
+              <FlatTableCell>Married</FlatTableCell>
+              <FlatTableCell>
+                <ActionPopover>
+                  <ActionPopoverItem onClick={() => {}} icon="edit">
+                    Edit
+                  </ActionPopoverItem>
+                </ActionPopover>
+              </FlatTableCell>
+            </FlatTableRow>
+            <FlatTableRow>
+              <FlatTableCell>John Smith</FlatTableCell>
+              <FlatTableRowHeaderWrapper>Edinburgh</FlatTableRowHeaderWrapper>
+              <FlatTableCell>Single</FlatTableCell>
+              <FlatTableCell>
+                <ActionPopover>
+                  <ActionPopoverItem onClick={() => {}} icon="edit">
+                    Edit
+                  </ActionPopoverItem>
+                </ActionPopover>
+              </FlatTableCell>
+            </FlatTableRow>
+            <FlatTableRow>
+              <FlatTableCell>Jane Smith</FlatTableCell>
+              <FlatTableRowHeaderWrapper>Newcastle</FlatTableRowHeaderWrapper>
+              <FlatTableCell>Married</FlatTableCell>
+              <FlatTableCell>
+                <ActionPopover>
+                  <ActionPopoverItem onClick={() => {}} icon="edit">
+                    Edit
+                  </ActionPopoverItem>
+                </ActionPopover>
+              </FlatTableCell>
+            </FlatTableRow>
+          </FlatTableBody>
+        </FlatTable>
+)}}
+  </Story>
+</Canvas>
+
 ## Props
 
 ### FlatTable