vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-08 04:50:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

add draggable table column resize

Browse Source
This commit is contained in:
jeffvli
2025-11-14 10:58:34 -08:00
parent 31a2fdbcb6
commit 4c92da9ab5
16 changed files with 272 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/helpers/item-list-controls.ts
+13 -3
View File
@@ -6,12 +6,18 @@ import { ItemListStateItemWithRequiredProperties } from '/@/renderer/components/
import { DefaultItemControlProps, ItemControls } from '/@/renderer/components/item-list/types';
import { usePlayerContext } from '/@/renderer/features/player/context/player-context';
import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
import { Play, TableColumn } from '/@/shared/types/types';
export const useDefaultItemListControls = () => {
interface UseDefaultItemListControlsArgs {
onColumnResized?: (columnId: TableColumn, width: number) => void;
}
export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs) => {
const player = usePlayerContext();
const navigate = useNavigate();
const { onColumnResized } = args || {};
const controls: ItemControls = useMemo(() => {
return {
onClick: ({ event, internalState, item }: DefaultItemControlProps) => {
@@ -147,6 +153,10 @@ export const useDefaultItemListControls = () => {
}
},
onColumnResized: ({ columnId, width }: { columnId: TableColumn; width: number }) => {
onColumnResized?.(columnId, width);
},
onDoubleClick: ({ internalState, item, itemType }: DefaultItemControlProps) => {
if (!item || !internalState) {
return;
@@ -239,7 +249,7 @@ export const useDefaultItemListControls = () => {
player.setRating(item._serverId, [item.id], itemType, newRating);
},
};
}, [player, navigate]);
}, [onColumnResized, navigate, player]);
return controls;
};
src/renderer/components/item-list/helpers/use-item-list-column-resize.ts
+32
View File
@@ -0,0 +1,32 @@
import { useCallback } from 'react';
import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store';
import { ItemListKey, TableColumn } from '/@/shared/types/types';
interface UseItemListColumnResizeProps {
itemListKey: ItemListKey;
}
export const useItemListColumnResize = ({ itemListKey }: UseItemListColumnResizeProps) => {
const { setList } = useSettingsStoreActions();
const columns = useSettingsStore((state) => state.lists[itemListKey]?.table.columns);
const handleColumnResized = useCallback(
(columnId: TableColumn, width: number) => {
if (!columns) return;
const updatedColumns = columns.map((column) =>
column.id === columnId ? { ...column, width } : column,
);
setList(itemListKey, {
table: {
columns: updatedColumns,
},
});
},
[columns, itemListKey, setList],
);
return { handleColumnResized };
};
src/renderer/components/item-list/item-table-list/item-table-list-column.module.css
+56
View File
@@ -167,6 +167,7 @@
}
.header-container {
position: relative;
background: none;
}
@@ -262,3 +263,58 @@
.container.data-row.row-hovered :global(.hide-on-hover) {
display: none;
}
.resize-handle {
position: absolute;
top: 8px;
bottom: 8px;
z-index: 10;
width: 8px;
margin-right: -4px;
cursor: col-resize;
opacity: 0;
transition: opacity 0.3s ease;
}
.resize-handle::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 2px;
content: '';
background-color: transparent;
transition: background-color 0.15s ease;
}
.header-container:hover .resize-handle {
opacity: 1;
}
.header-container:hover .resize-handle::before {
background-color: var(--theme-colors-border);
}
.resize-handle-left {
left: 0;
margin-right: 0;
margin-left: -4px;
}
.resize-handle-left::before {
right: auto;
left: 0;
}
.resize-handle-right {
right: 0;
margin-right: 0;
}
.resize-handle-dragging {
opacity: 1;
}
.resize-handle:hover {
opacity: 1;
}
src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
+93 -1
View File
@@ -1,6 +1,6 @@
import { useMergedRef } from '@mantine/hooks';
import clsx from 'clsx';
import React, { CSSProperties, ReactNode, useEffect, useRef } from 'react';
import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
import { CellComponentProps } from 'react-window-v2';
import styles from './item-table-list-column.module.css';
@@ -716,6 +716,82 @@ export const TableColumnContainer = (
);
};
interface ColumnResizeHandleProps {
columnId: TableColumn;
initialWidth: number;
onResize: (columnId: TableColumn, width: number) => void;
side: 'left' | 'right';
}
const ColumnResizeHandle = ({
columnId,
initialWidth,
onResize,
side,
}: ColumnResizeHandleProps) => {
const [isDragging, setIsDragging] = useState(false);
const handleRef = useRef<HTMLDivElement>(null);
const startWidthRef = useRef<number>(initialWidth);
const startXRef = useRef<number>(0);
const finalWidthRef = useRef<number>(initialWidth);
// Update the ref when initialWidth changes (but not during drag)
useEffect(() => {
if (!isDragging) {
startWidthRef.current = initialWidth;
}
}, [initialWidth, isDragging]);
useEffect(() => {
if (!isDragging) return;
const handleMouseMove = (event: MouseEvent) => {
const deltaX = event.clientX - startXRef.current;
const newWidth = Math.min(Math.max(10, startWidthRef.current + deltaX), 1000);
finalWidthRef.current = newWidth;
};
const handleMouseUp = () => {
setIsDragging(false);
document.body.style.cursor = '';
document.body.style.userSelect = '';
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
onResize(columnId, finalWidthRef.current);
};
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
}, [isDragging, columnId, onResize]);
const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
event.preventDefault();
event.stopPropagation();
setIsDragging(true);
startWidthRef.current = initialWidth;
startXRef.current = event.clientX;
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none';
};
return (
<div
className={clsx(styles.resizeHandle, {
[styles.resizeHandleDragging]: isDragging,
[styles.resizeHandleLeft]: side === 'left',
[styles.resizeHandleRight]: side === 'right',
})}
onMouseDown={handleMouseDown}
ref={handleRef}
/>
);
};
export const TableColumnHeaderContainer = (
props: ItemTableListColumn & {
className?: string;
@@ -724,6 +800,14 @@ export const TableColumnHeaderContainer = (
type: TableColumn;
},
) => {
const columnConfig = props.columns[props.columnIndex];
// Use the actual rendered width from style if available, otherwise fall back to config width
const currentWidth = (props.style?.width as number | undefined) || columnConfig.width;
const handleResize = (columnId: TableColumn, width: number) => {
props.controls.onColumnResized?.({ columnId, width });
};
return (
<Flex
className={clsx(styles.container, styles.headerContainer, props.containerClassName, {
@@ -745,6 +829,14 @@ export const TableColumnHeaderContainer = (
>
{columnLabelMap[props.type]}
</Text>
{!columnConfig.autoSize && props.enableColumnResize && (
<ColumnResizeHandle
columnId={props.type}
initialWidth={currentWidth}
onResize={handleResize}
side="right"
/>
)}
</Flex>
);
};
src/renderer/components/item-list/item-table-list/item-table-list.tsx
+12 -1
View File
@@ -40,6 +40,7 @@ import {
usePlayerContext,
} from '/@/renderer/features/player/context/player-context';
import { LibraryItem } from '/@/shared/types/domain-types';
import { TableColumn } from '/@/shared/types/types';
/**
* Type guard to check if an item has the required properties (id and serverId)
@@ -89,6 +90,7 @@ interface VirtualizedTableGridProps {
controls: ItemControls;
data: unknown[];
enableAlternateRowColors: boolean;
enableColumnResize: boolean;
enableDrag?: boolean;
enableExpansion: boolean;
enableHeader: boolean;
@@ -126,6 +128,7 @@ const VirtualizedTableGrid = React.memo(
controls,
data,
enableAlternateRowColors,
enableColumnResize,
enableDrag,
enableExpansion,
enableHeader,
@@ -166,6 +169,7 @@ const VirtualizedTableGrid = React.memo(
controls,
data: enableHeader ? [null, ...data] : data,
enableAlternateRowColors,
enableColumnResize,
enableDrag,
enableExpansion,
enableHeader,
@@ -187,6 +191,7 @@ const VirtualizedTableGrid = React.memo(
enableHeader,
data,
enableAlternateRowColors,
enableColumnResize,
enableDrag,
enableExpansion,
enableHorizontalBorders,
@@ -470,6 +475,7 @@ export interface TableItemProps {
controls: ItemControls;
data: ItemTableListProps['data'];
enableAlternateRowColors?: ItemTableListProps['enableAlternateRowColors'];
enableColumnResize?: boolean;
enableDrag?: ItemTableListProps['enableDrag'];
enableExpansion?: ItemTableListProps['enableExpansion'];
enableHeader?: ItemTableListProps['enableHeader'];
@@ -509,6 +515,7 @@ interface ItemTableListProps {
type: 'index' | 'offset';
};
itemType: LibraryItem;
onColumnResized?: (columnId: TableColumn, width: number) => void;
onRangeChanged?: (range: { startIndex: number; stopIndex: number }) => void;
onScrollEnd?: (offset: number, internalState: ItemListStateActions) => void;
ref?: Ref<ItemListHandle>;
@@ -535,6 +542,7 @@ export const ItemTableList = ({
headerHeight = 40,
initialTop,
itemType,
onColumnResized,
onRangeChanged,
onScrollEnd,
ref,
@@ -1363,7 +1371,9 @@ export const ItemTableList = ({
handleRef.current = imperativeHandle;
}, [imperativeHandle]);
const controls = useDefaultItemListControls();
const controls = useDefaultItemListControls({
onColumnResized,
});
return (
<div
@@ -1380,6 +1390,7 @@ export const ItemTableList = ({
controls={controls}
data={data}
enableAlternateRowColors={enableAlternateRowColors}
enableColumnResize={!!onColumnResized}
enableDrag={enableDrag}
enableExpansion={enableExpansion}
enableHeader={enableHeader}
src/renderer/components/item-list/types.ts
+1
View File
@@ -18,6 +18,7 @@ export interface DefaultItemControlProps {
export interface ItemControls {
onClick?: ({ internalState, item, itemType }: DefaultItemControlProps) => void;
onColumnResized?: ({ columnId, width }: { columnId: TableColumn; width: number }) => void;
onDoubleClick?: ({ internalState, item, itemType }: DefaultItemControlProps) => void;
onExpand?: ({ internalState, item, itemType }: DefaultItemControlProps) => void;
onFavorite?: ({
src/renderer/features/albums/components/album-list-infinite-table.tsx
+6
View File
@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
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';
@@ -60,6 +61,10 @@ export const AlbumListInfiniteTable = forwardRef<any, AlbumListInfiniteTableProp
enabled: saveScrollOffset,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ALBUM,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
@@ -76,6 +81,7 @@ export const AlbumListInfiniteTable = forwardRef<any, AlbumListInfiniteTableProp
type: 'offset',
}}
itemType={LibraryItem.ALBUM}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
ref={ref}
src/renderer/features/albums/components/album-list-paginated-table.tsx
+7
View File
@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
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 { 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';
@@ -16,6 +17,7 @@ import {
LibraryItem,
SortOrder,
} from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
interface AlbumListPaginatedTableProps extends ItemListTableComponentProps<AlbumListQuery> {}
@@ -63,6 +65,10 @@ export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTablePr
enabled: saveScrollOffset,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ALBUM,
});
return (
<ItemListWithPagination
currentPage={currentPage}
@@ -87,6 +93,7 @@ export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTablePr
type: 'offset',
}}
itemType={LibraryItem.ALBUM}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
src/renderer/features/artists/components/album-artist-list-infinite-table.tsx
+6
View File
@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
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';
@@ -61,6 +62,10 @@ export const AlbumArtistListInfiniteTable = forwardRef<any, AlbumArtistListInfin
enabled: saveScrollOffset,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ALBUM_ARTIST,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
@@ -78,6 +83,7 @@ export const AlbumArtistListInfiniteTable = forwardRef<any, AlbumArtistListInfin
type: 'offset',
}}
itemType={LibraryItem.ALBUM_ARTIST}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
ref={ref}
src/renderer/features/artists/components/album-artist-list-paginated-table.tsx
+7
View File
@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
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 { 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';
@@ -16,6 +17,7 @@ import {
LibraryItem,
SortOrder,
} from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
interface AlbumArtistListPaginatedTableProps
extends ItemListTableComponentProps<AlbumArtistListQuery> {}
@@ -64,6 +66,10 @@ export const AlbumArtistListPaginatedTable = forwardRef<any, AlbumArtistListPagi
enabled: saveScrollOffset,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ALBUM_ARTIST,
});
return (
<ItemListWithPagination
currentPage={currentPage}
@@ -89,6 +95,7 @@ export const AlbumArtistListPaginatedTable = forwardRef<any, AlbumArtistListPagi
type: 'offset',
}}
itemType={LibraryItem.ALBUM_ARTIST}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
src/renderer/features/artists/components/artist-list-infinite-table.tsx
+6
View File
@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
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';
@@ -60,6 +61,10 @@ export const ArtistListInfiniteTable = forwardRef<any, ArtistListInfiniteTablePr
enabled: saveScrollOffset,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ARTIST,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
@@ -77,6 +82,7 @@ export const ArtistListInfiniteTable = forwardRef<any, ArtistListInfiniteTablePr
type: 'offset',
}}
itemType={LibraryItem.ARTIST}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
ref={ref}
src/renderer/features/artists/components/artist-list-paginated-table.tsx
+7
View File
@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
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';
@@ -16,6 +17,7 @@ import {
LibraryItem,
SortOrder,
} from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
interface ArtistListPaginatedTableProps extends ItemListTableComponentProps<ArtistListQuery> {}
@@ -63,6 +65,10 @@ export const ArtistListPaginatedTable = forwardRef<any, ArtistListPaginatedTable
enabled: saveScrollOffset,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ARTIST,
});
return (
<ItemListWithPagination
currentPage={currentPage}
@@ -88,6 +94,7 @@ export const ArtistListPaginatedTable = forwardRef<any, ArtistListPaginatedTable
type: 'offset',
}}
itemType={LibraryItem.ARTIST}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
src/renderer/features/genres/components/genre-list-infinite-table.tsx
+6
View File
@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
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';
@@ -60,6 +61,10 @@ export const GenreListInfiniteTable = forwardRef<any, GenreListInfiniteTableProp
enabled: saveScrollOffset,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.GENRE,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
@@ -77,6 +82,7 @@ export const GenreListInfiniteTable = forwardRef<any, GenreListInfiniteTableProp
type: 'offset',
}}
itemType={LibraryItem.GENRE}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
ref={ref}
src/renderer/features/genres/components/genre-list-paginated-table.tsx
+7
View File
@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
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 { 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';
@@ -16,6 +17,7 @@ import {
LibraryItem,
SortOrder,
} from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
interface GenreListPaginatedTableProps extends ItemListTableComponentProps<GenreListQuery> {}
@@ -63,6 +65,10 @@ export const GenreListPaginatedTable = forwardRef<any, GenreListPaginatedTablePr
enabled: saveScrollOffset,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.GENRE,
});
return (
<ItemListWithPagination
currentPage={currentPage}
@@ -88,6 +94,7 @@ export const GenreListPaginatedTable = forwardRef<any, GenreListPaginatedTablePr
type: 'offset',
}}
itemType={LibraryItem.GENRE}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}
src/renderer/features/songs/components/song-list-infinite-table.tsx
+6
View File
@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
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';
@@ -55,6 +56,10 @@ export const SongListInfiniteTable = forwardRef<any, SongListInfiniteTableProps>
enabled: saveScrollOffset,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.SONG,
});
return (
<ItemTableList
autoFitColumns={autoFitColumns}
@@ -71,6 +76,7 @@ export const SongListInfiniteTable = forwardRef<any, SongListInfiniteTableProps>
type: 'offset',
}}
itemType={LibraryItem.SONG}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
onScrollEnd={handleOnScrollEnd}
ref={ref}
src/renderer/features/songs/components/song-list-paginated-table.tsx
+7
View File
@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
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 { 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';
@@ -11,6 +12,7 @@ import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table
import { ItemListTableComponentProps } from '/@/renderer/components/item-list/types';
import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
import { LibraryItem, SongListQuery, SongListSort, SortOrder } from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
interface SongListPaginatedTableProps extends ItemListTableComponentProps<SongListQuery> {}
@@ -58,6 +60,10 @@ export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProp
enabled: saveScrollOffset,
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.SONG,
});
return (
<ItemListWithPagination
currentPage={currentPage}
@@ -82,6 +88,7 @@ export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProp
type: 'offset',
}}
itemType={LibraryItem.SONG}
onColumnResized={handleColumnResized}
onScrollEnd={handleOnScrollEnd}
ref={ref}
size={size}