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;
}
const el = collapsibleRef.current!;
const currentCollapsibleElementHeight = el.style.height;
if (
!collapsed &&
parseInt(currentCollapsibleElementHeight, 10) === el.scrollHeight
) {
applyCollapsedStyle(el, false);
onCollapseTransitionEnd?.(false);
}
if (currentCollapsibleElementHeight === CollapsedStyles.height) {
applyCollapsedStyle(el, true);
onCollapseTransitionEnd?.(true);
}
applyCollapsedStyle(collapsibleRef.current!, collapsed);
onCollapseTransitionEnd?.(collapsed);
}}
className={className}>
{children}

View file

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