Add ReactionsList overflow

Author: arnautov-anton

src/components/Reactions/ReactionsList.tsx

@@ -1,4 +1,4 @@
-import React, { type ComponentPropsWithoutRef, useState } from 'react';
+import React, { type ComponentPropsWithoutRef, useMemo, useState } from 'react';
 import clsx from 'clsx';
 
 import type { ReactionsListModalProps } from './ReactionsListModal';
@@ -53,6 +53,9 @@ export type ReactionsListProps = Partial<
   visualStyle?: 'clustered' | 'segmented' | null;
 };
 
+/**
+ * Renders a button if `buttonIf` is true, otherwise renders a fragment. No props but children are passed to fragment, but all props are passed to button if it's rendered.
+ */
 const FragmentOrButton = ({
   buttonIf: renderButton = false,
   children,
@@ -77,22 +80,40 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
     ...rest
   } = props;
 
-  const { existingReactions, hasReactions, totalReactionCount } =
+  const { existingReactions, hasReactions, totalReactionCount, uniqueReactionTypeCount } =
     useProcessReactions(rest);
   const [selectedReactionType, setSelectedReactionType] = useState<ReactionType | null>(
     null,
   );
   const { t } = useTranslationContext('ReactionsList');
   const { ReactionsListModal = DefaultReactionsListModal } = useComponentContext();
 
-  const handleReactionButtonClick = (reactionType: ReactionType) => {
+  const handleReactionButtonClick = (reactionType: ReactionType | null) => {
     if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {
       return;
     }
 
     setSelectedReactionType(reactionType);
   };
 
+  /**
+   * In segmented style with top position we show max 4 reactions and a
+   * count of the rest, so we need to cap the existing reactions to display
+   * at 4 and calculate the count of the rest.
+   */
+  const cappedExistingReactions = useMemo(() => {
+    if (visualStyle !== 'segmented' || verticalPosition !== 'top') return null;
+
+    const sliced = existingReactions.slice(0, 4);
+    return {
+      reactionCountToDisplay: sliced.reduce(
+        (accumulatedCount, { reactionCount }) => accumulatedCount + reactionCount,
+        0,
+      ),
+      reactionsToDisplay: sliced,
+    };
+  }, [existingReactions, verticalPosition, visualStyle]);
+
   if (!hasReactions) return null;
 
   return (
@@ -116,7 +137,7 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
           }
         >
           <ul className='str-chat__message-reactions__list'>
-            {existingReactions.map(
+            {(cappedExistingReactions?.reactionsToDisplay ?? existingReactions).map(
               ({ EmojiComponent, reactionCount, reactionType }) =>
                 EmojiComponent && (
                   <li
@@ -131,7 +152,7 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
                       <span className='str-chat__message-reactions__item-icon'>
                         <EmojiComponent />
                       </span>
-                      {visualStyle === 'segmented' && (
+                      {visualStyle === 'segmented' && reactionCount > 1 && (
                         <span
                           className='str-chat__message-reactions__item-count'
                           data-testclass='message-reactions-item-count'
@@ -143,6 +164,20 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
                   </li>
                 ),
             )}
+            {uniqueReactionTypeCount > 4 && cappedExistingReactions && (
+              <li className='str-chat__message-reactions__list-item str-chat__message-reactions__list-item--more'>
+                <button
+                  className='str-chat__message-reactions__list-item-button'
+                  onClick={() =>
+                    handleReactionButtonClick(
+                      existingReactions.at(-1)?.reactionType ?? null,
+                    )
+                  }
+                >
+                  +{totalReactionCount - cappedExistingReactions.reactionCountToDisplay}
+                </button>
+              </li>
+            )}
           </ul>
           {visualStyle === 'clustered' && (
             <span className='str-chat__message-reactions__total-count'>

src/components/Reactions/hooks/useProcessReactions.tsx

@@ -63,6 +63,19 @@ export const useProcessReactions = (params: UseProcessReactionsParams) => {
     [reactionOptions],
   );
 
+  /**
+   * Amount of unique reaction types ("haha", "like", etc.) on a message.
+   */
+  const uniqueReactionTypeCount = useMemo(() => {
+    if (!reactionGroups) {
+      return 0;
+    }
+
+    return Object.keys(reactionGroups).filter((reactionType) =>
+      isSupportedReaction(reactionType),
+    ).length;
+  }, [isSupportedReaction, reactionGroups]);
+
   const getLatestReactedUserNames = useCallback(
     (reactionType?: string) =>
       latestReactions?.flatMap((reaction) => {
@@ -125,5 +138,6 @@ export const useProcessReactions = (params: UseProcessReactionsParams) => {
     existingReactions,
     hasReactions,
     totalReactionCount,
-  };
+    uniqueReactionTypeCount,
+  } as const;
 };

src/components/Reactions/styling/ReactionList.scss

@@ -4,9 +4,6 @@
   user-select: none;
   display: flex;
   color: var(--reaction-text);
-  font-feature-settings:
-    'liga' off,
-    'clig' off;
   font-family: var(--typography-font-family-sans);
   font-size: var(--typography-font-size-xxs);
   font-style: normal;
@@ -26,6 +23,11 @@
     }
   }
 
+  .str-chat__message-reactions__list-item-button {
+    // temporary hacky fix
+    min-height: 26px;
+  }
+
   .str-chat__message-reactions__list-button,
   .str-chat__message-reactions__list-item-button {
     @include utils.unset-button;
@@ -41,12 +43,14 @@
     border: 1px solid var(--reaction-border);
     background: var(--reaction-bg);
     box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
+    font-size: inherit;
+    line-height: 1;
 
     .str-chat__message-reactions__item-icon {
       // FIXME: ridiculous hack so that the emoji block is in a square container (1/1 ratio)
       font-size: 13px;
       line-height: 16px;
-      font-family: system-ui, sans-serif;
+      font-family: system-ui;
       font-style: normal;
       letter-spacing: 0;
       display: flex;