pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Split album list views

Browse source
This commit is contained in:
jeffvli 2023-06-02 13:09:28 -07:00
parent 691bc8f1ef
commit 7e2d9bd585
3 changed files with 437 additions and 377 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

407
src/renderer/features/albums/components/album-list-content.tsx
View file

@ -1,43 +1,22 @@
import { ALBUM_CARD_ROWS } from '/@/renderer/components';
import { AppRoute } from '/@/renderer/router/routes';
import { ListDisplayType, CardRow } from '/@/renderer/types';
import AutoSizer from 'react-virtualized-auto-sizer';
import { MutableRefObject, useCallback, useMemo } from 'react';
import { ListOnScrollProps } from 'react-window';
import { api } from '/@/renderer/api';
import { controller } from '/@/renderer/api/controller';
import { queryKeys } from '/@/renderer/api/query-keys';
import { Album, AlbumListQuery, AlbumListSort, LibraryItem } from '/@/renderer/api/types';
import { useQueryClient } from '@tanstack/react-query';
import {
useCurrentServer,
useAlbumListStore,
useListStoreActions,
useAlbumListFilter,
} from '/@/renderer/store';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import {
BodyScrollEvent,
ColDef,
GridReadyEvent,
IDatasource,
PaginationChangedEvent,
RowDoubleClickedEvent,
} from '@ag-grid-community/core';
import { AnimatePresence } from 'framer-motion';
import debounce from 'lodash/debounce';
import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import { generatePath, useNavigate } from 'react-router';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
import { lazy, MutableRefObject, Suspense } from 'react';
import { Spinner } from '/@/renderer/components';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { useAlbumListContext } from '/@/renderer/features/albums/context/album-list-context';
import {
VirtualInfiniteGridRef,
VirtualGridAutoSizerContainer,
VirtualInfiniteGrid,
} from '/@/renderer/components/virtual-grid';
import { getColumnDefs, VirtualTable, TablePagination } from '/@/renderer/components/virtual-table';
import { useAlbumListStore } from '/@/renderer/store';
import { ListDisplayType } from '/@/renderer/types';
const AlbumListGridView = lazy(() =>
import('/@/renderer/features/albums/components/album-list-grid-view').then((module) => ({
default: module.AlbumListGridView,
})),
);
const AlbumListTableView = lazy(() =>
import('/@/renderer/features/albums/components/album-list-table-view').then((module) => ({
default: module.AlbumListTableView,
})),
);
interface AlbumListContentProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@ -46,348 +25,22 @@ interface AlbumListContentProps {
}
export const AlbumListContent = ({ itemCount, gridRef, tableRef }: AlbumListContentProps) => {
const queryClient = useQueryClient();
const navigate = useNavigate();
const server = useCurrentServer();
const handlePlayQueueAdd = usePlayQueueAdd();
const { id, pageKey } = useAlbumListContext();
const filter = useAlbumListFilter({ id, key: pageKey });
const { setTable, setTablePagination, setGrid } = useListStoreActions();
const { table, grid, display } = useAlbumListStore({ id, key: pageKey });
const isPaginationEnabled = display === ListDisplayType.TABLE_PAGINATED;
const columnDefs: ColDef[] = useMemo(() => getColumnDefs(table.columns), [table.columns]);
const onTableReady = useCallback(
(params: GridReadyEvent) => {
const dataSource: IDatasource = {
getRows: async (params) => {
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const query: AlbumListQuery = {
limit,
startIndex,
...filter,
_custom: {
jellyfin: {
...filter._custom?.jellyfin,
},
navidrome: {
...filter._custom?.navidrome,
},
},
};
const queryKey = queryKeys.albums.list(server?.id || '', query);
if (!server) {
return params.failCallback();
}
const albumsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
api.controller.getAlbumList({
apiClientProps: {
server,
signal,
},
query,
}),
{ cacheTime: 1000 * 60 * 1 },
);
return params.successCallback(albumsRes?.items || [], albumsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};
params.api.setDatasource(dataSource);
params.api.ensureIndexVisible(table.scrollOffset || 0, 'top');
},
[filter, queryClient, server, table.scrollOffset],
);
const onTablePaginationChanged = useCallback(
(event: PaginationChangedEvent) => {
if (!isPaginationEnabled || !event.api) return;
try {
// Scroll to top of page on pagination change
const currentPageStartIndex = table.pagination.currentPage * table.pagination.itemsPerPage;
event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
} catch (err) {
console.log(err);
}
setTablePagination({
data: {
itemsPerPage: event.api.paginationGetPageSize(),
totalItems: event.api.paginationGetRowCount(),
totalPages: event.api.paginationGetTotalPages() + 1,
},
key: pageKey,
});
},
[
isPaginationEnabled,
setTablePagination,
pageKey,
table.pagination.currentPage,
table.pagination.itemsPerPage,
],
);
const handleTableColumnChange = useCallback(() => {
const { columnApi } = tableRef?.current || {};
const columnsOrder = columnApi?.getAllGridColumns();
if (!columnsOrder) return;
const columnsInSettings = table.columns;
const updatedColumns = [];
for (const column of columnsOrder) {
const columnInSettings = columnsInSettings.find((c) => c.column === column.getColDef().colId);
if (columnInSettings) {
updatedColumns.push({
...columnInSettings,
...(!table.autoFit && {
width: column.getColDef().width,
}),
});
}
}
setTable({ data: { columns: updatedColumns }, key: pageKey });
}, [tableRef, table.columns, table.autoFit, setTable, pageKey]);
const debouncedTableColumnChange = debounce(handleTableColumnChange, 200);
const handleTableScroll = (e: BodyScrollEvent) => {
const scrollOffset = Number((e.top / table.rowHeight).toFixed(0));
setTable({ data: { scrollOffset }, key: pageKey });
};
const fetch = useCallback(
async ({ skip, take }: { skip: number; take: number }) => {
if (!server) {
return [];
}
const query: AlbumListQuery = {
limit: take,
startIndex: skip,
...filter,
_custom: {
jellyfin: {
...filter._custom?.jellyfin,
},
navidrome: {
...filter._custom?.navidrome,
},
},
};
const queryKey = queryKeys.albums.list(server?.id || '', query);
const albums = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
controller.getAlbumList({
apiClientProps: {
server,
signal,
},
query,
}),
);
return albums;
},
[filter, queryClient, server],
);
const handleGridScroll = useCallback(
(e: ListOnScrollProps) => {
setGrid({ data: { scrollOffset: e.scrollOffset }, key: pageKey });
},
[pageKey, setGrid],
);
const cardRows = useMemo(() => {
const rows: CardRow<Album>[] = [ALBUM_CARD_ROWS.name];
switch (filter.sortBy) {
case AlbumListSort.ALBUM_ARTIST:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.releaseYear);
break;
case AlbumListSort.ARTIST:
rows.push(ALBUM_CARD_ROWS.artists);
rows.push(ALBUM_CARD_ROWS.releaseYear);
break;
case AlbumListSort.COMMUNITY_RATING:
rows.push(ALBUM_CARD_ROWS.albumArtists);
break;
case AlbumListSort.DURATION:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.duration);
break;
case AlbumListSort.FAVORITED:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.releaseYear);
break;
case AlbumListSort.NAME:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.releaseYear);
break;
case AlbumListSort.PLAY_COUNT:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.playCount);
break;
case AlbumListSort.RANDOM:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.releaseYear);
break;
case AlbumListSort.RATING:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.rating);
break;
case AlbumListSort.RECENTLY_ADDED:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.createdAt);
break;
case AlbumListSort.RECENTLY_PLAYED:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.lastPlayedAt);
break;
case AlbumListSort.SONG_COUNT:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.songCount);
break;
case AlbumListSort.YEAR:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.releaseYear);
break;
case AlbumListSort.RELEASE_DATE:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.releaseDate);
}
return rows;
}, [filter.sortBy]);
const handleContextMenu = useHandleTableContextMenu(LibraryItem.ALBUM, ALBUM_CONTEXT_MENU_ITEMS);
const handleRowDoubleClick = (e: RowDoubleClickedEvent) => {
navigate(generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: e.data.id }));
};
const createFavoriteMutation = useCreateFavorite({});
const deleteFavoriteMutation = useDeleteFavorite({});
const handleFavorite = (options: {
id: string[];
isFavorite: boolean;
itemType: LibraryItem;
}) => {
const { id, itemType, isFavorite } = options;
if (isFavorite) {
deleteFavoriteMutation.mutate({
query: {
id,
type: itemType,
},
serverId: server?.id,
});
} else {
createFavoriteMutation.mutate({
query: {
id,
type: itemType,
},
serverId: server?.id,
});
}
};
const { display } = useAlbumListStore({ id, key: pageKey });
return (
<>
<VirtualGridAutoSizerContainer>
{display === ListDisplayType.CARD || display === ListDisplayType.POSTER ? (
<AutoSizer>
{({ height, width }) => (
<>
<VirtualInfiniteGrid
key={`album-list-${server?.id}-${display}`}
ref={gridRef}
cardRows={cardRows}
display={display || ListDisplayType.CARD}
fetchFn={fetch}
handleFavorite={handleFavorite}
handlePlayQueueAdd={handlePlayQueueAdd}
height={height}
initialScrollOffset={grid?.scrollOffset || 0}
itemCount={itemCount || 0}
itemGap={20}
itemSize={grid?.itemsPerRow || 5}
itemType={LibraryItem.ALBUM}
loading={itemCount === undefined || itemCount === null}
minimumBatchSize={40}
route={{
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
}}
width={width}
onScroll={handleGridScroll}
/>
</>
)}
</AutoSizer>
) : (
<VirtualTable
// https://github.com/ag-grid/ag-grid/issues/5284
// Key is used to force remount of table when display, rowHeight, or server changes
key={`table-${display}-${table.rowHeight}-${server?.id}`}
ref={tableRef}
alwaysShowHorizontalScroll
suppressRowDrag
autoFitColumns={table.autoFit}
blockLoadDebounceMillis={200}
columnDefs={columnDefs}
getRowId={(data) => data.data.id}
infiniteInitialRowCount={itemCount || 100}
pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={table.pagination.itemsPerPage || 100}
rowBuffer={20}
rowHeight={table.rowHeight || 40}
rowModelType="infinite"
onBodyScrollEnd={handleTableScroll}
onCellContextMenu={handleContextMenu}
onColumnMoved={handleTableColumnChange}
onColumnResized={debouncedTableColumnChange}
onGridReady={onTableReady}
onPaginationChanged={onTablePaginationChanged}
onRowDoubleClicked={handleRowDoubleClick}
/>
)}
</VirtualGridAutoSizerContainer>
{isPaginationEnabled && (
<AnimatePresence
presenceAffectsLayout
initial={false}
mode="wait"
>
{display === ListDisplayType.TABLE_PAGINATED && (
<TablePagination
pageKey={pageKey}
pagination={table.pagination}
setPagination={setTablePagination}
tableRef={tableRef}
/>
)}
</AnimatePresence>
<Suspense fallback={<Spinner container />}>
{display === ListDisplayType.CARD || display === ListDisplayType.POSTER ? (
<AlbumListGridView
gridRef={gridRef}
itemCount={itemCount}
/>
) : (
<AlbumListTableView
itemCount={itemCount}
tableRef={tableRef}
/>
)}
</>
</Suspense>
);
};

200
src/renderer/features/albums/components/album-list-grid-view.tsx Normal file
View file

@ -0,0 +1,200 @@
import { useCallback, useMemo } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import AutoSizer from 'react-virtualized-auto-sizer';
import { ListOnScrollProps } from 'react-window';
import { controller } from '/@/renderer/api/controller';
import { queryKeys } from '/@/renderer/api/query-keys';
import { Album, AlbumListQuery, AlbumListSort, LibraryItem } from '/@/renderer/api/types';
import { ALBUM_CARD_ROWS } from '/@/renderer/components';
import {
VirtualGridAutoSizerContainer,
VirtualInfiniteGrid,
} from '/@/renderer/components/virtual-grid';
import { useAlbumListContext } from '/@/renderer/features/albums/context/album-list-context';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { AppRoute } from '/@/renderer/router/routes';
import {
useAlbumListFilter,
useAlbumListStore,
useCurrentServer,
useListStoreActions,
} from '/@/renderer/store';
import { CardRow, ListDisplayType } from '/@/renderer/types';
import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const handlePlayQueueAdd = usePlayQueueAdd();
const { id, pageKey } = useAlbumListContext();
const { grid, display } = useAlbumListStore({ id, key: pageKey });
const { setGrid } = useListStoreActions();
const filter = useAlbumListFilter({ id, key: pageKey });
const createFavoriteMutation = useCreateFavorite({});
const deleteFavoriteMutation = useDeleteFavorite({});
const handleFavorite = (options: {
id: string[];
isFavorite: boolean;
itemType: LibraryItem;
}) => {
const { id, itemType, isFavorite } = options;
if (isFavorite) {
deleteFavoriteMutation.mutate({
query: {
id,
type: itemType,
},
serverId: server?.id,
});
} else {
createFavoriteMutation.mutate({
query: {
id,
type: itemType,
},
serverId: server?.id,
});
}
};
const cardRows = useMemo(() => {
const rows: CardRow<Album>[] = [ALBUM_CARD_ROWS.name];
switch (filter.sortBy) {
case AlbumListSort.ALBUM_ARTIST:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.releaseYear);
break;
case AlbumListSort.ARTIST:
rows.push(ALBUM_CARD_ROWS.artists);
rows.push(ALBUM_CARD_ROWS.releaseYear);
break;
case AlbumListSort.COMMUNITY_RATING:
rows.push(ALBUM_CARD_ROWS.albumArtists);
break;
case AlbumListSort.DURATION:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.duration);
break;
case AlbumListSort.FAVORITED:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.releaseYear);
break;
case AlbumListSort.NAME:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.releaseYear);
break;
case AlbumListSort.PLAY_COUNT:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.playCount);
break;
case AlbumListSort.RANDOM:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.releaseYear);
break;
case AlbumListSort.RATING:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.rating);
break;
case AlbumListSort.RECENTLY_ADDED:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.createdAt);
break;
case AlbumListSort.RECENTLY_PLAYED:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.lastPlayedAt);
break;
case AlbumListSort.SONG_COUNT:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.songCount);
break;
case AlbumListSort.YEAR:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.releaseYear);
break;
case AlbumListSort.RELEASE_DATE:
rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.releaseDate);
}
return rows;
}, [filter.sortBy]);
const handleGridScroll = useCallback(
(e: ListOnScrollProps) => {
setGrid({ data: { scrollOffset: e.scrollOffset }, key: pageKey });
},
[pageKey, setGrid],
);
const fetch = useCallback(
async ({ skip, take }: { skip: number; take: number }) => {
if (!server) {
return [];
}
const query: AlbumListQuery = {
limit: take,
startIndex: skip,
...filter,
_custom: {
jellyfin: {
...filter._custom?.jellyfin,
},
navidrome: {
...filter._custom?.navidrome,
},
},
};
const queryKey = queryKeys.albums.list(server?.id || '', query);
const albums = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
controller.getAlbumList({
apiClientProps: {
server,
signal,
},
query,
}),
);
return albums;
},
[filter, queryClient, server],
);
return (
<VirtualGridAutoSizerContainer>
<AutoSizer>
{({ height, width }) => (
<VirtualInfiniteGrid
key={`album-list-${server?.id}-${display}`}
ref={gridRef}
cardRows={cardRows}
display={display || ListDisplayType.CARD}
fetchFn={fetch}
handleFavorite={handleFavorite}
handlePlayQueueAdd={handlePlayQueueAdd}
height={height}
initialScrollOffset={grid?.scrollOffset || 0}
itemCount={itemCount || 0}
itemGap={20}
itemSize={grid?.itemsPerRow || 5}
itemType={LibraryItem.ALBUM}
loading={itemCount === undefined || itemCount === null}
minimumBatchSize={40}
route={{
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
}}
width={width}
onScroll={handleGridScroll}
/>
)}
</AutoSizer>
</VirtualGridAutoSizerContainer>
);
};

