Add song list context menu
This commit is contained in:
parent
4d5e4082bb
commit
b39d11c0cc
1 changed files with 27 additions and 2 deletions
|
@ -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}
|
||||||
|
|
Reference in a new issue