fixed open issue when clicking dropdown option

pimcore · Nov 22, 2024 · 4d8a0c8 · 4d8a0c8
1 parent 45f20c1
commit 4d8a0c8
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 39 deletions.
diff --git a/assets/js/src/core/components/preview-card/preview-card.tsx b/assets/js/src/core/components/preview-card/preview-card.tsx
@@ -11,8 +11,8 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-import { Button, Card, Checkbox } from 'antd'
-import React, { useState } from 'react'
+import { Button, Card, Checkbox, type MenuRef } from 'antd'
+import React, { useRef, useState } from 'react'
 import { useStyle } from './preview-card.styles'
 import Meta from 'antd/es/card/Meta'
 import { Icon } from '../icon/icon'
@@ -32,12 +32,11 @@ interface PreviewCardProps {
   onClick?: (e) => void
 }
 
-export const PreviewCard = ({
-  name, dropdownItems, imgSrc, size = SizeTypes.SMALL, onClick
-}: PreviewCardProps
-): React.JSX.Element => {
+export const PreviewCard = (props: PreviewCardProps): React.JSX.Element => {
+  const { size = SizeTypes.SMALL } = props
   const { styles } = useStyle()
   const [selected, setSelected] = useState(false)
+  const dropdownMenuRef = useRef<MenuRef>(null)
 
   let classCard: string = ''
   let classImg: string = 'img'
@@ -62,13 +61,20 @@ export const PreviewCard = ({
       cover={
         <div className={ classImgDiv }>
           <PimcoreImage
-            alt={ name }
+            alt={ props.name }
             className={ classImg }
-            src={ imgSrc }
+            src={ props.imgSrc }
           />
         </div>
         }
-      onClick={ onClick }
+      onClick={ (event) => {
+        if (
+          dropdownMenuRef.current === null ||
+          dropdownMenuRef.current.menu?.list.contains(event.target as Node) === false
+        ) {
+          props.onClick?.(event)
+        }
+      } }
     >
       <Checkbox
         checked={ selected }
@@ -78,8 +84,9 @@ export const PreviewCard = ({
       />
       <Dropdown
         menu={ {
-          items: dropdownItems
+          items: props.dropdownItems
         } }
+        menuRef={ dropdownMenuRef }
         placement='bottomLeft'
       >
         <Button
@@ -93,7 +100,7 @@ export const PreviewCard = ({
         />
       </Dropdown>
       <Meta
-        title={ name }
+        title={ props.name }
       />
     </Card>
   )

diff --git a/...js/src/core/modules/asset/editor/types/folder/tab-manager/tabs/preview/flex-container.tsx b/...js/src/core/modules/asset/editor/types/folder/tab-manager/tabs/preview/flex-container.tsx
@@ -21,6 +21,9 @@ import { useAssetHelper } from '@Pimcore/modules/asset/hooks/use-asset-helper'
 import { type AssetGetTreeApiResponse } from '@Pimcore/modules/asset/asset-api-slice-enhanced'
 import { type DropdownProps } from '@Pimcore/components/dropdown/dropdown'
 import { Icon } from '@Pimcore/components/icon/icon'
+import { useRename } from '@Pimcore/modules/element/actions/rename/use-rename'
+import { type TreeNodeProps } from '@Pimcore/components/element-tree/node/tree-node'
+import { useDelete } from '@Pimcore/modules/element/actions/delete/use-delete'
 
 interface FlexContainerProps {
   assets: AssetGetTreeApiResponse
@@ -30,34 +33,8 @@ const FlexContainer = (props: FlexContainerProps): React.JSX.Element => {
   const { assets } = props
   const { t } = useTranslation()
   const { openAsset } = useAssetHelper()
-
-  const dropdownItems: DropdownProps['menu']['items'] = [
-    {
-      key: 'locate-in-tree',
-      icon: <Icon value="target" />,
-      label: t('preview-card.locate-in-tree')
-    },
-    {
-      key: 'info',
-      icon: <Icon value="info-circle-outlined" />,
-      label: t('info')
-    },
-    {
-      key: 'rename',
-      icon: <Icon value="rich-edit" />,
-      label: t('preview-card.rename')
-    },
-    {
-      key: 'download-zip',
-      icon: <Icon value="download-02" />,
-      label: t('preview-card.download-zip')
-    },
-    {
-      key: 'delete',
-      icon: <Icon value="trash" />,
-      label: t('preview-card.delete')
-    }
-  ]
+  const { renameContextMenuItem } = useRename('asset')
+  const { deleteContextMenuItem } = useDelete('asset')
 
   const cards: ReactNode[] = []
   assets.items.forEach((asset) => {
@@ -69,6 +46,26 @@ const FlexContainer = (props: FlexContainerProps): React.JSX.Element => {
       })
     }
 
+    const dropdownItems: DropdownProps['menu']['items'] = [
+      {
+        key: 'locate-in-tree',
+        icon: <Icon value="target" />,
+        label: t('preview-card.locate-in-tree')
+      },
+      {
+        key: 'info',
+        icon: <Icon value="info-circle-outlined" />,
+        label: t('info')
+      },
+      renameContextMenuItem(asset as any as TreeNodeProps),
+      {
+        key: 'download-zip',
+        icon: <Icon value="download-02" />,
+        label: t('preview-card.download-zip')
+      },
+      deleteContextMenuItem(asset as any as TreeNodeProps)
+    ]
+
     if ('imageThumbnailPath' in asset && asset.imageThumbnailPath !== undefined && asset.imageThumbnailPath !== null) {
       cards.push(
         <PreviewCard