Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | import {BorderBox, Position} from '@primer/components'
import Downshift from 'downshift'
import {navigate} from 'gatsby'
import React from 'react'
import useSearch from '../use-search'
import useSiteMetadata from '../use-site-metadata'
import DarkTextInput from './dark-text-input'
import SearchResults from './search-results'
function stateReducer(state, changes) {
switch (changes.type) {
case Downshift.stateChangeTypes.changeInput:
if (!changes.inputValue) {
// Close the menu if the input is empty.
return {...changes, isOpen: false}
}
return changes
default:
return changes
}
}
function Search() {
const [query, setQuery] = React.useState('')
const results = useSearch(query)
const siteMetadata = useSiteMetadata()
return (
<Downshift
inputValue={query}
onInputValueChange={inputValue => setQuery(inputValue)}
// We don't need Downshift to keep track of a selected item because as
// soon as an item is selected we navigate to a new page.
// Let's avoid any unexpected states related to the selected item
// by setting it to always be `null`.
selectedItem={null}
onSelect={item => {
if (item) {
navigate(item.path)
setQuery('')
}
}}
itemToString={item => (item ? item.title : '')}
stateReducer={stateReducer}
>
{({
getInputProps,
getItemProps,
getMenuProps,
getRootProps,
isOpen,
highlightedIndex,
}) => (
<Position {...getRootProps({position: 'relative'})}>
<DarkTextInput
{...getInputProps({
placeholder: `Search ${siteMetadata.title}`,
width: 240,
})}
/>
{isOpen ? (
<Position
{...getMenuProps({
position: 'absolute',
left: 0,
right: 0,
pt: 2,
})}
>
<BorderBox
minWidth={300}
maxHeight="70vh"
py={1}
boxShadow="medium"
bg="white"
style={{overflow: 'auto'}}
>
<SearchResults
results={results}
getItemProps={getItemProps}
highlightedIndex={highlightedIndex}
/>
</BorderBox>
</Position>
) : null}
</Position>
)}
</Downshift>
)
}
export default Search
|