Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-08-01 01:29:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): add context menu for navigation and explorer (#13216)

Browse Source 
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Introduced a customizable context menu component for desktop
interfaces, enabling right-click menus in various UI elements.
* Added context menu support to document list items and navigation tree
nodes, allowing users to access additional operations via right-click.
* **Improvements**
* Enhanced submenu and menu item components to support both dropdown and
context menu variants based on context.
* Updated click handling in workbench links to prevent unintended
actions on non-left mouse button clicks.
* **Chores**
* Added `@radix-ui/react-context-menu` as a dependency to relevant
frontend packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
EYHN
2025-07-16 12:40:10 +08:00
committed by GitHub
parent d44771dfe9
commit cdff5c3117
12 changed files with 247 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/core/src/desktop/components/navigation-panel/tree/node.tsx
+47 -39
View File
@@ -1,4 +1,5 @@
import {
ContextMenu,
DropIndicator,
type DropTargetDropEvent,
type DropTargetOptions,
@@ -466,47 +467,54 @@ export const NavigationPanelTreeNode = ({
ref={rootRef}
{...otherProps}
>
<div
className={clsx(styles.contentContainer, styles.draggedOverEffect)}
data-open={!collapsed}
data-self-dragged-over={isSelfDraggedOver}
ref={dropTargetRef}
<ContextMenu
asChild
items={menuOperations.map(({ view, index }) => (
<Fragment key={index}>{view}</Fragment>
))}
>
{to ? (
<LinkComponent
to={to}
className={styles.linkItemRoot}
ref={dragRef}
draggable={false}
>
{content}
</LinkComponent>
) : (
<div ref={dragRef}>{content}</div>
)}
<CustomDragPreview>
<div className={styles.draggingContainer}>{content}</div>
</CustomDragPreview>
{treeInstruction &&
// Do not show drop indicator for self dragged over
!(treeInstruction.type !== 'reparent' && isSelfDraggedOver) &&
treeInstruction.type !== 'instruction-blocked' && (
<DropIndicator instruction={treeInstruction} />
<div
className={clsx(styles.contentContainer, styles.draggedOverEffect)}
data-open={!collapsed}
data-self-dragged-over={isSelfDraggedOver}
ref={dropTargetRef}
>
{to ? (
<LinkComponent
to={to}
className={styles.linkItemRoot}
ref={dragRef}
draggable={false}
>
{content}
</LinkComponent>
) : (
<div ref={dragRef}>{content}</div>
)}
{draggedOver &&
dropEffect &&
draggedOverPosition &&
!isSelfDraggedOver &&
draggedOverDraggable && (
<DropEffect
dropEffect={dropEffect({
source: draggedOverDraggable,
treeInstruction: treeInstruction,
})}
position={draggedOverPosition}
/>
)}
</div>
<CustomDragPreview>
<div className={styles.draggingContainer}>{content}</div>
</CustomDragPreview>
{treeInstruction &&
// Do not show drop indicator for self dragged over
!(treeInstruction.type !== 'reparent' && isSelfDraggedOver) &&
treeInstruction.type !== 'instruction-blocked' && (
<DropIndicator instruction={treeInstruction} />
)}
{draggedOver &&
dropEffect &&
draggedOverPosition &&
!isSelfDraggedOver &&
draggedOverDraggable && (
<DropEffect
dropEffect={dropEffect({
source: draggedOverDraggable,
treeInstruction: treeInstruction,
})}
position={draggedOverPosition}
/>
)}
</div>
</ContextMenu>
<Collapsible.Content style={{ display: dragging ? 'none' : undefined }}>
{/* For lastInGroup check, the placeholder must be placed above all children in the dom */}
<div className={styles.collapseContentPlaceholder}>