f4fb69dbc7
Add jsinspect-plus (AST-based structural duplication detector) to pnpm check with threshold 50 / min 3 instances. Fix all findings: - Extract condition icon/color maps to shared condition-styles.ts - Extract useClickOutside hook (5 components) - Extract dispatchAction + resolveAndRename in use-encounter - Extract runEncounterAction in application layer (13 use cases) - Extract findCombatant helper in domain (9 functions) - Extract TraitSection in stat-block (4 trait rendering blocks) - Extract DialogHeader in dialog.tsx (4 dialogs) Net result: -263 lines across 40 files. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
95 lines
2.2 KiB
TypeScript
95 lines
2.2 KiB
TypeScript
import { Check } from "lucide-react";
|
|
import {
|
|
type ReactElement,
|
|
useCallback,
|
|
useEffect,
|
|
useRef,
|
|
useState,
|
|
} from "react";
|
|
import { useClickOutside } from "../../hooks/use-click-outside.js";
|
|
import { cn } from "../../lib/utils";
|
|
import { Button } from "./button";
|
|
|
|
interface ConfirmButtonProps {
|
|
readonly onConfirm: () => void;
|
|
readonly icon: ReactElement;
|
|
readonly label: string;
|
|
readonly size?: "icon" | "icon-sm";
|
|
readonly className?: string;
|
|
readonly disabled?: boolean;
|
|
}
|
|
|
|
const REVERT_TIMEOUT_MS = 5_000;
|
|
|
|
export function ConfirmButton({
|
|
onConfirm,
|
|
icon,
|
|
label,
|
|
size = "icon",
|
|
className,
|
|
disabled,
|
|
}: ConfirmButtonProps) {
|
|
const [isConfirming, setIsConfirming] = useState(false);
|
|
const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
|
|
const wrapperRef = useRef<HTMLDivElement>(null);
|
|
|
|
const revert = useCallback(() => {
|
|
setIsConfirming(false);
|
|
clearTimeout(timerRef.current);
|
|
}, []);
|
|
|
|
// Cleanup timer on unmount
|
|
useEffect(() => {
|
|
return () => clearTimeout(timerRef.current);
|
|
}, []);
|
|
|
|
useClickOutside(wrapperRef, revert, isConfirming);
|
|
|
|
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
e.stopPropagation();
|
|
}
|
|
}, []);
|
|
|
|
const handleClick = useCallback(
|
|
(e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
if (disabled) return;
|
|
|
|
if (isConfirming) {
|
|
revert();
|
|
onConfirm();
|
|
} else {
|
|
setIsConfirming(true);
|
|
clearTimeout(timerRef.current);
|
|
timerRef.current = setTimeout(revert, REVERT_TIMEOUT_MS);
|
|
}
|
|
},
|
|
[isConfirming, disabled, onConfirm, revert],
|
|
);
|
|
|
|
return (
|
|
<div ref={wrapperRef} className="inline-flex">
|
|
<Button
|
|
variant="ghost"
|
|
size={size}
|
|
className={cn(
|
|
className,
|
|
isConfirming
|
|
? "animate-confirm-pulse rounded-md bg-destructive text-primary-foreground hover:bg-destructive hover:text-primary-foreground"
|
|
: "hover:text-hover-destructive",
|
|
)}
|
|
onClick={handleClick}
|
|
onKeyDown={handleKeyDown}
|
|
onBlur={revert}
|
|
disabled={disabled}
|
|
aria-label={isConfirming ? `Confirm ${label.toLowerCase()}` : label}
|
|
title={isConfirming ? `Confirm ${label.toLowerCase()}` : label}
|
|
>
|
|
{isConfirming ? <Check size={16} /> : null}
|
|
{!isConfirming && icon}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|