feat: optimize SearchResult (#2)

* deps: add rc-util

* feat: add empty

* chore: update demo

* chore: update jest config

Author: Wxh16144

jest.config.js

@@ -16,5 +16,6 @@ module.exports = {
     // '\\.(css|less)$/': 'identity-obj-proxy',
     '\\.(css|less)$': '<rootDir>/tests/mocks/style-mock.js',
     '^lodash-es$': 'lodash',
+    '^rc-util/es/(.*)$': 'rc-util/lib/$1',
   },
 }

package.json

@@ -31,6 +31,7 @@
     "lodash-es": "^4.17.21",
     "merge2": "^1.4.1",
     "postcss": "^8.4.16",
+    "rc-util": "^5.27.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/desktop-ui/src/search-result/demo/base.tsx

@@ -28,11 +28,7 @@ export default () => {
 
   return (
     <SearchResult onSearch={setKeyword}>
-      {
-        results.length
-          ? results.map(item => <p key={item}>{item}</p>)
-          : <div className="empty">未匹配到搜索结果</div> // empty 是预设的样式
-      }
+      {results.map(item => <p key={item}>{item}</p>)}
     </SearchResult>
   )
 }

packages/desktop-ui/src/search-result/index.tsx

@@ -1,7 +1,10 @@
 import Input from 'antd/es/input'
+import defaultRenderEmpty from 'antd/es/config-provider/defaultRenderEmpty'
+import { ConfigContext } from 'antd/es/config-provider/context'
 import type { InputProps } from 'antd/es/input'
 import React from 'react'
 import { ConditionInput } from '@template-pro/rc-ui'
+import toArray from 'rc-util/es/Children/toArray'
 import classNames from 'classnames'
 import { useBoolean, useClickAway, useControllableValue } from 'ahooks'
 import { defaultPrefixCls } from '../constants'
@@ -33,6 +36,8 @@ const SearchResult = (props: SearchResultProps, ref: React.Ref<SearchResultActio
     { onChange: onSearch }, { defaultValue: '' },
   )
 
+  const { renderEmpty } = React.useContext(ConfigContext)
+
   const searchResultRef = React.useRef<HTMLDivElement>(null)
   const [visibleDropdown, {
     setTrue: openDropdown,
@@ -52,6 +57,8 @@ const SearchResult = (props: SearchResultProps, ref: React.Ref<SearchResultActio
 
   React.useImperativeHandle(ref, () => ({ close: handlerClose }), [])
 
+  const arrayChildren = toArray(children)
+
   return (
     <div
       className={classNames(prefixedClassName, className)}
@@ -73,7 +80,11 @@ const SearchResult = (props: SearchResultProps, ref: React.Ref<SearchResultActio
       {
         showChildren && (
           <div className={classNames(`${prefixedClassName}-result-wrapper`, resultWrapperClassName)}>
-            {children}
+            {
+              arrayChildren.length
+                ? arrayChildren
+                : (renderEmpty || defaultRenderEmpty)('SearchResult')
+            }
           </div>
         )
       }

packages/desktop-ui/src/search-result/style/index.less

@@ -1,5 +1,6 @@
 @import "../../styles/themes/index";
 @import "~antd/es/input/style/index.less";
+@import "~antd/es/empty/style/index.less";
 
 .@{cls-prefix}-search-result {
   position: relative;
@@ -15,13 +16,5 @@
     overflow: overlay;
     background-color: #fff;
     box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
-
-    &>.empty {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 60px;
-      color: @text-color-generally;
-    }
   }
 }