pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add dividers option to context menu

Browse source
This commit is contained in:
jeffvli 2022-12-29 17:03:49 -08:00
parent a423a45352
commit 131d7c5e3b
3 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/renderer/features/context-menu/context-menu-items.tsx
View file

@ -3,7 +3,7 @@ import { SetContextMenuItems } from '/@/renderer/features/context-menu/events';
export const SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [ export const SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ id: 'play' }, { id: 'play' },
{ id: 'playLast' }, { id: 'playLast' },
{ id: 'playNext' }, { divider: true, id: 'playNext' },
{ disabled: true, id: 'addToPlaylist' }, { disabled: true, id: 'addToPlaylist' },
{ disabled: true, id: 'addToFavorites' }, { disabled: true, id: 'addToFavorites' },
{ disabled: true, id: 'removeFromFavorites' }, { disabled: true, id: 'removeFromFavorites' },
@ -13,7 +13,7 @@ export const SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
export const ALBUM_CONTEXT_MENU_ITEMS: SetContextMenuItems = [ export const ALBUM_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ id: 'play' }, { id: 'play' },
{ id: 'playLast' }, { id: 'playLast' },
{ id: 'playNext' }, { divider: true, id: 'playNext' },
{ disabled: true, id: 'addToPlaylist' }, { disabled: true, id: 'addToPlaylist' },
{ disabled: true, id: 'addToFavorites' }, { disabled: true, id: 'addToFavorites' },
{ disabled: true, id: 'removeFromFavorites' }, { disabled: true, id: 'removeFromFavorites' },
@ -23,7 +23,7 @@ export const ALBUM_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
export const ARTIST_CONTEXT_MENU_ITEMS: SetContextMenuItems = [ export const ARTIST_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ id: 'play' }, { id: 'play' },
{ id: 'playLast' }, { id: 'playLast' },
{ id: 'playNext' }, { divider: true, id: 'playNext' },
{ disabled: true, id: 'addToPlaylist' }, { disabled: true, id: 'addToPlaylist' },
{ disabled: true, id: 'addToFavorites' }, { disabled: true, id: 'addToFavorites' },
{ disabled: true, id: 'removeFromFavorites' }, { disabled: true, id: 'removeFromFavorites' },

27
src/renderer/features/context-menu/context-menu-provider.tsx
View file

@ -1,6 +1,6 @@
import { Stack } from '@mantine/core'; import { Divider, Stack } from '@mantine/core';
import { useClickOutside, useResizeObserver, useSetState, useViewportSize } from '@mantine/hooks'; import { useClickOutside, useResizeObserver, useSetState, useViewportSize } from '@mantine/hooks';
import { createContext, useState } from 'react'; import { createContext, Fragment, useState } from 'react';
import { ContextMenu, ContextMenuButton } from '/@/renderer/components'; import { ContextMenu, ContextMenuButton } from '/@/renderer/components';
import { import {
OpenContextMenuProps, OpenContextMenuProps,
@ -48,7 +48,6 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
const handlePlayQueueAdd = useHandlePlayQueueAdd(); const handlePlayQueueAdd = useHandlePlayQueueAdd();
const openContextMenu = (args: OpenContextMenuProps) => { const openContextMenu = (args: OpenContextMenuProps) => {
console.log('args.data', args.data);
const { xPos, yPos, menuItems, data, type } = args; const { xPos, yPos, menuItems, data, type } = args;
const shouldReverseY = yPos + menuRect.height > viewport.height; const shouldReverseY = yPos + menuRect.height > viewport.height;
@ -114,12 +113,12 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
}, },
playLast: { playLast: {
id: 'playLast', id: 'playLast',
label: 'Play Last', label: 'Add to queue (last)',
onClick: () => handlePlay(Play.LAST), onClick: () => handlePlay(Play.LAST),
}, },
playNext: { playNext: {
id: 'playNext', id: 'playNext',
label: 'Play Next', label: 'Add to queue (next)',
onClick: () => handlePlay(Play.NEXT), onClick: () => handlePlay(Play.NEXT),
}, },
removeFromFavorites: { removeFromFavorites: {
@ -151,14 +150,16 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
> >
{ctx.menuItems?.map((item) => { {ctx.menuItems?.map((item) => {
return ( return (
<ContextMenuButton <Fragment key={`context-menu-${item.id}`}>
key={`context-menu-${item.id}`} <ContextMenuButton
disabled={item.disabled} disabled={item.disabled}
variant="default" variant="default"
onClick={contextMenuItems[item.id].onClick} onClick={contextMenuItems[item.id as keyof typeof contextMenuItems].onClick}
> >
{contextMenuItems[item.id].label} {contextMenuItems[item.id as keyof typeof contextMenuItems].label}
</ContextMenuButton> </ContextMenuButton>
{item.divider && <Divider key={`context-menu-divider-${item.id}`} />}
</Fragment>
); );
})} })}
</Stack> </Stack>

1
src/renderer/features/context-menu/events.ts
View file

@ -25,6 +25,7 @@ export type ContextMenuItem =
export type SetContextMenuItems = { export type SetContextMenuItems = {
disabled?: boolean; disabled?: boolean;
divider?: boolean;
id: ContextMenuItem; id: ContextMenuItem;
onClick?: () => void; onClick?: () => void;
}[]; }[];