Skip to content

Commit

Permalink
chore: temp
Browse files Browse the repository at this point in the history
  • Loading branch information
@edleeks87
edleeks87 committed Jun 9, 2022
1 parent d28b2a1 commit 7434fc8
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 37 deletions.
2 changes: 2 additions & 0 deletions src/components/flat-table/flat-table-row-header/flat-table-row-header.component.js
View file
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;
2 changes: 1 addition & 1 deletion src/components/flat-table/flat-table-row/flat-table-row.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const FlatTableRow = React.forwardRef(
const [leftPositions, setLeftPositions] = useState([]);
const childrenArray = React.Children.toArray(children);
const rowHeaderIndex = childrenArray.findIndex(
(child) => child.type === FlatTableRowHeader
(child) => child.type.displayName === FlatTableRowHeader.displayName
);
const themeContext = useContext(FlatTableThemeContext);

Expand Down
153 changes: 117 additions & 36 deletions src/components/flat-table/flat-table.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,42 +77,123 @@ const FlatTableCellWrapper = ({ customProp, ...rest }) => {

<Canvas>
<Story name="default">
<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>
{() => {
const WrapperComponent = ({ children, isHeader, ...rest }) => {
if (isHeader) return <FlatTableHeader {...rest}>{children}</FlatTableHeader>;

return <FlatTableCell {...rest}>{children}</FlatTableCell>;
};
const StickyWrapperComponent = ({ children, ...rest }) => (
<FlatTableRowHeader {...rest}>
{children}
</FlatTableRowHeader>
);
StickyWrapperComponent.displayName = "FlatTableRowHeader"
StickyWrapperComponent.carbonName = "FlatTableRowHeader"
return (
<FlatTable hasStickyHead height="380px" width="310px" overflowX="auto">
<FlatTableHead>
<FlatTableRow>
<WrapperComponent isHeader rowSpan={2}>
Name
</WrapperComponent>
<StickyWrapperComponent rowSpan={2}>
Code
</StickyWrapperComponent>
<WrapperComponent isHeader colspan={2}>
Jun 21
</WrapperComponent>
<WrapperComponent isHeader rowSpan={2}></WrapperComponent>
<WrapperComponent isHeader colspan={2}>
YTD
</WrapperComponent>
</FlatTableRow>
</FlatTableHead>
<FlatTableBody>
<FlatTableRow>
<WrapperComponent>John Doe</WrapperComponent>
<StickyWrapperComponent>000001</StickyWrapperComponent>
<WrapperComponent>London</WrapperComponent>
<WrapperComponent>Single</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
</FlatTableRow>
<FlatTableRow>
<WrapperComponent>John Doe</WrapperComponent>
<StickyWrapperComponent>000001</StickyWrapperComponent>
<WrapperComponent>London</WrapperComponent>
<WrapperComponent>Single</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
</FlatTableRow>
<FlatTableRow>
<WrapperComponent>John Doe</WrapperComponent>
<StickyWrapperComponent>000001</StickyWrapperComponent>
<WrapperComponent>London</WrapperComponent>
<WrapperComponent>Single</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
</FlatTableRow>
<FlatTableRow>
<WrapperComponent>John Doe</WrapperComponent>
<StickyWrapperComponent>000001</StickyWrapperComponent>
<WrapperComponent>London</WrapperComponent>
<WrapperComponent>Single</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
</FlatTableRow>
<FlatTableRow>
<WrapperComponent>John Doe</WrapperComponent>
<StickyWrapperComponent>000001</StickyWrapperComponent>
<WrapperComponent>London</WrapperComponent>
<WrapperComponent>Single</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
</FlatTableRow>
<FlatTableRow>
<WrapperComponent>John Doe</WrapperComponent>
<StickyWrapperComponent>000001</StickyWrapperComponent>
<WrapperComponent>London</WrapperComponent>
<WrapperComponent>Single</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
</FlatTableRow>
<FlatTableRow>
<WrapperComponent>John Doe</WrapperComponent>
<StickyWrapperComponent>000001</StickyWrapperComponent>
<WrapperComponent>London</WrapperComponent>
<WrapperComponent>Single</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
</FlatTableRow>
<FlatTableRow>
<WrapperComponent>John Doe</WrapperComponent>
<StickyWrapperComponent>000001</StickyWrapperComponent>
<WrapperComponent>London</WrapperComponent>
<WrapperComponent>Single</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
</FlatTableRow>
<FlatTableRow>
<WrapperComponent>John Doe</WrapperComponent>
<StickyWrapperComponent>000001</StickyWrapperComponent>
<WrapperComponent>London</WrapperComponent>
<WrapperComponent>Single</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
<WrapperComponent>0</WrapperComponent>
</FlatTableRow>
</FlatTableBody>
</FlatTable>
)}}
</Story>
</Canvas>

Expand Down

0 comments on commit 7434fc8

Please sign in to comment.