@elacity-js/uikit/dist/components/Accordion.js

React / Material UI Design kit for Elacity project

import { jsx, jsxs } from 'react/jsx-runtime';
import * as React from 'react';
import classNames from 'classnames';
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
import MuiAccordion from '@mui/material/Accordion';
import MuiAccordionSummary from '@mui/material/AccordionSummary';
import MuiAccordionDetails from '@mui/material/AccordionDetails';

const Container = styled(Box)(({ theme }) => ({
    '& .MuiAccordion-root': {
        '& .MuiAccordionSummary-root': {
            borderRadius: theme.spacing(0),
        },
        '&:first-of-type': {
            borderTopLeftRadius: theme.spacing(2),
            borderTopRightRadius: theme.spacing(2),
            '& .MuiAccordionSummary-root': {
                borderTopLeftRadius: theme.spacing(2),
                borderTopRightRadius: theme.spacing(2),
            },
        },
        '&:last-of-type': {
            borderBottomLeftRadius: theme.spacing(2),
            borderBottomRightRadius: theme.spacing(2),
            '& .MuiAccordionSummary-root': {
                borderBottomLeftRadius: theme.spacing(2),
                borderBottomRightRadius: theme.spacing(2),
            },
            '&.Mui-expanded': {
                '& .MuiAccordionSummary-root': {
                    borderBottomLeftRadius: 0,
                    borderBottomRightRadius: 0,
                },
            },
        },
    },
}));
const Accordion = styled((props) => (jsx(MuiAccordion, Object.assign({ disableGutters: true, elevation: 0, square: true }, props))))(({ theme }) => ({
    border: `1px solid ${theme.palette.divider}`,
    '&:not(:last-child)': {
        borderBottom: 0,
    },
    '&:before': {
        display: 'none',
    },
}));
const AccordionSummary = styled((props) => (jsx(MuiAccordionSummary, Object.assign({ expandIcon: jsx(ArrowForwardIosSharpIcon, { sx: { fontSize: '0.9rem' } }) }, props))))(({ theme }) => ({
    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, .05)' : 'rgba(0, 0, 0, .03)',
    flexDirection: 'row-reverse',
    '&.Mui-expanded': {
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
    },
    '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
        transform: 'rotate(90deg)',
    },
    '& .MuiAccordionSummary-content': {
        marginLeft: theme.spacing(1),
    },
}));
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
    padding: theme.spacing(2),
    borderTop: '1px solid rgba(0, 0, 0, .125)',
}));
const AccordionGroup = ({ elements, opened, readonly }) => {
    const [expanded, setExpanded] = React.useState(typeof opened !== 'undefined' ? `panel${opened}` : null);
    const handleChange = (i) => (event, newExpanded) => {
        if (!readonly) {
            setExpanded(newExpanded ? `panel${i}` : null);
        }
    };
    return (jsx(Container, { children: elements.map(({ title, content }, index) => (jsxs(Accordion, Object.assign({ expanded: expanded === `panel${index}`, onChange: handleChange(index), className: classNames({ expanded }) }, { children: [title && (jsx(AccordionSummary, Object.assign({ "aria-controls": `panel${index}d-content`, id: `panel${index}d-header` }, { children: jsx(Typography, Object.assign({ fontWeight: "bolder" }, { children: title })) }))), jsx(AccordionDetails, { children: content })] }), `$.accordion.${index + 1}`))) }));
};

export { Accordion, AccordionDetails, AccordionGroup, AccordionSummary };
//# sourceMappingURL=Accordion.js.map