Skip to content

Commit cf6c69a

Browse files
committedFeb 14, 2024
Add hover effect to header menus
1 parent 0f9b617 commit cf6c69a

File tree

3 files changed

+28
-3
lines changed

3 files changed

+28
-3
lines changed
 

‎packages/core/src/internal/data-grid/data-grid.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1327,7 +1327,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
13271327
// else we will assume doesn't need it.
13281328
needsHoverPosition = rendererNeeds ?? toCheck.kind === GridCellKind.Custom;
13291329
needsDamageCell = needsHoverPosition;
1330-
} else if (args.kind === groupHeaderKind) {
1330+
} else {
13311331
needsDamageCell = true;
13321332
}
13331333

@@ -1517,6 +1517,8 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
15171517
false,
15181518
theme,
15191519
false,
1520+
undefined,
1521+
undefined,
15201522
false,
15211523
0,
15221524
spriteManager,

‎packages/core/src/internal/data-grid/render/data-grid-render.header.ts

+24-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,10 @@ export function drawGridHeaders(
4646
ctx.fillStyle = outerTheme.bgHeader;
4747
ctx.fillRect(0, 0, width, totalHeaderHeight);
4848

49-
const [hCol, hRow] = hovered?.[0] ?? [];
49+
const hCol = hovered?.[0]?.[0];
50+
const hRow = hovered?.[0]?.[1];
51+
const hPosX = hovered?.[1]?.[0];
52+
const hPosY = hovered?.[1]?.[1];
5053

5154
const font = outerTheme.headerFontFull;
5255
// Assinging the context font too much can be expensive, it can be worth it to minimze this
@@ -115,6 +118,8 @@ export function drawGridHeaders(
115118
selected,
116119
theme,
117120
hoveredBoolean,
121+
hoveredBoolean ? hPosX : undefined,
122+
hoveredBoolean ? hPosY : undefined,
118123
hasSelectedCell,
119124
hover,
120125
spriteManager,
@@ -415,6 +420,8 @@ function drawHeaderInner(
415420
selected: boolean,
416421
theme: FullTheme,
417422
isHovered: boolean,
423+
posX: number | undefined,
424+
posY: number | undefined,
418425
hoverAmount: number,
419426
spriteManager: SpriteManager,
420427
touchMode: boolean,
@@ -533,6 +540,12 @@ function drawHeaderInner(
533540
if (shouldDrawMenu && headerLayout.menuBounds !== undefined) {
534541
const menuBounds = headerLayout.menuBounds;
535542

543+
const hovered = posX !== undefined && posY !== undefined && pointInRect(menuBounds, posX + x, posY + y);
544+
545+
if (!hovered) {
546+
ctx.globalAlpha = 0.7;
547+
}
548+
536549
if (c.menuIcon === undefined || c.menuIcon === GridColumnMenuIcon.Triangle) {
537550
// Draw the default triangle menu icon:
538551
ctx.beginPath();
@@ -572,6 +585,10 @@ function drawHeaderInner(
572585
const iconY = menuBounds.y + (menuBounds.height - theme.headerIconSize) / 2;
573586
spriteManager.drawSprite(c.menuIcon, "normal", ctx, iconX, iconY, theme.headerIconSize, theme);
574587
}
588+
589+
if (!hovered) {
590+
ctx.globalAlpha = 1;
591+
}
575592
}
576593
}
577594

@@ -585,6 +602,8 @@ export function drawHeader(
585602
selected: boolean,
586603
theme: FullTheme,
587604
isHovered: boolean,
605+
posX: number | undefined,
606+
posY: number | undefined,
588607
hasSelectedCell: boolean,
589608
hoverAmount: number,
590609
spriteManager: SpriteManager,
@@ -620,6 +639,8 @@ export function drawHeader(
620639
selected,
621640
theme,
622641
isHovered,
642+
posX,
643+
posY,
623644
hoverAmount,
624645
spriteManager,
625646
touchMode,
@@ -638,6 +659,8 @@ export function drawHeader(
638659
selected,
639660
theme,
640661
isHovered,
662+
posX,
663+
posY,
641664
hoverAmount,
642665
spriteManager,
643666
touchMode,

‎packages/core/src/internal/data-grid/render/draw-grid-arg.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import type { EnqueueCallback } from "../use-animation-queue.js";
1919
import type { ImageWindowLoader } from "../image-window-loader-interface.js";
2020
import type { GroupDetailsCallback, GetRowThemeCallback, Highlight } from "./data-grid-render.cells.js";
2121

22-
export type HoverInfo = readonly [Item, Item];
22+
export type HoverInfo = readonly [Item, readonly [number, number]];
2323

2424
export interface DragAndDropState {
2525
src: number;

0 commit comments

Comments
 (0)
Failed to load comments.