fix: proper collapsing of long element (#5694)

* fix: proper collapsing of long element

* Add example

* Reorder

* Another solution with overflow

* Restore original solution
This commit is contained in:
Alexey Pyltsyn 2021-10-15 16:02:56 +03:00 committed by GitHub
parent e22170408a
commit 1361a5a38e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 18 deletions

View file

@ -197,21 +197,8 @@ function CollapsibleBase({
return; return;
} }
const el = collapsibleRef.current!; applyCollapsedStyle(collapsibleRef.current!, collapsed);
const currentCollapsibleElementHeight = el.style.height; onCollapseTransitionEnd?.(collapsed);
if (
!collapsed &&
parseInt(currentCollapsibleElementHeight, 10) === el.scrollHeight
) {
applyCollapsedStyle(el, false);
onCollapseTransitionEnd?.(false);
}
if (currentCollapsibleElementHeight === CollapsedStyles.height) {
applyCollapsedStyle(el, true);
onCollapseTransitionEnd?.(true);
}
}} }}
className={className}> className={className}>
{children} {children}

View file

@ -22,7 +22,16 @@ module.exports = {
{ {
type: 'category', type: 'category',
label: 'Huge sidebar category', label: 'Huge sidebar category',
items: generateHugeSidebarItems(4), items: [
...[
{
type: 'link',
href: '/',
label: 'Test Test test test test test test',
},
],
...generateHugeSidebarItems(4),
],
}, },
{ {
type: 'link', type: 'link',
@ -46,8 +55,8 @@ module.exports = {
function generateHugeSidebarItems() { function generateHugeSidebarItems() {
const maxLevel = 4; const maxLevel = 4;
const linksCount = 5; const linksCount = 8;
const categoriesCount = 5; const categoriesCount = 8;
function generateRecursive(maxLevel, currentLevel = 0) { function generateRecursive(maxLevel, currentLevel = 0) {
if (currentLevel === maxLevel) { if (currentLevel === maxLevel) {