3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-03 20:27:20 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: unbreak Details component (#5364)

Browse source
This commit is contained in:
Alexey Pyltsyn 2021-08-17 13:04:32 +03:00 • committed by GitHub
parent 7b807fd85c
commit ce92f30d33
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
packages/docusaurus-theme-common/src/components/Details/index.tsx
View file

@ -50,48 +50,43 @@ const Details = ({summary, children, ...props}: DetailsProps): JSX.Element => {
styles.details,
{[styles.isBrowser]: isBrowser},
props.className,
)}>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
<div
role="button"
tabIndex={0}
onMouseDown={(e) => {
const target = e.target as HTMLElement;
// Prevent a double-click to highlight summary text
if (isInSummary(target) && e.detail > 1) {
e.preventDefault();
}
}}
onClick={(e) => {
e.stopPropagation(); // For isolation of multiple nested details/summary
const target = e.target as HTMLElement;
const shouldToggle =
isInSummary(target) && hasParent(target, detailsRef.current!);
if (!shouldToggle) {
return;
}
)}
onMouseDown={(e) => {
const target = e.target as HTMLElement;
// Prevent a double-click to highlight summary text
if (isInSummary(target) && e.detail > 1) {
e.preventDefault();
if (collapsed) {
setCollapsed(false);
setOpen(true);
} else {
setCollapsed(true);
// setOpen(false); // Don't do this, it breaks close animation!
}
}}>
{summary}
}
}}
onClick={(e) => {
e.stopPropagation(); // For isolation of multiple nested details/summary
const target = e.target as HTMLElement;
const shouldToggle =
isInSummary(target) && hasParent(target, detailsRef.current!);
if (!shouldToggle) {
return;
}
e.preventDefault();
if (collapsed) {
setCollapsed(false);
setOpen(true);
} else {
setCollapsed(true);
// setOpen(false); // Don't do this, it breaks close animation!
}
}}>
{summary}
<Collapsible
lazy={false} // Content might matter for SEO in this case
collapsed={collapsed}
disableSSRStyle // Allows component to work fine even with JS disabled!
onCollapseTransitionEnd={(newCollapsed) => {
setCollapsed(newCollapsed);
setOpen(!newCollapsed);
}}>
<div className={styles.collapsibleContent}>{children}</div>
</Collapsible>
</div>
<Collapsible
lazy={false} // Content might matter for SEO in this case
collapsed={collapsed}
disableSSRStyle // Allows component to work fine even with JS disabled!
onCollapseTransitionEnd={(newCollapsed) => {
setCollapsed(newCollapsed);
setOpen(!newCollapsed);
}}>
<div className={styles.collapsibleContent}>{children}</div>
</Collapsible>
</details>
);
};