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

refactor to not subscribe

Browse source
This commit is contained in:
Simon Knott 2024-12-11 15:33:51 +01:00
parent 663f875183
commit 6b3bad4486
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
1 changed files with 14 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -117,7 +117,20 @@ const kMissingContentType = 'x-playwright/missing';
export type AnchorID = string | string[] | ((id: string) => boolean) | undefined;
function matchesAnchor(id: AnchorID, anchor: string): boolean {
export function useAnchor(id: AnchorID, onReveal: () => void) {
const searchParams = React.useContext(SearchParamsContext);
const isAnchored = useIsAnchored(id);
React.useEffect(() => {
if (isAnchored)
onReveal();
}, [isAnchored, onReveal, searchParams]);
}
export function useIsAnchored(id: AnchorID) {
const searchParams = React.useContext(SearchParamsContext);
const anchor = searchParams.get('anchor');
if (anchor === null)
return false;
if (typeof id === 'undefined')
return false;
if (typeof id === 'string')
@ -127,33 +140,6 @@ function matchesAnchor(id: AnchorID, anchor: string): boolean {
return id(anchor);
}
export function useAnchor(id: AnchorID, onReveal: () => void) {
React.useEffect(() => {
if (typeof id === 'undefined')
return;
const listener = () => {
const params = new URLSearchParams(window.location.hash.slice(1));
if (params.has('anchor') && matchesAnchor(id, params.get('anchor')!))
onReveal();
};
window.addEventListener('popstate', listener);
// check if we're already on the anchor. required to make it work on page load.
listener();
return () => window.removeEventListener('popstate', listener);
}, [id, onReveal]);
}
export function useIsAnchored(id: AnchorID) {
const searchParams = React.useContext(SearchParamsContext);
if (!searchParams.has('anchor'))
return false;
const anchor = searchParams.get('anchor');
return matchesAnchor(id, anchor!);
}
export function Anchor({ id, children }: React.PropsWithChildren<{ id: AnchorID }>) {
const ref = React.useRef<HTMLDivElement>(null);
const onAnchorReveal = React.useCallback(() => {