@lunit/oui
Version:
Lunit Oncology UI components
28 lines (27 loc) • 2.89 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { v4 as uuidV4 } from 'uuid';
import { Box } from '@mui/material';
import theme from '../../theme';
import { ArrowDown, Information } from '../../icons';
import { Tooltip } from '../../components';
import { BaseAccordion, BaseAccordionDetails, BaseAccordionSummary } from './Accordion.styled';
import { PresentationTypography } from '../presentations.styled';
import { FreeText } from '../FreeText';
import { Statistic } from '../Statistic';
import { Score } from '../Score';
const Accordion = ({ componentType = 'accordion', MuiAccordionProps, AccordionDetailsProps, AccordionSummaryProps, size = 'medium', tooltip = [], title, items, metrics, isOpen, onChange, }) => {
if (!componentType)
throw new Error("The 'componentType' prop is required.");
if (!title)
throw new Error("The 'title' prop is required.");
if (!items.length)
throw new Error("The 'items' prop must contain at least one item.");
return (_jsxs(BaseAccordion, { ...MuiAccordionProps, expanded: isOpen, onChange: onChange, sx: { alignItems: 'center' }, children: [_jsxs(BaseAccordionSummary, { expandIcon: _jsx(ArrowDown, { sx: { fill: theme.palette.neutralGrey[40] } }), ...AccordionSummaryProps, children: [!!tooltip.length && (_jsx(Tooltip, { arrow: true, size: "large", onClick: (event) => event.stopPropagation(), title: _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, onClick: (event) => event.stopPropagation(), children: tooltip.map((item) => (_jsxs(Box, { children: [item.componentType === 'freeText' && (_jsx(FreeText, { componentType: item.componentType, size: item.size, content: item.content })), item.componentType === 'statistic' && (_jsx(Statistic, { componentType: item.componentType, title: item.title, size: item.size, layout: item.layout, symbol: item.symbol, color: item.color }))] }, uuidV4()))) }), children: _jsx(Box, { sx: {
marginRight: size.includes('small') ? '4px' : '6px',
display: 'flex',
alignItems: 'center',
}, children: _jsx(Information, {}) }) })), _jsx(PresentationTypography, { size: size, children: title }), metrics && (_jsx(PresentationTypography, { size: size, children: _jsxs(Box, { sx: { marginLeft: '4px' }, children: [": ", metrics] }) }))] }), _jsx(BaseAccordionDetails, { ...AccordionDetailsProps, sx: { display: 'flex', flexDirection: 'column', gap: '14px' }, children: items.map((item) => {
return (_jsxs("div", { children: [item.componentType === 'statistic' && _jsx(Statistic, { ...item }), item.componentType === 'freeText' && _jsx(FreeText, { ...item }), item.componentType === 'score' && _jsx(Score, { ...item })] }, uuidV4()));
}) })] }));
};
export default Accordion;