mirror of
https://github.com/Redocly/redoc.git
synced 2024-11-10 19:06:34 +03:00
fix: No match scenario in search (#1667)
Co-authored-by: Alex Varchuk <olexandr.varchuk@gmail.com>
This commit is contained in:
parent
8e75f9929b
commit
352a851857
|
@ -53,4 +53,10 @@ describe('Search', () => {
|
|||
getSearchInput().type('int', { force: true });
|
||||
cy.get('[data-markjs]').should('exist');
|
||||
});
|
||||
|
||||
it('should show proper message when no search results are found', () => {
|
||||
getSearchResults().should('not.exist');
|
||||
getSearchInput().type('xzss', {force: true});
|
||||
getSearchResults().should('exist').should('contain', 'No results found');
|
||||
})
|
||||
});
|
||||
|
|
|
@ -16,6 +16,7 @@ import {
|
|||
SearchResultsBox,
|
||||
SearchWrap,
|
||||
} from './styled.elements';
|
||||
import { l } from '../../services/Labels';
|
||||
|
||||
export interface SearchBoxProps {
|
||||
search: SearchStore<string>;
|
||||
|
@ -28,6 +29,7 @@ export interface SearchBoxProps {
|
|||
|
||||
export interface SearchBoxState {
|
||||
results: SearchResult[];
|
||||
noResults: boolean;
|
||||
term: string;
|
||||
activeItemIdx: number;
|
||||
}
|
||||
|
@ -39,6 +41,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
|
|||
super(props);
|
||||
this.state = {
|
||||
results: [],
|
||||
noResults: false,
|
||||
term: '',
|
||||
activeItemIdx: -1,
|
||||
};
|
||||
|
@ -47,6 +50,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
|
|||
clearResults(term: string) {
|
||||
this.setState({
|
||||
results: [],
|
||||
noResults: false,
|
||||
term,
|
||||
});
|
||||
this.props.marker.unmark();
|
||||
|
@ -55,6 +59,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
|
|||
clear = () => {
|
||||
this.setState({
|
||||
results: [],
|
||||
noResults: false,
|
||||
term: '',
|
||||
activeItemIdx: -1,
|
||||
});
|
||||
|
@ -95,6 +100,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
|
|||
setResults(results: SearchResult[], term: string) {
|
||||
this.setState({
|
||||
results,
|
||||
noResults: results.length === 0
|
||||
});
|
||||
this.props.marker.mark(term);
|
||||
}
|
||||
|
@ -166,6 +172,9 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
|
|||
</SearchResultsBox>
|
||||
</PerfectScrollbarWrap>
|
||||
)}
|
||||
{this.state.term && this.state.noResults ? (
|
||||
<SearchResultsBox data-role="search:results">{l('noResultsFound')}</SearchResultsBox>
|
||||
) : null}
|
||||
</SearchWrap>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -10,6 +10,7 @@ export interface LabelsConfig {
|
|||
arrayOf: string;
|
||||
webhook: string;
|
||||
const: string;
|
||||
noResultsFound: string;
|
||||
download: string;
|
||||
downloadSpecification: string;
|
||||
responses: string;
|
||||
|
@ -32,6 +33,7 @@ const labels: LabelsConfig = {
|
|||
arrayOf: 'Array of ',
|
||||
webhook: 'Event',
|
||||
const: 'Value',
|
||||
noResultsFound: 'No results found',
|
||||
download: 'Download',
|
||||
downloadSpecification: 'Download OpenAPI specification',
|
||||
responses: 'Responses',
|
||||
|
|
Loading…
Reference in New Issue
Block a user