ConversationSearch
ConversationSearch
是使用的 Search 组件,支持用户、群组、消息的搜索功能。它集成了搜索框、高级搜索、搜索结果展示等功能。基础使用
import {UIKitProvider,ConversationList,ConversationSearch,} from '@tencentcloud/chat-uikit-react';import type {ConversationSearchProps,SearchResultItem
,
SearchType
,
} from '@tencentcloud/chat-uikit-react';const CustomConversationSearch = (props: ConversationSearchProps) => {const onSelectResult = (data
:
SearchResultItem
,
type
:
SearchType
) => {console.warn(`Select Search Result: ${JSON.stringify(data)}, type: ${type
}`);};return (<ConversationSearch {...props} onResultItemClick={onSelectResult} />);};const App = () => {return (<UIKitProvider><ConversationListstyle={{ maxWidth: '300px', height: '600px' }}ConversationSearch={CustomConversationSearch}/></UIKitProvider>);};
Props
参数名 | 类型 | 默认值 | 说明 |
visible | boolean | true | 是否可见 |
ComponentType<SearchProps> | - | 自定义搜索组件 | |
variant | VariantType | VariantType.MINI | 搜索模式:mini(迷你)、standard(标准)、embedded(嵌入式) |
React.ComponentType<SearchBarProps> | DefaultSearchBar | 自定义搜索框组件 | |
React.ComponentType<SearchResultsProps> | DefaultSearchResults | 自定义搜索结果组件 | |
React.ComponentType<SearchAdvancedProps> | DefaultSearchAdvanced | 自定义高级搜索组件 | |
SearchResultsPresearch | React.ComponentType | - | 搜索前占位符组件 |
SearchResultsLoading | React.ComponentType | - | 加载中占位符组件 |
SearchResultsEmpty | React.ComponentType | - | 空结果占位符组件 |
SearchResultItem | React.ComponentType<ResultItemProps> | - | 自定义搜索结果项组件 |
debounceTime | number | 300 | 搜索防抖时间(毫秒) |
autoFocus | boolean | false | 是否自动聚焦搜索框 |
className | string | - | 自定义样式类名 |
style | React.CSSProperties | - | 自定义样式 |
onKeywordChange | (keyword: string) => void | - | 搜索关键词变化回调 |
onSearchComplete | (results: Map<SearchType, SearchResult>) => void | - | 搜索完成回调 |
onResultItemClick | (data: SearchResultItem, type: SearchType) => void | - | 搜索结果点击回调 |
onError | (error: Error) => void | - | 搜索错误回调 |