Send Reactions

ts/components/conversation/ReactionPicker.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Emoji } from '../emoji/Emoji';
+import { useRestoreFocus } from '../hooks';
+
+export type OwnProps = {
+  selected?: string;
+  onClose?: () => unknown;
+  onPick: (emoji: string) => unknown;
+};
+
+export type Props = OwnProps & Pick<React.HTMLProps<HTMLDivElement>, 'style'>;
+
+const emojis = ['❤️', '👍', '👎', '😂', '😮', '😢', '😡'];
+
+export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
+  ({ selected, onClose, onPick, ...rest }, ref) => {
+    const focusRef = React.useRef<HTMLButtonElement>(null);
+
+    // Handle escape key
+    React.useEffect(() => {
+      const handler = (e: KeyboardEvent) => {
+        if (onClose && e.key === 'Escape') {
+          onClose();
+        }
+      };
+
+      document.addEventListener('keydown', handler);
+
+      return () => {
+        document.removeEventListener('keydown', handler);
+      };
+    }, [onClose]);
+
+    // Focus first button and restore focus on unmount
+    useRestoreFocus(focusRef);
+
+    return (
+      <div {...rest} ref={ref} className="module-reaction-picker">
+        {emojis.map((emoji, index) => {
+          const maybeFocusRef = index === 0 ? focusRef : undefined;
+
+          return (
+            <button
+              key={emoji}
+              ref={maybeFocusRef}
+              tabIndex={0}
+              className={classNames(
+                'module-reaction-picker__emoji-btn',
+                emoji === selected
+                  ? 'module-reaction-picker__emoji-btn--selected'
+                  : null
+              )}
+              onClick={e => {
+                e.stopPropagation();
+                onPick(emoji);
+              }}
+            >
+              <div className="module-reaction-picker__emoji-btn__emoji">
+                <Emoji size={48} emoji={emoji} />
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+);