3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-09 06:12:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): improve UX of search page (#2761)

Browse source
This commit is contained in:
Alexey Pyltsyn 2020-05-17 17:53:21 +03:00 • committed by GitHub
parent b91f02dee2
commit 778adb2d26
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
packages/docusaurus-theme-search-algolia/src/pages/search/index.js
View file

@ -5,6 +5,8 @@
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
/* eslint-disable jsx-a11y/no-autofocus */
import React, {useEffect, useState, useReducer, useRef} from 'react'; import React, {useEffect, useState, useReducer, useRef} from 'react';
import algoliaSearch from 'algoliasearch/lite'; import algoliaSearch from 'algoliasearch/lite';
@ -20,6 +22,10 @@ import Layout from '@theme/Layout';
import styles from './styles.module.css'; import styles from './styles.module.css';
function pluralize(count, word) {
return count > 1 ? `${word}s` : word;
}
function Search() { function Search() {
const { const {
siteConfig: { siteConfig: {
@ -237,6 +243,7 @@ function Search() {
onChange={handleSearchInputChange} onChange={handleSearchInputChange}
value={searchQuery} value={searchQuery}
autoComplete="off" autoComplete="off"
autoFocus
/> />
</div> </div>
@ -266,7 +273,10 @@ function Search() {
<div <div
className={classnames('col', 'col--8', styles.searchResultsColumn)}> className={classnames('col', 'col--8', styles.searchResultsColumn)}>
{!!searchResultState.totalResults && ( {!!searchResultState.totalResults && (
<strong>{searchResultState.totalResults} documents found</strong> <strong>
{searchResultState.totalResults}{' '}
{pluralize(searchResultState.totalResults, 'document')} found
</strong>
)} )}
</div> </div>

4
packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
View file

@ -37,6 +37,8 @@ const Search = (props) => {
// Override algolia's default selection event, allowing us to do client-side // Override algolia's default selection event, allowing us to do client-side
// navigation and avoiding a full page refresh. // navigation and avoiding a full page refresh.
handleSelected: (_input, _event, suggestion) => { handleSelected: (_input, _event, suggestion) => {
_event.stopPropagation();
// Use an anchor tag to parse the absolute url into a relative url // Use an anchor tag to parse the absolute url into a relative url
// Alternatively, we can use new URL(suggestion.url) but it's not supported in IE. // Alternatively, we can use new URL(suggestion.url) but it's not supported in IE.
const a = document.createElement('a'); const a = document.createElement('a');
@ -93,7 +95,7 @@ const Search = (props) => {
}); });
const handleSearchInputPressEnter = useCallback((e) => { const handleSearchInputPressEnter = useCallback((e) => {
if (e.key === 'Enter') { if (!e.defaultPrevented && e.key === 'Enter') {
navigateToSearchPage(e.target.value); navigateToSearchPage(e.target.value);
} }
}); });