stream-chat-react
Version:
React components to create chat conversations or livestream style chat
32 lines (31 loc) • 1.84 kB
JavaScript
import clsx from 'clsx';
import React from 'react';
import { useSearchContext } from '../SearchContext';
import { useTranslationContext } from '../../../context';
import { useStateStore } from '../../../store';
const searchSourceStateSelector = (nextValue) => ({
isActive: nextValue.isActive,
});
const SearchSourceFilterButton = ({ source }) => {
const { t } = useTranslationContext();
const { searchController } = useSearchContext();
const { isActive } = useStateStore(source.state, searchSourceStateSelector);
const label = `search-results-header-filter-source-button-label--${source.type}`;
return (React.createElement("button", { "aria-label": t('aria/Search results header filter button'), className: clsx('str-chat__search-results-header__filter-source-button', {
'str-chat__search-results-header__filter-source-button--active': isActive,
}), key: label, onClick: () => {
if (source.isActive) {
searchController.deactivateSource(source.type);
}
else {
searchController.activateSource(source.type);
if (searchController.searchQuery && !source.items?.length)
source.search(searchController.searchQuery);
}
} }, t(label)));
};
export const SearchResultsHeader = () => {
const { searchController } = useSearchContext();
return (React.createElement("div", { className: 'str-chat__search-results-header', "data-testid": 'search-results-header' },
React.createElement("div", { className: 'str-chat__search-results-header__filter-source-buttons', "data-testid": 'filter-source-buttons' }, searchController.sources.map((source) => (React.createElement(SearchSourceFilterButton, { key: `search-source-filter-button-${source.type}`, source: source }))))));
};