feat: native entry context menu

RSSNext · May 18, 2024 · 95e971a · 95e971a
1 parent 879efca
commit 95e971a
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 58 deletions.
diff --git a/src/renderer/src/components/entry-column/context-menu.tsx b/src/renderer/src/components/entry-column/context-menu.tsx
diff --git a/src/renderer/src/components/entry-column/index.tsx b/src/renderer/src/components/entry-column/index.tsx
@@ -7,7 +7,8 @@ import { SocialMediaItem } from "./social-media-item"
 import { PictureItem } from "./picture-item"
 import { VideoItem } from "./video-item"
 import { NotificationItem } from "./notification-item"
-import { EntryContextMenu } from "./context-menu"
+import { showNativeMenu } from "@renderer/lib/native-menu"
+import { EntryItemWrapper } from "./item-wrapper"
 
 const gridMode = [2, 3]
 
@@ -69,21 +70,15 @@ export function EntryColumn({
             )}
           >
             {page.data?.map((entry) => (
-              <div
+              <EntryItemWrapper
                 key={entry.id}
-                className={cn(
-                  "rounded-md transition-colors",
-                  activedEntry?.id === entry.id && "bg-[#DEDDDC]",
-                )}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  setActivedEntry(entry)
-                }}
+                entry={entry}
+                activedEntry={activedEntry}
+                setActivedEntry={setActivedEntry}
+                view={activedList?.view}
               >
-                <EntryContextMenu entry={entry} view={activedList?.view}>
-                  <Item entry={entry} />
-                </EntryContextMenu>
-              </div>
+                <Item entry={entry} />
+              </EntryItemWrapper>
             ))}
           </m.div>
         ))}

diff --git a/src/renderer/src/components/entry-column/item-wrapper.tsx b/src/renderer/src/components/entry-column/item-wrapper.tsx
@@ -0,0 +1,55 @@
+import { ActivedEntry, EntriesResponse } from "@renderer/lib/types"
+import { cn } from "@renderer/lib/utils"
+import { showNativeMenu } from "@renderer/lib/native-menu"
+import { useEntryActions } from "@renderer/hooks/useEntryActions"
+
+export function EntryItemWrapper({
+  entry,
+  activedEntry,
+  setActivedEntry,
+  children,
+  view,
+}: {
+  entry: EntriesResponse[number]
+  activedEntry: ActivedEntry
+  setActivedEntry: (value: ActivedEntry) => void
+  children: React.ReactNode
+  view?: number
+}) {
+  if (!entry?.url || view === undefined) return children
+
+  const { execAction, items } = useEntryActions({
+    url: entry.url,
+    images: entry.images,
+    view,
+  })
+
+  return (
+    <div
+      key={entry.id}
+      className={cn(
+        "rounded-md transition-colors",
+        activedEntry?.id === entry.id && "bg-[#DEDDDC]",
+      )}
+      onClick={(e) => {
+        e.stopPropagation()
+        setActivedEntry(entry)
+      }}
+      onContextMenu={(e) => {
+        e.preventDefault()
+        showNativeMenu(
+          items
+            .filter((item) => !item.disabled)
+            .map((item) => ({
+              type: "text",
+              label: item.name,
+              click: () => execAction(item.action),
+            })),
+          e,
+        )
+      }}
+    >
+      {children}
+    </div>
+  )
+}