347 lines
9.7 KiB
JavaScript
347 lines
9.7 KiB
JavaScript
import { PureComponent } from 'react';
|
|
import Badge from '@mui/material/Badge';
|
|
import Box from '@mui/material/Box';
|
|
import ClickAwayListener from '@mui/material/ClickAwayListener';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Paper from '@mui/material/Paper';
|
|
import Popper from '@mui/material/Popper';
|
|
import Typography from '@mui/material/Typography';
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import helpAutomat from '../automats/helpAutomat';
|
|
import {
|
|
RED,
|
|
RED_HOVER,
|
|
SHADOW_BADGE,
|
|
SHADOW_POPOVER,
|
|
WHITE,
|
|
} from '../colors';
|
|
|
|
let nextHelpBadgeId = 0;
|
|
|
|
/**
|
|
* Reusable reactive badge that appears on UI elements (navigation icons, tabs, etc.)
|
|
* when systemwide Help mode is enabled via helpAutomat.
|
|
*
|
|
* Can wrap an element (using MUI Badge) or render standalone with custom positioning.
|
|
* The badge is circular, red, and stays firmly in place.
|
|
* Clicking the "?" badge opens an explanatory Popper anchored to the badge.
|
|
* Only one help popper can be open at a time across the entire system.
|
|
* When Help mode is disabled, it transparently renders its children (or null) with zero overhead.
|
|
*/
|
|
class HelpBadge extends PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.badgeRef = null;
|
|
this.helpId = props.id || `${props.title || 'help'}_${++nextHelpBadgeId}`;
|
|
|
|
const isInitiallyOpen = Boolean(
|
|
helpAutomat.state?.enabled &&
|
|
helpAutomat.state?.activeHelpId &&
|
|
helpAutomat.state.activeHelpId === this.helpId
|
|
);
|
|
|
|
this.state = {
|
|
enabled: helpAutomat.state?.enabled ?? false,
|
|
isOpen: isInitiallyOpen,
|
|
anchorEl: null,
|
|
};
|
|
|
|
this.handleBadgeClick = this.handleBadgeClick.bind(this);
|
|
this.handleBadgeKeyDown = this.handleBadgeKeyDown.bind(this);
|
|
this.handleClosePopper = this.handleClosePopper.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.unsub = helpAutomat.subscribe(this, (state) => {
|
|
const enabled = Boolean(state?.enabled);
|
|
const isOpen = Boolean(enabled && state?.activeHelpId && state.activeHelpId === this.helpId);
|
|
return {
|
|
enabled,
|
|
isOpen,
|
|
anchorEl: isOpen ? (this.badgeRef || this.state.anchorEl) : null,
|
|
};
|
|
});
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (this.state.isOpen) {
|
|
helpAutomat.actions.closePopper();
|
|
}
|
|
this.unsub?.();
|
|
this.unsub = null;
|
|
}
|
|
|
|
handleBadgeClick(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
const currentTarget = event.currentTarget;
|
|
this.badgeRef = currentTarget;
|
|
this.setState({ anchorEl: currentTarget }, () => {
|
|
helpAutomat.actions.togglePopper(this.helpId);
|
|
});
|
|
}
|
|
|
|
handleBadgeKeyDown(event) {
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
const currentTarget = event.currentTarget;
|
|
this.badgeRef = currentTarget;
|
|
this.setState({ anchorEl: currentTarget }, () => {
|
|
helpAutomat.actions.togglePopper(this.helpId);
|
|
});
|
|
} else if (event.key === 'Escape' && this.state.isOpen) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
helpAutomat.actions.closePopper();
|
|
}
|
|
}
|
|
|
|
handleClosePopper(event) {
|
|
if (this.badgeRef && event?.target && this.badgeRef.contains(event.target)) {
|
|
return;
|
|
}
|
|
if (this.state.isOpen) {
|
|
helpAutomat.actions.closePopper();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { enabled, isOpen, anchorEl } = this.state;
|
|
const {
|
|
children,
|
|
title,
|
|
text,
|
|
help,
|
|
placement = 'right-start',
|
|
badgeContent = '?',
|
|
anchorOrigin = { vertical: 'top', horizontal: 'right' },
|
|
badgeSx,
|
|
sx,
|
|
} = this.props;
|
|
|
|
const helpText = text || help;
|
|
|
|
if (!enabled || !helpText) {
|
|
return children ?? null;
|
|
}
|
|
|
|
const currentAnchor = anchorEl || this.badgeRef;
|
|
const isPopperVisible = Boolean(isOpen && currentAnchor);
|
|
|
|
const popperElement = (
|
|
<Popper
|
|
open={isPopperVisible}
|
|
anchorEl={currentAnchor}
|
|
placement={placement}
|
|
disablePortal={false}
|
|
modifiers={[
|
|
{
|
|
name: 'offset',
|
|
options: {
|
|
offset: [0, 8],
|
|
},
|
|
},
|
|
{
|
|
name: 'preventOverflow',
|
|
options: {
|
|
boundary: 'viewport',
|
|
padding: 8,
|
|
},
|
|
},
|
|
]}
|
|
sx={{ zIndex: 1400 }}
|
|
>
|
|
<ClickAwayListener onClickAway={this.handleClosePopper}>
|
|
<Paper
|
|
elevation={8}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Escape') this.handleClosePopper(e);
|
|
}}
|
|
sx={{
|
|
p: 1.5,
|
|
width: 260,
|
|
maxWidth: 'calc(100vw - 32px)',
|
|
bgcolor: 'background.paper',
|
|
borderRadius: 2,
|
|
border: '1px solid',
|
|
borderColor: 'divider',
|
|
boxShadow: SHADOW_POPOVER,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
mb: 0.75,
|
|
gap: 1,
|
|
}}
|
|
>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, minWidth: 0 }}>
|
|
<Box
|
|
sx={{
|
|
width: 18,
|
|
height: 18,
|
|
borderRadius: '50%',
|
|
bgcolor: RED,
|
|
color: WHITE,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '0.7rem',
|
|
fontWeight: 800,
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
?
|
|
</Box>
|
|
{title ? (
|
|
<Typography
|
|
variant="subtitle2"
|
|
noWrap
|
|
sx={{
|
|
fontWeight: 700,
|
|
fontSize: '0.85rem',
|
|
color: 'text.primary',
|
|
}}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
) : null}
|
|
</Box>
|
|
<IconButton
|
|
size="small"
|
|
onClick={this.handleClosePopper}
|
|
sx={{
|
|
p: 0.25,
|
|
color: 'text.secondary',
|
|
'&:hover': { color: 'text.primary', bgcolor: 'action.hover' },
|
|
}}
|
|
aria-label="Schließen"
|
|
>
|
|
<CloseIcon sx={{ fontSize: 16 }} />
|
|
</IconButton>
|
|
</Box>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
fontSize: '0.78rem',
|
|
lineHeight: 1.45,
|
|
color: 'text.secondary',
|
|
}}
|
|
>
|
|
{helpText}
|
|
</Typography>
|
|
</Paper>
|
|
</ClickAwayListener>
|
|
</Popper>
|
|
);
|
|
|
|
// Standalone badge (e.g. absolute corner placement inside a tab)
|
|
if (!children) {
|
|
return (
|
|
<>
|
|
<Box
|
|
ref={(el) => {
|
|
this.badgeRef = el;
|
|
}}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label={`${title ? `${title}: ` : ''}Hilfe anzeigen`}
|
|
title="Hilfe anzeigen"
|
|
onClick={this.handleBadgeClick}
|
|
onKeyDown={this.handleBadgeKeyDown}
|
|
sx={{
|
|
bgcolor: RED,
|
|
color: WHITE,
|
|
fontWeight: 800,
|
|
fontSize: '0.78rem',
|
|
width: 20,
|
|
height: 20,
|
|
minWidth: 20,
|
|
borderRadius: '50%',
|
|
boxShadow: SHADOW_BADGE,
|
|
cursor: 'pointer',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
userSelect: 'none',
|
|
transition: 'background-color 0.15s ease',
|
|
'&:hover': {
|
|
bgcolor: RED_HOVER,
|
|
},
|
|
...badgeSx,
|
|
...sx,
|
|
}}
|
|
>
|
|
{badgeContent}
|
|
</Box>
|
|
{popperElement}
|
|
</>
|
|
);
|
|
}
|
|
|
|
// Wrapped element (e.g. icon in navigation sidebar)
|
|
return (
|
|
<>
|
|
<Badge
|
|
badgeContent={
|
|
<span
|
|
ref={(el) => {
|
|
this.badgeRef = el;
|
|
}}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label={`${title ? `${title}: ` : ''}Hilfe anzeigen`}
|
|
title="Hilfe anzeigen"
|
|
onClick={this.handleBadgeClick}
|
|
onKeyDown={this.handleBadgeKeyDown}
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '100%',
|
|
height: '100%',
|
|
cursor: 'pointer',
|
|
userSelect: 'none',
|
|
borderRadius: '50%',
|
|
}}
|
|
>
|
|
{badgeContent}
|
|
</span>
|
|
}
|
|
anchorOrigin={anchorOrigin}
|
|
sx={{
|
|
display: 'inline-flex',
|
|
'& .MuiBadge-badge': {
|
|
bgcolor: RED,
|
|
color: WHITE,
|
|
fontWeight: 800,
|
|
fontSize: '0.78rem',
|
|
width: 20,
|
|
height: 20,
|
|
minWidth: 20,
|
|
borderRadius: '50%',
|
|
boxShadow: SHADOW_BADGE,
|
|
cursor: 'pointer',
|
|
p: 0,
|
|
transition: 'background-color 0.15s ease',
|
|
'&:hover': {
|
|
bgcolor: RED_HOVER,
|
|
},
|
|
...badgeSx,
|
|
},
|
|
...sx,
|
|
}}
|
|
>
|
|
{children}
|
|
</Badge>
|
|
{popperElement}
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default HelpBadge;
|