fix(UserGroup): user and counter tooltips

taskany-inc · Jul 13, 2023 · 5a9eda3 · 5a9eda3
1 parent 0a1a6f5
commit 5a9eda3
Showing 1 changed file with 54 additions and 12 deletions.
diff --git a/src/components/UserGroup.tsx b/src/components/UserGroup.tsx
@@ -1,10 +1,18 @@
-import { FC } from 'react';
-import styled from 'styled-components';
+import { FC, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import dynamic from 'next/dynamic';
 import { UserPic, Text } from '@taskany/bricks';
 import { gapSm, gray4, gray9, gray6, radiusL, radiusXl } from '@taskany/colors';
 
 import { ActivityByIdReturnType } from '../../trpc/inferredTypes';
 
+const Popup = dynamic(() => import('@taskany/bricks/components/Popup'));
+
+const hoverCss = css`
+    z-index: 1;
+    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.08));
+`;
+
 const UserGroupContainer = styled.div`
     display: inline-flex;
 `;
@@ -16,6 +24,10 @@ const UserContainer = styled.div`
     & + & {
         margin-left: calc(${gapSm} * -1);
     }
+
+    &:hover {
+        ${hoverCss};
+    }
 `;
 
 const UserImage = styled(UserPic)`
@@ -33,6 +45,10 @@ const StyledCounter = styled.div`
     background-color: ${gray4};
     position: relative;
     right: 10px;
+
+    &:hover {
+        ${hoverCss};
+    }
 `;
 const StyledSmallCircle = styled.div`
     width: 0.7rem;
@@ -54,23 +70,49 @@ export const UserGroup: FC<{
     limit?: number;
 }> = ({ users, className, size = 24, limit = 3 }) => {
     const showCounter = users.length > limit;
-    const items = [...users];
-    if (showCounter) items.length = 3;
+    const items = users.slice(0, showCounter ? limit : users.length);
+
+    const counterUsersList = useMemo(() => {
+        return users.reduce((acc, { user }, index) => {
+            if (index < limit || !user?.name) return acc;
+
+            acc += acc ? `, ${user.name}` : user.name;
+            return acc;
+        }, '');
+    }, [limit, users]);
 
     return (
         <UserGroupContainer className={className}>
             {items.map(({ user, ghost }, i) => (
-                <UserContainer key={i}>
-                    <UserImage src={user?.image} email={user?.email || ghost?.email} size={size} />
-                </UserContainer>
+                <Popup
+                    key={i}
+                    target={
+                        <UserContainer>
+                            <UserImage src={user?.image} email={user?.email || ghost?.email} size={size} />
+                        </UserContainer>
+                    }
+                    tooltip
+                    placement="top"
+                >
+                    {user?.name}
+                </Popup>
             ))}
             {showCounter && (
                 <>
-                    <StyledCounter>
-                        <Text color={gray9} size="xs">
-                            {users.length - limit}
-                        </Text>
-                    </StyledCounter>
+                    <Popup
+                        target={
+                            <StyledCounter>
+                                <Text color={gray9} size="xs">
+                                    {users.length - limit}
+                                </Text>
+                            </StyledCounter>
+                        }
+                        tooltip
+                        maxWidth={420}
+                        placement="top"
+                    >
+                        {counterUsersList}
+                    </Popup>
                     <StyledSmallCircle>
                         <Text color={gray9} size="xxs" as="span">
                             +