diff --git a/packages/html-reporter/src/chip.tsx b/packages/html-reporter/src/chip.tsx index f6de923464..5a27faadc1 100644 --- a/packages/html-reporter/src/chip.tsx +++ b/packages/html-reporter/src/chip.tsx @@ -56,13 +56,8 @@ export const AutoChip: React.FC<{ anchorId?: string, }> = ({ header, initialExpanded, noInsets, children, dataTestId, anchorId }) => { const [expanded, setExpanded] = React.useState(initialExpanded ?? true); - const onChangeReveal = React.useCallback((isRevealed: boolean) => { - if (isRevealed) - setExpanded(true); - }, [setExpanded]); - return + const onReveal = React.useCallback(() => setExpanded(true), []); + return boolean) | undefined; -export function useAnchor(id: AnchorID, onChange: (isRevealed: boolean) => void) { +function useAnchor(id: AnchorID, onReveal: () => void) { React.useEffect(() => { const listener = () => { const params = new URLSearchParams(window.location.hash.slice(1)); const anchor = params.get('anchor'); const isRevealed = typeof id === 'function' ? id(anchor) : anchor === id; - onChange(isRevealed); + if (isRevealed) + onReveal(); }; window.addEventListener('popstate', listener); return () => window.removeEventListener('popstate', listener); - }, [id, onChange]); + }, [id, onReveal]); } -export function Anchor({ id, onChange, children }: React.PropsWithChildren<{ id: AnchorID, onChange?(isRevealed: boolean, ref: HTMLDivElement): void }>) { +export function Anchor({ id, onReveal, children }: React.PropsWithChildren<{ id: AnchorID, onReveal?(): void }>) { const ref = React.useRef(null); - const onAnchorChange = React.useCallback((isRevealed: boolean) => { - if (!ref.current) - return; - - const preventDefault = onChange?.(isRevealed, ref.current); - if (preventDefault) - return; - - if (isRevealed) - requestAnimationFrame(() => ref.current?.scrollIntoView({ block: 'start', inline: 'start' })); - }, [onChange]); - useAnchor(id, onAnchorChange); + const onAnchorReveal = React.useCallback(() => { + onReveal?.(); + requestAnimationFrame(() => ref.current?.scrollIntoView({ block: 'start', inline: 'start' })); + }, [onReveal]); + useAnchor(id, onAnchorReveal); return
{children}
; }