Merge pull request #107 from fishshi/fix/CollectionCM

fix: Move Dialog to automatically close CollectionCM

src/renderer/src/components/Showcase/CollectionPage.tsx

@@ -35,7 +35,7 @@ export function CollectionPage(): JSX.Element {
                   'flex-shrink-0' // Preventing compression
                 )}
               >
-                <CollectionPoster collctionId={collectionId} />
+                <CollectionPoster collectionId={collectionId} />
               </div>
             ))}
           </div>

src/renderer/src/components/Showcase/Collections.tsx

@@ -66,7 +66,7 @@ export function Collections(): JSX.Element {
               'flex-shrink-0' // Preventing compression
             )}
           >
-            <CollectionPoster collctionId={collectionId} />
+            <CollectionPoster collectionId={collectionId} />
           </div>
         ))}
       </div>

src/renderer/src/components/Showcase/posters/CollectionPoster.tsx

@@ -6,19 +6,19 @@ import { CollectionCM } from '~/components/contextMenu/CollectionCM'
 import { GameImage } from '@ui/game-image'
 
 export function CollectionPoster({
-  collctionId,
+  collectionId,
   className
 }: {
-  collctionId: string
+  collectionId: string
   className?: string
 }): JSX.Element {
   const navigate = useNavigate()
   const { collections } = useCollections()
-  const collectionName = collections[collctionId].name
-  const gameId = collections[collctionId].games[0]
-  const length = collections[collctionId].games.length
+  const collectionName = collections[collectionId].name
+  const gameId = collections[collectionId].games[0]
+  const length = collections[collectionId].games.length
   return (
-    <CollectionCM collectionId={collctionId}>
+    <CollectionCM collectionId={collectionId}>
       <div
         className={cn(
           'group relative overflow-hidden shadow-custom-initial cursor-pointer w-[160px] h-[160px] rounded-[0.3rem]',
@@ -27,7 +27,7 @@ export function CollectionPoster({
           'hover:border-primary hover:border-2',
           '3xl:w-[190px] 3xl:h-[190px]'
         )}
-        onClick={() => navigate(`/library/collections/${collctionId}`)}
+        onClick={() => navigate(`/library/collections/${collectionId}`)}
       >
         {/* background mask layer */}
         <div

src/renderer/src/components/contextMenu/CollectionCM/main.tsx

@@ -5,7 +5,7 @@ import {
   ContextMenu,
   ContextMenuSeparator
 } from '@ui/context-menu'
-import { Dialog, DialogContent, DialogTrigger } from '@ui/dialog'
+import { Dialog, DialogContent } from '@ui/dialog'
 import { Input } from '@ui/input'
 import { Button } from '@ui/button'
 import {
@@ -16,8 +16,7 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger
+  AlertDialogTitle
 } from '@ui/alert-dialog'
 import { useCollections } from '~/hooks'
 import { cn } from '~/utils'
@@ -32,7 +31,8 @@ export function CollectionCM({
 }): JSX.Element {
   const { renameCollection, removeCollection, collections } = useCollections()
   const [newName, setNewName] = useState<string>('')
-  const [isOpen, setIsOpen] = useState<boolean>(false)
+  const [isRenaming, setisRenaming] = useState<boolean>(false)
+  const [isDeleting, setisDeleting] = useState<boolean>(false)
 
   useEffect(() => {
     if (collections[collectionId].name !== newName) {
@@ -43,67 +43,65 @@ export function CollectionCM({
   return (
     <ContextMenu>
       <ContextMenuTrigger>{children}</ContextMenuTrigger>
+
       <ContextMenuContent className={cn('w-40')}>
-        <Dialog open={isOpen}>
-          <DialogTrigger className={cn('w-full')}>
-            <ContextMenuItem
+        <ContextMenuItem onSelect={() => setisRenaming(true)}>重命名</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem onSelect={() => setisDeleting(true)}>删除</ContextMenuItem>
+      </ContextMenuContent>
+
+      <Dialog open={isRenaming}>
+        <DialogContent showCloseButton={false} className={cn('w-[500px] flex flex-row gap-3')}>
+          <Input
+            className={cn('w-full')}
+            value={newName}
+            onChange={(e) => {
+              setNewName(e.target.value)
+            }}
+          />
+          <Button
+            onClick={() => {
+              renameCollection(collectionId, newName)
+              setisRenaming(false)
+            }}
+          >
+            确定
+          </Button>
+          <Button
+            onClick={() => {
+              setisRenaming(false)
+              setNewName(collections[collectionId].name)
+            }}
+          >
+            取消
+          </Button>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog open={isDeleting}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>删除收藏</AlertDialogTitle>
+          </AlertDialogHeader>
+          <AlertDialogDescription>{`确定要删除收藏 ${collections[collectionId].name} 吗？`}</AlertDialogDescription>
+          <AlertDialogFooter>
+            <AlertDialogCancel
               onClick={() => {
-                setIsOpen(true)
+                setisDeleting(false)
               }}
-              onSelect={(e) => e.preventDefault()}
             >
-              重命名
-            </ContextMenuItem>
-          </DialogTrigger>
-          <DialogContent showCloseButton={false} className={cn('w-[500px] flex flex-row gap-3')}>
-            <Input
-              className={cn('w-full')}
-              value={newName}
-              onChange={(e) => {
-                setNewName(e.target.value)
-              }}
-            />
-            <Button
+              取消
+            </AlertDialogCancel>
+            <AlertDialogAction
               onClick={() => {
-                renameCollection(collectionId, newName)
-                setIsOpen(false)
+                removeCollection(collectionId)
               }}
             >
               确定
-            </Button>
-            <Button
-              onClick={() => {
-                setIsOpen(false)
-                setNewName(collections[collectionId].name)
-              }}
-            >
-              取消
-            </Button>
-          </DialogContent>
-        </Dialog>
-        <ContextMenuSeparator />
-        <AlertDialog>
-          <AlertDialogTrigger className={cn('w-full')}>
-            <ContextMenuItem onSelect={(e) => e.preventDefault()}>删除</ContextMenuItem>
-          </AlertDialogTrigger>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>删除收藏</AlertDialogTitle>
-            </AlertDialogHeader>
-            <AlertDialogDescription>{`确定要删除收藏 ${collections[collectionId].name} 吗？`}</AlertDialogDescription>
-            <AlertDialogFooter>
-              <AlertDialogCancel>取消</AlertDialogCancel>
-              <AlertDialogAction
-                onClick={() => {
-                  removeCollection(collectionId)
-                }}
-              >
-                确定
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-      </ContextMenuContent>
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </ContextMenu>
   )
 }