[bugfix]: handle song grid sparse array
This commit is contained in:
parent
a9e0689619
commit
c5e8472746
1 changed files with 13 additions and 8 deletions
|
@ -13,13 +13,15 @@ import InfiniteLoader from 'react-window-infinite-loader';
|
||||||
import { VirtualGridWrapper } from '/@/renderer/components/virtual-grid/virtual-grid-wrapper';
|
import { VirtualGridWrapper } from '/@/renderer/components/virtual-grid/virtual-grid-wrapper';
|
||||||
import type { CardRoute, CardRow, PlayQueueAddOptions } from '/@/renderer/types';
|
import type { CardRoute, CardRow, PlayQueueAddOptions } from '/@/renderer/types';
|
||||||
import { ListDisplayType } from '/@/renderer/types';
|
import { ListDisplayType } from '/@/renderer/types';
|
||||||
import { LibraryItem } from '/@/renderer/api/types';
|
import { AnyLibraryItem, Genre, LibraryItem } from '/@/renderer/api/types';
|
||||||
|
|
||||||
|
type LibraryItemOrGenre = AnyLibraryItem | Genre;
|
||||||
|
|
||||||
export type VirtualInfiniteGridRef = {
|
export type VirtualInfiniteGridRef = {
|
||||||
resetLoadMoreItemsCache: () => void;
|
resetLoadMoreItemsCache: () => void;
|
||||||
scrollTo: (index: number) => void;
|
scrollTo: (index: number) => void;
|
||||||
setItemData: (data: any[]) => void;
|
setItemData: (data: LibraryItemOrGenre[]) => void;
|
||||||
updateItemData: (rule: (item: any) => any) => void;
|
updateItemData: (rule: (item: LibraryItemOrGenre) => LibraryItemOrGenre) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
interface VirtualGridProps
|
interface VirtualGridProps
|
||||||
|
@ -27,7 +29,7 @@ interface VirtualGridProps
|
||||||
cardRows: CardRow<any>[];
|
cardRows: CardRow<any>[];
|
||||||
display?: ListDisplayType;
|
display?: ListDisplayType;
|
||||||
fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
|
fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
|
||||||
fetchInitialData?: () => any;
|
fetchInitialData?: () => LibraryItemOrGenre[];
|
||||||
handleFavorite?: (options: {
|
handleFavorite?: (options: {
|
||||||
id: string[];
|
id: string[];
|
||||||
isFavorite: boolean;
|
isFavorite: boolean;
|
||||||
|
@ -70,7 +72,10 @@ export const VirtualInfiniteGrid = forwardRef(
|
||||||
const listRef = useRef<any>(null);
|
const listRef = useRef<any>(null);
|
||||||
const loader = useRef<InfiniteLoader>(null);
|
const loader = useRef<InfiniteLoader>(null);
|
||||||
|
|
||||||
const [itemData, setItemData] = useState<any[]>(fetchInitialData?.() || []);
|
// itemData can be a sparse array. Treat the intermediate elements as being undefined
|
||||||
|
const [itemData, setItemData] = useState<Array<LibraryItemOrGenre | undefined>>(
|
||||||
|
fetchInitialData?.() || [],
|
||||||
|
);
|
||||||
|
|
||||||
const { itemHeight, rowCount, columnCount } = useMemo(() => {
|
const { itemHeight, rowCount, columnCount } = useMemo(() => {
|
||||||
const itemsPerRow = width ? Math.floor(width / (itemSize + itemGap * 2)) : 5;
|
const itemsPerRow = width ? Math.floor(width / (itemSize + itemGap * 2)) : 5;
|
||||||
|
@ -109,7 +114,7 @@ export const VirtualInfiniteGrid = forwardRef(
|
||||||
});
|
});
|
||||||
|
|
||||||
setItemData((itemData) => {
|
setItemData((itemData) => {
|
||||||
const newData: any[] = [...itemData];
|
const newData = [...itemData];
|
||||||
|
|
||||||
let itemIndex = 0;
|
let itemIndex = 0;
|
||||||
for (let rowIndex = start; rowIndex < itemCount; rowIndex += 1) {
|
for (let rowIndex = start; rowIndex < itemCount; rowIndex += 1) {
|
||||||
|
@ -135,11 +140,11 @@ export const VirtualInfiniteGrid = forwardRef(
|
||||||
scrollTo: (index: number) => {
|
scrollTo: (index: number) => {
|
||||||
listRef?.current?.scrollToItem(index);
|
listRef?.current?.scrollToItem(index);
|
||||||
},
|
},
|
||||||
setItemData: (data: any[]) => {
|
setItemData: (data: LibraryItemOrGenre[]) => {
|
||||||
setItemData(data);
|
setItemData(data);
|
||||||
},
|
},
|
||||||
updateItemData: (rule) => {
|
updateItemData: (rule) => {
|
||||||
setItemData((data) => data.map(rule));
|
setItemData((data) => data.map((item) => item && rule(item)));
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
Reference in a new issue