haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-27 15:54:39 +00:00
Code Issues Releases Wiki Activity

optimize dropdown menu open direction

Browse Source
This commit is contained in:
zhouwenxuan
2025-04-07 15:52:37 +08:00
parent 09581a961a
commit 538bf10d18
1 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/dropdown-menu/item-dropdown-menu.js
View File

@@ -34,6 +34,7 @@ class ItemDropdownMenu extends React.Component {
currentItem: ''
};
this.dropdownRef = React.createRef();
this.mainMenuDirection = 'down';
this.subMenuDirection = 'right';
}
@@ -47,6 +48,24 @@ class ItemDropdownMenu extends React.Component {
});
setTimeout(() => {
if (this.dropdownRef.current) {
const rect = this.dropdownRef.current.getBoundingClientRect();
const windowHeight = window.innerHeight;
const spaceBelow = windowHeight - rect.bottom;
const spaceAbove = rect.top;
const menuHeightThreshold = 400;
let mainMenuDirection;
if (spaceBelow < menuHeightThreshold && spaceAbove < menuHeightThreshold) {
const spaceRight = window.innerWidth - rect.right;
mainMenuDirection = spaceRight >= 200 ? 'right' : 'left';
} else if (spaceBelow < menuHeightThreshold) {
mainMenuDirection = 'up';
} else {
mainMenuDirection = 'down';
}
this.mainMenuDirection = mainMenuDirection;
this.subMenuDirection = (window.innerWidth - this.dropdownRef.current.getBoundingClientRect().right < 400) ? 'left' : 'right';
}
}, 1);
@@ -196,7 +215,12 @@ class ItemDropdownMenu extends React.Component {
}
return (
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick} className="vam">
<Dropdown
isOpen={this.state.isItemMenuShow}
toggle={this.onDropdownToggleClick}
className="vam"
direction={this.mainMenuDirection}
>
<DropdownToggle
tag={tagName || 'i'}
role="button"