@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
39 lines • 2.22 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { Typography, } from '@mui/material';
import { ExpandMore } from '@mui/icons-material';
import { StyledAccordion, StyledAccordionSummary, StyledAccordionDetails } from './Accordion.style';
export const Accordion = ({ items, multiple = false, onChange, expandIcon = _jsx(ExpandMore, {}), bordered = true, size = 'medium', children, title, ...props }) => {
const [expandedPanels, setExpandedPanels] = React.useState([]);
React.useEffect(() => {
if (items) {
const defaultExpanded = items
.filter(item => item.defaultExpanded)
.map(item => item.id);
setExpandedPanels(defaultExpanded);
}
}, [items]);
const handleExpansion = (panelId) => (event, isExpanded) => {
if (multiple) {
setExpandedPanels(prev => isExpanded
? [...prev, panelId]
: prev.filter(id => id !== panelId));
}
else {
setExpandedPanels(isExpanded ? [panelId] : []);
}
if (onChange) {
onChange(panelId, isExpanded);
}
};
// Single accordion usage
if (children && title) {
return (_jsxs(StyledAccordion, { bordered: bordered, size: size, ...props, children: [_jsx(StyledAccordionSummary, { expandIcon: expandIcon, size: size, children: _jsx(Typography, { variant: size === 'large' ? 'h6' : 'body1', children: title }) }), _jsx(StyledAccordionDetails, { size: size, children: children })] }));
}
// Multiple accordions usage
if (!items) {
return null;
}
return (_jsx(_Fragment, { children: items.map((item) => (_jsxs(StyledAccordion, { expanded: expandedPanels.includes(item.id), onChange: handleExpansion(item.id), disabled: item.disabled, bordered: bordered, size: size, ...props, children: [_jsx(StyledAccordionSummary, { expandIcon: expandIcon, size: size, children: _jsx(Typography, { variant: size === 'large' ? 'h6' : 'body1', children: item.title }) }), _jsx(StyledAccordionDetails, { size: size, children: item.content })] }, item.id))) }));
};
//# sourceMappingURL=Accordion.js.map