haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-02 07:47:32 +00:00
Code Issues Releases Wiki Activity

fix context menu position (#7510)

Browse Source 
Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
Aries 2025-02-24 17:05:48 +08:00 committed by GitHub
parent b4ed45225b
commit 0a11ce8282
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 37 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/components/sf-table/context-menu/index.js
View File

@ -1,5 +1,6 @@
import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react'; import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ModalPortal from '../../modal-portal';
import './index.css'; import './index.css';
@ -11,6 +12,11 @@ const ContextMenu = ({
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [position, setPosition] = useState({ top: 0, left: 0 }); const [position, setPosition] = useState({ top: 0, left: 0 });
const options = useMemo(() => {
if (!visible || !createContextMenuOptions) return [];
return createContextMenuOptions({ ...customProps, hideMenu: setVisible, menuPosition: position });
}, [customProps, visible, createContextMenuOptions, position]);
const handleHide = useCallback((event) => { const handleHide = useCallback((event) => {
if (!menuRef.current && visible) { if (!menuRef.current && visible) {
setVisible(false); setVisible(false);
@ -27,7 +33,27 @@ const ContextMenu = ({
top: y, top: y,
left: x left: x
}; };
if (!menuRef.current) return menuStyles; if (!menuRef.current) {
const indent = 10;
const menuMargin = 20;
const menuDefaultWidth = 200;
const dividerHeight = 16;
const optionHeight = 32;
const menuDefaultHeight = options.reduce((total, option) => {
if (option === 'Divider') {
return total + dividerHeight;
} else {
return total + optionHeight;
}
}, menuMargin + indent);
if (menuStyles.left + menuDefaultWidth + indent > window.innerWidth) {
menuStyles.left = window.innerWidth - menuDefaultWidth - indent;
}
if (menuStyles.top + menuDefaultHeight > window.innerHeight) {
menuStyles.top = window.innerHeight - menuDefaultHeight;
}
return menuStyles;
}
const rect = menuRef.current.getBoundingClientRect(); const rect = menuRef.current.getBoundingClientRect();
const tableCanvasContainerRect = getTableCanvasContainerRect(); const tableCanvasContainerRect = getTableCanvasContainerRect();
const tableContentRect = getTableContentRect(); const tableContentRect = getTableContentRect();
@ -48,7 +74,7 @@ const ContextMenu = ({
menuStyles.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0; menuStyles.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;
} }
return menuStyles; return menuStyles;
}, [getTableContentRect, getTableCanvasContainerRect]); }, [getTableContentRect, getTableCanvasContainerRect, options]);
const handleShow = useCallback((event) => { const handleShow = useCallback((event) => {
event.preventDefault(); event.preventDefault();
@ -81,22 +107,18 @@ const ContextMenu = ({
}; };
}, [visible, handleHide]); }, [visible, handleHide]);
const options = useMemo(() => {
if (!visible || !createContextMenuOptions) return [];
return createContextMenuOptions({ ...customProps, hideMenu: setVisible, menuPosition: position });
}, [customProps, visible, createContextMenuOptions, position]);
if (!Array.isArray(options) || options.length === 0) return null; if (!Array.isArray(options) || options.length === 0) return null;
return ( return (
<div <ModalPortal>
ref={menuRef} <div
className='dropdown-menu sf-table-context-menu' ref={menuRef}
style={position} className='dropdown-menu sf-table-context-menu'
> style={position}
{options} >
</div> {options}
</div>
</ModalPortal>
); );
}; };