format, lint, remove hash if all closed

This commit is contained in:
thomas.ekstrand 2024-02-24 09:27:24 -06:00
parent bbd6830966
commit 97e9485040

View file

@ -1,4 +1,3 @@
import BrowserOnly from "@docusaurus/BrowserOnly";
import { import {
Accordion, Accordion,
AccordionItem, AccordionItem,
@ -21,7 +20,8 @@ export interface Faq {
* @return {Element|null} The heading or null * @return {Element|null} The heading or null
*/ */
const findNearestHeading = (element: Element): Element | null => { const findNearestHeading = (element: Element): Element | null => {
const isHeading = (element: Element): boolean => /^H[1-6]$/.test(element.tagName); const isHeading = (element: Element): boolean =>
/^H[1-6]$/.test(element.tagName);
let currentElement: Element | null = element; let currentElement: Element | null = element;
while (currentElement !== null) { while (currentElement !== null) {
@ -47,25 +47,33 @@ const findNearestHeading = (element: Element): Element | null => {
* @param {[type]} void [description] * @param {[type]} void [description]
* @return {[type]} [description] * @return {[type]} [description]
*/ */
const updateURLWithNearestHeadingId = (targetElementUuid: string): void => { const updateUrlWithNearestHeadingId = (targetElementUuid: string): void => {
const targetElement: HTMLElement | null = document.getElementById(`accordion__heading-${targetElementUuid}`); const targetElement: HTMLElement | null = document.getElementById(
`accordion__heading-${targetElementUuid}`,
);
const nearestHeading: Element | null = targetElement ? findNearestHeading(targetElement) : null; const nearestHeading: Element | null = targetElement
? findNearestHeading(targetElement)
: null;
if (nearestHeading && nearestHeading.id) { // Add the hash without scrolling the page
window.history.pushState({}, '', `#${nearestHeading.id}`); if (nearestHeading?.id) {
} window.history.pushState({}, "", `#${nearestHeading.id}`);
} }
export const FaqAccordion = ({ // If they're all collapsed, remove the hash
rows, if (!targetElement) {
}: { rows: Faq[] }): JSX.Element => { window.location.hash = '';
}
};
export const FaqAccordion = ({ rows }: { rows: Faq[] }): JSX.Element => {
return ( return (
<Accordion <Accordion
allowMultipleExpanded={true} allowMultipleExpanded={true}
allowZeroExpanded={true} allowZeroExpanded={true}
onChange={(itemUuids) => { onChange={(itemUuids) => {
updateURLWithNearestHeadingId(itemUuids); updateUrlWithNearestHeadingId(itemUuids);
}} }}
> >
{rows.map((row, index) => ( {rows.map((row, index) => (