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

fix(v2): improve work of useCollapsible hook with multiple clicks (#5146)

Browse source
This commit is contained in:
Alexey Pyltsyn 2021-07-13 11:17:50 +03:00 • committed by GitHub
parent 0fdb6836ad
commit 45a87a1479
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

53
packages/docusaurus-theme-common/src/utils/useCollapsible.tsx
View file

@ -119,23 +119,26 @@ function useCollapseAnimation({
el.style.willChange = 'height';
function startAnimation(): () => void {
// When collapsing
if (collapsed) {
applyTransitionStyles();
const animationFrame = requestAnimationFrame(() => {
el.style.height = CollapsedStyles.height;
el.style.overflow = CollapsedStyles.overflow;
});
return () => cancelAnimationFrame(animationFrame);
}
// When expanding
else {
el.style.display = 'block';
const animationFrame = requestAnimationFrame(() => {
const animationFrame = requestAnimationFrame(() => {
// When collapsing
if (collapsed) {
applyTransitionStyles();
});
return () => cancelAnimationFrame(animationFrame);
}
requestAnimationFrame(() => {
el.style.height = CollapsedStyles.height;
el.style.overflow = CollapsedStyles.overflow;
});
}
// When expanding
else {
el.style.display = 'block';
requestAnimationFrame(() => {
applyTransitionStyles();
});
}
});
return () => cancelAnimationFrame(animationFrame);
}
return startAnimation();
@ -169,8 +172,22 @@ export function Collapsible({
// @ts-expect-error: see https://twitter.com/sebastienlorber/status/1412784677795110914
ref={collapsibleRef}
onTransitionEnd={(e) => {
if (e.propertyName === 'height') {
applyCollapsedStyle(collapsibleRef.current!, collapsed);
if (e.propertyName !== 'height') {
return;
}
const el = collapsibleRef.current!;
const currentCollapsibleElementHeight = el.style.height;
if (
!collapsed &&
parseInt(currentCollapsibleElementHeight, 10) === el.scrollHeight
) {
applyCollapsedStyle(el, false);
}
if (currentCollapsibleElementHeight === CollapsedStyles.height) {
applyCollapsedStyle(el, true);
}
}}
className={className}>