Elgato_dark/data-peek
1
0
Fork 0
mirror of https://github.com/Rohithgilla12/data-peek synced 2026-04-21 12:57:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix(masking): restore alt-to-peek on masked cells

Browse source 
Hover-to-peek was broken in the editable table because the masked span
had pointer-events-none, so mouse events never fired. In both tables,
Alt was only checked onMouseEnter, so pressing Alt while already hovering
did nothing.

Use onMouseMove so peek toggles when Alt is pressed/released mid-hover.
This commit is contained in:
Rohith Gilla 2026-04-11 11:29:42 +05:30
parent 79b349b07e
commit b99ff6e4cb
No known key found for this signature in database
2 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/desktop/src/renderer/src/components/data-table.tsx
View file

@ -186,8 +186,13 @@ const MaskedCell = React.memo(function MaskedCell({
if (!isMasked) return <>{children}</>
const handleMouseEnter = (e: React.MouseEvent) => {
if (hoverToPeek && e.altKey) setPeeking(true)
const handleMouseMove = (e: React.MouseEvent) => {
if (!hoverToPeek) return
if (e.altKey) {
if (!peeking) setPeeking(true)
} else if (peeking) {
setPeeking(false)
}
}
const handleMouseLeave = () => setPeeking(false)
@ -195,7 +200,8 @@ const MaskedCell = React.memo(function MaskedCell({
return (
<span
style={peeking ? undefined : { filter: 'blur(5px)', userSelect: 'none' }}
onMouseEnter={handleMouseEnter}
onMouseEnter={handleMouseMove}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
className="inline-block select-none"
>

14
apps/desktop/src/renderer/src/components/editable-data-table.tsx
View file

@ -125,8 +125,13 @@ function MaskedEditCell({
}) {
const [peeking, setPeeking] = React.useState(false)
const handleMouseEnter = (e: React.MouseEvent) => {
if (hoverToPeek && e.altKey) setPeeking(true)
const handleMouseMove = (e: React.MouseEvent) => {
if (!hoverToPeek) return
if (e.altKey) {
if (!peeking) setPeeking(true)
} else if (peeking) {
setPeeking(false)
}
}
const handleMouseLeave = () => setPeeking(false)
@ -134,9 +139,10 @@ function MaskedEditCell({
return (
<span
style={peeking ? undefined : { filter: 'blur(5px)', userSelect: 'none' }}
onMouseEnter={handleMouseEnter}
onMouseEnter={handleMouseMove}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
className="inline-block select-none pointer-events-none"
className="inline-block select-none"
>
{children}
</span>