Files
NotionNext/themes/gitbook/components/NavPostList.js
2023-07-30 11:44:18 +08:00

58 lines
1.7 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import NavPostListEmpty from './NavPostListEmpty'
import { useRouter } from 'next/router'
import NavPostItem from './NavPostItem'
/**
* 博客列表滚动分页
* @param posts 所有文章
* @param tags 所有标签
* @returns {JSX.Element}
* @constructor
*/
const NavPostList = (props) => {
const { filteredNavPages } = props
const router = useRouter()
let selectedSth = false
const groupedArray = filteredNavPages?.reduce((groups, item) => {
const categoryName = item?.category ? item?.category : '' // 将category转换为字符串
const lastGroup = groups[groups.length - 1] // 获取最后一个分组
if (!lastGroup || lastGroup?.category !== categoryName) { // 如果当前元素的category与上一个元素不同则创建新分组
groups.push({ category: categoryName, items: [] })
}
groups[groups.length - 1].items.push(item) // 将元素加入对应的分组
return groups
}, [])
// 处理是否选中
groupedArray?.map((group) => {
let groupSelected = false
for (const post of group?.items) {
if (router.asPath.split('?')[0] === '/' + post.slug) {
groupSelected = true
selectedSth = true
}
}
group.selected = groupSelected
return null
})
// 如果都没有选中默认打开第一个
if (!selectedSth && groupedArray && groupedArray?.length > 0) {
groupedArray[0].selected = true
}
if (!groupedArray || groupedArray.length === 0) {
return <NavPostListEmpty />
} else {
return <div id='posts-wrapper' className='w-full flex-grow'>
{/* 文章列表 */}
{groupedArray?.map((group, index) => <NavPostItem key={index} group={group} onHeightChange={props.onHeightChange}/>)}
</div>
}
}
export default NavPostList