fix list bug

This commit is contained in:
PhilReact 2025-04-02 01:14:43 +03:00
parent 0fe689300e
commit a49d89b0d8
2 changed files with 23 additions and 11 deletions

View File

@ -65,7 +65,13 @@ const displayedItems = disablePagination ? items : items?.length < (displayedLim
width: '100%', width: '100%',
display: 'flex', display: 'flex',
justifyContent: 'center' justifyContent: 'center'
}} ref={index === displayedLimit ? lastItemRef2 : index === list.length -displayedLimit - 1 ? lastItemRef : null}> }} ref={
index === displayedLimit
? lastItemRef2
: index === (list.length - displayedLimit - 1 < displayedLimit ? displayedLimit - 1 : list.length - displayedLimit - 1 )
? lastItemRef
: null
}>
<ListItemWrapper <ListItemWrapper
defaultLoaderParams={defaultLoaderParams} defaultLoaderParams={defaultLoaderParams}
item={item} item={item}
@ -81,11 +87,12 @@ const displayedItems = disablePagination ? items : items?.length < (displayedLim
<LazyLoad <LazyLoad
onLoadMore={async () => { onLoadMore={async () => {
await onLoadMore(displayedLimit); await onLoadMore(displayedLimit);
if(!disablePagination && (displayedItems?.length === displayedLimit * 3)){
lastItemRef.current.scrollIntoView({ behavior: "auto", block: "end" }); lastItemRef.current.scrollIntoView({ behavior: "auto", block: "end" });
setTimeout(() => { setTimeout(() => {
window.scrollBy({ top: 50, behavior: "instant" }); // 'smooth' if needed window.scrollBy({ top: 50, behavior: "instant" }); // 'smooth' if needed
}, 0); }, 0);
}
}} }}
/> />
)} )}

View File

@ -40,7 +40,8 @@ export const VerticalPaginatedList = ({
const displayedItems = disablePagination const displayedItems = disablePagination
? items ? items
: items.slice(-(displayedLimit * 3)); : items?.length < (displayedLimit * 3) ? items?.slice(0, displayedLimit * 3) : items.slice(- (displayedLimit * 3));
return ( return (
<> <>
@ -60,6 +61,7 @@ export const VerticalPaginatedList = ({
)} )}
{displayedItems?.map((item, index, list) => { {displayedItems?.map((item, index, list) => {
return ( return (
<React.Fragment <React.Fragment
key={`${item?.name}-${item?.service}-${item?.identifier}`} key={`${item?.name}-${item?.service}-${item?.identifier}`}
@ -73,7 +75,7 @@ export const VerticalPaginatedList = ({
ref={ ref={
index === displayedLimit index === displayedLimit
? lastItemRef2 ? lastItemRef2
: index === list.length - displayedLimit - 1 : index === (list.length - displayedLimit - 1 < displayedLimit ? displayedLimit - 1 : list.length - displayedLimit - 1 )
? lastItemRef ? lastItemRef
: null : null
} }
@ -93,13 +95,16 @@ export const VerticalPaginatedList = ({
<LazyLoad <LazyLoad
onLoadMore={async () => { onLoadMore={async () => {
await onLoadMore(displayedLimit); await onLoadMore(displayedLimit);
lastItemRef.current.scrollIntoView({ if(!disablePagination && (displayedItems?.length === displayedLimit * 3)){
behavior: "auto", lastItemRef.current.scrollIntoView({
block: "end", behavior: "auto",
}); block: "end",
setTimeout(() => { });
window.scrollBy({ top: 50, behavior: "instant" }); // 'smooth' if needed setTimeout(() => {
}, 0); window.scrollBy({ top: 50, behavior: "instant" }); // 'smooth' if needed
}, 0);
}
}} }}
/> />
)} )}