mirror of
https://github.com/grafana/grafana.git
synced 2025-08-02 06:42:13 +08:00
Grafana UI: Hide CollapsableSection children instead of unmounting based on unmountContentWhenClosed
prop (#102937)
This commit is contained in:
@ -22,6 +22,7 @@ export interface Props {
|
||||
labelId?: string;
|
||||
headerDataTestId?: string;
|
||||
contentDataTestId?: string;
|
||||
unmountContentWhenClosed?: boolean;
|
||||
}
|
||||
|
||||
export const CollapsableSection = ({
|
||||
@ -35,6 +36,7 @@ export const CollapsableSection = ({
|
||||
loading = false,
|
||||
headerDataTestId,
|
||||
contentDataTestId,
|
||||
unmountContentWhenClosed = true,
|
||||
}: Props) => {
|
||||
const [open, toggleOpen] = useState<boolean>(isOpen);
|
||||
const styles = useStyles2(collapsableSectionStyles);
|
||||
@ -54,6 +56,18 @@ export const CollapsableSection = ({
|
||||
|
||||
const buttonLabelId = labelId ?? `collapse-label-${id}`;
|
||||
|
||||
const content = (
|
||||
<div
|
||||
id={`collapse-content-${id}`}
|
||||
className={cx(styles.content, contentClassName, {
|
||||
[styles.contentHidden]: !open && !unmountContentWhenClosed,
|
||||
})}
|
||||
data-testid={contentDataTestId}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* disabling the a11y rules here as the button handles keyboard interactions */}
|
||||
@ -79,15 +93,7 @@ export const CollapsableSection = ({
|
||||
{label}
|
||||
</div>
|
||||
</div>
|
||||
{open && (
|
||||
<div
|
||||
id={`collapse-content-${id}`}
|
||||
className={cx(styles.content, contentClassName)}
|
||||
data-testid={contentDataTestId}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
{unmountContentWhenClosed ? open && content : content}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -119,6 +125,9 @@ const collapsableSectionStyles = (theme: GrafanaTheme2) => ({
|
||||
content: css({
|
||||
padding: `${theme.spacing(2)} 0`,
|
||||
}),
|
||||
contentHidden: css({
|
||||
display: 'none',
|
||||
}),
|
||||
spinner: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
Reference in New Issue
Block a user