fix(search): 修复分组不支持 2 级以上数据的问题 (#2777)

XiaoMi · Mar 29, 2024 · 9572afc · 9572afc
1 parent 814fb5e
commit 9572afc
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 46 deletions.
diff --git a/.changeset/olive-colts-watch.md b/.changeset/olive-colts-watch.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/search": patch
+---
+
+fix: 修复分组不支持 2 级以上数据的问题
diff --git a/.changeset/popular-games-complain.md b/.changeset/popular-games-complain.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+fix(search): 修复分组不支持 2 级以上数据的问题
diff --git a/packages/ui/search/src/SearchDropdown.tsx b/packages/ui/search/src/SearchDropdown.tsx
@@ -29,52 +29,72 @@ export const SearchDropdown: React.FC<SearchDropdownProps> = ({
     return title
   })
 
+  const renderItem = useLatestCallback((data: SearchDataItem[]) => {
+    return data.map((item, index) => {
+      const isGroup = !!item.children && item.children.length > 0
+
+      return (
+        <Fragment key={item.id}>
+          <div
+            className={cx(
+              `${prefixCls}__dropdown-item`,
+              isGroup && `${prefixCls}__dropdown-group`,
+              focusIndex === index && !isGroup && `${prefixCls}__dropdown-item--focus`
+            )}
+            onClick={() => {
+              if (!isGroup) {
+                onSelect(item)
+              }
+            }}
+          >
+            {/* groupTitle 不参与高亮检索 */}
+            {isGroup ? item.title : highlightKeyword(item.title as string)}
+          </div>
+          {isArrayNonEmpty(item.children)
+            ? item.children.map((subItem, idx) => {
+                if (!subItem.children) {
+                  return (
+                    <div
+                      key={subItem.id}
+                      className={cx(
+                        `${prefixCls}__dropdown-subitem`,
+                        subFocusIndex === idx &&
+                          focusIndex === index &&
+                          `${prefixCls}__dropdown-subitem--focus`
+                      )}
+                      onClick={() => {
+                        onSelect(subItem)
+                      }}
+                    >
+                      {highlightKeyword(subItem.title as string)}
+                    </div>
+                  )
+                }
+
+                const subData = [
+                  {
+                    id: subItem.id,
+                    title: subItem.title,
+                    children: subItem.children,
+                  },
+                ]
+
+                return (
+                  <div key={subItem.id} className={`${prefixCls}__dropdown-subgroup`}>
+                    {renderItem(subData)}
+                  </div>
+                )
+              })
+            : null}
+        </Fragment>
+      )
+    })
+  })
+
   return (
     <Popper {...popper}>
       <Loading visible={loading}>
-        <div className={`${prefixCls}__dropdown`}>
-          {data.map((item, index) => {
-            const isGroup = !!item.children && item.children.length > 0
-
-            return (
-              <Fragment key={item.id}>
-                <div
-                  className={cx(
-                    `${prefixCls}__dropdown-item`,
-                    isGroup && `${prefixCls}__dropdown-group`,
-                    focusIndex === index && !isGroup && `${prefixCls}__dropdown-item--focus`
-                  )}
-                  onClick={() => {
-                    if (!isGroup) {
-                      onSelect(item)
-                    }
-                  }}
-                >
-                  {/* groupTitle 不参与高亮检索 */}
-                  {isGroup ? item.title : highlightKeyword(item.title as string)}
-                </div>
-                {isArrayNonEmpty(item.children)
-                  ? item.children.map((subItem, idx) => (
-                      <div
-                        key={subItem.id}
-                        className={cx(
-                          `${prefixCls}__dropdown-subitem`,
-                          subFocusIndex === idx &&
-                            focusIndex === index &&
-                            `${prefixCls}__dropdown-subitem--focus`
-                        )}
-                        onClick={() => {
-                          onSelect(subItem)
-                        }}
-                      >
-                        {highlightKeyword(subItem.title as string)}
-                      </div>
-                    ))
-                  : null}
-              </Fragment>
-            )
-          })}
-        </div>
+        <div className={`${prefixCls}__dropdown`}>{renderItem(data)}</div>
       </Loading>
     </Popper>
   )

diff --git a/packages/ui/search/src/styles/search.scss b/packages/ui/search/src/styles/search.scss
@@ -15,7 +15,6 @@ $prefix: '#{$component-prefix}-search' !default;
     }
 
     &-subitem {
-      margin-bottom: use-spacing(4);
       min-height: use-height-size(8);
       box-sizing: border-box;
       display: flex;
@@ -41,7 +40,10 @@ $prefix: '#{$component-prefix}-search' !default;
       align-items: center;
       padding: use-spacing(2) use-spacing(6);
       color: use-color('gray', 500);
-      margin-bottom: use-spacing(4);
+    }
+
+    &-subgroup {
+      padding-left: use-spacing(6);
     }
 
     &-item {
@@ -50,7 +52,6 @@ $prefix: '#{$component-prefix}-search' !default;
           margin-bottom: 0;
         }
 
-        margin-bottom: use-spacing(4);
         box-sizing: border-box;
         min-height: use-height-size(8);
         display: flex;