mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 04:20:12 +02:00
handle table row index values on paginated lists
This commit is contained in:
@@ -37,11 +37,16 @@ const DefaultRowIndexColumn = (props: ItemTableListInnerColumn) => {
|
||||
internalState,
|
||||
itemType,
|
||||
rowIndex,
|
||||
startRowIndex,
|
||||
} = props;
|
||||
|
||||
const adjustedRowIndex =
|
||||
let adjustedRowIndex =
|
||||
adjustedRowIndexMap?.get(rowIndex) ?? (enableHeader ? rowIndex : rowIndex + 1);
|
||||
|
||||
if (startRowIndex !== undefined && adjustedRowIndex > 0) {
|
||||
adjustedRowIndex = startRowIndex + adjustedRowIndex;
|
||||
}
|
||||
|
||||
if (enableExpansion) {
|
||||
return (
|
||||
<TableColumnContainer {...props}>
|
||||
@@ -75,10 +80,14 @@ const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => {
|
||||
const song = props.data[props.rowIndex] as QueueSong;
|
||||
const isActive = props.activeRowId === song?._uniqueId;
|
||||
|
||||
const adjustedRowIndex =
|
||||
let adjustedRowIndex =
|
||||
props.adjustedRowIndexMap?.get(props.rowIndex) ??
|
||||
(props.enableHeader ? props.rowIndex : props.rowIndex + 1);
|
||||
|
||||
if (props.startRowIndex !== undefined && adjustedRowIndex > 0) {
|
||||
adjustedRowIndex = props.startRowIndex + adjustedRowIndex;
|
||||
}
|
||||
|
||||
return (
|
||||
<TableColumnTextContainer {...props}>
|
||||
{isActive ? (
|
||||
|
||||
@@ -119,6 +119,7 @@ interface VirtualizedTableGridProps {
|
||||
showRightShadow: boolean;
|
||||
showTopShadow: boolean;
|
||||
size: 'compact' | 'default' | 'large';
|
||||
startRowIndex?: number;
|
||||
tableId: string;
|
||||
totalColumnCount: number;
|
||||
totalRowCount: number;
|
||||
@@ -161,6 +162,7 @@ const VirtualizedTableGrid = React.memo(
|
||||
showRightShadow,
|
||||
showTopShadow,
|
||||
size,
|
||||
startRowIndex,
|
||||
tableId,
|
||||
totalColumnCount,
|
||||
totalRowCount,
|
||||
@@ -300,6 +302,7 @@ const VirtualizedTableGrid = React.memo(
|
||||
pinnedRightColumnWidths,
|
||||
playerContext,
|
||||
size,
|
||||
startRowIndex,
|
||||
tableId,
|
||||
}),
|
||||
[
|
||||
@@ -330,6 +333,7 @@ const VirtualizedTableGrid = React.memo(
|
||||
pinnedRightColumnWidths,
|
||||
playerContext,
|
||||
size,
|
||||
startRowIndex,
|
||||
tableId,
|
||||
],
|
||||
);
|
||||
@@ -654,6 +658,7 @@ export interface TableItemProps {
|
||||
pinnedRightColumnWidths?: number[];
|
||||
playerContext: PlayerContext;
|
||||
size?: ItemTableListProps['size'];
|
||||
startRowIndex?: number;
|
||||
tableId: string;
|
||||
}
|
||||
|
||||
@@ -663,7 +668,6 @@ interface ItemTableListProps {
|
||||
CellComponent: JSXElementConstructor<CellComponentProps<TableItemProps>>;
|
||||
cellPadding?: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
|
||||
columns: ItemTableListColumnConfig[];
|
||||
currentPage?: number;
|
||||
data: unknown[];
|
||||
enableAlternateRowColors?: boolean;
|
||||
enableDrag?: boolean;
|
||||
@@ -684,6 +688,7 @@ interface ItemTableListProps {
|
||||
type: 'index' | 'offset';
|
||||
};
|
||||
itemType: LibraryItem;
|
||||
startRowIndex?: number;
|
||||
onColumnReordered?: (
|
||||
columnIdFrom: TableColumn,
|
||||
columnIdTo: TableColumn,
|
||||
@@ -703,7 +708,6 @@ export const ItemTableList = ({
|
||||
CellComponent,
|
||||
cellPadding = 'sm',
|
||||
columns,
|
||||
currentPage,
|
||||
data,
|
||||
enableAlternateRowColors = false,
|
||||
enableDrag = true,
|
||||
@@ -727,6 +731,7 @@ export const ItemTableList = ({
|
||||
ref,
|
||||
rowHeight,
|
||||
size = 'default',
|
||||
startRowIndex,
|
||||
}: ItemTableListProps) => {
|
||||
const tableId = useId();
|
||||
const totalItemCount = enableHeader ? data.length + 1 : data.length;
|
||||
@@ -1682,12 +1687,12 @@ export const ItemTableList = ({
|
||||
}
|
||||
}, [initialTop, scrollToTableIndex, scrollToTableOffset]);
|
||||
|
||||
// Scroll to top when currentPage changes
|
||||
// Scroll to top when startRowIndex changes
|
||||
useEffect(() => {
|
||||
if (currentPage !== undefined) {
|
||||
if (startRowIndex !== undefined) {
|
||||
scrollToTableOffset(0);
|
||||
}
|
||||
}, [currentPage, scrollToTableOffset]);
|
||||
}, [startRowIndex, scrollToTableOffset]);
|
||||
|
||||
const imperativeHandle: ItemListHandle = useMemo(() => {
|
||||
return {
|
||||
@@ -2068,6 +2073,7 @@ export const ItemTableList = ({
|
||||
showRightShadow={showRightShadow}
|
||||
showTopShadow={showTopShadow}
|
||||
size={size}
|
||||
startRowIndex={startRowIndex}
|
||||
tableId={tableId}
|
||||
totalColumnCount={totalColumnCount}
|
||||
totalRowCount={totalRowCount}
|
||||
|
||||
@@ -74,6 +74,8 @@ export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTablePr
|
||||
itemListKey: ItemListKey.ALBUM,
|
||||
});
|
||||
|
||||
const startRowIndex = currentPage * itemsPerPage;
|
||||
|
||||
return (
|
||||
<ItemListWithPagination
|
||||
currentPage={currentPage}
|
||||
@@ -86,7 +88,6 @@ export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTablePr
|
||||
autoFitColumns={autoFitColumns}
|
||||
CellComponent={ItemTableListColumn}
|
||||
columns={columns}
|
||||
currentPage={currentPage}
|
||||
data={data || []}
|
||||
enableAlternateRowColors={enableAlternateRowColors}
|
||||
enableHorizontalBorders={enableHorizontalBorders}
|
||||
@@ -103,6 +104,7 @@ export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTablePr
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
ref={ref}
|
||||
size={size}
|
||||
startRowIndex={startRowIndex}
|
||||
/>
|
||||
</ItemListWithPagination>
|
||||
);
|
||||
|
||||
@@ -75,6 +75,8 @@ export const AlbumArtistListPaginatedTable = forwardRef<any, AlbumArtistListPagi
|
||||
itemListKey: ItemListKey.ALBUM_ARTIST,
|
||||
});
|
||||
|
||||
const startRowIndex = currentPage * itemsPerPage;
|
||||
|
||||
return (
|
||||
<ItemListWithPagination
|
||||
currentPage={currentPage}
|
||||
@@ -87,7 +89,6 @@ export const AlbumArtistListPaginatedTable = forwardRef<any, AlbumArtistListPagi
|
||||
autoFitColumns={autoFitColumns}
|
||||
CellComponent={ItemTableListColumn}
|
||||
columns={columns}
|
||||
currentPage={currentPage}
|
||||
data={data || []}
|
||||
enableAlternateRowColors={enableAlternateRowColors}
|
||||
enableExpansion={false}
|
||||
@@ -105,6 +106,7 @@ export const AlbumArtistListPaginatedTable = forwardRef<any, AlbumArtistListPagi
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
ref={ref}
|
||||
size={size}
|
||||
startRowIndex={startRowIndex}
|
||||
/>
|
||||
</ItemListWithPagination>
|
||||
);
|
||||
|
||||
@@ -6,10 +6,10 @@ import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/hel
|
||||
import { useItemListColumnReorder } from '/@/renderer/components/item-list/helpers/use-item-list-column-reorder';
|
||||
import { useItemListColumnResize } from '/@/renderer/components/item-list/helpers/use-item-list-column-resize';
|
||||
import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpers/use-item-list-scroll-persist';
|
||||
import { ItemTableList } from '/@/renderer/components/item-list/item-table-list/item-table-list';
|
||||
import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
|
||||
import { ItemListWithPagination } from '/@/renderer/components/item-list/item-list-pagination/item-list-pagination';
|
||||
import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
|
||||
import { ItemTableList } from '/@/renderer/components/item-list/item-table-list/item-table-list';
|
||||
import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
|
||||
import { ItemListTableComponentProps } from '/@/renderer/components/item-list/types';
|
||||
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
|
||||
import {
|
||||
@@ -74,6 +74,8 @@ export const ArtistListPaginatedTable = forwardRef<any, ArtistListPaginatedTable
|
||||
itemListKey: ItemListKey.ARTIST,
|
||||
});
|
||||
|
||||
const startRowIndex = currentPage * itemsPerPage;
|
||||
|
||||
return (
|
||||
<ItemListWithPagination
|
||||
currentPage={currentPage}
|
||||
@@ -86,7 +88,6 @@ export const ArtistListPaginatedTable = forwardRef<any, ArtistListPaginatedTable
|
||||
autoFitColumns={autoFitColumns}
|
||||
CellComponent={ItemTableListColumn}
|
||||
columns={columns}
|
||||
currentPage={currentPage}
|
||||
data={data || []}
|
||||
enableAlternateRowColors={enableAlternateRowColors}
|
||||
enableExpansion={false}
|
||||
@@ -104,6 +105,7 @@ export const ArtistListPaginatedTable = forwardRef<any, ArtistListPaginatedTable
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
ref={ref}
|
||||
size={size}
|
||||
startRowIndex={startRowIndex}
|
||||
/>
|
||||
</ItemListWithPagination>
|
||||
);
|
||||
|
||||
@@ -74,6 +74,8 @@ export const GenreListPaginatedTable = forwardRef<any, GenreListPaginatedTablePr
|
||||
itemListKey: ItemListKey.GENRE,
|
||||
});
|
||||
|
||||
const startRowIndex = currentPage * itemsPerPage;
|
||||
|
||||
return (
|
||||
<ItemListWithPagination
|
||||
currentPage={currentPage}
|
||||
@@ -86,7 +88,6 @@ export const GenreListPaginatedTable = forwardRef<any, GenreListPaginatedTablePr
|
||||
autoFitColumns={autoFitColumns}
|
||||
CellComponent={ItemTableListColumn}
|
||||
columns={columns}
|
||||
currentPage={currentPage}
|
||||
data={data || []}
|
||||
enableAlternateRowColors={enableAlternateRowColors}
|
||||
enableExpansion={false}
|
||||
@@ -104,6 +105,7 @@ export const GenreListPaginatedTable = forwardRef<any, GenreListPaginatedTablePr
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
ref={ref}
|
||||
size={size}
|
||||
startRowIndex={startRowIndex}
|
||||
/>
|
||||
</ItemListWithPagination>
|
||||
);
|
||||
|
||||
@@ -74,6 +74,8 @@ export const PlaylistListPaginatedTable = forwardRef<any, PlaylistListPaginatedT
|
||||
itemListKey: ItemListKey.PLAYLIST,
|
||||
});
|
||||
|
||||
const startRowIndex = currentPage * itemsPerPage;
|
||||
|
||||
return (
|
||||
<ItemListWithPagination
|
||||
currentPage={currentPage}
|
||||
@@ -86,7 +88,6 @@ export const PlaylistListPaginatedTable = forwardRef<any, PlaylistListPaginatedT
|
||||
autoFitColumns={autoFitColumns}
|
||||
CellComponent={ItemTableListColumn}
|
||||
columns={columns}
|
||||
currentPage={currentPage}
|
||||
data={data || []}
|
||||
enableAlternateRowColors={enableAlternateRowColors}
|
||||
enableHorizontalBorders={enableHorizontalBorders}
|
||||
@@ -103,6 +104,7 @@ export const PlaylistListPaginatedTable = forwardRef<any, PlaylistListPaginatedT
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
ref={ref}
|
||||
size={size}
|
||||
startRowIndex={startRowIndex}
|
||||
/>
|
||||
</ItemListWithPagination>
|
||||
);
|
||||
|
||||
@@ -69,6 +69,8 @@ export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProp
|
||||
itemListKey: ItemListKey.SONG,
|
||||
});
|
||||
|
||||
const startRowIndex = currentPage * itemsPerPage;
|
||||
|
||||
return (
|
||||
<ItemListWithPagination
|
||||
currentPage={currentPage}
|
||||
@@ -81,7 +83,6 @@ export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProp
|
||||
autoFitColumns={autoFitColumns}
|
||||
CellComponent={ItemTableListColumn}
|
||||
columns={columns}
|
||||
currentPage={currentPage}
|
||||
data={data || []}
|
||||
enableAlternateRowColors={enableAlternateRowColors}
|
||||
enableExpansion={false}
|
||||
@@ -99,6 +100,7 @@ export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProp
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
ref={ref}
|
||||
size={size}
|
||||
startRowIndex={startRowIndex}
|
||||
/>
|
||||
</ItemListWithPagination>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user