@ermis-network/ermis-chat-react 2.0.0 → 2.0.1

package/src/components/MessageReactions.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { MessageReactionsProps } from '../types';
 
 import { useChatClient } from '../hooks/useChatClient';
+import { createPortal } from 'react-dom';
 
 const defaultReactionEmojiMap: Record<string, string> = {
   like: '👍',
@@ -11,6 +12,33 @@ const defaultReactionEmojiMap: Record<string, string> = {
   fire: '🔥',
 };
 
+const ReactionTooltip = ({ text, rect }: { text: string; rect: DOMRect }) => {
+  if (!text || !rect) return null;
+  return createPortal(
+    <div style={{
+      position: 'fixed',
+      top: rect.top - 6,
+      left: rect.left + rect.width / 2,
+      transform: 'translate(-50%, -100%)',
+      backgroundColor: 'rgba(0, 0, 0, 0.75)',
+      color: '#fff',
+      padding: '4px 8px',
+      borderRadius: '6px',
+      fontSize: '11px',
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+      width: 'max-content',
+      maxWidth: '200px',
+      textAlign: 'center',
+      zIndex: 999999,
+      pointerEvents: 'none'
+    }}>
+      {text}
+    </div>,
+    document.body
+  );
+};
+
 export const MessageReactions: React.FC<MessageReactionsProps> = React.memo(({
   reactionCounts,
   ownReactions,
@@ -21,6 +49,19 @@ export const MessageReactions: React.FC<MessageReactionsProps> = React.memo(({
 }) => {
   const { client } = useChatClient();
   const currentUserId = client?.userID;
+  const [hoveredTooltip, setHoveredTooltip] = React.useState<{text: string, rect: DOMRect} | null>(null);
+
+  React.useEffect(() => {
+    if (hoveredTooltip) {
+      const handleHide = () => setHoveredTooltip(null);
+      window.addEventListener('scroll', handleHide, true);
+      window.addEventListener('resize', handleHide);
+      return () => {
+        window.removeEventListener('scroll', handleHide, true);
+        window.removeEventListener('resize', handleHide);
+      };
+    }
+  }, [hoveredTooltip]);
 
   if (!reactionCounts || Object.keys(reactionCounts).length === 0) return null;
 
@@ -49,15 +90,19 @@ export const MessageReactions: React.FC<MessageReactionsProps> = React.memo(({
             className={`ermis-message-reactions__item ${
               isOwn ? 'ermis-message-reactions__item--active' : ''
             }`}
-            data-tooltip={tooltip}
+            onMouseEnter={(e) => {
+              setHoveredTooltip({ text: tooltip, rect: e.currentTarget.getBoundingClientRect() });
+            }}
+            onMouseLeave={() => setHoveredTooltip(null)}
             onClick={() => onClickReaction?.(type)}
             type="button"
           >
             <span className="ermis-message-reactions__emoji">{emoji}</span>
-            <span className="ermis-message-reactions__count">{count}</span>
+            {count > 1 && <span className="ermis-message-reactions__count">{count}</span>}
           </button>
         );
       })}
+      {hoveredTooltip && <ReactionTooltip text={hoveredTooltip.text} rect={hoveredTooltip.rect} />}
     </div>
   );
 });