52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { useSegmentationTableContext } from './SegmentationTableContext';
|
|
import { PanelSection } from '../PanelSection';
|
|
import { SegmentationHeader } from './SegmentationHeader';
|
|
import { SegmentationTable } from './SegmentationTable';
|
|
|
|
export const SegmentationExpanded: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
|
|
const { data } = useSegmentationTableContext('SegmentationExpanded');
|
|
|
|
// Separate the Header component from other children
|
|
const headerComponent = React.Children.toArray(children).find(
|
|
child => React.isValidElement(child) && child.type === SegmentationTable.Header
|
|
);
|
|
const otherChildren = React.Children.toArray(children).filter(
|
|
child => !(React.isValidElement(child) && child.type === SegmentationTable.Header)
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{data.map(segmentationInfo => (
|
|
<PanelSection key={segmentationInfo.segmentation.segmentationId}>
|
|
<PanelSection.Header className="border-input border-t-2 bg-transparent pl-1">
|
|
{headerComponent ? (
|
|
React.cloneElement(headerComponent as React.ReactElement, {
|
|
segmentation: segmentationInfo.segmentation,
|
|
representation: segmentationInfo.representation,
|
|
})
|
|
) : (
|
|
<SegmentationHeader
|
|
segmentation={segmentationInfo.segmentation}
|
|
representation={segmentationInfo.representation}
|
|
/>
|
|
)}
|
|
</PanelSection.Header>
|
|
<PanelSection.Content>
|
|
<div className="segmentation-expanded-section">
|
|
{React.Children.map(otherChildren, child =>
|
|
React.isValidElement(child)
|
|
? React.cloneElement(child, {
|
|
segmentation: segmentationInfo.segmentation,
|
|
representation: segmentationInfo.representation,
|
|
})
|
|
: child
|
|
)}
|
|
</div>
|
|
</PanelSection.Content>
|
|
</PanelSection>
|
|
))}
|
|
</>
|
|
);
|
|
};
|