@lunit/oui
Version:
Lunit Oncology UI components
28 lines (27 loc) • 3.34 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 { ToggleControlContainer, ToggleControlOuter } from './ToggleControl.styled';
import { AnalysisBar } from '../AnalysisBar';
import { StyledToggle } from '../../components/Toggle/Toggle.styled';
import { PresentationSymbolIcon, PresentationTypography } from '../presentations.styled';
import { FreeText } from '../FreeText';
import { Statistic } from '../Statistic';
import { Tooltip } from '../../components';
import { Information } from '../../icons';
import theme from '../../theme';
const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbol, tooltip = [], content = [], color, isParent = false, disabled = false, bar, checked, isDimmed = false, onChange, }) => {
if (!componentType)
throw new Error("The 'componentType' prop is required.");
if (!title)
throw new Error("The 'title' prop is required.");
if (checked === undefined)
throw new Error("The 'checked' prop is required.");
if (typeof checked !== 'boolean')
throw new Error("The 'checked' prop must be a boolean.");
return (_jsxs(ToggleControlOuter, { "data-testid": `toggle-control-${title?.replace(/\s/g, '-')}`, hasBar: !!bar || !!content.length, style: { marginBottom: isParent ? '4px' : '0' }, children: [_jsxs(ToggleControlContainer, { className: "toggle-inner-container", size: size, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: '6px' }, className: "toggle-label", children: [!!tooltip.length && (_jsx(Tooltip, { arrow: true, size: "large", title: _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, 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: {
display: 'flex',
alignItems: 'center',
}, children: _jsx(Information, {}) }) })), symbol && (_jsx(PresentationSymbolIcon, { symbol: symbol, color: color, isDimmed: isDimmed || !checked })), _jsx(PresentationTypography, { size: size, isDimmed: isDimmed || !checked, children: title })] }), _jsx(StyledToggle, { disabled: disabled || isDimmed, checked: checked, toggleColor: theme.palette.lunitTeal[70], onChange: onChange })] }), content.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: content.map((item) => (_jsx(Statistic, { ...item, isDimmed: isDimmed || !checked }, uuidV4()))) }, uuidV4())), bar && (_jsx(Box, { sx: { padding: '0 8px', fontSize: '14px', lineHeight: '8px', width: '100%' }, children: _jsx(AnalysisBar, { isDimmed: isDimmed || !checked, componentType: bar.componentType, expressionValue: bar.expressionValue, expressionLevels: bar.expressionLevels, expressionLabels: bar.expressionLabels, caption: bar.caption, segments: bar.segments }) }))] }));
};
export default ToggleControl;