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

feat(core): add context menu to card view (#13258)

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

## Summary by CodeRabbit

* **New Features**
* Added a context menu to document cards, allowing additional actions
when enabled.

* **Improvements**
* The context menu is now conditionally enabled based on live data,
ensuring it only appears when relevant.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
EYHN
2025-07-25 18:07:17 +08:00
committed by GitHub
parent 0d43350afd
commit 7409940cc6
1 changed files with 35 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/core/src/components/explorer/docs-view/doc-list-item.tsx
+35 -28
View File
@@ -371,40 +371,47 @@ export const CardViewDoc = ({ docId }: DocListItemProps) => {
const selectMode = useLiveData(contextValue.selectMode$);
const docsService = useService(DocsService);
const doc = useLiveData(docsService.list.doc$(docId));
const showMoreOperation = useLiveData(contextValue.showMoreOperation$);
if (!doc) {
return null;
}
return (
<li className={styles.cardViewRoot}>
<DragHandle id={docId} className={styles.cardDragHandle} />
<header className={styles.cardViewHeader}>
<DocIcon id={docId} className={styles.cardViewIcon} />
<DocTitle
id={docId}
className={styles.cardViewTitle}
data-testid="doc-list-item-title"
/>
{quickActions.map(action => {
return (
<Tooltip key={action.key} content={t.t(action.name)}>
<action.Component size="16" doc={doc} />
</Tooltip>
);
})}
{selectMode ? (
<Select id={docId} className={styles.cardViewCheckbox} />
) : (
<MoreMenuButton
docId={docId}
contentOptions={cardMoreMenuContentOptions}
iconProps={{ size: '16' }}
<ContextMenu
asChild
disabled={!showMoreOperation}
items={<MoreMenuContent docId={docId} />}
>
<li className={styles.cardViewRoot}>
<DragHandle id={docId} className={styles.cardDragHandle} />
<header className={styles.cardViewHeader}>
<DocIcon id={docId} className={styles.cardViewIcon} />
<DocTitle
id={docId}
className={styles.cardViewTitle}
data-testid="doc-list-item-title"
/>
)}
</header>
<DocPreview id={docId} className={styles.cardPreviewContainer} />
<CardViewProperties docId={docId} />
</li>
{quickActions.map(action => {
return (
<Tooltip key={action.key} content={t.t(action.name)}>
<action.Component size="16" doc={doc} />
</Tooltip>
);
})}
{selectMode ? (
<Select id={docId} className={styles.cardViewCheckbox} />
) : (
<MoreMenuButton
docId={docId}
contentOptions={cardMoreMenuContentOptions}
iconProps={{ size: '16' }}
/>
)}
</header>
<DocPreview id={docId} className={styles.cardPreviewContainer} />
<CardViewProperties docId={docId} />
</li>
</ContextMenu>
);
};