tencent cloud

文档反馈

ConversationSearch

最后更新时间:2024-09-29 16:55:14
    ConversationSearch is mainly used to search the conversation list, consisting of ConversationSearchInput and ConversationSearchResult.

    Basic Usage

    Used in ConversationList
    Used independently
    import { UIKitProvider, ConversationList, ConversationSearch, IConversationSearchProps } from '@tencentcloud/chat-uikit-react';
    import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
    
    const CustomConversationSearch = (props: IConversationSearchProps) => {
    const onSelectResult = (conversation: IConversationModel) => {
    console.warn(`Select Search Result: ${conversation.conversationID}`);
    };
    return (
    <ConversationSearch {...props} onSelectResult={onSelectResult} />
    );
    };
    
    const App = () => {
    return (
    <UIKitProvider>
    <ConversationList
    style={{ maxWidth: '300px', height: '600px' }}
    ConversationSearch={CustomConversationSearch}
    />
    </UIKitProvider>
    );
    };
    import { UIKitProvider, ConversationListProvider, useConversationList, ConversationSearch } from '@tencentcloud/chat-uikit-react';
    const CustomConversationSearch = () => {
    const { conversationList } = useConversationList();
    return (
    <ConversationSearch
    style={{ maxWidth: '300px', maxHeight: '500px' }}
    conversationList={conversationList}
    />
    );
    };
    
    const App = () => {
    return (
    <UIKitProvider>
    <ConversationListProvider>
    <CustomConversationSearch />
    </ConversationListProvider>
    </UIKitProvider>
    );
    };

    Props

    Parameter Name
    Type
    Default Value
    Indication
    conversationList
    (Required)
    -
    Required parameter for the target conversation list to search. When used in <ConversationList>, the value of conversationList obtained from Context is passed as the default target search list.
    Avatar
    ReactElement
    Avatar
    Avatar component in the search results from Definition.
    ResultPreview
    ReactElement
    ConversationPreview
    Single result preview component in the search results list from Definition.
    ConversationSearchInput
    ReactElement
    ConversationSearchInput
    Search input box component from Definition.
    ConversationSearchResult
    ReactElement
    ConversationSearchResult
    Search results component from Definition.
    searchFn
    (searchValue: string, conversationList: IConversationModel[]) => IConversationModel[]
    Specify a function from Definition search algorithm. This function receives the search value and conversation list as parameters and returns the search results.
    onSearchChange
    (searchValue: string) => void
    -
    Specify a function to be called when the search input changes. This function receives the current search value as a parameter.
    onFocus
    (event: React.FocusEvent<HTMLInputElement>) => void
    -
    Specify a function to be called when the search input gains focus.
    onBlur
    (event: React.FocusEvent<HTMLInputElement>) => void
    -
    Specify a function to be called when the search input loses focus.
    onSelectResult
    (conversation: IConversationModel) => void
    -
    Specify a function to be called when a search result is selected. This function receives the selected conversation as a parameter.
    visible
    Boolean
    true
    Specify whether the search component is visible.
    className
    String
    -
    Specify the Custom Class Name for the search component.
    style
    React.CSSProperties
    -
    Custom CSS style.

    Search rules

    Default search rules

    When searchFn is not provided, searchFn will use the default value defaultSearchFn as the search rule.
    defaultSearchFn defaults to searching and matching the conversation title in the conversation list, case insensitive. defaultSearchFn Definition is as follows:
    function defaultSearchFn(searchValue: string, conversationList: IConversationModel[]) {
    if (!searchValue || conversationList?.length === 0) return [];
    return conversationList.filter(item => item.getShowName().toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()));
    }

    Custom Search Rules

    You can implement different search rules by passing searchFn props. Here is an example of searching based on conversationID information in the conversation list:
    function customSearchFn(searchValue: string, conversationList: IConversationModel[]) {
    if (!searchValue || conversationList?.length === 0) return [];
    return conversationList.filter(item => item.conversationID.includes(searchValue));
    }
    
    <ConversationSearch {...props} searchFn={customSearchFn} />

    Event Handling

    ConversationSearch provides a rich set of props to help you customize responses to various search states.
    onSearchChange is called when the search input changes.
    onFocus is called when the search input gains focus.
    onBlur is called when the search input gains focus.
    onSelectResult is called when a search result is selected.

    Custom Component

    ConversationSearchInput

    Parameter Name
    Type
    Default Value
    Indication
    placeholder
    String
    -
    Input box placeholder text.
    clearable
    Boolean
    false
    Whether the input content can be cleared.
    prefix
    ReactNode
    <Icon type={IconTypes.SEARCH} height={16} width={16} />
    Input box prefix content.
    value
    String
    -
    Value of the input box.
    onChange
    (event: React.ChangeEvent<HTMLInputElement>) => void
    -
    Specify a function to be called when the search input changes.
    onFocus
    (event: React.FocusEvent<HTMLInputElement>) => void
    -
    Specify a function to be called when the search input gains focus.
    onBlur
    (event: React.FocusEvent<HTMLInputElement>) => void
    -
    Specify a function to be called when the search input loses focus.
    className
    String
    -
    Custom Class Name.
    Below is a new definition of a placeholder and prefix example:
    const CustomConversationSearchInput = (props: IConversationSearchInputProps) => {
    return <ConversationSearchInput {...props} placeholder="this is a custom placeholder" prefix="?" />;
    };
    const CustomConversationSearch = (props: IConversationSearchProps) => {
    return <ConversationSearch {...props} ConversationSearchInput={CustomConversationSearchInput} />;
    };
    before
    after
    
    
    
    
    
    

    ConversationSearchResult

    Parameter Name
    Type
    Default Value
    Description
    visible
    Boolean
    false
    Specify whether to display the search results component.
    searchResult
    -
    Search results.
    searchValue
    String
    -
    Search input value.
    ResultPreview
    ReactElement
    ConversationPreview
    From the Definition ResultPreview component.
    Avatar
    ReactElement
    Avatar
    From the Definition Avatar component.
    PlaceholderNoResult
    ReactNode
    <PlaceHolder type={PlaceHolderTypes.NO_RESULTS} searchString={searchValue} />
    Placeholder component from Definition for no results.
    onSelectResult
    (conversation: IConversationModel) => void
    -
    Callback function when ResultPreview is clicked.
    className
    String
    -
    Custom Class Name.
    style
    React.CSSProperties
    -
    Custom Definition CSS style.
    Here is an example of a new no search results interface PlaceholderNoResult:
    const CustomConversationSearchResult = (props: IConversationSearchResultProps) => {
    const CustomPlaceholder = (
    <div style={{ display: 'flex', flex: '1', justifyContent: 'center', alignItems: 'center' }}>
    <img src="https://web.sdk.qcloud.com/im/assets/emoji/emoji_76@2x.png" alt="tears" />
    </div>
    );
    return <ConversationSearchResult {...props} PlaceholderNoResult={CustomPlaceholder} />;
    };
    
    const CustomConversationSearch = (props: IConversationSearchProps) => {
    return <ConversationSearch {...props} ConversationSearchResult={CustomConversationSearchResult} />;
    };
    before
    after
    
    
    
    
    
    

    ResultPreview

    ResultPreview parameters are used to display a single search result in ConversationSearchResult.
    When no value is passed, ResultPreview will default to displaying the ConversationPreview component as the single search result component.
    You can go to ConversationPreview to view more Custom Tutorials.

    

    
    
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持