Add song list context menu

This commit is contained in:
jeffvli 2022-12-28 15:32:50 -08:00
parent 4d5e4082bb
commit b39d11c0cc

View file

@ -1,6 +1,7 @@
import { MutableRefObject, useCallback, useMemo } from 'react'; import { MutableRefObject, useCallback, useMemo } from 'react';
import type { import type {
BodyScrollEvent, BodyScrollEvent,
CellContextMenuEvent,
ColDef, ColDef,
GridReadyEvent, GridReadyEvent,
IDatasource, IDatasource,
@ -25,9 +26,11 @@ import {
useSongListStore, useSongListStore,
useSongTablePagination, useSongTablePagination,
} from '/@/renderer/store'; } from '/@/renderer/store';
import { ListDisplayType } from '/@/renderer/types'; import { LibraryItem, ListDisplayType } from '/@/renderer/types';
import { AnimatePresence } from 'framer-motion'; import { AnimatePresence } from 'framer-motion';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { openContextMenu } from '/@/renderer/features/context-menu';
import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
interface SongListContentProps { interface SongListContentProps {
tableRef: MutableRefObject<AgGridReactType | null>; tableRef: MutableRefObject<AgGridReactType | null>;
@ -152,6 +155,28 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
setTable({ scrollOffset }); setTable({ scrollOffset });
}; };
const handleContextMenu = (e: CellContextMenuEvent) => {
if (!e.event) return;
const clickEvent = e.event as MouseEvent;
clickEvent.preventDefault();
const selectedRows = e.api.getSelectedRows();
const selectedUniqueIds = selectedRows.map((row) => row.uniqueId);
if (!selectedUniqueIds.includes(e.data.uniqueId)) {
e.api.deselectAll();
e.node.setSelected(true);
}
openContextMenu({
data: selectedRows,
menuItems: SONG_CONTEXT_MENU_ITEMS,
type: LibraryItem.SONG,
xPos: clickEvent.clientX,
yPos: clickEvent.clientY,
});
};
return ( return (
<Stack <Stack
h="100%" h="100%"
@ -187,7 +212,7 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
rowModelType="infinite" rowModelType="infinite"
rowSelection="multiple" rowSelection="multiple"
onBodyScrollEnd={handleScroll} onBodyScrollEnd={handleScroll}
onCellContextMenu={(e) => console.log('context', e)} onCellContextMenu={handleContextMenu}
onColumnMoved={handleColumnChange} onColumnMoved={handleColumnChange}
onColumnResized={debouncedColumnChange} onColumnResized={debouncedColumnChange}
onGridReady={onGridReady} onGridReady={onGridReady}