diff --git a/.changeset/olive-colts-watch.md b/.changeset/olive-colts-watch.md new file mode 100644 index 000000000..31ea1bc33 --- /dev/null +++ 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 new file mode 100644 index 000000000..3f14ce57c --- /dev/null +++ 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 index 7ee2dc55f..4baaf2063 100644 --- a/packages/ui/search/src/SearchDropdown.tsx +++ b/packages/ui/search/src/SearchDropdown.tsx @@ -29,52 +29,72 @@ export const SearchDropdown: React.FC = ({ return title }) + const renderItem = useLatestCallback((data: SearchDataItem[]) => { + return data.map((item, index) => { + const isGroup = !!item.children && item.children.length > 0 + + return ( + +
{ + if (!isGroup) { + onSelect(item) + } + }} + > + {/* groupTitle 不参与高亮检索 */} + {isGroup ? item.title : highlightKeyword(item.title as string)} +
+ {isArrayNonEmpty(item.children) + ? item.children.map((subItem, idx) => { + if (!subItem.children) { + return ( +
{ + onSelect(subItem) + }} + > + {highlightKeyword(subItem.title as string)} +
+ ) + } + + const subData = [ + { + id: subItem.id, + title: subItem.title, + children: subItem.children, + }, + ] + + return ( +
+ {renderItem(subData)} +
+ ) + }) + : null} +
+ ) + }) + }) + return ( -
- {data.map((item, index) => { - const isGroup = !!item.children && item.children.length > 0 - - return ( - -
{ - if (!isGroup) { - onSelect(item) - } - }} - > - {/* groupTitle 不参与高亮检索 */} - {isGroup ? item.title : highlightKeyword(item.title as string)} -
- {isArrayNonEmpty(item.children) - ? item.children.map((subItem, idx) => ( -
{ - onSelect(subItem) - }} - > - {highlightKeyword(subItem.title as string)} -
- )) - : null} -
- ) - })} -
+
{renderItem(data)}
) diff --git a/packages/ui/search/src/styles/search.scss b/packages/ui/search/src/styles/search.scss index ad09ba0ff..9ae26f3dc 100644 --- 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;