litruv
0da4f0d6cb
Support app.relay.emoji_confetti on jumbo emoji clicks with canvas physics, per-emoji particle profiles, and a fixed overlay that does not affect scroll. Also add a Vite playground for live component previews and theme hover preview.
35 lines
858 B
TypeScript
35 lines
858 B
TypeScript
import { KeyboardEvent, MouseEvent } from 'react';
|
|
|
|
export type JumboEmojiClickHandler = (body: string, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
|
|
|
|
export function getJumboEmojiInteractionProps({
|
|
body,
|
|
isJumboEmoji,
|
|
onJumboEmojiClick,
|
|
}: {
|
|
body: string;
|
|
isJumboEmoji: boolean;
|
|
onJumboEmojiClick?: JumboEmojiClickHandler;
|
|
}) {
|
|
if (!isJumboEmoji || !onJumboEmojiClick) {
|
|
return {};
|
|
}
|
|
|
|
const activate = (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {
|
|
if ('key' in event) {
|
|
if (event.key !== 'Enter' && event.key !== ' ') return;
|
|
event.preventDefault();
|
|
}
|
|
event.stopPropagation();
|
|
onJumboEmojiClick(body, event);
|
|
};
|
|
|
|
return {
|
|
role: 'button' as const,
|
|
tabIndex: 0,
|
|
title: 'Throw emoji confetti',
|
|
onClick: activate,
|
|
onKeyDown: activate,
|
|
};
|
|
}
|