From 4dea019fa65f2424fc0a0f44eaf860702cfce03a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?= <37972689+YangGuoXuan-0503@users.noreply.github.com> Date: Mon, 26 Aug 2024 17:35:36 +0800 Subject: [PATCH] fix: metadata contextmenu position (#6643) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 杨国璇 --- .../src/components/dir-view-mode/dir-views.js | 2 ++ .../components/context-menu/index.css | 1 + .../components/context-menu/index.jsx | 30 ++++++++----------- .../table/table-main/records/body.js | 2 ++ .../table-main/records/group-body/index.js | 2 ++ .../table/table-main/records/index.js | 5 ++++ .../table-masks/interaction-masks/index.js | 3 ++ 7 files changed, 28 insertions(+), 17 deletions(-) diff --git a/frontend/src/components/dir-view-mode/dir-views.js b/frontend/src/components/dir-view-mode/dir-views.js index d1d24bae5ac..8c4e8251170 100644 --- a/frontend/src/components/dir-view-mode/dir-views.js +++ b/frontend/src/components/dir-view-mode/dir-views.js @@ -34,6 +34,8 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => { updateEnableMetadata(value); }, [updateEnableMetadata]); + if (!enableMetadataManagement) return null; + return ( <> { const menuRef = useRef(null); const [visible, setVisible] = useState(false); @@ -220,41 +222,33 @@ const ContextMenu = ({ setVisible(false); }, [onOpenFileInNewTab, onOpenParentFolder, onCopySelected, onClearSelected, generateSummary]); - const getMenuPosition = (x = 0, y = 0) => { + const getMenuPosition = useCallback((x = 0, y = 0) => { let menuStyles = { top: y, left: x }; if (!menuRef.current) return menuStyles; - - const { innerWidth, innerHeight } = window; const rect = menuRef.current.getBoundingClientRect(); + const tableCanvasContainerRect = getTableCanvasContainerRect(); + const tableContentRect = getTableContentRect(); + const { right: innerWidth, bottom: innerHeight } = tableContentRect; + menuStyles.top = menuStyles.top - tableCanvasContainerRect.top; + menuStyles.left = menuStyles.left - tableCanvasContainerRect.left; - // Calculate the offset of the parent components - const parentRect = menuRef.current.parentElement.getBoundingClientRect(); - const offsetX = parentRect.left; - const offsetY = parentRect.top; - - // Adjust the position based on the offset - menuStyles.top = y - offsetY; - menuStyles.left = x - offsetX; - - const metadataResultFooterHeight = 32; - const contentHeight = innerHeight - metadataResultFooterHeight; - if (y + rect.height > contentHeight) { + if (y + rect.height > innerHeight - 10) { menuStyles.top -= rect.height; } if (x + rect.width > innerWidth) { menuStyles.left -= rect.width; } if (menuStyles.top < 0) { - menuStyles.top = rect.height < contentHeight ? (contentHeight - rect.height) / 2 : 0; + menuStyles.top = rect.bottom > innerHeight ? (innerHeight - 10 - rect.height) / 2 : 0; } if (menuStyles.left < 0) { menuStyles.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0; } return menuStyles; - }; + }, [getTableContentRect, getTableCanvasContainerRect]); useEffect(() => { const handleShow = (event) => { @@ -272,6 +266,7 @@ const ContextMenu = ({ return () => { document.removeEventListener('contextmenu', handleShow); }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { @@ -313,6 +308,7 @@ ContextMenu.propTypes = { selectedRange: PropTypes.object, selectedPosition: PropTypes.object, recordMetrics: PropTypes.object, + getTableContentRect: PropTypes.func, recordGetterByIndex: PropTypes.func, }; diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/body.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/body.js index 388e36207ca..8e99ff5ad29 100644 --- a/frontend/src/metadata/metadata-view/components/table/table-main/records/body.js +++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/body.js @@ -542,6 +542,7 @@ class RecordsBody extends Component { gridUtils={this.props.gridUtils} getCopiedRecordsAndColumnsFromRange={this.props.getCopiedRecordsAndColumnsFromRange} modifyColumnData={this.props.modifyColumnData} + getTableCanvasContainerRect={this.props.getTableCanvasContainerRect} />
{this.renderRecords()} @@ -608,6 +609,7 @@ RecordsBody.propTypes = { openDownloadFilesDialog: PropTypes.func, cacheDownloadFilesProps: PropTypes.func, onCellContextMenu: PropTypes.func, + getTableCanvasContainerRect: PropTypes.func, }; export default RecordsBody; diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/index.js index 8d2ce1aff9b..cddfca907d5 100644 --- a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/index.js +++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/index.js @@ -904,6 +904,7 @@ class GroupBody extends Component { gridUtils={this.props.gridUtils} getCopiedRecordsAndColumnsFromRange={this.props.getCopiedRecordsAndColumnsFromRange} modifyColumnData={this.props.modifyColumnData} + getTableCanvasContainerRect={this.props.getTableCanvasContainerRect} />
{this.renderGroups()} @@ -972,6 +973,7 @@ GroupBody.propTypes = { openDownloadFilesDialog: PropTypes.func, cacheDownloadFilesProps: PropTypes.func, onCellContextMenu: PropTypes.func, + getTableCanvasContainerRect: PropTypes.func, }; export default GroupBody; diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js index 0593a3e739a..3c4191c1546 100644 --- a/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js +++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js @@ -609,6 +609,10 @@ class Records extends Component { } }; + getTableCanvasContainerRect = () => { + return this.resultContainerRef.getBoundingClientRect(); + }; + renderRecordsBody = ({ containerWidth }) => { const { isGroupView, recordGetterByIndex, updateRecords } = this.props; const { recordMetrics, columnMetrics, colOverScanStartIdx, colOverScanEndIdx } = this.state; @@ -629,6 +633,7 @@ class Records extends Component { hasSelectedCell: this.hasSelectedCell, cacheScrollTop: this.storeScrollTop, onCellContextMenu: this.onCellContextMenu, + getTableCanvasContainerRect: this.getTableCanvasContainerRect, }; if (this.props.isGroupView) { return ( diff --git a/frontend/src/metadata/metadata-view/components/table/table-masks/interaction-masks/index.js b/frontend/src/metadata/metadata-view/components/table/table-masks/interaction-masks/index.js index dd3f498cb6e..8cb4d3fc850 100644 --- a/frontend/src/metadata/metadata-view/components/table/table-masks/interaction-masks/index.js +++ b/frontend/src/metadata/metadata-view/components/table/table-masks/interaction-masks/index.js @@ -1124,6 +1124,8 @@ class InteractionMasks extends React.Component { selectedRange: !isSelectedSingleCell ? selectedRange : null, onClearSelected: this.handleSelectCellsDelete, onCopySelected: this.onCopySelected, + getTableContentRect: this.props.getTableContentRect, + getTableCanvasContainerRect: this.props.getTableCanvasContainerRect })}
); @@ -1178,6 +1180,7 @@ InteractionMasks.propTypes = { gridUtils: PropTypes.object, getCopiedRecordsAndColumnsFromRange: PropTypes.func, onCommit: PropTypes.func, + getTableCanvasContainerRect: PropTypes.func, }; export default InteractionMasks;