u
This commit is contained in:
seb
259
src/components/HelpBadge.jsx
Normal file
259
src/components/HelpBadge.jsx
Normal file
@@ -0,0 +1,259 @@
|
||||
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';
|
||||
|
||||
/**
|
||||
* Reusable reactive badge that appears on UI elements (navigation icons, tabs, etc.)
|
||||
* when systemwide Help mode is enabled via helpAutomat.
|
||||
*
|
||||
* The red "?" badge does not move on hover.
|
||||
* Clicking the "?" badge opens an explanatory Popper anchored to the badge.
|
||||
* When Help mode is disabled, it transparently renders its children with zero overhead.
|
||||
*/
|
||||
class HelpBadge extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
enabled: helpAutomat.state?.enabled ?? false,
|
||||
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) => ({
|
||||
enabled: Boolean(state?.enabled),
|
||||
anchorEl: state?.enabled ? this.state.anchorEl : null,
|
||||
}));
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.unsub?.();
|
||||
this.unsub = null;
|
||||
}
|
||||
|
||||
handleBadgeClick(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const currentTarget = event.currentTarget;
|
||||
this.setState((prev) => ({
|
||||
anchorEl: prev.anchorEl ? null : currentTarget,
|
||||
}));
|
||||
}
|
||||
|
||||
handleBadgeKeyDown(event) {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const currentTarget = event.currentTarget;
|
||||
this.setState((prev) => ({
|
||||
anchorEl: prev.anchorEl ? null : currentTarget,
|
||||
}));
|
||||
} else if (event.key === 'Escape' && this.state.anchorEl) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.setState({ anchorEl: null });
|
||||
}
|
||||
}
|
||||
|
||||
handleClosePopper(event) {
|
||||
if (this.state.anchorEl && event?.target && this.state.anchorEl.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
this.setState({ anchorEl: null });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { enabled, 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;
|
||||
}
|
||||
|
||||
const isOpen = Boolean(anchorEl);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Badge
|
||||
badgeContent={
|
||||
<span
|
||||
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',
|
||||
}}
|
||||
>
|
||||
{badgeContent}
|
||||
</span>
|
||||
}
|
||||
anchorOrigin={anchorOrigin}
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
'& .MuiBadge-badge': {
|
||||
bgcolor: '#dc2626',
|
||||
color: '#ffffff',
|
||||
fontWeight: 800,
|
||||
fontSize: '0.8rem',
|
||||
width: 22,
|
||||
height: 22,
|
||||
minWidth: 22,
|
||||
borderRadius: '50%',
|
||||
boxShadow: '0 2px 5px rgba(0,0,0,0.35)',
|
||||
cursor: 'pointer',
|
||||
p: 0,
|
||||
transition: 'background-color 0.15s ease',
|
||||
'&:hover': {
|
||||
bgcolor: '#b91c1c',
|
||||
},
|
||||
...badgeSx,
|
||||
},
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Badge>
|
||||
|
||||
<Popper
|
||||
open={isOpen}
|
||||
anchorEl={anchorEl}
|
||||
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: '0 8px 28px rgba(0,0,0,0.2)',
|
||||
}}
|
||||
>
|
||||
<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: '#dc2626',
|
||||
color: '#ffffff',
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default HelpBadge;
|
||||
Reference in New Issue
Block a user