estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: header nav load more app (#296)

Browse Source
This commit is contained in:
zxhlyh
2023-06-06 10:42:32 +08:00
committed by GitHub
parent d70086b841
commit e61c84ca72
4 changed files with 96 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
web/app/components/header/nav/nav-selector/index.tsx
View File

@@ -1,8 +1,9 @@
'use client'
import { Fragment } from 'react'
import { useCallback } from 'react'
import { ChevronDownIcon, PlusIcon } from '@heroicons/react/24/solid'
import { Menu, Transition } from '@headlessui/react'
import { Menu } from '@headlessui/react'
import { useRouter } from 'next/navigation'
import { debounce } from 'lodash-es'
import Indicator from '../../indicator'
import AppIcon from '@/app/components/base/app-icon'
@@ -13,11 +14,12 @@ type NavItem = {
icon: string
icon_background: string
}
export interface INavSelectorProps {
export type INavSelectorProps = {
navs: NavItem[]
curNav?: Omit<NavItem, 'link'>
createText: string
onCreate: () => void
onLoadmore?: () => void
}
const itemClassName = `
@@ -25,9 +27,18 @@ const itemClassName = `
rounded-lg font-normal hover:bg-gray-100 cursor-pointer
`
const NavSelector = ({ curNav, navs, createText, onCreate }: INavSelectorProps) => {
const NavSelector = ({ curNav, navs, createText, onCreate, onLoadmore }: INavSelectorProps) => {
const router = useRouter()
const handleScroll = useCallback(debounce((e) => {
if (typeof onLoadmore === 'function') {
const { clientHeight, scrollHeight, scrollTop } = e.target
if (clientHeight + scrollTop > scrollHeight - 50)
onLoadmore()
}
}, 50), [])
return (
<div className="">
<Menu as="div" className="relative inline-block text-left">
@@ -46,59 +57,49 @@ const NavSelector = ({ curNav, navs, createText, onCreate }: INavSelectorProps)
/>
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
<Menu.Items
className="
absolute -left-11 right-0 mt-1.5 w-60 max-w-80
divide-y divide-gray-100 origin-top-right rounded-lg bg-white
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.05)]
"
>
<Menu.Items
className="
absolute -left-11 right-0 mt-1.5 w-60 max-w-80
divide-y divide-gray-100 origin-top-right rounded-lg bg-white
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.05)]
"
>
<div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }}>
{
navs.map((nav) => (
<Menu.Item key={nav.id}>
<div className={itemClassName} onClick={() => router.push(nav.link)}>
<div className='relative w-6 h-6 mr-2 bg-[#D5F5F6] rounded-[6px]'>
<AppIcon size='tiny' icon={nav.icon} background={nav.icon_background}/>
<div className='flex justify-center items-center absolute -right-0.5 -bottom-0.5 w-2.5 h-2.5 bg-white rounded'>
<Indicator />
</div>
<div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
{
navs.map(nav => (
<Menu.Item key={nav.id}>
<div className={itemClassName} onClick={() => router.push(nav.link)}>
<div className='relative w-6 h-6 mr-2 bg-[#D5F5F6] rounded-[6px]'>
<AppIcon size='tiny' icon={nav.icon} background={nav.icon_background}/>
<div className='flex justify-center items-center absolute -right-0.5 -bottom-0.5 w-2.5 h-2.5 bg-white rounded'>
<Indicator />
</div>
{nav.name}
</div>
</Menu.Item>
))
}
</div>
<Menu.Item>
<div className='p-1' onClick={onCreate}>
<div
className='flex items-center h-12 rounded-lg cursor-pointer hover:bg-gray-100'
>
<div
className='
flex justify-center items-center
ml-4 mr-2 w-6 h-6 bg-gray-100 rounded-[6px]
border-[0.5px] border-gray-200 border-dashed
'
>
<PlusIcon className='w-4 h-4 text-gray-500' />
{nav.name}
</div>
<div className='font-normal text-[14px] text-gray-700'>{createText}</div>
</Menu.Item>
))
}
</div>
<Menu.Item>
<div className='p-1' onClick={onCreate}>
<div
className='flex items-center h-12 rounded-lg cursor-pointer hover:bg-gray-100'
>
<div
className='
flex justify-center items-center
ml-4 mr-2 w-6 h-6 bg-gray-100 rounded-[6px]
border-[0.5px] border-gray-200 border-dashed
'
>
<PlusIcon className='w-4 h-4 text-gray-500' />
</div>
<div className='font-normal text-[14px] text-gray-700'>{createText}</div>
</div>
</Menu.Item>
</Menu.Items>
</Transition>
</div>
</Menu.Item>
</Menu.Items>
</Menu>
</div>
)