Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/FoxxMD/multi-scrobbler. Scrobble plays from multiple sources to multiple clients docs.multi-scrobbler.app
deezer docker jellyfin koito lastfm listenbrainz maloja mopidy mpris music music-assistant plex scrobble self-hosted spotify subsonic tautulli youtube-music
Something went wrong. Try again.
3.2 kB · 81 lines
TSX
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081import { type MenuSelectionDetails, Menu, Group, Portal, type IconButtonProps } from "@chakra-ui/react";import { EllipsisButton } from "../icons/ChakraIcons.tsx";import { primaryActionProps, type MenuItemRender } from "./menuItemUtils.tsx";import React from "react";
export type menuCallback = (select: MenuSelectionDetails) => void;
export interface PrimaryButtonMenuProps { menuCallback: menuCallback, primary: React.JSX.Element, menuItems: (React.JSX.Element | MenuItemRender)[] disabled?: boolean menuButtonProps?: IconButtonProps}
export const PrimaryButtonMenu = (props: PrimaryButtonMenuProps) => { let content: React.JSX.Element = props.primary; let menuElm: React.JSX.Element | undefined;
if (props.menuItems.length > 0) { menuElm = ( <Menu.Root positioning={{ placement: "bottom-end" }} onSelect={props.menuCallback}> <Group attached> {props.primary} <Menu.Trigger asChild> <EllipsisButton disabled={props.disabled} {...primaryActionProps} {...props.menuButtonProps} /> </Menu.Trigger> </Group> <Portal> <Menu.Positioner> <Menu.Content> {props.menuItems.map((x, i) => { if(React.isValidElement(x)) { return <React.Fragment key={i}>{x}</React.Fragment>; } return <React.Fragment key={i}>{(x as MenuItemRender)({ disabled: props.disabled })}</React.Fragment> })} </Menu.Content> </Menu.Positioner> </Portal> </Menu.Root> ); content = menuElm; } return ( <>{content}</> )}
export interface EllipsisButtonMenuProps { menuCallback: menuCallback, menuItems: (React.JSX.Element | MenuItemRender)[] disabled?: boolean menuButtonProps?: IconButtonProps}
export const EllipsisButtonMenu = (props: EllipsisButtonMenuProps) => { if (props.menuItems.length > 0) { return ( <Menu.Root positioning={{ placement: "bottom-end" }} onSelect={props.menuCallback}> <Menu.Trigger asChild> <EllipsisButton disabled={props.disabled} {...primaryActionProps} {...props.menuButtonProps} /> </Menu.Trigger> <Portal> <Menu.Positioner> <Menu.Content> {props.menuItems.map((x, i) => { if(React.isValidElement(x)) { return <React.Fragment key={i}>{x}</React.Fragment>; } return <React.Fragment key={i}>{(x as MenuItemRender)({ disabled: props.disabled })}</React.Fragment> })} </Menu.Content> </Menu.Positioner> </Portal> </Menu.Root> ); } return undefined;}