Remove tanstack/react-virtual package
This commit is contained in:
jeffvli
parent
822dcd8429
commit
8b5e463546
3 changed files with 179 additions and 218 deletions
38
package-lock.json
generated
38
package-lock.json
generated
|
|
@ -26,7 +26,6 @@
|
||||||
"@mantine/utils": "^6.0.0-alpha.5",
|
"@mantine/utils": "^6.0.0-alpha.5",
|
||||||
"@tanstack/react-query": "^4.24.4",
|
"@tanstack/react-query": "^4.24.4",
|
||||||
"@tanstack/react-query-devtools": "^4.24.4",
|
"@tanstack/react-query-devtools": "^4.24.4",
|
||||||
"@tanstack/react-virtual": "^3.0.0-beta.43",
|
|
||||||
"dayjs": "^1.11.6",
|
"dayjs": "^1.11.6",
|
||||||
"electron-debug": "^3.2.0",
|
"electron-debug": "^3.2.0",
|
||||||
"electron-localshortcut": "^3.2.1",
|
"electron-localshortcut": "^3.2.1",
|
||||||
|
|
@ -2284,30 +2283,6 @@
|
||||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@tanstack/react-virtual": {
|
|
||||||
"version": "3.0.0-beta.43",
|
|
||||||
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.43.tgz",
|
|
||||||
"integrity": "sha512-VrjbYlMXk8h8zu8sUOnZp8btBR3Scdsz0GJ/xcaRWsc6kmHJ9AUyayl/v4jFA5KN3mq4obdnzMW9SUVEgt2lfQ==",
|
|
||||||
"dependencies": {
|
|
||||||
"@tanstack/virtual-core": "3.0.0-beta.43"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "github",
|
|
||||||
"url": "https://github.com/sponsors/tannerlinsley"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@tanstack/virtual-core": {
|
|
||||||
"version": "3.0.0-beta.43",
|
|
||||||
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.43.tgz",
|
|
||||||
"integrity": "sha512-Hnpjtv4YuI7UgtGmlZ7yOkBXLwnvErilseWiVUBH66SU11CtkOWDdsKmh7LSrvqo+x/97wFtS+xmXmW365Igpg==",
|
|
||||||
"funding": {
|
|
||||||
"type": "github",
|
|
||||||
"url": "https://github.com/sponsors/tannerlinsley"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@teamsupercell/typings-for-css-modules-loader": {
|
"node_modules/@teamsupercell/typings-for-css-modules-loader": {
|
||||||
"version": "2.5.2",
|
"version": "2.5.2",
|
||||||
"resolved": "https://registry.npmjs.org/@teamsupercell/typings-for-css-modules-loader/-/typings-for-css-modules-loader-2.5.2.tgz",
|
"resolved": "https://registry.npmjs.org/@teamsupercell/typings-for-css-modules-loader/-/typings-for-css-modules-loader-2.5.2.tgz",
|
||||||
|
|
@ -25238,19 +25213,6 @@
|
||||||
"use-sync-external-store": "^1.2.0"
|
"use-sync-external-store": "^1.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@tanstack/react-virtual": {
|
|
||||||
"version": "3.0.0-beta.43",
|
|
||||||
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.43.tgz",
|
|
||||||
"integrity": "sha512-VrjbYlMXk8h8zu8sUOnZp8btBR3Scdsz0GJ/xcaRWsc6kmHJ9AUyayl/v4jFA5KN3mq4obdnzMW9SUVEgt2lfQ==",
|
|
||||||
"requires": {
|
|
||||||
"@tanstack/virtual-core": "3.0.0-beta.43"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@tanstack/virtual-core": {
|
|
||||||
"version": "3.0.0-beta.43",
|
|
||||||
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.43.tgz",
|
|
||||||
"integrity": "sha512-Hnpjtv4YuI7UgtGmlZ7yOkBXLwnvErilseWiVUBH66SU11CtkOWDdsKmh7LSrvqo+x/97wFtS+xmXmW365Igpg=="
|
|
||||||
},
|
|
||||||
"@teamsupercell/typings-for-css-modules-loader": {
|
"@teamsupercell/typings-for-css-modules-loader": {
|
||||||
"version": "2.5.2",
|
"version": "2.5.2",
|
||||||
"resolved": "https://registry.npmjs.org/@teamsupercell/typings-for-css-modules-loader/-/typings-for-css-modules-loader-2.5.2.tgz",
|
"resolved": "https://registry.npmjs.org/@teamsupercell/typings-for-css-modules-loader/-/typings-for-css-modules-loader-2.5.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -263,7 +263,6 @@
|
||||||
"@mantine/utils": "^6.0.0-alpha.5",
|
"@mantine/utils": "^6.0.0-alpha.5",
|
||||||
"@tanstack/react-query": "^4.24.4",
|
"@tanstack/react-query": "^4.24.4",
|
||||||
"@tanstack/react-query-devtools": "^4.24.4",
|
"@tanstack/react-query-devtools": "^4.24.4",
|
||||||
"@tanstack/react-virtual": "^3.0.0-beta.43",
|
|
||||||
"dayjs": "^1.11.6",
|
"dayjs": "^1.11.6",
|
||||||
"electron-debug": "^3.2.0",
|
"electron-debug": "^3.2.0",
|
||||||
"electron-localshortcut": "^3.2.1",
|
"electron-localshortcut": "^3.2.1",
|
||||||
|
|
|
||||||
|
|
@ -1,198 +1,198 @@
|
||||||
import { useMemo, useRef } from 'react';
|
// import { useMemo, useRef } from 'react';
|
||||||
import { ColDef } from '@ag-grid-community/core';
|
// import { ColDef } from '@ag-grid-community/core';
|
||||||
import { Box, Group, Stack } from '@mantine/core';
|
// import { Box, Group, Stack } from '@mantine/core';
|
||||||
import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
|
// import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
|
||||||
import { useParams } from 'react-router';
|
// import { useParams } from 'react-router';
|
||||||
import { AlbumListSort, SortOrder, SongListSort, Song } from '/@/renderer/api/types';
|
// import { AlbumListSort, SortOrder, SongListSort, Song } from '/@/renderer/api/types';
|
||||||
import {
|
// import {
|
||||||
getColumnDefs,
|
// getColumnDefs,
|
||||||
VirtualTable,
|
// VirtualTable,
|
||||||
Text,
|
// Text,
|
||||||
TextTitle,
|
// TextTitle,
|
||||||
NativeScrollArea,
|
// NativeScrollArea,
|
||||||
} from '/@/renderer/components';
|
// } from '/@/renderer/components';
|
||||||
import { useAlbumList } from '/@/renderer/features/albums';
|
// import { useAlbumList } from '/@/renderer/features/albums';
|
||||||
import { PlayButton } from '/@/renderer/features/shared';
|
// import { PlayButton } from '/@/renderer/features/shared';
|
||||||
import { useSongList } from '/@/renderer/features/songs';
|
// import { useSongList } from '/@/renderer/features/songs';
|
||||||
import { useSongListStore } from '/@/renderer/store';
|
// import { useSongListStore } from '/@/renderer/store';
|
||||||
import { usePlayQueueAdd } from '/@/renderer/features/player';
|
// import { usePlayQueueAdd } from '/@/renderer/features/player';
|
||||||
import { Play } from '/@/renderer/types';
|
// import { Play } from '/@/renderer/types';
|
||||||
|
|
||||||
const RowVirtualizer = ({
|
// const RowVirtualizer = ({
|
||||||
rows,
|
// rows,
|
||||||
columnDefs,
|
// columnDefs,
|
||||||
handlePlay,
|
// handlePlay,
|
||||||
rowVirtualizer,
|
// rowVirtualizer,
|
||||||
}: {
|
// }: {
|
||||||
columnDefs: ColDef[];
|
// columnDefs: ColDef[];
|
||||||
handlePlay: (play: Play, data: any[]) => void;
|
// handlePlay: (play: Play, data: any[]) => void;
|
||||||
rowVirtualizer: Virtualizer<any, Element>;
|
// rowVirtualizer: Virtualizer<any, Element>;
|
||||||
rows: any[];
|
// rows: any[];
|
||||||
}) => {
|
// }) => {
|
||||||
const items = rowVirtualizer.getVirtualItems();
|
// const items = rowVirtualizer.getVirtualItems();
|
||||||
|
|
||||||
return (
|
// return (
|
||||||
<div
|
// <div
|
||||||
style={{
|
// style={{
|
||||||
height: `${rowVirtualizer.getTotalSize()}px`,
|
// height: `${rowVirtualizer.getTotalSize()}px`,
|
||||||
position: 'relative',
|
// position: 'relative',
|
||||||
width: '100%',
|
// width: '100%',
|
||||||
}}
|
// }}
|
||||||
>
|
// >
|
||||||
{items.map((virtualRow) => (
|
// {items.map((virtualRow) => (
|
||||||
<div
|
// <div
|
||||||
key={rows?.[virtualRow.index].id}
|
// key={rows?.[virtualRow.index].id}
|
||||||
style={{
|
// style={{
|
||||||
height: `${(rows?.[virtualRow.index].songs?.length || 0) * 60 + 300}px`,
|
// height: `${(rows?.[virtualRow.index].songs?.length || 0) * 60 + 300}px`,
|
||||||
left: 0,
|
// left: 0,
|
||||||
position: 'absolute',
|
// position: 'absolute',
|
||||||
top: 0,
|
// top: 0,
|
||||||
transform: `translateY(${virtualRow.start}px)`,
|
// transform: `translateY(${virtualRow.start}px)`,
|
||||||
width: '100%',
|
// width: '100%',
|
||||||
}}
|
// }}
|
||||||
>
|
// >
|
||||||
<Stack
|
// <Stack
|
||||||
p="2rem"
|
// p="2rem"
|
||||||
spacing="lg"
|
// spacing="lg"
|
||||||
>
|
// >
|
||||||
<Group noWrap>
|
// <Group noWrap>
|
||||||
<img
|
// <img
|
||||||
alt={`${rows?.[virtualRow.index]?.name}-cover`}
|
// alt={`${rows?.[virtualRow.index]?.name}-cover`}
|
||||||
height={150}
|
// height={150}
|
||||||
src={rows?.[virtualRow.index]?.imageUrl}
|
// src={rows?.[virtualRow.index]?.imageUrl}
|
||||||
width={150}
|
// width={150}
|
||||||
/>
|
// />
|
||||||
<Stack>
|
// <Stack>
|
||||||
<TextTitle
|
// <TextTitle
|
||||||
order={1}
|
// order={1}
|
||||||
weight={700}
|
// weight={700}
|
||||||
>
|
// >
|
||||||
{rows?.[virtualRow.index]?.name}
|
// {rows?.[virtualRow.index]?.name}
|
||||||
</TextTitle>
|
// </TextTitle>
|
||||||
<Text $secondary>{rows?.[virtualRow.index]?.releaseYear}</Text>
|
// <Text $secondary>{rows?.[virtualRow.index]?.releaseYear}</Text>
|
||||||
<PlayButton
|
// <PlayButton
|
||||||
h="35px"
|
// h="35px"
|
||||||
w="35px"
|
// w="35px"
|
||||||
onClick={() => handlePlay?.(Play.NOW, rows?.[virtualRow.index]?.songs)}
|
// onClick={() => handlePlay?.(Play.NOW, rows?.[virtualRow.index]?.songs)}
|
||||||
/>
|
// />
|
||||||
</Stack>
|
// </Stack>
|
||||||
</Group>
|
// </Group>
|
||||||
<Box sx={{ height: `${(rows?.[virtualRow.index].songs?.length || 0) * 60 + 60}px` }}>
|
// <Box sx={{ height: `${(rows?.[virtualRow.index].songs?.length || 0) * 60 + 60}px` }}>
|
||||||
<VirtualTable
|
// <VirtualTable
|
||||||
autoFitColumns
|
// autoFitColumns
|
||||||
suppressCellFocus
|
// suppressCellFocus
|
||||||
suppressHorizontalScroll
|
// suppressHorizontalScroll
|
||||||
suppressLoadingOverlay
|
// suppressLoadingOverlay
|
||||||
suppressRowDrag
|
// suppressRowDrag
|
||||||
transparentHeader
|
// transparentHeader
|
||||||
columnDefs={columnDefs}
|
// columnDefs={columnDefs}
|
||||||
getRowId={(data) => data.data.id}
|
// getRowId={(data) => data.data.id}
|
||||||
rowData={rows?.[virtualRow.index]?.songs}
|
// rowData={rows?.[virtualRow.index]?.songs}
|
||||||
rowHeight={60}
|
// rowHeight={60}
|
||||||
rowModelType="clientSide"
|
// rowModelType="clientSide"
|
||||||
rowSelection="multiple"
|
// rowSelection="multiple"
|
||||||
/>
|
// />
|
||||||
</Box>
|
// </Box>
|
||||||
</Stack>
|
// </Stack>
|
||||||
</div>
|
// </div>
|
||||||
))}
|
// ))}
|
||||||
</div>
|
// </div>
|
||||||
);
|
// );
|
||||||
};
|
// };
|
||||||
|
|
||||||
export const AlbumArtistDiscographyDetailList = () => {
|
// export const AlbumArtistDiscographyDetailList = () => {
|
||||||
const { albumArtistId } = useParams() as { albumArtistId: string };
|
// const { albumArtistId } = useParams() as { albumArtistId: string };
|
||||||
// const albumArtistQuery = useAlbumArtistDetail({ id: albumArtistId });
|
// // const albumArtistQuery = useAlbumArtistDetail({ id: albumArtistId });
|
||||||
|
|
||||||
const albumsQuery = useAlbumList({
|
// const albumsQuery = useAlbumList({
|
||||||
jfParams: { artistIds: albumArtistId },
|
// jfParams: { artistIds: albumArtistId },
|
||||||
ndParams: { artist_id: albumArtistId },
|
// ndParams: { artist_id: albumArtistId },
|
||||||
sortBy: AlbumListSort.YEAR,
|
// sortBy: AlbumListSort.YEAR,
|
||||||
sortOrder: SortOrder.DESC,
|
// sortOrder: SortOrder.DESC,
|
||||||
startIndex: 0,
|
// startIndex: 0,
|
||||||
});
|
// });
|
||||||
|
|
||||||
const songsQuery = useSongList(
|
// const songsQuery = useSongList(
|
||||||
{
|
// {
|
||||||
albumIds: albumsQuery.data?.items?.map((album) => album.id),
|
// albumIds: albumsQuery.data?.items?.map((album) => album.id),
|
||||||
sortBy: SongListSort.ALBUM,
|
// sortBy: SongListSort.ALBUM,
|
||||||
sortOrder: SortOrder.ASC,
|
// sortOrder: SortOrder.ASC,
|
||||||
startIndex: 0,
|
// startIndex: 0,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
enabled: !albumsQuery.isLoading,
|
// enabled: !albumsQuery.isLoading,
|
||||||
},
|
// },
|
||||||
);
|
// );
|
||||||
|
|
||||||
const songsByAlbum = useMemo(() => {
|
// const songsByAlbum = useMemo(() => {
|
||||||
if (songsQuery.isLoading || albumsQuery.isLoading) return null;
|
// if (songsQuery.isLoading || albumsQuery.isLoading) return null;
|
||||||
|
|
||||||
const songsByAlbumMap = songsQuery?.data?.items?.reduce((acc, song) => {
|
// const songsByAlbumMap = songsQuery?.data?.items?.reduce((acc, song) => {
|
||||||
if (!acc[song.albumId as keyof typeof acc]) {
|
// if (!acc[song.albumId as keyof typeof acc]) {
|
||||||
acc[song.albumId as keyof typeof acc] = [];
|
// acc[song.albumId as keyof typeof acc] = [];
|
||||||
}
|
// }
|
||||||
|
|
||||||
acc[song.albumId as keyof typeof acc].push(song);
|
// acc[song.albumId as keyof typeof acc].push(song);
|
||||||
|
|
||||||
return acc;
|
// return acc;
|
||||||
}, {} as Record<string, Song[]>);
|
// }, {} as Record<string, Song[]>);
|
||||||
|
|
||||||
const albumDetailWithSongs = albumsQuery?.data?.items?.map((album) => {
|
// const albumDetailWithSongs = albumsQuery?.data?.items?.map((album) => {
|
||||||
return {
|
// return {
|
||||||
...album,
|
// ...album,
|
||||||
songs: songsByAlbumMap?.[album.id],
|
// songs: songsByAlbumMap?.[album.id],
|
||||||
};
|
// };
|
||||||
});
|
// });
|
||||||
|
|
||||||
return albumDetailWithSongs;
|
// return albumDetailWithSongs;
|
||||||
}, [
|
// }, [
|
||||||
albumsQuery?.data?.items,
|
// albumsQuery?.data?.items,
|
||||||
albumsQuery?.isLoading,
|
// albumsQuery?.isLoading,
|
||||||
songsQuery?.data?.items,
|
// songsQuery?.data?.items,
|
||||||
songsQuery?.isLoading,
|
// songsQuery?.isLoading,
|
||||||
]);
|
// ]);
|
||||||
|
|
||||||
const page = useSongListStore();
|
// const page = useSongListStore();
|
||||||
|
|
||||||
const columnDefs: ColDef[] = useMemo(
|
// const columnDefs: ColDef[] = useMemo(
|
||||||
() =>
|
// () =>
|
||||||
getColumnDefs(page.table.columns).filter((c) => c.colId !== 'album' && c.colId !== 'artist'),
|
// getColumnDefs(page.table.columns).filter((c) => c.colId !== 'album' && c.colId !== 'artist'),
|
||||||
[page.table.columns],
|
// [page.table.columns],
|
||||||
);
|
// );
|
||||||
|
|
||||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
// const handlePlayQueueAdd = usePlayQueueAdd();
|
||||||
|
|
||||||
const parentRef = useRef<any>();
|
// const parentRef = useRef<any>();
|
||||||
|
|
||||||
const rowVirtualizer = useVirtualizer({
|
// const rowVirtualizer = useVirtualizer({
|
||||||
count: songsByAlbum?.length || 0,
|
// count: songsByAlbum?.length || 0,
|
||||||
estimateSize: (i) => (songsByAlbum?.[i].songs?.length || 0) * 60 + 300,
|
// estimateSize: (i) => (songsByAlbum?.[i].songs?.length || 0) * 60 + 300,
|
||||||
getScrollElement: () => parentRef.current,
|
// getScrollElement: () => parentRef.current,
|
||||||
overscan: 3,
|
// overscan: 3,
|
||||||
});
|
// });
|
||||||
|
|
||||||
const handlePlay = (play: Play, data: any[]) => {
|
// const handlePlay = (play: Play, data: any[]) => {
|
||||||
handlePlayQueueAdd?.({
|
// handlePlayQueueAdd?.({
|
||||||
byData: data,
|
// byData: data,
|
||||||
play,
|
// play,
|
||||||
});
|
// });
|
||||||
};
|
// };
|
||||||
|
|
||||||
if (albumsQuery.isLoading || songsQuery.isLoading) return null;
|
// if (albumsQuery.isLoading || songsQuery.isLoading) return null;
|
||||||
|
|
||||||
return (
|
// return (
|
||||||
<NativeScrollArea
|
// <NativeScrollArea
|
||||||
ref={parentRef}
|
// ref={parentRef}
|
||||||
scrollBarOffset="0"
|
// scrollBarOffset="0"
|
||||||
>
|
// >
|
||||||
{songsByAlbum && (
|
// {songsByAlbum && (
|
||||||
<RowVirtualizer
|
// <RowVirtualizer
|
||||||
columnDefs={columnDefs}
|
// columnDefs={columnDefs}
|
||||||
handlePlay={handlePlay}
|
// handlePlay={handlePlay}
|
||||||
rowVirtualizer={rowVirtualizer}
|
// rowVirtualizer={rowVirtualizer}
|
||||||
rows={songsByAlbum}
|
// rows={songsByAlbum}
|
||||||
/>
|
// />
|
||||||
)}
|
// )}
|
||||||
</NativeScrollArea>
|
// </NativeScrollArea>
|
||||||
);
|
// );
|
||||||
};
|
// };
|
||||||
|
|
|
||||||
Reference in a new issue