mirror of
https://github.com/jeffvli/feishin.git
synced 2026-07-19 00:46:35 +02:00
fix tab index on command palette play buttons
This commit is contained in:
@@ -16,6 +16,24 @@ import { Text } from '/@/shared/components/text/text';
|
||||
import { ExplicitStatus, LibraryItem, Song } from '/@/shared/types/domain-types';
|
||||
import { Play } from '/@/shared/types/types';
|
||||
|
||||
const createPlayKeyDownHandler = (
|
||||
playType: Play,
|
||||
disabled: boolean,
|
||||
onPlay: (type: Play) => void,
|
||||
) => {
|
||||
return (e: React.KeyboardEvent) => {
|
||||
if (e.key === ' ' || e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!disabled) {
|
||||
onPlay(playType);
|
||||
}
|
||||
} else if (e.key === 'Tab') {
|
||||
e.stopPropagation();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
interface LibraryCommandItemProps {
|
||||
disabled?: boolean;
|
||||
explicitStatus?: ExplicitStatus | null;
|
||||
@@ -119,29 +137,47 @@ export const LibraryCommandItem = ({
|
||||
</div>
|
||||
</div>
|
||||
{showControls && (
|
||||
<ActionIconGroup>
|
||||
<ActionIconGroup className={styles.controls}>
|
||||
<PlayTooltip disabled={disabled} type={Play.NOW}>
|
||||
<ActionIcon
|
||||
icon="mediaPlay"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
variant="default"
|
||||
{...handlePlayNow.handlers}
|
||||
{...handlePlayNow.props}
|
||||
onKeyDown={createPlayKeyDownHandler(
|
||||
Play.NOW,
|
||||
Boolean(disabled ?? handlePlayNow.props.disabled),
|
||||
handlePlay,
|
||||
)}
|
||||
/>
|
||||
</PlayTooltip>
|
||||
<PlayTooltip disabled={disabled} type={Play.NEXT}>
|
||||
<ActionIcon
|
||||
icon="mediaPlayNext"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
variant="default"
|
||||
{...handlePlayNext.handlers}
|
||||
{...handlePlayNext.props}
|
||||
onKeyDown={createPlayKeyDownHandler(
|
||||
Play.NEXT,
|
||||
Boolean(disabled ?? handlePlayNext.props.disabled),
|
||||
handlePlay,
|
||||
)}
|
||||
/>
|
||||
</PlayTooltip>
|
||||
<PlayTooltip disabled={disabled} type={Play.LAST}>
|
||||
<ActionIcon
|
||||
icon="mediaPlayLast"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
variant="default"
|
||||
{...handlePlayLast.handlers}
|
||||
{...handlePlayLast.props}
|
||||
onKeyDown={createPlayKeyDownHandler(
|
||||
Play.LAST,
|
||||
Boolean(disabled ?? handlePlayLast.props.disabled),
|
||||
handlePlay,
|
||||
)}
|
||||
/>
|
||||
</PlayTooltip>
|
||||
</ActionIconGroup>
|
||||
|
||||
Reference in New Issue
Block a user