add draggable table column resize

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
@@ -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}
@@ -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}
@@ -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}
@@ -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}
@@ -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}
@@ -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}
@@ -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}
@@ -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}
@@ -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}
@@ -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}