207
src/renderer/features/albums/components/album-list-table-view.tsx Normal file
View file

@ -0,0 +1,207 @@
import { useMemo, useCallback } from 'react';
import {
ColDef,
GridReadyEvent,
IDatasource,
PaginationChangedEvent,
BodyScrollEvent,
RowDoubleClickedEvent,
} from '@ag-grid-community/core';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { AlbumListQuery, LibraryItem } from '/@/renderer/api/types';
import { getColumnDefs, TablePagination, VirtualTable } from '/@/renderer/components/virtual-table';
import { useAlbumListContext } from '/@/renderer/features/albums/context/album-list-context';
import {
useCurrentServer,
useAlbumListFilter,
useListStoreActions,
useAlbumListStore,
} from '/@/renderer/store';
import { useQueryClient } from '@tanstack/react-query';
import { AnimatePresence } from 'framer-motion';
import debounce from 'lodash/debounce';
import { ListDisplayType } from '/@/renderer/types';
import { generatePath, useNavigate } from 'react-router';
import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import { AppRoute } from '/@/renderer/router/routes';
import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
export const AlbumListTableView = ({ tableRef, itemCount }: any) => {
const queryClient = useQueryClient();
const navigate = useNavigate();
const server = useCurrentServer();
const { id, pageKey } = useAlbumListContext();
const filter = useAlbumListFilter({ id, key: pageKey });
const { setTable, setTablePagination } = useListStoreActions();
const { table, display } = useAlbumListStore({ id, key: pageKey });
const columnDefs: ColDef[] = useMemo(() => getColumnDefs(table.columns), [table.columns]);
const isPaginationEnabled = display === ListDisplayType.TABLE_PAGINATED;
const onTableReady = useCallback(
(params: GridReadyEvent) => {
const dataSource: IDatasource = {
getRows: async (params) => {
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const query: AlbumListQuery = {
limit,
startIndex,
...filter,
_custom: {
jellyfin: {
...filter._custom?.jellyfin,
},
navidrome: {
...filter._custom?.navidrome,
},
},
};
const queryKey = queryKeys.albums.list(server?.id || '', query);
if (!server) {
return params.failCallback();
}
const albumsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
api.controller.getAlbumList({
apiClientProps: {
server,
signal,
},
query,
}),
{ cacheTime: 1000 * 60 * 1 },
);
return params.successCallback(albumsRes?.items || [], albumsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};
params.api.setDatasource(dataSource);
params.api.ensureIndexVisible(table.scrollOffset || 0, 'top');
},
[filter, queryClient, server, table.scrollOffset],
);
const onTablePaginationChanged = useCallback(
(event: PaginationChangedEvent) => {
if (!isPaginationEnabled || !event.api) return;
try {
// Scroll to top of page on pagination change
const currentPageStartIndex = table.pagination.currentPage * table.pagination.itemsPerPage;
event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
} catch (err) {
console.log(err);
}
setTablePagination({
data: {
itemsPerPage: event.api.paginationGetPageSize(),
totalItems: event.api.paginationGetRowCount(),
totalPages: event.api.paginationGetTotalPages() + 1,
},
key: pageKey,
});
},
[
isPaginationEnabled,
setTablePagination,
pageKey,
table.pagination.currentPage,
table.pagination.itemsPerPage,
],
);
const handleTableColumnChange = useCallback(() => {
const { columnApi } = tableRef?.current || {};
const columnsOrder = columnApi?.getAllGridColumns();
if (!columnsOrder) return;
const columnsInSettings = table.columns;
const updatedColumns = [];
for (const column of columnsOrder) {
const columnInSettings = columnsInSettings.find((c) => c.column === column.getColDef().colId);
if (columnInSettings) {
updatedColumns.push({
...columnInSettings,
...(!table.autoFit && {
width: column.getColDef().width,
}),
});
}
}
setTable({ data: { columns: updatedColumns }, key: pageKey });
}, [tableRef, table.columns, table.autoFit, setTable, pageKey]);
const debouncedTableColumnChange = debounce(handleTableColumnChange, 200);
const handleTableScroll = (e: BodyScrollEvent) => {
const scrollOffset = Number((e.top / table.rowHeight).toFixed(0));
setTable({ data: { scrollOffset }, key: pageKey });
};
const handleContextMenu = useHandleTableContextMenu(LibraryItem.ALBUM, ALBUM_CONTEXT_MENU_ITEMS);
const handleRowDoubleClick = (e: RowDoubleClickedEvent) => {
navigate(generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: e.data.id }));
};
return (
<>
<VirtualGridAutoSizerContainer>
<VirtualTable
// https://github.com/ag-grid/ag-grid/issues/5284
// Key is used to force remount of table when display, rowHeight, or server changes
key={`table-${display}-${table.rowHeight}-${server?.id}`}
ref={tableRef}
alwaysShowHorizontalScroll
suppressRowDrag
autoFitColumns={table.autoFit}
blockLoadDebounceMillis={200}
columnDefs={columnDefs}
getRowId={(data) => data.data.id}
infiniteInitialRowCount={itemCount || 100}
pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={table.pagination.itemsPerPage || 100}
rowBuffer={20}
rowHeight={table.rowHeight || 40}
rowModelType="infinite"
onBodyScrollEnd={handleTableScroll}
onCellContextMenu={handleContextMenu}
onColumnMoved={handleTableColumnChange}
onColumnResized={debouncedTableColumnChange}
onGridReady={onTableReady}
onPaginationChanged={onTablePaginationChanged}
onRowDoubleClicked={handleRowDoubleClick}
/>
</VirtualGridAutoSizerContainer>
{isPaginationEnabled && (
<AnimatePresence
presenceAffectsLayout
initial={false}
mode="wait"
>
{display === ListDisplayType.TABLE_PAGINATED && (
<TablePagination
pageKey={pageKey}
pagination={table.pagination}
setPagination={setTablePagination}
tableRef={tableRef}
/>
)}
</AnimatePresence>
)}
</>
);
};