|
import BlogPostCard from './BlogPostCard' |
|
import BlogPostListEmpty from './BlogPostListEmpty' |
|
import { useGlobal } from '@/lib/global' |
|
import throttle from 'lodash.throttle' |
|
import { useCallback, useEffect, useRef, useState } from 'react' |
|
import CONFIG from '../config' |
|
import { siteConfig } from '@/lib/config' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = siteConfig('NEXT_POST_LIST_SUMMARY', null, CONFIG) }) => { |
|
const postsPerPage = parseInt(siteConfig('POSTS_PER_PAGE')) |
|
const [page, updatePage] = useState(1) |
|
const postsToShow = getPostByPage(page, posts, postsPerPage) |
|
|
|
let hasMore = false |
|
if (posts) { |
|
const totalCount = posts.length |
|
hasMore = page * postsPerPage < totalCount |
|
} |
|
|
|
const handleGetMore = () => { |
|
if (!hasMore) return |
|
updatePage(page + 1) |
|
} |
|
|
|
|
|
const scrollTrigger = useCallback(throttle(() => { |
|
const scrollS = window.scrollY + window.outerHeight |
|
const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0 |
|
if (scrollS > clientHeight + 100) { |
|
handleGetMore() |
|
} |
|
}, 500)) |
|
|
|
|
|
useEffect(() => { |
|
window.addEventListener('scroll', scrollTrigger) |
|
return () => { |
|
window.removeEventListener('scroll', scrollTrigger) |
|
} |
|
}, []) |
|
|
|
const targetRef = useRef(null) |
|
const { locale } = useGlobal() |
|
|
|
if (!postsToShow || postsToShow.length === 0) { |
|
return <BlogPostListEmpty currentSearch={currentSearch} /> |
|
} else { |
|
return <div ref={targetRef}> |
|
|
|
{/* 文章列表 */} |
|
<div id='posts-wrapper' className='flex flex-wrap space-y-1 lg:space-y-4'> |
|
{postsToShow.map(post => ( |
|
<BlogPostCard key={post.id} post={post} showSummary={showSummary} /> |
|
))} |
|
</div> |
|
|
|
<div> |
|
<div onClick={() => { |
|
handleGetMore() |
|
}} |
|
className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow hover:shadow-xl duration-200 dark:text-gray-200' |
|
> {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`} </div> |
|
</div> |
|
</div> |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getPostByPage = function (page, totalPosts, postsPerPage) { |
|
return totalPosts.slice( |
|
0, |
|
postsPerPage * page |
|
) |
|
} |
|
export default BlogPostListScroll |
|
|