3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-07 22:27:11 +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.details,
{[styles.isBrowser]: isBrowser}, {[styles.isBrowser]: isBrowser},
props.className, props.className,
)}> )}
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */} onMouseDown={(e) => {
<div const target = e.target as HTMLElement;
role="button" // Prevent a double-click to highlight summary text
tabIndex={0} if (isInSummary(target) && e.detail > 1) {
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;
}
e.preventDefault(); e.preventDefault();
if (collapsed) { }
setCollapsed(false); }}
setOpen(true); onClick={(e) => {
} else { e.stopPropagation(); // For isolation of multiple nested details/summary
setCollapsed(true); const target = e.target as HTMLElement;
// setOpen(false); // Don't do this, it breaks close animation! const shouldToggle =
} isInSummary(target) && hasParent(target, detailsRef.current!);
}}> if (!shouldToggle) {
{summary} return;
}
e.preventDefault();
if (collapsed) {
setCollapsed(false);
setOpen(true);
} else {
setCollapsed(true);
// setOpen(false); // Don't do this, it breaks close animation!
}
}}>
{summary}
<Collapsible <Collapsible
lazy={false} // Content might matter for SEO in this case lazy={false} // Content might matter for SEO in this case
collapsed={collapsed} collapsed={collapsed}
disableSSRStyle // Allows component to work fine even with JS disabled! disableSSRStyle // Allows component to work fine even with JS disabled!
onCollapseTransitionEnd={(newCollapsed) => { onCollapseTransitionEnd={(newCollapsed) => {
setCollapsed(newCollapsed); setCollapsed(newCollapsed);
setOpen(!newCollapsed); setOpen(!newCollapsed);
}}> }}>
<div className={styles.collapsibleContent}>{children}</div> <div className={styles.collapsibleContent}>{children}</div>
</Collapsible> </Collapsible>
</div>
</details> </details>
); );
}; };