stream-chat-react
Version:
React components to create chat conversations or livestream style chat
24 lines (23 loc) • 2.3 kB
JavaScript
import clsx from 'clsx';
import React from 'react';
import { useChannelSearch } from './hooks/useChannelSearch';
import { SearchBar as DefaultSearchBar } from './SearchBar';
import { SearchInput as DefaultSearchInput } from './SearchInput';
import { SearchResults } from './SearchResults';
const UnMemoizedChannelSearch = (props) => {
const { AppMenu, ClearInputIcon, ExitSearchIcon, MenuIcon, placeholder, popupResults = false, SearchBar = DefaultSearchBar, SearchEmpty, SearchInput = DefaultSearchInput, SearchInputIcon, SearchLoading, SearchResultItem, SearchResultsHeader, SearchResultsList, ...channelSearchParams } = props;
const { activateSearch, clearState, exitSearch, inputIsFocused, inputRef, onSearch, query, results, searchBarRef, searching, selectResult, } = useChannelSearch(channelSearchParams);
return (React.createElement("div", { className: clsx('str-chat__channel-search', popupResults
? 'str-chat__channel-search--popup'
: 'str-chat__channel-search--inline', {
'str-chat__channel-search--with-results': results.length > 0,
}), "data-testid": 'channel-search' },
React.createElement(SearchBar, { activateSearch: activateSearch, AppMenu: AppMenu, ClearInputIcon: ClearInputIcon, clearState: clearState, disabled: channelSearchParams.disabled, exitSearch: exitSearch, ExitSearchIcon: ExitSearchIcon, inputIsFocused: inputIsFocused, inputRef: inputRef, MenuIcon: MenuIcon, onSearch: onSearch, placeholder: placeholder, query: query, searchBarRef: searchBarRef, SearchInput: SearchInput, SearchInputIcon: SearchInputIcon }),
query && (React.createElement(SearchResults, { popupResults: popupResults, results: results, SearchEmpty: SearchEmpty, searching: searching, SearchLoading: SearchLoading, SearchResultItem: SearchResultItem, SearchResultsHeader: SearchResultsHeader, SearchResultsList: SearchResultsList, selectResult: selectResult }))));
};
/**
* The ChannelSearch component makes a query users call and displays the results in a list.
* Clicking on a list item will navigate you into a channel with the selected user. It can be used
* on its own or added to the ChannelList component by setting the `showChannelSearch` prop to true.
*/
export const ChannelSearch = React.memo(UnMemoizedChannelSearch);