Commit 4250708a authored by JzoNg's avatar JzoNg

fix: total count after add new segment

parent 9816e13f
import React, { FC, CSSProperties } from "react"; import type { CSSProperties, FC } from 'react'
import { FixedSizeList as List } from "react-window"; import React from 'react'
import InfiniteLoader from "react-window-infinite-loader"; import { FixedSizeList as List } from 'react-window'
import type { SegmentDetailModel } from "@/models/datasets"; import InfiniteLoader from 'react-window-infinite-loader'
import SegmentCard from "./SegmentCard"; import SegmentCard from './SegmentCard'
import s from "./style.module.css"; import s from './style.module.css'
import type { SegmentDetailModel } from '@/models/datasets'
type IInfiniteVirtualListProps = { type IInfiniteVirtualListProps = {
hasNextPage?: boolean; // Are there more items to load? (This information comes from the most recent API request.) hasNextPage?: boolean // Are there more items to load? (This information comes from the most recent API request.)
isNextPageLoading: boolean; // Are we currently loading a page of items? (This may be an in-flight flag in your Redux store for example.) isNextPageLoading: boolean // Are we currently loading a page of items? (This may be an in-flight flag in your Redux store for example.)
items: Array<SegmentDetailModel[]>; // Array of items loaded so far. items: Array<SegmentDetailModel[]> // Array of items loaded so far.
loadNextPage: () => Promise<any>; // Callback function responsible for loading the next page of items. loadNextPage: () => Promise<any> // Callback function responsible for loading the next page of items.
onClick: (detail: SegmentDetailModel) => void; onClick: (detail: SegmentDetailModel) => void
onChangeSwitch: (segId: string, enabled: boolean) => Promise<void>; onChangeSwitch: (segId: string, enabled: boolean) => Promise<void>
}; }
const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
hasNextPage, hasNextPage,
...@@ -23,28 +24,29 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({ ...@@ -23,28 +24,29 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
onChangeSwitch, onChangeSwitch,
}) => { }) => {
// If there are more items to be loaded then add an extra row to hold a loading indicator. // If there are more items to be loaded then add an extra row to hold a loading indicator.
const itemCount = hasNextPage ? items.length + 1 : items.length; const itemCount = hasNextPage ? items.length + 1 : items.length
// Only load 1 page of items at a time. // Only load 1 page of items at a time.
// Pass an empty callback to InfiniteLoader in case it asks us to load more than once. // Pass an empty callback to InfiniteLoader in case it asks us to load more than once.
const loadMoreItems = isNextPageLoading ? () => { } : loadNextPage; const loadMoreItems = isNextPageLoading ? () => { } : loadNextPage
// Every row is loaded except for our loading indicator row. // Every row is loaded except for our loading indicator row.
const isItemLoaded = (index: number) => !hasNextPage || index < items.length; const isItemLoaded = (index: number) => !hasNextPage || index < items.length
// Render an item or a loading indicator. // Render an item or a loading indicator.
const Item = ({ index, style }: { index: number; style: CSSProperties }) => { const Item = ({ index, style }: { index: number; style: CSSProperties }) => {
let content; let content
if (!isItemLoaded(index)) { if (!isItemLoaded(index)) {
content = ( content = (
<> <>
{[1, 2, 3].map((v) => ( {[1, 2, 3].map(v => (
<SegmentCard loading={true} detail={{ position: v } as any} /> <SegmentCard loading={true} detail={{ position: v } as any} />
))} ))}
</> </>
); )
} else { }
content = items[index].map((segItem) => ( else {
content = items[index].map(segItem => (
<SegmentCard <SegmentCard
key={segItem.id} key={segItem.id}
detail={segItem} detail={segItem}
...@@ -52,15 +54,15 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({ ...@@ -52,15 +54,15 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
onChangeSwitch={onChangeSwitch} onChangeSwitch={onChangeSwitch}
loading={false} loading={false}
/> />
)); ))
} }
return ( return (
<div style={style} className={s.cardWrapper}> <div style={style} className={s.cardWrapper}>
{content} {content}
</div> </div>
); )
}; }
return ( return (
<InfiniteLoader <InfiniteLoader
...@@ -73,7 +75,7 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({ ...@@ -73,7 +75,7 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
ref={ref} ref={ref}
className="List" className="List"
height={800} height={800}
width={"100%"} width={'100%'}
itemSize={200} itemSize={200}
itemCount={itemCount} itemCount={itemCount}
onItemsRendered={onItemsRendered} onItemsRendered={onItemsRendered}
...@@ -82,6 +84,6 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({ ...@@ -82,6 +84,6 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
</List> </List>
)} )}
</InfiniteLoader> </InfiniteLoader>
); )
}; }
export default InfiniteVirtualList; export default InfiniteVirtualList
...@@ -227,7 +227,7 @@ const Completed: FC<ICompletedProps> = ({ showNewSegmentModal, onNewSegmentModal ...@@ -227,7 +227,7 @@ const Completed: FC<ICompletedProps> = ({ showNewSegmentModal, onNewSegmentModal
if (!e) { if (!e) {
setAllSegments([...(!needLastId ? [] : allSegments), ...splitArray(res.data || [])]) setAllSegments([...(!needLastId ? [] : allSegments), ...splitArray(res.data || [])])
setLastSegmentsRes(res) setLastSegmentsRes(res)
if (!lastSegmentsRes) if (!lastSegmentsRes || !needLastId)
setTotal(res?.total || 0) setTotal(res?.total || 0)
} }
setLoading(false) setLoading(false)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment