Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

address feedback

Browse source
This commit is contained in:
Simon Knott 2024-11-12 13:27:30 +01:00
parent 64537813c3
commit aa6064e676
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
2 changed files with 12 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/html-reporter/src/chip.tsx
View file

@ -56,13 +56,8 @@ export const AutoChip: React.FC<{
anchorId?: string, anchorId?: string,
}> = ({ header, initialExpanded, noInsets, children, dataTestId, anchorId }) => { }> = ({ header, initialExpanded, noInsets, children, dataTestId, anchorId }) => {
const [expanded, setExpanded] = React.useState(initialExpanded ?? true); const [expanded, setExpanded] = React.useState(initialExpanded ?? true);
const onChangeReveal = React.useCallback((isRevealed: boolean) => { const onReveal = React.useCallback(() => setExpanded(true), []);
if (isRevealed) return <Anchor id={anchorId} onReveal={onReveal}>
setExpanded(true);
}, [setExpanded]);
return <Anchor
id={anchorId}
onChange={onChangeReveal}>
<Chip <Chip
header={header} header={header}
expanded={expanded} expanded={expanded}

26
packages/html-reporter/src/links.tsx
View file

@ -116,33 +116,27 @@ const kMissingContentType = 'x-playwright/missing';
type AnchorID = string | ((id: string | null) => boolean) | undefined; type AnchorID = string | ((id: string | null) => boolean) | undefined;
export function useAnchor(id: AnchorID, onChange: (isRevealed: boolean) => void) { function useAnchor(id: AnchorID, onReveal: () => void) {
React.useEffect(() => { React.useEffect(() => {
const listener = () => { const listener = () => {
const params = new URLSearchParams(window.location.hash.slice(1)); const params = new URLSearchParams(window.location.hash.slice(1));
const anchor = params.get('anchor'); const anchor = params.get('anchor');
const isRevealed = typeof id === 'function' ? id(anchor) : anchor === id; const isRevealed = typeof id === 'function' ? id(anchor) : anchor === id;
onChange(isRevealed); if (isRevealed)
onReveal();
}; };
window.addEventListener('popstate', listener); window.addEventListener('popstate', listener);
return () => window.removeEventListener('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<HTMLDivElement>(null); const ref = React.useRef<HTMLDivElement>(null);
const onAnchorChange = React.useCallback((isRevealed: boolean) => { const onAnchorReveal = React.useCallback(() => {
if (!ref.current) onReveal?.();
return; requestAnimationFrame(() => ref.current?.scrollIntoView({ block: 'start', inline: 'start' }));
}, [onReveal]);
const preventDefault = onChange?.(isRevealed, ref.current); useAnchor(id, onAnchorReveal);
if (preventDefault)
return;
if (isRevealed)
requestAnimationFrame(() => ref.current?.scrollIntoView({ block: 'start', inline: 'start' }));
}, [onChange]);
useAnchor(id, onAnchorChange);
return <div ref={ref}>{children}</div>; return <div ref={ref}>{children}</div>;
} }