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 = [
{ id: 'play' },
{ id: 'playLast' },
{ id: 'playNext' },
{ divider: true, id: 'playNext' },
{ disabled: true, id: 'addToPlaylist' },
{ disabled: true, id: 'addToFavorites' },
{ disabled: true, id: 'removeFromFavorites' },
@ -13,7 +13,7 @@ export const SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
export const ALBUM_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ id: 'play' },
{ id: 'playLast' },
{ id: 'playNext' },
{ divider: true, id: 'playNext' },
{ disabled: true, id: 'addToPlaylist' },
{ disabled: true, id: 'addToFavorites' },
{ disabled: true, id: 'removeFromFavorites' },
@ -23,7 +23,7 @@ export const ALBUM_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
export const ARTIST_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ id: 'play' },
{ id: 'playLast' },
{ id: 'playNext' },
{ divider: true, id: 'playNext' },
{ disabled: true, id: 'addToPlaylist' },
{ disabled: true, id: 'addToFavorites' },
{ disabled: true, id: 'removeFromFavorites' },

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

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

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