From 8c65775310add2bef7a94f5286991a1344e711bd Mon Sep 17 00:00:00 2001 From: jeffvli Date: Thu, 29 Jan 2026 21:34:51 -0800 Subject: [PATCH] fix selection state on ItemGridList when single select mode --- .../components/item-card/item-card.tsx | 30 +++++++++++-------- .../item-list/helpers/item-list-controls.ts | 20 +++++++++++-- .../item-grid-list/item-grid-list.tsx | 6 +++- 3 files changed, 41 insertions(+), 15 deletions(-) diff --git a/src/renderer/components/item-card/item-card.tsx b/src/renderer/components/item-card/item-card.tsx index 98c3a1885..992f5c127 100644 --- a/src/renderer/components/item-card/item-card.tsx +++ b/src/renderer/components/item-card/item-card.tsx @@ -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) { diff --git a/src/renderer/components/item-list/helpers/item-list-controls.ts b/src/renderer/components/item-list/helpers/item-list-controls.ts index 5466b14e0..7adf6a717 100644 --- a/src/renderer/components/item-list/helpers/item-list-controls.ts +++ b/src/renderer/components/item-list/helpers/item-list-controls.ts @@ -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; }; diff --git a/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx b/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx index 0959b3616..73f2a11b8 100644 --- a/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx +++ b/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx @@ -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) => { data={item} enableDrag={enableDrag} enableExpansion={props.data.enableExpansion} + enableMultiSelect={enableMultiSelect} imageAsLink={!enableMultiSelect} internalState={props.data.internalState} itemType={itemType}