fix selection state on ItemGridList when single select mode

This commit is contained in:
jeffvli
2026-01-29 21:34:51 -08:00
parent 74c9d0ca6f
commit 8c65775310
3 changed files with 41 additions and 15 deletions
+18 -12
View File
@@ -56,6 +56,7 @@ export interface ItemCardProps {
data: Album | AlbumArtist | Artist | Playlist | Song | undefined;
enableDrag?: boolean;
enableExpansion?: boolean;
enableMultiSelect?: boolean;
enableNavigation?: boolean;
imageAsLink?: boolean;
internalState?: ItemListStateActions;
@@ -71,6 +72,7 @@ export const ItemCard = ({
data,
enableDrag,
enableExpansion,
enableMultiSelect,
enableNavigation = true,
imageAsLink,
internalState,
@@ -92,6 +94,7 @@ export const ItemCard = ({
data={data}
enableDrag={enableDrag}
enableExpansion={enableExpansion}
enableMultiSelect={enableMultiSelect}
enableNavigation={enableNavigation}
imageAsLink={imageAsLink}
imageUrl={imageUrl}
@@ -110,6 +113,7 @@ export const ItemCard = ({
data={data}
enableDrag={enableDrag}
enableExpansion={enableExpansion}
enableMultiSelect={enableMultiSelect}
enableNavigation={enableNavigation}
imageAsLink={imageAsLink}
imageUrl={imageUrl}
@@ -159,6 +163,7 @@ const CompactItemCard = ({
data,
enableDrag,
enableExpansion,
enableMultiSelect,
enableNavigation,
imageAsLink,
internalState,
@@ -180,29 +185,29 @@ const CompactItemCard = ({
return [];
}
const draggedItems = getDraggedItems(data, internalState);
const draggedItems = getDraggedItems(data, internalState, enableMultiSelect !== false);
return draggedItems.map((item) => item.id);
}, [data, internalState]);
}, [data, internalState, enableMultiSelect]);
const getItem = useCallback(() => {
if (!data) {
return [];
}
const draggedItems = getDraggedItems(data, internalState);
const draggedItems = getDraggedItems(data, internalState, enableMultiSelect !== false);
return draggedItems;
}, [data, internalState]);
}, [data, internalState, enableMultiSelect]);
const onDragStart = useCallback(() => {
if (!data) {
return;
}
const draggedItems = getDraggedItems(data, internalState);
const draggedItems = getDraggedItems(data, internalState, enableMultiSelect !== false);
if (internalState) {
internalState.setDragging(draggedItems);
}
}, [data, internalState]);
}, [data, internalState, enableMultiSelect]);
const onDrop = useCallback(() => {
if (internalState) {
@@ -667,6 +672,7 @@ const PosterItemCard = ({
data,
enableDrag,
enableExpansion,
enableMultiSelect,
enableNavigation,
imageAsLink,
internalState,
@@ -688,29 +694,29 @@ const PosterItemCard = ({
return [];
}
const draggedItems = getDraggedItems(data, internalState);
const draggedItems = getDraggedItems(data, internalState, enableMultiSelect !== false);
return draggedItems.map((item) => item.id);
}, [data, internalState]);
}, [data, internalState, enableMultiSelect]);
const getItem = useCallback(() => {
if (!data) {
return [];
}
const draggedItems = getDraggedItems(data, internalState);
const draggedItems = getDraggedItems(data, internalState, enableMultiSelect !== false);
return draggedItems;
}, [data, internalState]);
}, [data, internalState, enableMultiSelect]);
const onDragStart = useCallback(() => {
if (!data) {
return;
}
const draggedItems = getDraggedItems(data, internalState);
const draggedItems = getDraggedItems(data, internalState, enableMultiSelect !== false);
if (internalState) {
internalState.setDragging(draggedItems);
}
}, [data, internalState]);
}, [data, internalState, enableMultiSelect]);
const onDrop = useCallback(() => {
if (internalState) {
@@ -12,6 +12,7 @@ import { LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
import { Play, TableColumn } from '/@/shared/types/types';
interface UseDefaultItemListControlsArgs {
enableMultiSelect?: boolean;
onColumnReordered?: (
columnIdFrom: TableColumn,
columnIdTo: TableColumn,
@@ -42,7 +43,7 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
navigateRef.current = navigate;
}, [navigate]);
const { onColumnReordered, onColumnResized, overrides } = args || {};
const { enableMultiSelect = true, onColumnReordered, onColumnResized, overrides } = args || {};
const controls: ItemControls = useMemo(() => {
return {
@@ -333,6 +334,13 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
if (!rowId) return;
if (!enableMultiSelect) {
return ContextMenuController.call({
cmd: { items: [item] as any[], type: actualItemType as any },
event,
});
}
// If none selected, select this item
if (internalState.getSelected().length === 0) {
internalState.setSelected([item]);
@@ -407,7 +415,15 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
...overrides,
};
}, [overrides, onColumnReordered, onColumnResized, player, setFavorite, setRating]);
}, [
enableMultiSelect,
overrides,
onColumnReordered,
onColumnResized,
player,
setFavorite,
setRating,
]);
return controls;
};
@@ -511,7 +511,10 @@ const BaseItemGridList = ({
});
}, [containerWidth, resolvedItemCount, throttledSetTableMeta, containerRef]);
const controls = useDefaultItemListControls({ overrides: overrideControls });
const controls = useDefaultItemListControls({
enableMultiSelect,
overrides: overrideControls,
});
const scrollToIndex = useCallback(
(
@@ -875,6 +878,7 @@ const ListComponent = memo((props: ListChildComponentProps<GridItemProps>) => {
data={item}
enableDrag={enableDrag}
enableExpansion={props.data.enableExpansion}
enableMultiSelect={enableMultiSelect}
imageAsLink={!enableMultiSelect}
internalState={props.data.internalState}
itemType={itemType}