@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
33 lines • 1.82 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { makeStyles } from "@fluentui/react-components";
import { ChevronRightRegular } from "@fluentui/react-icons";
import * as React from 'react';
import { KnownClassNames } from "../styles/styles";
import { ButtonEX } from "./button";
import { DividerEX } from "./divider";
import { Horizontal } from "./horizontal";
import { Vertical } from "./vertical";
const useStyles = makeStyles({
opened: {
transform: "rotate(90deg)",
transition: "transform 200ms ease-out"
},
header: {
paddingLeft: 0
},
root: {
maxHeight: "100%"
},
rootFill: {
minHeight: "100%"
},
body: {
overflow: "auto",
}
});
export const AccordionEX = (props) => {
const classes = useStyles();
const [opened, setOpened] = React.useState(props.opened || props.groups[0].key);
return (_jsx(Vertical, { main: true, css: [classes.root, props.fillHeight && classes.rootFill, KnownClassNames.accordion], children: props.groups.map(group => _jsxs(React.Fragment, { children: [_jsx(ButtonEX, { className: `${classes.header} ${KnownClassNames.accordionHeader} ${opened === group.key ? ` ${KnownClassNames.isOpen}` : ''}`, icon: _jsx(ChevronRightRegular, { className: opened === group.key ? classes.opened : '' }), title: group.title, showTitleWithIcon: true, dontCenterText: true, onClick: () => setOpened(group.key) }), _jsx(DividerEX, {}), group.key === opened && _jsxs(_Fragment, { children: [_jsx(Horizontal, { main: true, css: [classes.body, KnownClassNames.accordionBodyWrapper], children: _jsx(Vertical, { main: true, css: [KnownClassNames.accordionBody], children: group.content }) }), _jsx(DividerEX, {})] })] }, group.key)) }));
};
//# sourceMappingURL=accordion.js.map