Add emoji confetti bursts and component playground.
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.
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
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,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user