Move hasHeaderMenu out of IIFE into component body
Computing it before the return statement is the right place since it only depends on props, not loop variables. Removes the IIFE entirely and fixes the indentation of the map callback body. https://claude.ai/code/session_017JCShLVs9xZ6FZmyrUFaE1
This commit is contained in:
parent
a2cbedbb82
commit
8a4c75e860
1 changed files with 50 additions and 51 deletions
|
|
@ -142,6 +142,8 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
|
||||||
|
|
||||||
if (draftGrid.length === 0) return null;
|
if (draftGrid.length === 0) return null;
|
||||||
|
|
||||||
|
const hasHeaderMenu = !!(onAdjustTimeBankOpen || onSetAutodraftOpen);
|
||||||
|
|
||||||
// h-14 (56px) + gap-1.5 (6px) fallback until first measurement
|
// h-14 (56px) + gap-1.5 (6px) fallback until first measurement
|
||||||
const effectiveRowHeight = rowHeight > 0 ? rowHeight : 56;
|
const effectiveRowHeight = rowHeight > 0 ? rowHeight : 56;
|
||||||
|
|
||||||
|
|
@ -154,60 +156,57 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
|
||||||
<div className="inline-block min-w-full">
|
<div className="inline-block min-w-full">
|
||||||
{/* Team header */}
|
{/* Team header */}
|
||||||
<div className="flex gap-1.5 mb-1.5">
|
<div className="flex gap-1.5 mb-1.5">
|
||||||
{(() => {
|
{draftSlots.map((slot) => {
|
||||||
const hasHeaderMenu = !!(onAdjustTimeBankOpen || onSetAutodraftOpen);
|
const teamTime = teamTimers[slot.team.id];
|
||||||
return draftSlots.map((slot) => {
|
const isAutodraft = autodraftStatus[slot.team.id]?.isEnabled ?? false;
|
||||||
const teamTime = teamTimers[slot.team.id];
|
const isConnected = connectedTeams ? connectedTeams.has(slot.team.id) : true;
|
||||||
const isAutodraft = autodraftStatus[slot.team.id]?.isEnabled ?? false;
|
|
||||||
const isConnected = connectedTeams ? connectedTeams.has(slot.team.id) : true;
|
|
||||||
|
|
||||||
const headerContent = (
|
const headerContent = (
|
||||||
<>
|
<>
|
||||||
<div className="text-xs font-medium truncate px-1 flex items-center justify-center gap-0.5">
|
<div className="text-xs font-medium truncate px-1 flex items-center justify-center gap-0.5">
|
||||||
{isAutodraft && (
|
{isAutodraft && (
|
||||||
<span className="inline-flex items-center justify-center h-3.5 w-3.5 text-[9px] font-bold text-white bg-black shrink-0">A</span>
|
<span className="inline-flex items-center justify-center h-3.5 w-3.5 text-[9px] font-bold text-white bg-black shrink-0">A</span>
|
||||||
)}
|
)}
|
||||||
<span className={`truncate${!isConnected ? " italic text-muted-foreground" : ""}`}>
|
<span className={`truncate${!isConnected ? " italic text-muted-foreground" : ""}`}>
|
||||||
{ownerMap[slot.team.id] || slot.team.name}
|
{ownerMap[slot.team.id] || slot.team.name}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
|
||||||
<div className={`text-xs font-mono px-1 ${getTimerColorClass(teamTime)}`}>
|
|
||||||
{formatClockTime(teamTime)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (hasHeaderMenu) {
|
|
||||||
return (
|
|
||||||
<ContextMenu key={slot.id}>
|
|
||||||
<ContextMenuTrigger asChild>
|
|
||||||
<div className="flex-1 min-w-20 text-center cursor-context-menu">
|
|
||||||
{headerContent}
|
|
||||||
</div>
|
|
||||||
</ContextMenuTrigger>
|
|
||||||
<ContextMenuContent>
|
|
||||||
{onAdjustTimeBankOpen && (
|
|
||||||
<ContextMenuItem onClick={() => onAdjustTimeBankOpen(slot.team.id)}>
|
|
||||||
Adjust Time Bank...
|
|
||||||
</ContextMenuItem>
|
|
||||||
)}
|
|
||||||
{onSetAutodraftOpen && (
|
|
||||||
<ContextMenuItem onClick={() => onSetAutodraftOpen(slot.team.id)}>
|
|
||||||
Set Autodraft...
|
|
||||||
</ContextMenuItem>
|
|
||||||
)}
|
|
||||||
</ContextMenuContent>
|
|
||||||
</ContextMenu>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={slot.id} className="flex-1 min-w-20 text-center">
|
|
||||||
{headerContent}
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className={`text-xs font-mono px-1 ${getTimerColorClass(teamTime)}`}>
|
||||||
|
{formatClockTime(teamTime)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (hasHeaderMenu) {
|
||||||
|
return (
|
||||||
|
<ContextMenu key={slot.id}>
|
||||||
|
<ContextMenuTrigger asChild>
|
||||||
|
<div className="flex-1 min-w-20 text-center cursor-context-menu">
|
||||||
|
{headerContent}
|
||||||
|
</div>
|
||||||
|
</ContextMenuTrigger>
|
||||||
|
<ContextMenuContent>
|
||||||
|
{onAdjustTimeBankOpen && (
|
||||||
|
<ContextMenuItem onClick={() => onAdjustTimeBankOpen(slot.team.id)}>
|
||||||
|
Adjust Time Bank...
|
||||||
|
</ContextMenuItem>
|
||||||
|
)}
|
||||||
|
{onSetAutodraftOpen && (
|
||||||
|
<ContextMenuItem onClick={() => onSetAutodraftOpen(slot.team.id)}>
|
||||||
|
Set Autodraft...
|
||||||
|
</ContextMenuItem>
|
||||||
|
)}
|
||||||
|
</ContextMenuContent>
|
||||||
|
</ContextMenu>
|
||||||
);
|
);
|
||||||
});
|
}
|
||||||
})()}
|
|
||||||
|
return (
|
||||||
|
<div key={slot.id} className="flex-1 min-w-20 text-center">
|
||||||
|
{headerContent}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Rows — clipped to 2-row height, slides to reveal new round */}
|
{/* Rows — clipped to 2-row height, slides to reveal new round */}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue