norma-library/dist/esm/components/Accordion.js

Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.

import { __assign, __rest } from "tslib";
import React from 'react';
import { AccordionDetails, AccordionSummary, Accordion as MuiAccordion, Typography } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { styled } from '@mui/material/styles';
var AccordionStyled = styled(MuiAccordion)({});
export var Accordion = function (_a) {
    var _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.defaultExpanded, defaultExpanded = _c === void 0 ? false : _c, props = __rest(_a, ["data", "defaultExpanded"]);
    var _d = React.useState(defaultExpanded), expanded = _d[0], setExpanded = _d[1];
    var handleChange = function (panel) { return function (event, isExpanded) {
        console.log('Event ==> ', event);
        setExpanded(isExpanded ? panel : false);
    }; };
    return (React.createElement(React.Fragment, null, data &&
        data.map(function (item, key) { return (React.createElement(AccordionStyled, __assign({ expanded: expanded === item.id, onChange: handleChange(item.id), key: key }, props),
            React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, null), "aria-controls": "panel-".concat(key, "-content"), id: "panel-".concat(key, "-header") },
                React.createElement(Typography, { sx: { width: '66%', flexShrink: 0 } }, item.label)),
            React.createElement(AccordionDetails, null, item.children))); })));
};
//# sourceMappingURL=Accordion.js.map