Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(flat-table-header): add displayName to component FE-5208 #5214

Merged
merged 5 commits into from
Jun 17, 2022
Merged

chore(flat-table-header): add displayName to component FE-5208 #5214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
45dd62d
chore(flat-table-header): add displayName to component
edleeks87 Jun 9, 2022
07695a2
chore(flat-table-cell): add displayName to component
edleeks87 Jun 9, 2022
7641d40
chore(flat-table-row-header): add displayName to component
edleeks87 Jun 9, 2022
80526ac
chore(flat-table-checkbox): add displayName to component
edleeks87 Jun 9, 2022
d15cb0d
fix(flat-table-row): update sticky column functionality to support wr…
edleeks87 Jun 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/components/flat-table/flat-table-cell/flat-table-cell.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,4 +126,6 @@ FlatTableCell.propTypes = {
verticalBorderColor: PropTypes.string,
};

FlatTableCell.displayName = "FlatTableCell";

export default FlatTableCell;
2 changes: 2 additions & 0 deletions src/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,4 +91,6 @@ FlatTableCheckbox.propTypes = {
reportCellWidth: PropTypes.func,
};

FlatTableCheckbox.displayName = "FlatTableCheckbox";

export default FlatTableCheckbox;
2 changes: 2 additions & 0 deletions src/components/flat-table/flat-table-header/flat-table-header.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,4 +89,6 @@ FlatTableHeader.defaultProps = {
align: "left",
};

FlatTableHeader.displayName = "FlatTableHeader";

export default FlatTableHeader;
2 changes: 2 additions & 0 deletions src/components/flat-table/flat-table-row-header/flat-table-row-header.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,4 +90,6 @@ FlatTableRowHeader.propTypes = {
verticalBorderColor: PropTypes.string,
};

FlatTableRowHeader.displayName = "FlatTableRowHeader";

export default FlatTableRowHeader;
13 changes: 10 additions & 3 deletions src/components/flat-table/flat-table-row/flat-table-row.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, {
useContext,
useEffect,
useLayoutEffect,
useMemo,
useRef,
useState,
} from "react";
Expand Down Expand Up @@ -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);

Expand Down
28 changes: 28 additions & 0 deletions src/components/flat-table/flat-table-row/flat-table-row.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
81 changes: 81 additions & 0 deletions src/components/flat-table/flat-table.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down