Skip to content

Commit

Permalink
chore: pr comments part deux
Browse files Browse the repository at this point in the history
  • Loading branch information
@edleeks87
edleeks87 committed Aug 22, 2023
1 parent 3b99c23 commit 4dfc828
Show file tree
Hide file tree
Showing 7 changed files with 78 additions and 117 deletions.
6 changes: 2 additions & 4 deletions src/components/flat-table/__internal__/build-position-map.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export default (
array: Element[],
array: HTMLElement[],
propertyName: "offsetWidth" | "offsetHeight"
) =>
array.reduce((acc: Record<string, number>, _, index) => {
Expand All @@ -10,9 +10,7 @@ export default (
} else {
const previousId = array[index - 1].getAttribute("id");
if (previousId) {
acc[currentId] =
acc[previousId] +
(array[index - 1] as HTMLTableCellElement)[propertyName];
acc[currentId] = acc[previousId] + array[index - 1][propertyName];
}
}
}
Expand Down
2 changes: 0 additions & 2 deletions src/components/flat-table/__internal__/use-calculate-sticky-cells.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ export default (id: string) => {

return {
expandable,
firstCellId,
firstColumnExpandable,
leftPosition,
rightPosition,
makeCellSticky,
Expand Down
4 changes: 2 additions & 2 deletions src/components/flat-table/flat-table-header/flat-table-header.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,8 +142,8 @@ describe("FlatTableHeader", () => {
}
);

describe("when colspan and rowSpan are set", () => {
it("should set be set on the underlying element", () => {
describe("when colspan and rowSpan are passed", () => {
it("should be set on the underlying element", () => {
const wrapper = mount(
<table>
<thead>
Expand Down
1 change: 0 additions & 1 deletion src/components/flat-table/flat-table-row-header/flat-table-row-header.component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, {
useCallback,
// useLayoutEffect,
useContext,
useState,
useRef,
Expand Down
6 changes: 4 additions & 2 deletions src/components/flat-table/flat-table-row/flat-table-row.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const FlatTableRow = React.forwardRef<
}: FlatTableRowProps,
ref
) => {
const internalId = useRef(String(id ?? guid()));
const internalId = useRef(id ? String(id) : guid());
const [isExpanded, setIsExpanded] = useState(expanded);
let rowRef = useRef<HTMLTableRowElement>(null);
if (ref) {
Expand Down Expand Up @@ -121,7 +121,9 @@ export const FlatTableRow = React.forwardRef<
return updatedKeys.some((key) => updated[key] !== current[key]);
};

const cells = rowRef.current?.querySelectorAll("th, td");
const cells = rowRef.current?.querySelectorAll("th, td") as
| NodeListOf<HTMLTableCellElement>
| undefined;

const cellArray = Array.from(cells || []);
setCellsArray(cellArray);
Expand Down
58 changes: 0 additions & 58 deletions src/components/flat-table/flat-table.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,64 +206,6 @@ describe("FlatTable", () => {
});
});

describe("when it has a sticky header with multiple rows", () => {
let wrapper: ReactWrapper;

const render = () => {
wrapper = mount(
<div style={{ height: "200px" }}>
<FlatTable hasStickyHead>
<FlatTableHead>
<FlatTableRow>
<FlatTableHeader>header1</FlatTableHeader>
<FlatTableHeader>header2</FlatTableHeader>
<FlatTableHeader>header3</FlatTableHeader>
<FlatTableHeader>header4</FlatTableHeader>
</FlatTableRow>
</FlatTableHead>
<FlatTableBody>
<FlatTableRow>
<FlatTableRowHeader>row header</FlatTableRowHeader>
<FlatTableCell>cell1</FlatTableCell>
<FlatTableCell>cell2</FlatTableCell>
<FlatTableCell rowspan="2">cell3</FlatTableCell>
</FlatTableRow>
<FlatTableRow>
<FlatTableRowHeader>row header</FlatTableRowHeader>
<FlatTableCell colspan="2">cell1</FlatTableCell>
</FlatTableRow>
</FlatTableBody>
</FlatTable>
</div>
);
};

beforeEach(() => {
render();
});

afterEach(() => {
wrapper.unmount();
});

it("should set the correct 'top' css on each row", () => {
act(() => render());
wrapper.update();

expect(
wrapper.find(StyledFlatTableRow).at(0).props().stickyOffset
).toEqual(0);

assertStyleMatch(
{
top: "0px",
},
wrapper.find(StyledFlatTableHead).find(StyledFlatTableRow).at(0),
{ modifier: `&& th` }
);
});
});

describe("when FlatTable is a child of Sidebar", () => {
let wrapper: ReactWrapper;
beforeEach(() => {
Expand Down
118 changes: 70 additions & 48 deletions src/components/flat-table/flat-table.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,54 +39,76 @@ type SelectedRows = {
type SelectedRow = keyof SelectedRows;
type HighlightedRow = "one" | "two" | "three" | "four" | "";

export const DefaultStory: ComponentStory<typeof FlatTable> = () => {
const [update, setUpdate] = React.useState(false);

React.useEffect(() => {
setTimeout(() => setUpdate(true), 1000);
}, []);
return (
<FlatTable height={400} hasStickyHead hasStickyFooter>
<FlatTableHead>
<FlatTableRow>
<FlatTableHeader width={60}>Name</FlatTableHeader>
<FlatTableHeader>Location</FlatTableHeader>
<FlatTableHeader>Relationship Status</FlatTableHeader>
<FlatTableHeader>Dependents</FlatTableHeader>
</FlatTableRow>
</FlatTableHead>
<FlatTableBody>
{!update && (
<FlatTableRow>
<FlatTableCell>no update</FlatTableCell>
</FlatTableRow>
)}
{update && (
<>
<FlatTableRow onClick={() => {}}>
<FlatTableCell>foo</FlatTableCell>
<FlatTableCell>London</FlatTableCell>
<FlatTableCell>Single</FlatTableCell>
<FlatTableCell>0</FlatTableCell>
</FlatTableRow>
<FlatTableRow onClick={() => {}}>
<FlatTableCell>foo</FlatTableCell>
<FlatTableCell>York</FlatTableCell>
<FlatTableCell>Married</FlatTableCell>
<FlatTableCell>2</FlatTableCell>
</FlatTableRow>
<FlatTableRow onClick={() => {}}>
<FlatTableCell>foo</FlatTableCell>
<FlatTableCell>Edinburgh</FlatTableCell>
<FlatTableCell>Single</FlatTableCell>
<FlatTableCell>1</FlatTableCell>
</FlatTableRow>
</>
)}
</FlatTableBody>
</FlatTable>
);
};
export const DefaultStory: ComponentStory<typeof FlatTable> = () => (
<FlatTable>
<FlatTableHead>
<FlatTableRow>
<FlatTableHeader>
<Box
justifyContent="space-between"
alignItems="center"
display="flex"
>
Name <Icon type="individual" color="white" />
</Box>
</FlatTableHeader>
<FlatTableHeader>
<Box
justifyContent="space-between"
alignItems="center"
display="flex"
>
Location <Icon type="location" color="white" />
</Box>
</FlatTableHeader>
<FlatTableHeader>
<Box
justifyContent="space-between"
alignItems="center"
display="flex"
>
Relationship Status <Icon type="person_info" color="white" />
</Box>
</FlatTableHeader>
<FlatTableHeader>
<Box
justifyContent="space-between"
alignItems="center"
display="flex"
>
Dependents <Icon type="people" color="white" />
</Box>
</FlatTableHeader>
</FlatTableRow>
</FlatTableHead>
<FlatTableBody>
<FlatTableRow>
<FlatTableCell>John Doe</FlatTableCell>
<FlatTableCell>London</FlatTableCell>
<FlatTableCell>Single</FlatTableCell>
<FlatTableCell>0</FlatTableCell>
</FlatTableRow>
<FlatTableRow>
<FlatTableCell>Jane Doe</FlatTableCell>
<FlatTableCell>York</FlatTableCell>
<FlatTableCell>Married</FlatTableCell>
<FlatTableCell>2</FlatTableCell>
</FlatTableRow>
<FlatTableRow>
<FlatTableCell>John Smith</FlatTableCell>
<FlatTableCell>Edinburgh</FlatTableCell>
<FlatTableCell>Single</FlatTableCell>
<FlatTableCell>1</FlatTableCell>
</FlatTableRow>
<FlatTableRow>
<FlatTableCell>Jane Smith</FlatTableCell>
<FlatTableCell>Newcastle</FlatTableCell>
<FlatTableCell>Married</FlatTableCell>
<FlatTableCell>5</FlatTableCell>
</FlatTableRow>
</FlatTableBody>
</FlatTable>
);

DefaultStory.storyName = "default";

Expand Down

0 comments on commit 4dfc828

Please sign in to comment.