3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-10 06:42:31 +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

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

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