76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
'use client'
|
|
import React, { useRef } from 'react'
|
|
|
|
import { useRouter } from 'next/navigation'
|
|
import { useHover } from 'ahooks'
|
|
import cn from '@/utils/classnames'
|
|
import ItemOperation from '@/app/components/explore/item-operation'
|
|
import AppIcon from '@/app/components/base/app-icon'
|
|
import type { AppIconType } from '@/types/app'
|
|
|
|
export type IAppNavItemProps = {
|
|
expand: boolean
|
|
name: string
|
|
id: string
|
|
icon_type: AppIconType | null
|
|
icon: string
|
|
icon_background: string
|
|
icon_url: string
|
|
isSelected: boolean
|
|
isPinned: boolean
|
|
togglePin: () => void
|
|
uninstallable: boolean
|
|
onDelete: (id: string) => void
|
|
}
|
|
|
|
export default function AppNavItem({
|
|
expand,
|
|
name,
|
|
id,
|
|
icon_type,
|
|
icon,
|
|
icon_background,
|
|
icon_url,
|
|
isSelected,
|
|
isPinned,
|
|
togglePin,
|
|
uninstallable,
|
|
onDelete,
|
|
}: IAppNavItemProps) {
|
|
const router = useRouter()
|
|
const url = `/explore/installed/${id}`
|
|
const ref = useRef(null)
|
|
const isHovering = useHover(ref)
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
key={id}
|
|
className={cn('text-components-menu-item-text system-sm-medium flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal',
|
|
isSelected ? 'bg-state-base-active text-components-menu-item-text-active' : 'hover:bg-state-base-hover hover:text-components-menu-item-text-hover',
|
|
)}
|
|
onClick={() => {
|
|
router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().
|
|
}}
|
|
>
|
|
{!expand && <AppIcon size='tiny' iconType={icon_type} icon={icon} background={icon_background} imageUrl={icon_url} />}
|
|
{expand && (
|
|
<>
|
|
<div className='flex items-center space-x-2 w-0 grow'>
|
|
<AppIcon size='tiny' iconType={icon_type} icon={icon} background={icon_background} imageUrl={icon_url} />
|
|
<div className='overflow-hidden text-ellipsis whitespace-nowrap' title={name}>{name}</div>
|
|
</div>
|
|
<div className='shrink-0 h-6' onClick={e => e.stopPropagation()}>
|
|
<ItemOperation
|
|
isPinned={isPinned}
|
|
isItemHovering={isHovering}
|
|
togglePin={togglePin}
|
|
isShowDelete={!uninstallable && !isSelected}
|
|
onDelete={() => onDelete(id)}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|