feat: Chip list component updates (#668)

pluralsh · Nov 29, 2024 · 663d763 · 663d763
1 parent 230efca
commit 663d763
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 50 deletions.
diff --git a/package.json b/package.json
@@ -156,4 +156,4 @@
       "eslint --fix --ext ts,tsx,js,jsx"
     ]
   }
-}
+}
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,8 +129,7 @@ function CatalogCardRef(
                 fillLevel={3}
                 values={tags ?? []}
                 limit={1}
-                truncateWidth={100}
-                wrap="nowrap"
+                truncateWidth={70}
                 emptyState={null}
               />
             </Flex>

diff --git a/src/components/ChipList.tsx b/src/components/ChipList.tsx
@@ -1,15 +1,13 @@
-import { Flex, type FlexBaseProps, Span } from 'honorable'
 import isEmpty from 'lodash-es/isEmpty'
 import {
   type ComponentProps,
   type Dispatch,
   type ReactElement,
-  useState,
+  useCallback,
 } from 'react'
 
-import { HamburgerMenuCollapseIcon } from '../icons'
-
 import Chip, { type ChipProps } from './Chip'
+import Flex from './Flex'
 
 type TransformFn<TValue> = (
   value: TValue
@@ -19,7 +17,6 @@ export type ChipListProps<TValue> = {
   values: TValue[]
   transformValue?: TransformFn<TValue>
   limit: number
-  wrap?: Pick<FlexBaseProps, 'wrap'>
   emptyState?: JSX.Element | null
   onClickCondition?: (value: TValue) => boolean
   onClick?: Dispatch<TValue>
@@ -29,60 +26,51 @@ function ChipList<TValue = string>({
   values = [],
   transformValue,
   limit = 4,
-  wrap = 'wrap',
   emptyState,
   onClickCondition,
   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
       gap="xsmall"
-      wrap={wrap}
+      wrap="wrap"
     >
       {isEmpty(values) &&
-        (emptyState !== undefined ? (
-          emptyState
-        ) : (
-          <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>
-        )
-      })}
+        (emptyState !== undefined
+          ? emptyState
+          : 'There is nothing to display here.')}
+      {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>
   )