mod-arch-shared
Version:
Shared UI components and utilities for modular architecture micro-frontend projects
28 lines • 1.87 kB
JavaScript
import * as React from 'react';
import { Button, Flex, FlexItem, Content, ContentVariants } from '@patternfly/react-core';
import { AngleDownIcon, AngleRightIcon } from '@patternfly/react-icons';
const CollapsibleSection = ({ open, setOpen, title, titleVariant = ContentVariants.h2, children, id, showChildrenWhenClosed, }) => {
const [innerOpen, setInnerOpen] = React.useState(true);
const localId = id || title.replace(/ /g, '-');
const titleId = `${localId}-title`;
return (React.createElement(React.Fragment, null,
React.createElement(Flex, { gap: { default: 'gapMd' }, alignItems: { default: 'alignItemsCenter' }, style: (open ?? innerOpen) || showChildrenWhenClosed
? {
marginBottom: 'var(--pf-t--global--spacer--md)',
}
: undefined },
React.createElement(FlexItem, null,
React.createElement(Button, { icon: (open ?? innerOpen) ? React.createElement(AngleDownIcon, null) : React.createElement(AngleRightIcon, null), "aria-labelledby": titleId, "aria-expanded": open, variant: "plain", style: {
paddingLeft: 0,
paddingRight: 0,
fontSize: titleVariant === ContentVariants.h2
? 'var(--pf-v6-global--FontSize--xl)'
: 'var(--pf-v6-global--FontSize--2xl)',
}, onClick: () => (setOpen ? setOpen(!open) : setInnerOpen((prev) => !prev)) })),
React.createElement(FlexItem, null,
React.createElement(Content, null,
React.createElement(Content, { id: titleId, component: titleVariant }, title)))),
(open ?? innerOpen) || showChildrenWhenClosed ? children : null));
};
export default CollapsibleSection;
//# sourceMappingURL=CollapsibleSection.js.map