mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-08 18:30:53 +00:00
fix menu position (#6611)
This commit is contained in:
@@ -14,6 +14,8 @@ const propTypes = {
|
|||||||
getMenuContainerSize: PropTypes.func,
|
getMenuContainerSize: PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const MENU_BORDER_INDENT = 10;
|
||||||
|
|
||||||
class ContextMenu extends React.Component {
|
class ContextMenu extends React.Component {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@@ -155,8 +157,12 @@ class ContextMenu extends React.Component {
|
|||||||
innerHeight = parseFloat(containerSize.height);
|
innerHeight = parseFloat(containerSize.height);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (y + rect.height > innerHeight) {
|
if (y + rect.height > innerHeight - MENU_BORDER_INDENT) {
|
||||||
menuStyles.top -= rect.height;
|
menuStyles.top = innerHeight - rect.height - MENU_BORDER_INDENT;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (x + rect.width > innerWidth - MENU_BORDER_INDENT) {
|
||||||
|
menuStyles.left = innerWidth - rect.width - MENU_BORDER_INDENT;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (menuStyles.left < 0) {
|
if (menuStyles.left < 0) {
|
||||||
@@ -167,10 +173,6 @@ class ContextMenu extends React.Component {
|
|||||||
menuStyles.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;
|
menuStyles.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (menuStyles.left + rect.width > innerWidth) {
|
|
||||||
menuStyles.left = innerWidth - rect.width;
|
|
||||||
}
|
|
||||||
|
|
||||||
return menuStyles;
|
return menuStyles;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@@ -129,7 +129,8 @@ class DirColumnView extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
getMenuContainerSize = () => {
|
getMenuContainerSize = () => {
|
||||||
return window.getComputedStyle(this.viewModeContainer.current);
|
const { innerWidth, innerHeight } = window;
|
||||||
|
return { width: innerWidth, height: innerHeight };
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@@ -612,14 +612,12 @@ class Records extends Component {
|
|||||||
renderRecordsBody = ({ containerWidth }) => {
|
renderRecordsBody = ({ containerWidth }) => {
|
||||||
const { isGroupView, recordGetterByIndex } = this.props;
|
const { isGroupView, recordGetterByIndex } = this.props;
|
||||||
const { recordMetrics, columnMetrics, colOverScanStartIdx, colOverScanEndIdx } = this.state;
|
const { recordMetrics, columnMetrics, colOverScanStartIdx, colOverScanEndIdx } = this.state;
|
||||||
const {
|
const { columns, allColumns, totalWidth, lastFrozenColumnKey, frozenColumnsWidth } = columnMetrics;
|
||||||
columns, allColumns, totalWidth, lastFrozenColumnKey, frozenColumnsWidth,
|
|
||||||
} = columnMetrics;
|
|
||||||
const contextMenu = (<ContextMenu isGroupView={isGroupView} recordGetterByIndex={recordGetterByIndex} />);
|
|
||||||
const commonProps = {
|
const commonProps = {
|
||||||
...this.props,
|
...this.props,
|
||||||
columns, allColumns, totalWidth, lastFrozenColumnKey, frozenColumnsWidth,
|
columns, allColumns, totalWidth, lastFrozenColumnKey, frozenColumnsWidth,
|
||||||
recordMetrics, colOverScanStartIdx, colOverScanEndIdx, contextMenu,
|
recordMetrics, colOverScanStartIdx, colOverScanEndIdx,
|
||||||
|
contextMenu: (<ContextMenu isGroupView={isGroupView} recordGetterByIndex={recordGetterByIndex} />),
|
||||||
hasSelectedRecord: this.hasSelectedRecord(),
|
hasSelectedRecord: this.hasSelectedRecord(),
|
||||||
getScrollLeft: this.getScrollLeft,
|
getScrollLeft: this.getScrollLeft,
|
||||||
getScrollTop: this.getScrollTop,
|
getScrollTop: this.getScrollTop,
|
||||||
|
Reference in New Issue
Block a user