d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-04 23:16:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

导航文章排他自动折叠

Browse Source
This commit is contained in:
tangly1024.com
2024-04-25 16:49:57 +08:00
parent 939515b43c
commit 509db899b4
5 changed files with 131 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
themes/gitbook/components/NavPostItem.js
View File

@@ -1,9 +1,8 @@
import BlogPostCard from './BlogPostCard'
import { useState } from 'react'
import Collapse from '@/components/Collapse'
import Badge from '@/components/Badge'
import Collapse from '@/components/Collapse'
import { siteConfig } from '@/lib/config'
import CONFIG from '../config'
import BlogPostCard from './BlogPostCard'
/**
* 导航列表
@@ -12,36 +11,53 @@ import CONFIG from '../config'
* @returns {JSX.Element}
* @constructor
*/
const NavPostItem = (props) => {
const { group } = props
const [isOpen, changeIsOpen] = useState(group?.selected)
const NavPostItem = props => {
const { group, expanded, toggleItem } = props // 接收传递的展开状态和切换函数
// const [isOpen, setIsOpen] = useState(expanded) // 使用展开状态作为组件内部状态
// 当展开状态改变时触发切换函数，并根据传入的展开状态更新内部状态
const toggleOpenSubMenu = () => {
changeIsOpen(!isOpen)
toggleItem() // 调用父组件传递的切换函数
// setIsOpen(!expanded) // 更新内部状态为传入的展开状态的相反值
}
const groupHasLatest = group?.items?.some(post => post.isLatest)
if (group?.category) {
return <>
<div onClick={toggleOpenSubMenu}
className='select-none relative flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
<span>{group?.category}</span>
<div className='inline-flex items-center select-none pointer-events-none '><i className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
{groupHasLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && !isOpen && <Badge/>}
return (
<>
<div
onClick={toggleOpenSubMenu}
className='select-none relative flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600'
key={group?.category}>
<span>{group?.category}</span>
<div className='inline-flex items-center select-none pointer-events-none '>
<i
className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-200 ${expanded ? '-rotate-90' : ''}`}></i>
</div>
{groupHasLatest &&
siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) &&
!expanded && <Badge />}
</div>
<Collapse isOpen={expanded} onHeightChange={props.onHeightChange}>
{group?.items?.map(post => (
<div key={post.id} className='ml-3 border-l'>
<BlogPostCard className='text-sm ml-3' post={post} />
</div>
<Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{group?.items?.map(post => (<div key={post.id} className='ml-3 border-l'>
<BlogPostCard className='text-sm ml-3' post={post} /></div>))
}
</Collapse>
</>
))}
</Collapse>
</>
)
} else {
return <>
{group?.items?.map(post => (<div key={post.id} >
<BlogPostCard className='text-sm py-2' post={post} /></div>))
}
</>
return (
<>
{group?.items?.map(post => (
<div key={post.id}>
<BlogPostCard className='text-sm py-2' post={post} />
</div>
))}
</>
)
}
}