display hidden chips in tooltip

pluralsh · Nov 29, 2024 · 90fa8db · 90fa8db
1 parent 04af5d4
commit 90fa8db
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 39 deletions.
diff --git a/src/components/CatalogCard.tsx b/src/components/CatalogCard.tsx
@@ -109,7 +109,7 @@ function CatalogCardRef(
           {(category || tags?.length > 0) && (
             <Flex
               alignItems="start"
-              gap="large"
+              gap="small"
               justifyContent={category ? 'space-between' : 'end'}
               marginTop={theme.spacing.medium}
             >
@@ -118,6 +118,7 @@ function CatalogCardRef(
                   size="small"
                   border="none"
                   fillLevel={3}
+                  truncateWidth={70}
                 >
                   {category}
                 </Chip>
@@ -128,7 +129,7 @@ function CatalogCardRef(
                 fillLevel={3}
                 values={tags ?? []}
                 limit={1}
-                truncateWidth={100}
+                truncateWidth={70}
                 emptyState={null}
               />
             </Flex>

diff --git a/src/components/ChipList.tsx b/src/components/ChipList.tsx
@@ -4,11 +4,9 @@ import {
   type ComponentProps,
   type Dispatch,
   type ReactElement,
-  useState,
+  useCallback,
 } from 'react'
 
-import { HamburgerMenuCollapseIcon } from '../icons'
-
 import Chip, { type ChipProps } from './Chip'
 
 type TransformFn<TValue> = (
@@ -33,7 +31,23 @@ function ChipList<TValue = string>({
   onClick,
   ...props
 }: ChipListProps<TValue>): ReactElement {
-  const [collapsed, setCollapsed] = useState(true)
+  const chip = useCallback(
+    (v: TValue, i: number) => {
+      const clickable = onClickCondition?.(v) ?? false
+
+      return (
+        <Chip
+          key={(v as any).key || i}
+          clickable={clickable}
+          onClick={() => clickable && onClick(v)}
+          {...props}
+        >
+          {transformValue ? transformValue(v) : `${v}`}
+        </Chip>
+      )
+    },
+    [onClick, onClickCondition, props, transformValue]
+  )
 
   return (
     <Flex
@@ -46,41 +60,19 @@ function ChipList<TValue = string>({
         ) : (
           <Span body2>There is nothing to display here.</Span>
         ))}
-      {values.slice(0, collapsed ? limit : undefined).map((v, i) => {
-        const clickable = onClickCondition?.(v) ?? false
-
-        return (
-          <Chip
-            key={(v as any).key || i}
-            clickable={clickable}
-            onClick={() => clickable && onClick(v)}
-            {...props}
-          >
-            {transformValue ? transformValue(v) : `${v}`}
-          </Chip>
-        )
-      })}
+      {values.slice(0, limit).map(chip)}
       {values.length > limit && (
-        <>
-          {collapsed && (
-            <Chip
-              onClick={() => setCollapsed(false)}
-              {...props}
-              clickable
-            >
-              {`+${values.length - limit}`}
-            </Chip>
-          )}
-          {!collapsed && (
-            <Chip
-              onClick={() => setCollapsed(true)}
-              {...props}
-              clickable
+        <Chip
+          {...props}
+          tooltip={
+            <Flex
+              gap="xsmall"
+              wrap="wrap"
             >
-              <HamburgerMenuCollapseIcon />
-            </Chip>
-          )}
-        </>
+              {values.slice(limit, values.length).map(chip)}
+            </Flex>
+          }
+        >{`+${values.length - limit}`}</Chip>
       )}
     </Flex>
   )